Merge pull request #1406 from florkbr/pf5-migration-cleanup

fix(pf4): clean up errors and functional issues noticed on pf demo page

Author: rvsia

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

@@ -77,10 +77,6 @@ class App extends React.Component {
             }}
             componentMapper={{
               ...componentMapper,
-              'dual-list-select': {
-                component: componentMapper['dual-list-select'],
-                renderStatus: ({ selected, options }) => `selected ${selected} from ${options}`,
-              },
               summary: Summary,
             }}
             FormTemplate={(props) => <FormTemplate {...props} showFormControls={this.state.additionalOptions.showFormControls} />}

packages/pf4-component-mapper/src/slider/slider.js

@@ -19,7 +19,7 @@ const Slider = (props) => {
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <PF4Slider onChange={input.onChange} onValueChange={input.onChange} currentValue={input.value} inputValue={input.value} {...rest} />
+      <PF4Slider onChange={input.onChange} value={input.value} inputValue={input.value} isDisabled={isDisabled || isReadOnly} {...rest} />
     </FormGroup>
   );
 };

packages/pf4-component-mapper/src/text-field/text-field.js

@@ -26,9 +26,8 @@ const TextField = (props) => {
         {...rest}
         id={id || input.name}
         isRequired={isRequired}
-        isReadOnly={isReadOnly}
         isDisabled={isDisabled}
-        readOnly={isReadOnly}
+        readOnlyVariant={isReadOnly ? 'default' : undefined}
       />
     </FormGroup>
   );

packages/pf4-component-mapper/src/textarea/textarea.js

@@ -23,7 +23,7 @@ const Textarea = (props) => {
       <Pf4TextArea
         {...showError(meta, validateOnMount)}
         isRequired={isRequired}
-        disabled={isDisabled || isReadOnly}
+        isDisabled={isDisabled || isReadOnly}
         {...input}
         id={id || input.name}
         {...rest}

packages/pf4-component-mapper/src/time-picker/time-picker.js

@@ -19,7 +19,7 @@ const TimePicker = (props) => {
       id={id || input.name}
       FormGroupProps={FormGroupProps}
     >
-      <PF4TimePicker {...input} defaultTime={input.value} {...rest} id={id || input.name} isDisabled={isDisabled || isReadOnly} />
+      <PF4TimePicker {...input} time={input.value ? input.value : undefined} {...rest} id={id || input.name} isDisabled={isDisabled || isReadOnly} />
     </FormGroup>
   );
 };

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

@@ -117,7 +117,7 @@ const WizardInternal = ({
             title={title}
             description={description}
             onClose={formOptions.onCancel}
-            hideClose={hideClose}
+            isCloseHidden={hideClose}
             titleId={titleId}
             descriptionId={descriptionId}
             closeButtonAriaLabel={closeButtonAriaLabel}
@@ -126,7 +126,7 @@ const WizardInternal = ({
         <WizardToggle activeStepIndex={activeStepIndex} currentStep={currentStep} navSchema={navSchema} isOpen={state.openNav} dispatch={dispatch} />
         <div className="pf-v5-c-wizard__outer-wrap">
           <div className="pf-v5-c-wizard__inner-wrap">
-            <WizardNav aria-label={navAriaLabel} isOpen={state.openNav}>
+            <WizardNav aria-label={navAriaLabel} isExpanded={state.openNav}>
               <FormSpy subscription={{ values: true, valid: true, validating: true }}>
                 {({ values, valid, validating }) => (
                   <WizardNavigation