Merge pull request #454 from rvsia/updatePf4

Updates PF4 from V1

Author: Hyperkid123

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 {

packages/pf4-component-mapper/src/files/wizard.js

@@ -43,9 +43,10 @@ const WizardInternal = ({
   navSchema,
   activeStepIndex,
   maxStepIndex,
-  isDynamic
+  isDynamic,
+  container
 }) => {
-  const [state, dispatch] = useReducer(reducer, { loading: true });
+  const [state, dispatch] = useReducer(reducer, { loading: true, container });
 
   useEffect(() => {
     if (inModal) {

packages/pf4-component-mapper/src/files/wizard/reducer.js

@@ -6,7 +6,7 @@ const reducer = (state, { type }) => {
         loading: false
       };
     case 'setContainer':
-      return { ...state, container: document.createElement('div') };
+      return { ...state, container: state.container || document.createElement('div') };
     default:
       return state;
   }

packages/react-renderer-demo/src/app/src/doc-components/pf4-wizard.md

@@ -10,6 +10,7 @@ Don't forget hide form controls by setting \`showFormControls\` to \`false\` as
 | description  | string  | undefined  | Description in header |
 | buttonLabels  | object  | see below  | Labels for buttons |
 | inModal  | bool  | undefined  | show form in modal  |
+| container  | HTMLElement | 'div'  | element containing the modal |
 | isCompactNav  | bool  | undefined  | see Patternfly |
 | setFullWidth  | bool  | undefined  | see Patternfly  |
 | setFullHeight  | bool  | undefined  | see Patternfly  |