@patternfly/react-core 4.274.0 → 4.275.0

package/src/next/components/Wizard/examples/Wizard.md

@@ -6,6 +6,7 @@ propComponents:
   [
     'Wizard',
     'WizardFooter',
+    'WizardFooterWrapper',
     'WizardToggle',
     'WizardStep',
     'WizardBody',
@@ -16,7 +17,6 @@ propComponents:
     'WizardBasicStep',
     'WizardParentStep',
     'WizardSubStep',
-    'WizardNavStepData',
   ]
 beta: true
 ---
@@ -49,6 +49,9 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } from '@patternfly/react-core/next';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 
 PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a more explicit and declarative approach compared to the older implementation, which can be found under the [React](/components/wizard/react) tab.
 
@@ -59,64 +62,89 @@ PatternFly has two implementations of a `Wizard`. This newer `Wizard` takes a mo
 ```ts file="./WizardBasic.tsx"
 ```
 
-### Custom navigation
+### Basic with disabled steps
 
-The `Wizard`'s `nav` property can be used to build your own navigation.
+```ts file="./WizardBasicDisabledSteps.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
-export type CustomWizardNavFunction = (
-  isExpanded: boolean,
-  steps: WizardControlStep[],
-  activeStep: WizardControlStep,
-  goToStepByIndex: (index: number) => void
-) => React.ReactElement<WizardNavProps>;
+### Anchors for nav items
 
-/** Encompasses all step type variants that are internally controlled by the Wizard */
-type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;
+```ts file="./WizardWithNavAnchors.tsx"
 ```
 
-```ts file="./WizardCustomNav.tsx"
+### Incrementally enabled steps
+
+```ts file="./WizardStepVisitRequired.tsx"
 ```
 
-### Kitchen sink
+### Expandable steps
 
-Includes the following:
+```ts file="./WizardExpandableSteps.tsx"
+```
 
-- Header
-- Custom footer
-- Sub-steps
-- Step content with a drawer
-- Custom navigation item
-- Disabled navigation items until visited
-- Action to toggle visibility of a step
-- Action to toggle navigation item error status
+### Progress after submission
 
-Custom operations when navigating between steps can be achieved by utilizing `onNext`, `onBack`, or `onNavByIndex` properties whose callback functions return the 'id' and 'name' of the currently focused step (currentStep), and the previously focused step (previousStep).
+```ts file="./WizardWithSubmitProgress.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
-type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void | Promise<void>;
+### Enabled on form validation
 
-/** Data returned for either parameter of WizardNavStepFunction */
-type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;
+```ts file="./WizardEnabledOnFormValidation.tsx"
 ```
 
-#
+### Validate on button press
 
-The `WizardStep`'s `navItem` property can be used to build your own nav item for that step.
+```ts file="./WizardValidateOnButtonPress.tsx"
+```
 
-```noLive
-/** Callback for the Wizard's 'navItem' property. Returns element which replaces the WizardStep's default navItem. */
-export type CustomWizardNavItemFunction = (
-  step: WizardControlStep,
-  activeStep: WizardControlStep,
-  steps: WizardControlStep[],
-  goToStepByIndex: (index: number) => void
-) => React.ReactElement<WizardNavItemProps>;
+### Progressive steps
+
+```ts file="./WizardProgressiveSteps.tsx"
+```
+
+### Get current step
+
+```ts file="./WizardGetCurrentStep.tsx"
+```
+
+### Within modal
+
+```ts file="./WizardWithinModal.tsx"
+```
+
+### Step drawer content
+
+```ts file="./WizardStepDrawerContent.tsx"
+```
+
+### Custom navigation
+
+```ts file="./WizardWithCustomNav.tsx"
+```
+
+### Header
+
+```ts file="./WizardWithHeader.tsx"
+```
+
+### Custom footer
+
+```ts file="./WizardWithCustomFooter.tsx"
+```
+
+### Custom navigation item
+
+```ts file="./WizardWithCustomNavItem.tsx"
 ```
 
-```ts file="./WizardKitchenSink.tsx"
+### Toggle step visibility
+
+```ts file="./WizardToggleStepVisibility.tsx"
+```
+
+### Step error status
+
+```ts file="./WizardStepErrorStatus.tsx"
 ```
 
 ## Hooks

package/src/next/components/Wizard/examples/WizardBasic.tsx

@@ -2,21 +2,15 @@ import React from 'react';
 import { Wizard, WizardStep } from '@patternfly/react-core/next';
 
 export const WizardBasic: React.FunctionComponent = () => (
-  <Wizard height={400}>
-    <WizardStep name="First step" id="basic-first-step">
-      <p>Step 1 content</p>
+  <Wizard height={400} title="Basic wizard">
+    <WizardStep name="Step 1" id="basic-first-step">
+      Step 1 content
     </WizardStep>
-    <WizardStep name="Second step" id="basic-second-step">
-      <p>Step 2 content</p>
-    </WizardStep>
-    <WizardStep name="Third step" id="basic-third-step">
-      <p>Step 3 content</p>
-    </WizardStep>
-    <WizardStep name="Fourth step" id="basic-fourth-step">
-      <p>Step 4 content</p>
+    <WizardStep name="Step 2" id="basic-second-step">
+      Step 2 content
     </WizardStep>
     <WizardStep name="Review" id="basic-review-step" footer={{ nextButtonText: 'Finish' }}>
-      <p>Review step content</p>
+      Review step content
     </WizardStep>
   </Wizard>
 );

package/src/next/components/Wizard/examples/WizardBasicDisabledSteps.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardBasicDisabledSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Basic disabled wizard">
+    <WizardStep name="Step 1" id="bdisabled-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="bdisabled-second-step" isDisabled>
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Step 3" id="bdisabled-third-step">
+      Step 3 content
+    </WizardStep>
+    <WizardStep name="Step 4" id="bdisabled-fourth-step" isDisabled>
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="bdisabled-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

package/src/next/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+interface SampleFormProps {
+  value: string;
+  isValid: boolean;
+  setValue: (value: string) => void;
+  setIsValid: (isValid: boolean) => void;
+}
+
+const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {
+  const validated = isValid ? 'default' : 'error';
+
+  const handleTextInputChange = (value: string) => {
+    const isValid = /^\d+$/.test(value);
+
+    setValue(value);
+    setIsValid(isValid);
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        label="Age:"
+        type="number"
+        helperText="Write your age in numbers."
+        helperTextInvalid="Age has to be a number"
+        fieldId="age"
+        validated={validated}
+      >
+        <TextInput
+          validated={validated}
+          value={value}
+          id="age"
+          aria-describedby="age-helper"
+          onChange={handleTextInputChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+
+export const WizardEnabledOnFormValidation: React.FunctionComponent = () => {
+  const [ageValue, setAgeValue] = React.useState('Thirty');
+  const [isSubAFormValid, setIsSubAFormValid] = React.useState(false);
+
+  const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);
+
+  return (
+    <Wizard isVisitRequired height={400} title="Enabled on form validation wizard" onSave={onSave}>
+      <WizardStep name="Information" id="form-valid-info">
+        Information content
+      </WizardStep>
+      <WizardStep
+        name="Configuration"
+        id="form-valid-config"
+        steps={[
+          <WizardStep
+            name="Substep A with validation"
+            id="form-valid-sub-a"
+            key="form-valid-sub-a"
+            footer={{ isNextDisabled: !isSubAFormValid }}
+          >
+            <SampleForm
+              value={ageValue}
+              setValue={setAgeValue}
+              isValid={isSubAFormValid}
+              setIsValid={setIsSubAFormValid}
+            />
+          </WizardStep>,
+          <WizardStep name="Substep B" id="form-valid-sub-b" key="form-valid-sub-b">
+            Substep B content
+          </WizardStep>
+        ]}
+      />
+      <WizardStep name="Additional" id="form-valid-additional">
+        Additional step content
+      </WizardStep>
+      <WizardStep name="Review" id="form-valid-review" footer={{ nextButtonText: 'Submit form' }}></WizardStep>
+    </Wizard>
+  );
+};

package/src/next/components/Wizard/examples/WizardExpandableSteps.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardExpandableSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Expandable steps wizard" nav={{ isExpanded: true }}>
+    <WizardStep
+      name="Step 1"
+      id="expand-steps-1"
+      isExpandable
+      steps={[
+        <WizardStep name="Substep A" id="expand-steps-sub-a" key="expand-steps-sub-a">
+          Substep A content
+        </WizardStep>,
+        <WizardStep name="Substep B" id="expand-steps-sub-b" key="expand-steps-sub-b">
+          Substep B content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep name="Step 2" id="expand-steps-2">
+      Step 2 content
+    </WizardStep>
+    <WizardStep
+      name="Step 3"
+      id="expand-steps-3"
+      isExpandable
+      steps={[
+        <WizardStep name="Substep C" id="expand-steps-sub-c" key="expand-steps-sub-c">
+          Substep C content
+        </WizardStep>,
+        <WizardStep name="Substep D" id="expand-steps-sub-d" key="expand-steps-sub-d">
+          Substep D content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep name="Step 4" id="expand-steps-4">
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="expand-steps-review" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

package/src/next/components/Wizard/examples/WizardGetCurrentStep.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import { Wizard, WizardStep, WizardStepType } from '@patternfly/react-core/next';
+
+const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) => (
+  <DescriptionList isHorizontal isCompact>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Index</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.index}</DescriptionListDescription>
+    </DescriptionListGroup>
+
+    <DescriptionListGroup>
+      <DescriptionListTerm>ID</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.id}</DescriptionListDescription>
+    </DescriptionListGroup>
+
+    <DescriptionListGroup>
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.name}</DescriptionListDescription>
+    </DescriptionListGroup>
+
+    <DescriptionListGroup>
+      <DescriptionListTerm>Visited</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.isVisited ? 'true' : 'false'}</DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);
+
+export const GetCurrentStepWizard: React.FunctionComponent = () => {
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+
+  const onStepChange = (event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
+    setCurrentStep(currentStep);
+
+  return (
+    <Wizard height={400} title="Get current step wizard" onStepChange={onStepChange}>
+      <WizardStep name="Step 1" id="get-current-step-1">
+        {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}
+      </WizardStep>
+      <WizardStep name="Step 2" id="get-current-step-2">
+        <CurrentStepDescriptionList currentStep={currentStep} />
+      </WizardStep>
+      <WizardStep name="Review" id="get-current-review-step" footer={{ nextButtonText: 'Finish' }}>
+        <CurrentStepDescriptionList currentStep={currentStep} />
+      </WizardStep>
+    </Wizard>
+  );
+};

package/src/next/components/Wizard/examples/WizardProgressiveSteps.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardProgressiveSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Progressive steps wizard" isProgressive>
+    <WizardStep id="progressive-step-1" name="Get started">
+      Get started content
+    </WizardStep>
+    <WizardStep id="progressive-step-2" name="Update options">
+      Update options content
+    </WizardStep>
+    <WizardStep
+      id="progressive-step-3"
+      name="Quick options"
+      steps={[
+        <WizardStep key="progressive-substep-1" id="progressive-substep-1" name="Substep 1">
+          Substep 1 content
+        </WizardStep>,
+        <WizardStep key="progressive-substep-2" id="progressive-substep-2" name="Substep 2">
+          Substep 2 content
+        </WizardStep>,
+        <WizardStep key="progressive-substep-3" id="progressive-substep-3" name="Substep 3">
+          Substep 3 content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep id="progressive-step-4" name="Review" footer={{ nextButtonText: 'Finish' }}>
+      Review content
+    </WizardStep>
+  </Wizard>
+);

package/src/next/components/Wizard/examples/WizardStepDrawerContent.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerColorVariant,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Flex,
+  Button
+} from '@patternfly/react-core';
+import { useWizardContext, Wizard, WizardStep } from '@patternfly/react-core/next';
+
+const StepContentWithDrawer: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const { activeStep } = useWizardContext();
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
+
+  const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();
+
+  return (
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
+      <DrawerContent
+        panelContent={
+          <DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.light200}>
+            <DrawerHead>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                Drawer content: <strong>{activeStep?.name}</strong>
+              </span>
+              <DrawerActions>
+                <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
+              </DrawerActions>
+            </DrawerHead>
+          </DrawerPanelContent>
+        }
+      >
+        <Flex
+          className="pf-c-wizard__main-body"
+          direction={{ default: 'column' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+          height="100%"
+        >
+          {!isDrawerExpanded && (
+            <Button isInline variant="link" onClick={() => setIsDrawerExpanded(prevExpanded => !prevExpanded)}>
+              Open drawer
+            </Button>
+          )}
+          <div>{activeStep?.name} content</div>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export const WizardStepDrawerContent: React.FunctionComponent = () => (
+  <Wizard height={400} title="With drawer wizard">
+    <WizardStep body={null} name="Step 1" id="with-drawer-step-1">
+      <StepContentWithDrawer />
+    </WizardStep>
+    <WizardStep
+      name="Step 2"
+      id="with-drawer-step-2"
+      steps={[
+        <WizardStep body={null} key="with-drawer-substep-1" name="Substep 1" id="with-drawer-substep-1">
+          <StepContentWithDrawer />
+        </WizardStep>,
+        <WizardStep body={null} key="with-drawer-substep-2" name="Substep 2" id="with-drawer-substep-2">
+          <StepContentWithDrawer />
+        </WizardStep>
+      ]}
+    >
+      <StepContentWithDrawer />
+    </WizardStep>
+    <WizardStep name="Review" id="with-drawer-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

package/src/next/components/Wizard/examples/WizardStepErrorStatus.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Checkbox } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+interface SomeContextProps {
+  errorMessage: string | undefined;
+  setErrorMessage(error: string | undefined): void;
+}
+type SomeContextRenderProps = Pick<SomeContextProps, 'errorMessage'>;
+interface SomeContextProviderProps {
+  children: (context: SomeContextRenderProps) => React.ReactElement;
+}
+
+const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+
+const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
+  const [errorMessage, setErrorMessage] = React.useState<string>();
+
+  return (
+    <SomeContext.Provider value={{ errorMessage, setErrorMessage }}>{children({ errorMessage })}</SomeContext.Provider>
+  );
+};
+
+const StepContentWithAction = () => {
+  const { errorMessage, setErrorMessage } = React.useContext(SomeContext);
+
+  return (
+    <Checkbox
+      label="Give step 1 an error status"
+      isChecked={!!errorMessage}
+      onChange={checked => setErrorMessage(checked ? 'Some error message' : undefined)}
+      id="toggle-error-checkbox"
+      name="Toggle Error Checkbox"
+    />
+  );
+};
+
+export const WizardStepErrorStatus: React.FunctionComponent = () => (
+  <SomeContextProvider>
+    {({ errorMessage }) => (
+      <Wizard height={400} title="Step error status wizard">
+        <WizardStep status={errorMessage ? 'error' : 'default'} id="error-status-step-1" name="Step 1">
+          Step 1 content
+        </WizardStep>
+        <WizardStep name="Error action step" id="error-status-step-2">
+          <StepContentWithAction />
+        </WizardStep>
+        <WizardStep name="Review" id="error-status-review-step" footer={{ nextButtonText: 'Finish' }}>
+          Review step content
+        </WizardStep>
+      </Wizard>
+    )}
+  </SomeContextProvider>
+);

package/src/next/components/Wizard/examples/WizardStepVisitRequired.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardStepVisitRequired: React.FunctionComponent = () => (
+  <Wizard height={400} title="Incrementally enabled steps wizard" isVisitRequired>
+    <WizardStep name="Step 1" id="req-visit-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="req-visit-second-step">
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Step 3" id="req-visit-third-step">
+      Step 3 content
+    </WizardStep>
+    <WizardStep name="Step 4" id="req-visit-fourth-step">
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="req-visit-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

package/src/next/components/Wizard/examples/WizardToggleStepVisibility.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Checkbox } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+interface SomeContextProps {
+  isToggleStepChecked: boolean;
+  setIsToggleStepChecked(isHidden: boolean): void;
+}
+type SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked'>;
+interface SomeContextProviderProps {
+  children: (context: SomeContextRenderProps) => React.ReactElement;
+}
+
+const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+
+const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = ({ children }) => {
+  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
+
+  return (
+    <SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}>
+      {children({ isToggleStepChecked })}
+    </SomeContext.Provider>
+  );
+};
+
+const StepContentWithAction: React.FunctionComponent = () => {
+  const { isToggleStepChecked, setIsToggleStepChecked } = React.useContext(SomeContext);
+
+  return (
+    <Checkbox
+      label="Toggle visibility of the next step"
+      isChecked={isToggleStepChecked}
+      onChange={checked => setIsToggleStepChecked(checked)}
+      id="toggle-hide-step-checkbox"
+      name="Toggle Hide Step Checkbox"
+    />
+  );
+};
+
+export const WizardToggleStepVisibility: React.FunctionComponent = () => (
+  <SomeContextProvider>
+    {({ isToggleStepChecked }) => (
+      <Wizard height={400} title="Toggle step visibility wizard">
+        <WizardStep name="Hidden action step" id="toggle-visible-step-1">
+          <StepContentWithAction />
+        </WizardStep>
+        <WizardStep name="Step 2" id="toggle-visible-step-2" isHidden={isToggleStepChecked}>
+          Step 2 content
+        </WizardStep>
+        <WizardStep name="Review" id="toggle-visible-review-step" footer={{ nextButtonText: 'Finish' }}>
+          Review step content
+        </WizardStep>
+      </Wizard>
+    )}
+  </SomeContextProvider>
+);