@patternfly/react-core 4.223.3 → 4.224.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.223.3",
+  "version": "4.224.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.74.3",
-    "@patternfly/react-styles": "^4.73.3",
-    "@patternfly/react-tokens": "^4.75.3",
+    "@patternfly/react-icons": "^4.75.0",
+    "@patternfly/react-styles": "^4.74.0",
+    "@patternfly/react-tokens": "^4.76.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "4a38be0bce3d08537de52cbd42415611c0a2b218"
+  "gitHead": "778a51b5e590921dd5aa36cefa47b1c3acbcf162"
 }

package/src/components/Wizard/Wizard.tsx

@@ -18,6 +18,10 @@ export interface WizardStep {
   name: React.ReactNode;
   /** The component to render in the main body */
   component?: any;
+  /** @beta The content to render in the drawer panel (use when hasDrawer prop is set on the wizard).   */
+  drawerPanelContent?: any;
+  /** @beta Custom drawer toggle button that opens the drawer. */
+  drawerToggleButton?: React.ReactNode;
   /** Setting to true hides the side nav and footer */
   isFinishedStep?: boolean;
   /** Enables or disables the step in the navigation. Enabled by default. */
@@ -100,6 +104,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   isOpen?: boolean;
   /** Flag indicating nav items with sub steps are expandable */
   isNavExpandable?: boolean;
+  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  hasDrawer?: boolean;
+  /** @beta Flag indicating the wizard drawer is expanded */
+  isDrawerExpanded?: boolean;
 }
 
 interface WizardState {
@@ -135,10 +143,13 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     onClose: () => undefined as any,
     appendTo: null as HTMLElement,
     isOpen: undefined,
-    isNavExpandable: false
+    isNavExpandable: false,
+    hasDrawer: false,
+    isDrawerExpanded: false
   };
   private titleId: string;
   private descriptionId: string;
+  private drawerRef: React.RefObject<any>;
 
   constructor(props: WizardProps) {
     super(props);
@@ -150,6 +161,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       currentStep: this.props.startAtStep && Number.isInteger(this.props.startAtStep) ? this.props.startAtStep : 1,
       isNavOpen: false
     };
+
+    this.drawerRef = React.createRef();
   }
 
   private handleKeyClicks = (event: KeyboardEvent): void => {
@@ -340,6 +353,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       titleId,
       descriptionId,
       isNavExpandable,
+      hasDrawer,
+      isDrawerExpanded,
       ...rest
       /* eslint-enable @typescript-eslint/no-unused-vars */
     } = this.props;
@@ -350,12 +365,14 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     const computedSteps: WizardStep[] = this.initSteps(steps);
     const firstStep = activeStep === flattenedSteps[0];
     const isValid = activeStep && activeStep.enableNext !== undefined ? activeStep.enableNext : true;
+
     const nav = (isWizardNavOpen: boolean) => {
       const wizNavAProps = {
         isOpen: isWizardNavOpen,
         'aria-label': navAriaLabel,
         'aria-labelledby': (title || navAriaLabelledBy) && (navAriaLabelledBy || this.titleId)
       };
+
       return (
         <WizardNav {...wizNavAProps}>
           {computedSteps.map((step, index) => {
@@ -466,6 +483,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
             />
           )}
           <WizardToggle
+            hasDrawer={hasDrawer}
+            isDrawerExpanded={isDrawerExpanded}
             mainAriaLabel={mainAriaLabel}
             isInPage={isOpen === undefined}
             mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}
@@ -509,6 +528,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
         </Modal>
       );
     }
+
     return wizard;
   }
 }

package/src/components/Wizard/WizardBody.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
+import { WizardDrawerWrapper } from './WizardDrawerWrapper';
+import { Drawer, DrawerContent } from '../Drawer';
+import { WizardStep } from './Wizard';
 
 export interface WizardBodyProps {
   /** Anything that can be rendered in the Wizard body */
@@ -13,6 +16,12 @@ export interface WizardBodyProps {
   'aria-labelledby': string;
   /** Component used as the primary content container */
   mainComponent?: React.ElementType;
+  /** The currently active WizardStep */
+  activeStep: WizardStep;
+  hasDrawer?: boolean;
+  /** Flag indicating the wizard drawer is expanded */
+  isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
 }
 
 export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
@@ -20,12 +29,24 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   hasNoBodyPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  mainComponent = 'div'
+  mainComponent = 'div',
+  hasDrawer,
+  isDrawerExpanded,
+  activeStep
 }: WizardBodyProps) => {
   const MainComponent = mainComponent;
   return (
     <MainComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
-      <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+      <WizardDrawerWrapper
+        hasDrawer={hasDrawer && activeStep.drawerPanelContent}
+        wrapper={(children: React.ReactNode) => (
+          <Drawer isInline isExpanded={isDrawerExpanded}>
+            <DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
+          </Drawer>
+        )}
+      >
+        <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+      </WizardDrawerWrapper>
     </MainComponent>
   );
 };

package/src/components/Wizard/WizardDrawerWrapper.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface WizardDrawerWrapperProps {
+  /** The wizard content  */
+  children: React.ReactElement;
+  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  hasDrawer: boolean;
+  /** The drawer component which wraps the wizard content */
+  wrapper: (children: React.ReactElement) => JSX.Element;
+}
+
+export const WizardDrawerWrapper: React.FunctionComponent<WizardDrawerWrapperProps> = ({
+  hasDrawer,
+  wrapper,
+  children
+}) => (hasDrawer ? wrapper(children) : children);
+
+WizardDrawerWrapper.displayName = 'WizardDrawerWrapper';

package/src/components/Wizard/WizardToggle.tsx

@@ -14,7 +14,7 @@ export interface WizardToggleProps {
   /** The currently active WizardStep */
   activeStep: WizardStep;
   /** The WizardFooter */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /** Set to true to remove body padding */
   hasNoBodyPadding: boolean;
   /** If the nav is open */
@@ -29,6 +29,10 @@ export interface WizardToggleProps {
   mainAriaLabel?: string;
   /** If the wizard is in-page */
   isInPage?: boolean;
+  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  hasDrawer?: boolean;
+  /** @beta Flag indicating the wizard drawer is expanded */
+  isDrawerExpanded?: boolean;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -42,7 +46,9 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   'aria-label': ariaLabel = 'Wizard Toggle',
   mainAriaLabelledBy = null,
   mainAriaLabel = null,
-  isInPage = true
+  isInPage = true,
+  hasDrawer,
+  isDrawerExpanded
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -91,7 +97,11 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
             aria-label={mainAriaLabel}
             aria-labelledby={mainAriaLabelledBy}
             hasNoBodyPadding={hasNoBodyPadding}
+            activeStep={activeStep}
+            isDrawerExpanded={isDrawerExpanded}
+            hasDrawer={hasDrawer}
           >
+            {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}
             {activeStep.component}
           </WizardBody>
         </div>

package/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -1,31 +1,32 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
+import { DrawerPanelContent, DrawerColorVariant, DrawerHead } from '../../Drawer';
 
 describe('Wizard', () => {
   test('Wizard should match snapshot', () => {
     const steps: WizardStep[] = [
-      { name: 'A', id: "step-A", component: <p>Step 1</p> },
+      { name: 'A', id: 'step-A', component: <p>Step 1</p> },
       {
         name: 'B',
-        id: "step-B",
+        id: 'step-B',
         steps: [
           {
             name: 'B-1',
-            id: "step-B-1",
+            id: 'step-B-1',
             component: <p>Step 2</p>,
             enableNext: true
           },
           {
             name: 'B-2',
-            id: "step-B-2",
+            id: 'step-B-2',
             component: <p>Step 3</p>,
             enableNext: false
           }
         ]
       },
-      { name: 'C', id: "step-C", component: <p>Step 4</p> },
-      { name: 'D', id: "step-D", component: <p>Step 5</p> }
+      { name: 'C', id: 'step-C', component: <p>Step 4</p> },
+      { name: 'D', id: 'step-D', component: <p>Step 5</p> }
     ];
     const onBack: WizardStepFunctionType = step => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -100,6 +101,22 @@ describe('Wizard', () => {
     expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
   });
 
+  test('wiz with drawer', () => {
+    const wizDrawerPanelContent = (
+      <DrawerPanelContent colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span>This wizard has a drawer with drawer panel content</span>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p>, drawerPanelContent: wizDrawerPanelContent }];
+
+    render(<Wizard title="Wizard with drawer" hasDrawer isDrawerExpanded steps={steps} />);
+    expect(screen.getByRole('heading', { name: 'Wizard with drawer' })).toBeInTheDocument();
+    expect(screen.getByText('This wizard has a drawer with drawer panel content')).toBeInTheDocument();
+  });
+
   test('wiz with title and navAriaLabel combination', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
 
@@ -109,7 +126,7 @@ describe('Wizard', () => {
 
     expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
     expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-4');
+    expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-5');
   });
 
   test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {

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

@@ -2,10 +2,12 @@
 id: Wizard
 section: components
 cssPrefix: pf-c-wizard
-propComponents: ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
+propComponents:
+  ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
 ---
 
-import { Button, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
+import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
+DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
 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 FinishedStep from './FinishedStep';
@@ -859,3 +861,156 @@ class WizardInModal extends React.Component {
   }
 }
 ```
+
+### Wizard with drawer
+
+```js isBeta
+import React from 'react';
+import {
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelContent,
+  Text,
+  TextContent,
+  Wizard
+} from '@patternfly/react-core';
+
+class WizardWithDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      isDrawerExpanded: false,
+      sectionGray: false,
+      panelGray: true,
+      contentGray: false
+    };
+
+    this.drawerRef = React.createRef();
+
+    this.onExpand = () => {
+      this.drawerRef.current && this.drawerRef.current.focus();
+    };
+
+    this.onOpenClick = () => {
+      this.setState({
+        isDrawerExpanded: true
+      });
+    };
+
+    this.onCloseClick = () => {
+      this.setState({
+        isDrawerExpanded: false
+      });
+    };
+  }
+
+  render() {
+    const { isDrawerExpanded } = this.state;
+
+    const panel1Content = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={isDrawerExpanded ? 0 : -1} ref={this.drawerRef}>
+            drawer-panel-1 content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const panel2Content = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            drawer-panel-2 content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const panel3Content = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            drawer-panel-3 content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const drawerToggleButton = (
+      <Button isInline variant="link" onClick={this.onOpenClick}>
+        Open Drawer
+      </Button>
+    );
+
+    const steps = [
+      {
+        name: 'Information',
+        component: <p>Information step content</p>,
+        drawerPanelContent: panel1Content,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        name: 'Configuration',
+        steps: [
+          {
+            name: 'Substep A',
+            component: <p>Substep A content</p>,
+            drawerPanelContent: panel2Content,
+            drawerToggleButton: drawerToggleButton
+          },
+          {
+            name: 'Substep B',
+            component: <p>Substep B content</p>,
+            drawerPanelContent: panel2Content,
+            drawerToggleButton: drawerToggleButton
+          },
+          {
+            name: 'Substep C',
+            component: <p>Substep C content</p>,
+            drawerPanelContent: panel2Content,
+            drawerToggleButton: drawerToggleButton
+          }
+        ]
+      },
+      {
+        name: 'Additional',
+        component: <p>Additional step content</p>,
+        drawerPanelContent: panel3Content,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        name: 'Review',
+        component: <p>Review step content</p>,
+        nextButtonText: 'Finish'
+      }
+    ];
+
+    const title = 'Wizard with drawer';
+
+    return (
+      <React.Fragment>
+        <Wizard
+          height={400}
+          isDrawerExpanded={isDrawerExpanded}
+          hasDrawer
+          navAriaLabel={`${title} steps`}
+          steps={steps}
+        />
+      </React.Fragment>
+    );
+  }
+}
+```