fix(pf4): Add disabled styles for select

Author: rvsia

packages/pf4-component-mapper/demo/demo-schemas/wizard-schema.js

@@ -91,6 +91,11 @@ export const wizardSchema = {
                 {
                   value: 'google',
                   label: 'Google'
+                },
+                {
+                  value: 'disabled',
+                  label: 'i am disabled',
+                  isDisabled: true
                 }
               ],
               validate: [

packages/pf4-component-mapper/src/common/select/option.js

@@ -6,7 +6,7 @@ import { Checkbox } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
 
 const Option = (props) => (
-  <div className={`ddorg__pf4-component-mapper__select__menu--option ${props.isFocused ? 'focused' : ''}`}>
+  <div className={`ddorg__pf4-component-mapper__select__menu--option ${props.isFocused ? 'focused' : ''} ${props.isDisabled ? 'disabled' : ''}`}>
     {props.selectProps && props.selectProps && props.selectProps.isCheckbox && (
       <Checkbox
         isChecked={props.isSelected || (props.data && props.data.selected) || false}
@@ -33,12 +33,14 @@ Option.propTypes = {
   }),
   selectProps: PropTypes.shape({
     isCheckbox: PropTypes.bool
-  })
+  }),
+  isDisabled: PropTypes.bool
 };
 
 Option.defaultProps = {
   isFocused: false,
   isSelected: false,
+  isDisabled: false,
   selectOption: () => undefined,
   selectProps: {
     isCheckbox: false

packages/pf4-component-mapper/src/common/select/select-styles.scss

@@ -76,6 +76,7 @@
 .ddorg__pf4-component-mapper__select__menu--option {
   display: flex;
   align-items: center;
+  color: var(--pf-global--Color--dark-100);
 
    &.focused {
       background-color: var(--pf-global--Color--light-200);
@@ -93,6 +94,16 @@
           padding-left: 0;
       }
   }
+
+  &.disabled {
+    cursor: default;
+  }
+
+  &.disabled div {
+    color: var(--pf-global--disabled-color--100);
+    pointer-events: none;
+    cursor: none;
+  }
 }
 
 .ddorg__pf4-component-mapper__select__menu--option div {