@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.50

package/src/components/Wizard/WizardToggle.tsx

@@ -23,9 +23,13 @@ export interface WizardToggleProps {
   onNavToggle: (isOpen: boolean) => void;
   /** The button's aria-label */
   'aria-label'?: string;
-  /** Sets aria-labelledby on the main element */
+  /** Adds an accessible name to the wizard body by passing the the id of one or more elements.
+   * The aria-labelledby will only be applied when the body content overflows and renders a scrollbar.
+   */
   mainAriaLabelledBy?: string;
-  /** The main's aria-label */
+  /** Adds an accessible name to the wizard body when the body content overflows and renders
+   * a scrollbar.
+   */
   mainAriaLabel?: string;
   /** If the wizard is in-page */
   isInPage?: boolean;
@@ -33,6 +37,8 @@ export interface WizardToggleProps {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -48,7 +54,8 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   mainAriaLabel = null,
   isInPage = true,
   hasDrawer,
-  isDrawerExpanded
+  isDrawerExpanded,
+  onExpandDrawer
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -99,6 +106,7 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
             hasNoBodyPadding={hasNoBodyPadding}
             activeStep={activeStep}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             hasDrawer={hasDrawer}
           >
             {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardBody.test.tsx.snap

@@ -3,8 +3,6 @@
 exports[`WizardBody should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    aria-label="null"
-    aria-labelledby="string"
     class="pf-c-wizard__main"
   >
     <div

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = `
   >
     <ol
       class="pf-c-wizard__nav-list"
+      role="list"
     >
       any
     </ol>

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardToggle.test.tsx.snap

@@ -44,8 +44,6 @@ exports[`WizardToggle should match snapshot (auto-generated) 1`] = `
       class="pf-c-wizard__inner-wrap"
     >
       <div
-        aria-label="null"
-        aria-labelledby="null"
         class="pf-c-wizard__main"
       >
         <div

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

@@ -130,37 +130,12 @@ describe('Wizard', () => {
     expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-5');
   });
 
-  test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {
-    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
-    render(
-      <Wizard
-        title="Wizard"
-        navAriaLabel="nav aria-label"
-        mainAriaLabel="main aria-label"
-        description="This wizard has a title"
-        steps={steps}
-      />
-    );
-
-    expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
-    expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
-    expect(screen.getByLabelText('main aria-label')).toBeInTheDocument();
-  });
-
   test('wiz with navAriaLabel and mainAriaLabel but without title', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
 
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        mainAriaLabel="main aria-label"
-        description="This wizard has a title"
-        steps={steps}
-      />
-    );
+    render(<Wizard navAriaLabel="nav aria-label" description="This wizard has a title" steps={steps} />);
 
     expect(screen.getByLabelText('nav aria-label')).toBeInTheDocument();
-    expect(screen.getByLabelText('main aria-label')).toBeInTheDocument();
   });
 
   test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
@@ -170,7 +145,6 @@ describe('Wizard', () => {
       <Wizard
         navAriaLabelledBy="nav-aria-labelledby"
         navAriaLabel="nav aria-label"
-        mainAriaLabel="main aria-label"
         description="This wizard has a title"
         steps={steps}
       />
@@ -182,11 +156,13 @@ describe('Wizard', () => {
     expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
   });
 
-  test('wiz with navAriaLabel and navAriaLabelledby and without title', () => {
+  test('wiz with title, navAriaLabelledBy, and navAriaLabel', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
     render(
       <Wizard
+        title="Wiz title"
         navAriaLabel="nav aria-label"
+        navAriaLabelledBy="nav-aria-labelledby"
         mainAriaLabel="main aria-label"
         mainAriaLabelledBy="main-aria-labelledby"
         description="This wizard has a title"
@@ -194,19 +170,17 @@ describe('Wizard', () => {
       />
     );
 
-    const main = screen.getByLabelText('main aria-label');
-
-    expect(main).toBeInTheDocument();
-    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+    const nav = screen.getByLabelText('nav aria-label');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
   });
 
-  test('wiz with title, navAriaLabelledBy, navAriaLabel, mainAriaLabel, and mainAriaLabelledby', () => {
+  test('Does not render with mainAriaLabel or mainAriaLabelledby by default', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
     render(
       <Wizard
+        data-testid="wizard-test-id"
         title="Wiz title"
-        navAriaLabel="nav aria-label"
-        navAriaLabelledBy="nav-aria-labelledby"
         mainAriaLabel="main aria-label"
         mainAriaLabelledBy="main-aria-labelledby"
         description="This wizard has a title"
@@ -214,13 +188,9 @@ describe('Wizard', () => {
       />
     );
 
-    const nav = screen.getByLabelText('nav aria-label');
-    expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute('aria-labelledby', 'nav-aria-labelledby');
-
-    const main = screen.getByLabelText('main aria-label');
-    expect(main).toBeInTheDocument();
-    expect(main).toHaveAttribute('aria-labelledby', 'main-aria-labelledby');
+    const main = screen.getByTestId('wizard-test-id');
+    expect(main).not.toHaveAttribute('aria-labelledby');
+    expect(main).not.toHaveAttribute('aria-label');
   });
 
   test('wiz with onCurrentStepChanged setter', async () => {
@@ -228,17 +198,11 @@ describe('Wizard', () => {
     const stepB = { name: 'B', component: <p>Step 2</p> };
     const stepC = { name: 'C', component: <p>Step 3</p> };
 
-    const steps: WizardStep[] = [ stepA, stepB, stepC ];
+    const steps: WizardStep[] = [stepA, stepB, stepC];
     const setter = jest.fn();
     const user = userEvent.setup();
 
-    render(
-        <Wizard
-            title="Wiz title"
-            onCurrentStepChanged={ setter }
-            steps={steps}
-        />
-    );
+    render(<Wizard title="Wiz title" onCurrentStepChanged={setter} steps={steps} />);
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepA));
     await user.click(screen.getByText(/next/i));
     expect(setter).toHaveBeenLastCalledWith(expect.objectContaining(stepB));
@@ -253,98 +217,72 @@ describe('Wizard', () => {
   });
 });
 
-  test('wiz with disabled steps', () => {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p>},
-      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-      { name: 'C', component: <p>Step 3</p>},
-      { name: 'E', component: <p>Step 4</p>, isDisabled: true },
-      { name: 'G', component: <p>Step 5</p> },
+test('wiz with disabled steps', () => {
+  const steps: WizardStep[] = [
+    { name: 'A', component: <p>Step 1</p> },
+    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+    { name: 'C', component: <p>Step 3</p> },
+    { name: 'E', component: <p>Step 4</p>, isDisabled: true },
+    { name: 'G', component: <p>Step 5</p> }
+  ];
 
-    ];
-    
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
 
-    expect(screen.getByRole('button',{ name: "B" })).toBeDisabled();
-    expect(screen.getByRole('button',{ name: "E" })).toBeDisabled();
-  });
+  expect(screen.getByRole('button', { name: 'B' })).toBeDisabled();
+  expect(screen.getByRole('button', { name: 'E' })).toBeDisabled();
+});
 
-  test('wiz skip the step disabled when press the next/back button', async () => {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p>},
-      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-      { name: 'C', component: <p>Step 3</p>},
+test('wiz skip the step disabled when press the next/back button', async () => {
+  const steps: WizardStep[] = [
+    { name: 'A', component: <p>Step 1</p> },
+    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+    { name: 'C', component: <p>Step 3</p> }
+  ];
+  const user = userEvent.setup();
 
-    ];
-    const user = userEvent.setup();
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
 
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(screen.getByRole('button', { name: 'C' })).toHaveClass('pf-m-current');
 
-    await user.click(screen.getByRole('button', { name: 'Next' }));
-    expect(screen.getByRole('button',{ name: "C" })).toHaveClass('pf-m-current')
+  await user.click(screen.getByRole('button', { name: 'Back' }));
+  expect(screen.getByRole('button', { name: 'A' })).toHaveClass('pf-m-current');
+});
 
-    await user.click(screen.getByRole('button', { name: 'Back' }));
-    expect(screen.getByRole('button',{ name: "A" })).toHaveClass('pf-m-current')
-  });
-  
-  test('wiz skip the step when click on the nav item disabled', async () => {
-    const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p>},
-      { name: 'B', component: <p>Step 2</p>, isDisabled: true },
-      { name: 'C', component: <p>Step 3</p>}
-    ];
-    const user = userEvent.setup();
-    
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+test('wiz skip the step when click on the nav item disabled', async () => {
+  const steps: WizardStep[] = [
+    { name: 'A', component: <p>Step 1</p> },
+    { name: 'B', component: <p>Step 2</p>, isDisabled: true },
+    { name: 'C', component: <p>Step 3</p> }
+  ];
+  const user = userEvent.setup();
 
-    const navItemButton = screen.getByRole('button',{ name: "B" })
-    const navItemButtonSelected = screen.getByRole('button',{ name: "A" })
-    
-    await user.click(navItemButton);
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
 
-    expect(navItemButton).not.toHaveClass('pf-m-current')
-    expect(navItemButtonSelected).toHaveClass('pf-m-current')
-  });
+  const navItemButton = screen.getByRole('button', { name: 'B' });
+  const navItemButtonSelected = screen.getByRole('button', { name: 'A' });
 
-  test('wiz with disable sub step', () => {
-    const steps: WizardStep[] =   [
-      {
-        name: 'A',
-        steps: [
-          { name: 'A-1', component: <p>Substep A content</p> },
-          { name: 'A-2', component: <p>Substep B content</p>,  isDisabled: true }
-        ]
-      },
-    ];
-    
-    render(
-      <Wizard
-        navAriaLabel="nav aria-label"
-        description="This wizard step is disabled"
-        steps={steps}
-      />
-    );
+  await user.click(navItemButton);
 
-    expect(screen.getByRole('button',{ name: "A-2" })).toBeDisabled();
-  });
+  expect(navItemButton).not.toHaveClass('pf-m-current');
+  expect(navItemButtonSelected).toHaveClass('pf-m-current');
+});
+
+test('wiz with disable sub step', () => {
+  const steps: WizardStep[] = [
+    {
+      name: 'A',
+      steps: [
+        { name: 'A-1', component: <p>Substep A content</p> },
+        { name: 'A-2', component: <p>Substep B content</p>, isDisabled: true }
+      ]
+    }
+  ];
+
+  render(<Wizard navAriaLabel="nav aria-label" description="This wizard step is disabled" steps={steps} />);
+
+  expect(screen.getByRole('button', { name: 'A-2' })).toBeDisabled();
+});
 
 test('startAtStep can be used to externally control the current step of the wizard', async () => {
   const WizardTest = () => {
@@ -373,7 +311,7 @@ test('startAtStep can be used to externally control the current step of the wiza
 
   expect(screen.queryByText('Step 2')).not.toBeInTheDocument();
 
-  await user.click(screen.getByRole('button', { name: 'Increment step'}))
+  await user.click(screen.getByRole('button', { name: 'Increment step' }));
 
   expect(screen.getByText('Step 2')).toBeVisible();
 });

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

@@ -100,6 +100,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         >
           <ol
             class="pf-c-wizard__nav-list"
+            role="list"
           >
             <li
               class="pf-c-wizard__nav-item"
@@ -154,6 +155,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               </button>
               <ol
                 class="pf-c-wizard__nav-list"
+                role="list"
               >
                 <li
                   class="pf-c-wizard__nav-item"
@@ -212,7 +214,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
           </ol>
         </nav>
         <div
-          aria-labelledby="pf-wizard-title-1"
           class="pf-c-wizard__main"
         >
           <div
@@ -368,6 +369,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         >
           <ol
             class="pf-c-wizard__nav-list"
+            role="list"
           >
             <li
               class="pf-c-wizard__nav-item"
@@ -398,6 +400,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               </button>
               <ol
                 class="pf-c-wizard__nav-list"
+                role="list"
               >
                 <li
                   class="pf-c-wizard__nav-item"
@@ -460,7 +463,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
           </ol>
         </nav>
         <div
-          aria-labelledby="pf-wizard-title-0"
           class="pf-c-wizard__main"
         >
           <div
@@ -573,6 +575,7 @@ exports[`Wizard bare wiz 1`] = `
         >
           <ol
             class="pf-c-wizard__nav-list"
+            role="list"
           >
             <li
               class="pf-c-wizard__nav-item"

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

@@ -8,7 +8,7 @@ ouia: true
 ---
 
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
-DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
+DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } 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 CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';

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

@@ -3,7 +3,32 @@ import { Wizard } from '@patternfly/react-core';
 
 export const WizardBasic: React.FunctionComponent = () => {
   const steps = [
-    { name: 'First step', component: <p>Step 1 content</p> },
+    {
+      name: 'First step',
+      component: (
+        <>
+          <p>
+            The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
+            "region", and an aria-label or aria-labelledby to be applied.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
+            lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim
+            ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis
+            eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id
+            nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.
+          </p>
+          <p>
+            Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices
+            orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante.
+            Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam
+            lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut
+            sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed
+            luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
+          </p>
+        </>
+      )
+    },
     { name: 'Second step', component: <p>Step 2 content</p> },
     { name: 'Third step', component: <p>Step 3 content</p> },
     { name: 'Fourth step', component: <p>Step 4 content</p> },

package/src/components/Wizard/examples/WizardFinished.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Title,
+  EmptyStateActions,
+  EmptyStateIcon,
   Progress,
   Button,
   Wizard
@@ -20,7 +21,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   const [percent, setPercent] = React.useState(0);
 
   const tick = () => {
-    setPercent(prevPercent => {
+    setPercent((prevPercent) => {
       if (prevPercent < 100) {
         return prevPercent + 20;
       } else {
@@ -41,11 +42,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percent === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>
@@ -53,11 +55,13 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
           Description can be used to further elaborate on the validation step, or give the user a better idea of how
           long the process will take.
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button isDisabled={percent !== 100} onClick={props.onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percent !== 100} onClick={props.onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import {
   EmptyState,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Title,
+  EmptyStateActions,
   Form,
   FormGroup,
   TextInput,
@@ -13,7 +13,8 @@ import {
   Wizard,
   WizardFooter,
   WizardContextConsumer,
-  Alert
+  Alert,
+  EmptyStateIcon
 } from '@patternfly/react-core';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
@@ -26,7 +27,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   const [percent, setPercent] = React.useState(0);
 
   const tick = () => {
-    setPercent(prevPercent => {
+    setPercent((prevPercent) => {
       if (prevPercent < 100) {
         return prevPercent + 20;
       } else {
@@ -47,11 +48,12 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percent === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
           <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
         </EmptyStateBody>
@@ -59,11 +61,13 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
           Description can be used to further elaborate on the validation step, or give the user a better idea of how
           long the process will take.
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button isDisabled={percent !== 100} onClick={props.onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percent !== 100} onClick={props.onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );
@@ -126,7 +130,7 @@ export const WizardValidateButtonPress: React.FunctionComponent = () => {
     setFormValue(value);
   };
 
-  const validateLastStep: (onNext: () => void) => void = onNext => {
+  const validateLastStep: (onNext: () => void) => void = (onNext) => {
     if (stepsValid !== 1 && !isFormValid) {
       setErrorText(true);
     } else {

package/src/components/Wizard/examples/WizardWithDrawer.tsx

@@ -14,6 +14,10 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
 
   const drawerRef = React.useRef<HTMLSpanElement>(null);
 
+  const onExpandDrawer = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
   const onOpenClick = () => {
     setIsDrawerExpanded(true);
   };
@@ -117,6 +121,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
       <Wizard
         height={400}
         isDrawerExpanded={isDrawerExpanded}
+        onExpandDrawer={onExpandDrawer}
         hasDrawer
         navAriaLabel={`${title} steps`}
         steps={steps}

package/src/components/index.ts

@@ -4,7 +4,6 @@ export * from './Accordion';
 export * from './ActionList';
 export * from './Alert';
 export * from './AlertGroup';
-export * from './ApplicationLauncher';
 export * from './Avatar';
 export * from './BackToTop';
 export * from './Backdrop';
@@ -21,7 +20,6 @@ export * from './Chip';
 export * from './ChipGroup';
 export * from './ClipboardCopy';
 export * from './CodeBlock';
-export * from './ContextSelector';
 export * from './DataList';
 export * from './DatePicker';
 export * from './DescriptionList';
@@ -51,7 +49,6 @@ export * from './MultipleFileUpload';
 export * from './Nav';
 export * from './NotificationBadge';
 export * from './NotificationDrawer';
-export * from './OptionsMenu';
 export * from './OverflowMenu';
 export * from './Page';
 export * from './Pagination';

package/src/demos/AlertGroup.md

@@ -7,7 +7,12 @@ import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import DashboardWrapper from './examples/DashboardWrapper';
 import DashboardHeader from './examples/DashboardHeader';
-
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle,
+DropdownPosition
+} from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -16,4 +21,5 @@ This demonstrates how you can assemble a full page view including the use of ale
 ### Alert group toast with notification drawer
 
 ```js file='./examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx' isFullscreen
-```
+
+```