@patternfly/react-core 4.208.12 → 4.210.0

package/src/components/Drawer/examples/DrawerPanelLeft.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerPanelLeft: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} position="left" onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerPanelRight.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerPanelRight: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} position="right" onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerResizableOnBottom.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button,
+  DrawerContent,
+  DrawerContentBody
+} from '@patternfly/react-core';
+
+export const DrawerResizableOnBottom: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+  const panelContent = (
+    <DrawerPanelContent isResizable defaultSize={'200px'} minSize={'100px'}>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <div style={{ height: '400px' }}>
+        <Drawer isExpanded={isExpanded} onExpand={onExpand} position="bottom">
+          <DrawerContent panelContent={panelContent}>
+            <DrawerContentBody>{drawerContent}</DrawerContentBody>
+          </DrawerContent>
+        </Drawer>
+      </div>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerResizableOnInline.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button,
+  DrawerContent,
+  DrawerContentBody
+} from '@patternfly/react-core';
+
+export const DrawerResizableOnInline: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+  const panelContent = (
+    <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'150px'}>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} onExpand={onExpand} isInline>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerResizableOnLeft.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerResizableOnLeft: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent isResizable defaultSize={'500px'} minSize={'200px'}>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="left">
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerResizableOnRight.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerResizableOnRight: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const onResize = (newWidth: number, id: string) => {
+    // eslint-disable-next-line no-console
+    console.log(`${id} has new width of: ${newWidth}`);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent isResizable onResize={onResize} id="right-resize-panel" defaultSize={'500px'} minSize={'150px'}>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} onExpand={onExpand} position="right">
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerStackedContentBodyElements.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelBody,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerStackedContentBodyElements: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <h3 className="pf-c-title pf-m-2xl" tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer title{' '}
+        </h3>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+        drawer-panel
+      </DrawerHead>
+      <DrawerPanelBody hasNoPadding>drawer-panel with no padding</DrawerPanelBody>
+      <DrawerPanelBody>drawer-panel</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isExpanded={isExpanded} onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>content-body</DrawerContentBody>
+          <DrawerContentBody hasPadding>content-body with padding</DrawerContentBody>
+          <DrawerContentBody>content-body</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerStatic: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLDivElement>();
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button className="pf-u-hidden-on-md" aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer
+      </Button>
+      <Drawer isStatic isExpanded={isExpanded} onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Select/SelectMenu.tsx

@@ -268,7 +268,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
   }
 }
 
-export const SelectMenu = React.forwardRef((props, ref) => (
+export const SelectMenu = React.forwardRef<unknown, React.PropsWithChildren<unknown>>((props, ref) => (
   <SelectMenuWithRef innerRef={ref} {...props}>
     {props.children}
   </SelectMenuWithRef>

package/src/components/Tabs/Tabs.tsx

@@ -41,8 +41,10 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   isBox?: boolean;
   /** Enables vertical tab styling */
   isVertical?: boolean;
-  /** Enables no border bottom tab styling */
+  /** Enables border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false. */
   hasBorderBottom?: boolean;
+  /** Enables border bottom styling for secondary tabs */
+  hasSecondaryBorderBottom?: boolean;
   /** Aria-label for the left scroll button */
   leftScrollAriaLabel?: string;
   /** Aria-label for the right scroll button */
@@ -292,6 +294,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       isVertical,
       isBox,
       hasBorderBottom,
+      hasSecondaryBorderBottom,
       leftScrollAriaLabel,
       rightScrollAriaLabel,
       'aria-label': ariaLabel,
@@ -361,6 +364,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             showScrollButtons && !isVertical && styles.modifiers.scrollable,
             usePageInsets && styles.modifiers.pageInsets,
             !hasBorderBottom && styles.modifiers.noBorderBottom,
+            hasSecondaryBorderBottom && styles.modifiers.borderBottom,
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             className

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Tabs } from '../Tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
@@ -350,3 +350,42 @@ test('should render tabs with no bottom border', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
+test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => {
+  render(
+    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+      <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+
+  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+
+  expect(tabsContainer).not.toHaveClass('pf-m-border-bottom');
+});
+
+test('should render tabs with secondary border bottom when passed hasSecondaryBorderBottom', () => {
+  render(
+    <Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border" hasSecondaryBorderBottom>
+      <Tab id="tab1" eventKey={0} title={<TabTitleText>"Tab item 1"</TabTitleText>}>
+        Tab 1 section
+      </Tab>
+      <Tab id="tab2" eventKey={1} title={<TabTitleText>"Tab item 2"</TabTitleText>}>
+        Tab 2 section
+      </Tab>
+      <Tab id="tab3" eventKey={2} title={<TabTitleText>"Tab item 3"</TabTitleText>}>
+        Tab 3 section
+      </Tab>
+    </Tabs>
+  );
+
+  const tabsContainer = screen.queryByLabelText('Secondary bottom border');
+
+  expect(tabsContainer).toHaveClass('pf-m-border-bottom');
+});

package/src/components/Wizard/Wizard.tsx

@@ -381,6 +381,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               return (
                 <WizardNavItem
                   key={index}
+                  id={step.id}
                   content={step.name}
                   isExpandable={isNavExpandable}
                   isCurrent={hasActiveChild}
@@ -399,6 +400,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
                       return (
                         <WizardNavItem
                           key={`child_${indexChild}`}
+                          id={childStep.id}
                           content={childStep.name}
                           isCurrent={activeStep.name === childStep.name}
                           isDisabled={!enabled}
@@ -417,6 +419,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               <WizardNavItem
                 {...step.stepNavItemProps}
                 key={index}
+                id={step.id}
                 content={step.name}
                 isCurrent={activeStep.name === step.name}
                 isDisabled={!enabled}

package/src/components/Wizard/WizardNavItem.tsx

@@ -22,6 +22,8 @@ export interface WizardNavItemProps {
   href?: string;
   /** Flag indicating that this NavItem has child steps and is expandable */
   isExpandable?: boolean;
+  /** The id for the nav item */
+  id?: string | number;
 }
 
 export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
@@ -34,6 +36,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
   navItemComponent = 'button',
   href = null,
   isExpandable = false,
+  id,
   ...rest
 }: WizardNavItemProps) => {
   const NavItemComponent = navItemComponent;
@@ -69,6 +72,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
       <NavItemComponent
         {...rest}
         {...(navItemComponent === 'a' ? { ...linkProps } : { ...btnProps })}
+        {...(id && { id: id.toString() })}
         onClick={() => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step))}
         className={css(
           styles.wizardNavLink,

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

@@ -5,24 +5,27 @@ import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
 describe('Wizard', () => {
   test('Wizard should match snapshot', () => {
     const steps: WizardStep[] = [
-      { name: 'A', component: <p>Step 1</p> },
+      { name: 'A', id: "step-A", component: <p>Step 1</p> },
       {
         name: 'B',
+        id: "step-B",
         steps: [
           {
             name: 'B-1',
+            id: "step-B-1",
             component: <p>Step 2</p>,
             enableNext: true
           },
           {
             name: 'B-2',
+            id: "step-B-2",
             component: <p>Step 3</p>,
             enableNext: false
           }
         ]
       },
-      { name: 'C', component: <p>Step 4</p> },
-      { name: '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