@patternfly/react-core 5.4.0-prerelease.9 → 5.4.1

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -52,7 +52,10 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  /** React ref for the container to append the options menu to. This is a static ref provided by the main pagination component. */
   containerRef?: React.RefObject<HTMLDivElement>;
+  /** @beta The container to append the pagination options menu to. Overrides the containerRef prop. */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -73,10 +76,11 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   firstIndex = 0,
   lastIndex = 0,
   isLastFullPageShown = false,
-  itemsTitle = 'items',
+  itemsTitle = '',
   toggleTemplate,
   onPerPageSelect = () => null as any,
-  containerRef
+  containerRef,
+  appendTo
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
@@ -208,6 +212,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     </Menu>
   );
 
+  const containerToAppendTo = appendTo ?? (containerRef?.current || undefined);
   return (
     <Popper
       trigger={toggle}
@@ -216,7 +221,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
       popperRef={menuRef}
       isVisible={isOpen}
       direction={dropDirection}
-      appendTo={containerRef?.current || undefined}
+      appendTo={containerToAppendTo}
       minWidth={minWidth !== undefined ? minWidth : 'revert'}
     />
   );

package/src/components/Pagination/__tests__/Generated/PaginationOptionsMenu.test.tsx

@@ -29,8 +29,8 @@ it('PaginationOptionsMenu should match snapshot (auto-generated)', () => {
         <React.Fragment>
           <b>
             {firstIndex} - {lastIndex}
-          </b>Custom toggle template
-          of<b>{itemCount}</b> {itemsTitle}
+          </b>
+          Custom toggle template of<b>{itemCount}</b> {itemsTitle}
         </React.Fragment>
       )}
       onPerPageSelect={() => null as any}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -6,6 +6,9 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
     aria-expanded="false"
     aria-haspopup="listbox"
     class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+    data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+    data-ouia-component-type="PF5/MenuToggle"
+    data-ouia-safe="true"
     id="''-toggle"
     type="button"
   >

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

@@ -26,6 +26,9 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-45"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -232,6 +235,9 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-43"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -438,6 +444,9 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-42"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -644,6 +653,9 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-40"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -850,6 +862,9 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-41"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1056,6 +1071,9 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-44"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1255,6 +1273,9 @@ exports[`Pagination component render custom pagination toggle 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-13"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1458,6 +1479,9 @@ exports[`Pagination component render custom perPageOptions 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-10"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -1668,6 +1692,9 @@ exports[`Pagination component render custom start end 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-11"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2045,6 +2072,9 @@ exports[`Pagination component render last page 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-9"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2255,6 +2285,9 @@ exports[`Pagination component render limited number of pages 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-7"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2456,6 +2489,9 @@ exports[`Pagination component render should render correctly bottom 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-2"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-bottom-toggle"
       type="button"
     >
@@ -2654,6 +2690,9 @@ exports[`Pagination component render should render correctly bottom sticky 1`] =
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-5"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-bottom-toggle"
       type="button"
     >
@@ -2864,6 +2903,9 @@ exports[`Pagination component render should render correctly compact 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-3"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -2993,6 +3035,9 @@ exports[`Pagination component render should render correctly disabled 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-6"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       disabled=""
       id="options-menu-top-toggle"
       type="button"
@@ -3207,6 +3252,9 @@ exports[`Pagination component render should render correctly sticky 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-4"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -3417,6 +3465,9 @@ exports[`Pagination component render should render correctly top 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-1"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -3627,6 +3678,9 @@ exports[`Pagination component render titles 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-12"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -3837,6 +3891,9 @@ exports[`Pagination component render up drop direction 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-14"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >
@@ -4047,6 +4104,9 @@ exports[`Pagination component render zero results 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-8"
+      data-ouia-component-type="PF5/MenuToggle"
+      data-ouia-safe="true"
       id="options-menu-top-toggle"
       type="button"
     >

package/src/components/Popover/Popover.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import { KeyTypes } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';

package/src/components/Radio/examples/Radio.md

@@ -12,44 +12,55 @@ ouia: true
 ### Controlled
 
 ```ts file="./RadioControlled.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="./RadioUncontrolled.tsx"
+
 ```
 
 ### Reversed
 
 ```ts file="./RadioReversed.tsx"
+
 ```
 
 ### Label wraps
 
+You can expand the clickable area of a radio so that it spans wider than the radio label by adding the `isLabelWrapped` property. This allows users to select a radio by clicking the radio itself, the label, or the area between the radio and the label.
+
 ```ts file="./RadioLabelWraps.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./RadioDisabled.tsx"
+
 ```
 
 ### With description
 
 ```ts file="./RadioWithDescription.tsx"
+
 ```
 
 ### With body
 
 ```ts file="./RadioWithBody.tsx"
+
 ```
 
 ### With description and body
 
 ```ts file="./RadioWithDescriptionAndBody.tsx"
+
 ```
 
 ### Standalone input
 
 ```ts file="./RadioStandaloneInput.tsx"
+
 ```

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

@@ -134,7 +134,7 @@ exports[`SearchInput advanced search 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     />
   </div>
 </DocumentFragment>
@@ -590,7 +590,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     />
   </div>
 </DocumentFragment>

package/src/components/Select/Select.tsx

@@ -132,7 +132,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 10);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu

package/src/components/Select/examples/Select.md

@@ -60,7 +60,7 @@ To create a toggle with a status, pass in `status` to the `MenuToggle`. The defa
 
 When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
 
-```ts isBeta file="./SelectValidated.tsx"
+```ts file="./SelectValidated.tsx"
 
 ```
 

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

@@ -14,13 +14,13 @@ const items = [
 ];
 
 const anchors = [
-  <SimpleListItem key="i1" component="a">
+  <SimpleListItem key="i1" component="a" href="#foo">
     Item 1
   </SimpleListItem>,
-  <SimpleListItem key="i2" component="a">
+  <SimpleListItem key="i2" component="a" href="#bar">
     Item 2
   </SimpleListItem>,
-  <SimpleListItem key="i3" component="a">
+  <SimpleListItem key="i3" component="a" href="#baz">
     Item 3
   </SimpleListItem>
 ];

package/src/components/Spinner/Spinner.tsx

@@ -28,7 +28,6 @@ export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
 }
 
 export const Spinner: React.FunctionComponent<SpinnerProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   size = 'xl',
   'aria-valuetext': ariaValueText = 'Loading...',

package/src/components/Tabs/TabAction.tsx

@@ -26,7 +26,7 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
   isDisabled,
   'aria-label': ariaLabel = 'Tab action',
   innerRef,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   ouiaId,
   ouiaSafe,
   ...props

package/src/components/Tabs/Tabs.tsx

@@ -190,7 +190,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     unmountOnExit: false,
     ouiaSafe: true,
     variant: 'default',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     onToggle: (_event: React.MouseEvent, _isExpanded: boolean): void => undefined
   };
 

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

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 import { TextInput, TextInputBase } from '../TextInput';
 import { ValidatedOptions } from '../../../helpers/constants';
-import * as ReactCoreUtils from '@patternfly/react-core/src/helpers/util';
+import * as ReactCoreUtils from '../../../helpers/util';
 
 const props = {
   onChange: jest.fn(),

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 import { css } from '@patternfly/react-styles';

package/src/components/Wizard/Wizard.tsx

@@ -91,6 +91,13 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
+  // When the number of steps changes and pushes activeStepIndex out of bounds, reset back to startIndex
+  React.useEffect(() => {
+    if (activeStepIndex > initialSteps.length) {
+      setActiveStepIndex(startIndex);
+    }
+  }, [initialSteps, activeStepIndex, startIndex]);
+
   const focusMainContentElement = () =>
     setTimeout(() => {
       wrapperRef?.current?.focus && wrapperRef.current.focus();

package/src/components/Wizard/WizardBody.tsx

@@ -10,9 +10,11 @@ import { getResizeObserver } from '../../helpers/resizeObserver';
  * Used as a wrapper for WizardStep content, where the wrapping element is customizable.
  */
 
-export interface WizardBodyProps {
+export interface WizardBodyProps extends React.HTMLProps<HTMLElement> {
   /** Anything that can be rendered in the Wizard body */
   children: React.ReactNode;
+  /** Additional classes spread to the wizard body */
+  className?: string;
   /** Flag to remove the default body padding */
   hasNoPadding?: boolean;
   /** Adds an accessible name to the wrapper element when the content overflows and renders
@@ -29,10 +31,12 @@ export interface WizardBodyProps {
 
 export const WizardBody = ({
   children,
+  className,
   hasNoPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  component = 'div'
+  component = 'div',
+  ...props
 }: WizardBodyProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [previousWidth, setPreviousWidth] = React.useState<number | undefined>(undefined);
@@ -74,7 +78,8 @@ export const WizardBody = ({
       {...(shouldFocusContent && { tabIndex: -1 })}
       {...(component === 'div' && hasScrollbar && { role: 'region' })}
       {...(hasScrollbar && { 'aria-label': defaultAriaLabel, 'aria-labelledby': ariaLabelledBy, tabIndex: 0 })}
-      className={css(styles.wizardMain)}
+      className={css(styles.wizardMain, className)}
+      {...props}
     >
       <div className={css(styles.wizardMainBody, hasNoPadding && styles.modifiers.noPadding)}>{children}</div>
     </WrapperComponent>

package/src/components/Wizard/WizardContext.tsx

@@ -74,6 +74,21 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
+  // Callback to update steps if the overall step number changes
+  React.useEffect(() => {
+    if (currentSteps.length !== initialSteps.length) {
+      const newSteps = initialSteps.map((newStep) => {
+        const currentStepMatch = currentSteps.find((step) => step.id === newStep.id);
+        // If an existing step has the same id as a new step, carry over props
+        if (currentStepMatch) {
+          return { ...currentStepMatch, ...newStep };
+        }
+        return newStep;
+      });
+      setCurrentSteps(newSteps);
+    }
+  }, [currentSteps, initialSteps]);
+
   // Combined initial and current state steps
   const steps = React.useMemo(
     () =>
@@ -125,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
-
           return prevStep;
         })
       ),

package/src/components/Wizard/WizardFooter.tsx

@@ -5,12 +5,11 @@ import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import { Button, ButtonVariant } from '../Button';
 import { isCustomWizardFooter, WizardFooterButtonProps, WizardStepType } from './types';
-
 /**
  * Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
  */
 
-export interface WizardFooterProps {
+export interface WizardFooterProps extends React.HTMLProps<HTMLElement> {
   /** The active step */
   activeStep: WizardStepType;
   /** Next button callback */
@@ -39,18 +38,23 @@ export interface WizardFooterProps {
   backButtonProps?: Omit<WizardFooterButtonProps, 'isDisabled'>;
   /** Additional props for the Cancel button. */
   cancelButtonProps?: WizardFooterButtonProps;
+  /** Additional classes spread to the wizard footer */
+  className?: string;
 }
 
 /**
  * Applies default wizard footer styling any number of child elements.
  */
 
-interface WizardFooterWrapperProps {
+interface WizardFooterWrapperProps extends React.HTMLProps<HTMLElement> {
   children: React.ReactNode;
+  className?: string;
 }
 
-export const WizardFooterWrapper = ({ children }: WizardFooterWrapperProps) => (
-  <footer className={css(styles.wizardFooter)}>{children}</footer>
+export const WizardFooterWrapper = ({ children, className, ...props }: WizardFooterWrapperProps) => (
+  <footer className={css(styles.wizardFooter, className)} {...props}>
+    {children}
+  </footer>
 );
 
 export const WizardFooter = ({ activeStep, ...internalProps }: WizardFooterProps) => {
@@ -71,9 +75,11 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel',
   nextButtonProps,
   backButtonProps,
-  cancelButtonProps
+  cancelButtonProps,
+  className,
+  ...props
 }: Omit<WizardFooterProps, 'activeStep'>) => (
-  <WizardFooterWrapper>
+  <WizardFooterWrapper className={className} {...props}>
     {!isBackHidden && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled} {...backButtonProps}>
         {backButtonText}

package/src/components/Wizard/WizardHeader.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface WizardHeaderProps {
+export interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Title of the wizard */
@@ -21,6 +21,8 @@ export interface WizardHeaderProps {
   titleId?: string;
   /** id for the description */
   descriptionId?: string;
+  /** Additional classes spread to the wizard header */
+  className?: string;
 }
 
 export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
@@ -31,9 +33,11 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   closeButtonAriaLabel,
   titleId,
   descriptionComponent: Component = 'div',
-  descriptionId
+  descriptionId,
+  className,
+  ...props
 }: WizardHeaderProps) => (
-  <div className={css(styles.wizardHeader)}>
+  <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
         <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>

package/src/components/Wizard/WizardNav.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 
-export interface WizardNavProps {
+export interface WizardNavProps extends Omit<React.HTMLProps<HTMLOListElement>, 'type' | 'ref'> {
   /** children should be WizardNavItem components */
   children?: any;
   /** Aria-label applied to the navigation element */
@@ -13,6 +13,8 @@ export interface WizardNavProps {
   isExpanded?: boolean;
   /** True to return the inner list without the wrapping navigation element */
   isInnerList?: boolean;
+  /** Additional classes spread to the wizard nav */
+  className?: string;
 }
 
 export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
@@ -20,11 +22,13 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   isExpanded = false,
-  isInnerList = false
+  isInnerList = false,
+  className,
+  ...props
 }: WizardNavProps) => {
   if (isInnerList) {
     return (
-      <ol className={css(styles.wizardNavList)} role="list">
+      <ol className={css(styles.wizardNavList, className)} role="list" {...props}>
         {children}
       </ol>
     );
@@ -32,9 +36,10 @@ export const WizardNav: React.FunctionComponent<WizardNavProps> = ({
 
   return (
     <nav
-      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded)}
+      className={css(styles.wizardNav, isExpanded && styles.modifiers.expanded, className)}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      {...props}
     >
       <ol className={css(styles.wizardNavList)} role="list">
         {children}