Added disabled styles for pf3 common select.

Author: Hyperkid123

packages/pf3-component-mapper/demo/index.js

@@ -15,6 +15,7 @@ const selectSchema = {
     component: 'select-field',
     name: 'select-single',
     label: 'Select single',
+    isDisabled: true,
     options: [{
       label: 'foo',
       value: 123
@@ -28,6 +29,7 @@ const selectSchema = {
     label: 'Select search',
     isRequired: true,
     validateOnMount: true,
+    isDisabled: true,
     isClearable: true,
     multi: true,
     isSearchable: true,

packages/pf3-component-mapper/src/form-fields/select/index.js

@@ -287,6 +287,8 @@ export class P3Select extends Component {
         <div className={ `${props.classNamePrefix}-button` }>
           <DropdownButton
             onToggle={ () => this.handleToggleOpen() }
+            disabled={ props.isDisabled }
+            noCaret={ props.isDisabled }
             open={ isOpen }
             id={ props.id || props.input.name }
             title={ <SelectTitle
@@ -336,7 +338,7 @@ export class P3Select extends Component {
         components={{
           ClearIndicator,
           Option,
-          DropdownIndicator,
+          DropdownIndicator: props.isDisabled ? null : DropdownIndicator,
         }}
       />
     );

packages/pf3-component-mapper/src/form-fields/select/react-select.scss

@@ -199,6 +199,23 @@ div.field-group {
       }
     }
   }
+  &.ddorg__pf3-component-mapper__select--is-disabled {
+    cursor: not-allowed;
+    pointer-events: unset;
+    border-color: #d1d1d1;
+    * {
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+    .ddorg__pf3-component-mapper__select__control {
+      background-color: #fafafa;
+      background-image: none ;
+      border-color: #d1d1d1;
+      color: #8b8d8f;
+      opacity: 1;
+      box-shadow: none;
+    }
+  }
 }
 .ddorg__pf3-component-mapper__select-dropdown {
   &.is-empty {