@patternfly/react-core 6.0.0-alpha.72 → 6.0.0-alpha.74

package/src/components/Label/examples/LabelFilled.tsx

@@ -259,81 +259,81 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="cyan">Cyan</Label>
-      <Label color="cyan" icon={<CubeIcon />}>
-        Cyan icon
+      <Label color="teal">Teal</Label>
+      <Label color="teal" icon={<CubeIcon />}>
+        Teal icon
       </Label>
-      <Label color="cyan" onClose={() => Function.prototype}>
-        Cyan removable
+      <Label color="teal" onClose={() => Function.prototype}>
+        Teal removable
       </Label>
-      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Cyan icon removable
+      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Teal icon removable
       </Label>
-      <Label color="cyan" href="#filled">
-        Cyan link
+      <Label color="teal" href="#filled">
+        Teal link
       </Label>
-      <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
-        Cyan link removable
+      <Label color="teal" href="#filled" onClose={() => Function.prototype}>
+        Teal link removable
       </Label>{' '}
-      <Label color="cyan" onClick={() => logColor('cyan')}>
-        Cyan clickable
+      <Label color="teal" onClick={() => logColor('teal')}>
+        Teal clickable
       </Label>
-      <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
-        Cyan clickable removable
+      <Label color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+        Teal clickable removable
       </Label>{' '}
-      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Cyan label with icon that overflows
+      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Teal label with icon that overflows
       </Label>{' '}
-      <Label color="cyan" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
-        Cyan link removable (disabled)
+      <Label color="teal" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Teal link removable (disabled)
       </Label>{' '}
       <Label
-        color="cyan"
+        color="teal"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('cyan')}
+        onClick={() => logColor('teal')}
         onClose={() => Function.prototype}
       >
-        Cyan clickable removable (disabled)
+        Teal clickable removable (disabled)
       </Label>
       <br />
       <br />
-      <Label color="gold">Gold</Label>
-      <Label color="gold" icon={<CubeIcon />}>
-        Gold icon
+      <Label color="yellow">Yellow</Label>
+      <Label color="yellow" icon={<CubeIcon />}>
+        Yellow icon
       </Label>
-      <Label color="gold" onClose={() => Function.prototype}>
-        Gold removable
+      <Label color="yellow" onClose={() => Function.prototype}>
+        Yellow removable
       </Label>
-      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Gold icon removable
+      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Yellow icon removable
       </Label>
-      <Label color="gold" href="#filled">
-        Gold link
+      <Label color="yellow" href="#filled">
+        Yellow link
       </Label>
-      <Label color="gold" href="#filled" onClose={() => Function.prototype}>
-        Gold link removable
+      <Label color="yellow" href="#filled" onClose={() => Function.prototype}>
+        Yellow link removable
       </Label>{' '}
-      <Label color="gold" onClick={() => logColor('gold')}>
-        Gold clickable
+      <Label color="yellow" onClick={() => logColor('yellow')}>
+        Yellow clickable
       </Label>
-      <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
-        Gold clickable removable
+      <Label color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+        Yellow clickable removable
       </Label>{' '}
-      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Gold label with icon that overflows
+      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Yellow label with icon that overflows
       </Label>{' '}
-      <Label color="gold" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
-        Gold link removable (disabled)
+      <Label color="yellow" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+        Yellow link removable (disabled)
       </Label>{' '}
       <Label
-        color="gold"
+        color="yellow"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('gold')}
+        onClick={() => logColor('yellow')}
         onClose={() => Function.prototype}
       >
-        Gold clickable removable (disabled)
+        Yellow clickable removable (disabled)
       </Label>
       <br />
       <br />

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -182,7 +182,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           <MenuItem itemId="Orange">Orange</MenuItem>
           <MenuItem itemId="Red">Red</MenuItem>
           <MenuItem itemId="Purple">Purple</MenuItem>
-          <MenuItem itemId="Cyan">Cyan</MenuItem>
+          <MenuItem itemId="Teal">Teal</MenuItem>
         </MenuList>
       </MenuContent>
     </Menu>

package/src/components/Label/examples/LabelOutline.tsx

@@ -328,101 +328,107 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="cyan">
-        Cyan
+      <Label variant="outline" color="teal">
+        Teal
       </Label>
-      <Label variant="outline" color="cyan" icon={<CubeIcon />}>
-        Cyan icon
+      <Label variant="outline" color="teal" icon={<CubeIcon />}>
+        Teal icon
       </Label>
-      <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
-        Cyan removable
+      <Label variant="outline" color="teal" onClose={() => Function.prototype}>
+        Teal removable
       </Label>
-      <Label variant="outline" color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Cyan icon removable
+      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Teal icon removable
       </Label>
-      <Label variant="outline" color="cyan" href="#outline">
-        Cyan link
+      <Label variant="outline" color="teal" href="#outline">
+        Teal link
       </Label>
-      <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
-        Cyan link removable
+      <Label variant="outline" color="teal" href="#outline" onClose={() => Function.prototype}>
+        Teal link removable
       </Label>{' '}
-      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
-        Cyan clickable
+      <Label variant="outline" color="teal" onClick={() => logColor('teal')}>
+        Teal clickable
       </Label>
-      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
-        Cyan clickable removable
+      <Label variant="outline" color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+        Teal clickable removable
       </Label>
-      <Label variant="outline" color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Cyan label with icon that overflows
+      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Teal label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="cyan"
+        color="teal"
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
         onClose={() => Function.prototype}
       >
-        Cyan link removable (disabled)
+        Teal link removable (disabled)
       </Label>{' '}
       <Label
         variant="outline"
-        color="cyan"
+        color="teal"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('cyan')}
+        onClick={() => logColor('teal')}
         onClose={() => Function.prototype}
       >
-        Cyan clickable removable (disabled)
+        Teal clickable removable (disabled)
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="gold">
-        Gold
+      <Label variant="outline" color="yellow">
+        Yellow
       </Label>
-      <Label variant="outline" color="gold" icon={<CubeIcon />}>
-        Gold icon
+      <Label variant="outline" color="yellow" icon={<CubeIcon />}>
+        Yellow icon
       </Label>
-      <Label variant="outline" color="gold" onClose={() => Function.prototype}>
-        Gold removable
+      <Label variant="outline" color="yellow" onClose={() => Function.prototype}>
+        Yellow removable
       </Label>
-      <Label variant="outline" color="gold" icon={<CubeIcon />} onClose={() => Function.prototype}>
-        Gold icon removable
+      <Label variant="outline" color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+        Yellow icon removable
       </Label>
-      <Label variant="outline" color="gold" href="#outline">
-        Gold link
+      <Label variant="outline" color="yellow" href="#outline">
+        Yellow link
       </Label>
-      <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
-        Gold link removable
+      <Label variant="outline" color="yellow" href="#outline" onClose={() => Function.prototype}>
+        Yellow link removable
       </Label>{' '}
-      <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
-        Gold clickable
+      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')}>
+        Yellow clickable
       </Label>
-      <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
-        Gold clickable removable
+      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+        Yellow clickable removable
       </Label>
-      <Label variant="outline" color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-        Gold label with icon that overflows
+      <Label
+        variant="outline"
+        color="yellow"
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Yellow label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="gold"
+        color="yellow"
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
         onClose={() => Function.prototype}
       >
-        Gold link removable (disabled)
+        Yellow link removable (disabled)
       </Label>{' '}
       <Label
         variant="outline"
-        color="gold"
+        color="yellow"
         isDisabled
         icon={<CubeIcon />}
-        onClick={() => logColor('gold')}
+        onClick={() => logColor('yellow')}
         onClose={() => Function.prototype}
       >
-        Gold clickable removable (disabled)
+        Yellow clickable removable (disabled)
       </Label>
       <br />
       <br />

package/src/components/Text/examples/Text.md

@@ -5,60 +5,4 @@ cssPrefix: pf-v5-c-content
 propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
 ---
 
-The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite `<TextList>`, and `<TextListItem>`. `TextContent` may be used as a container for the text components, but nesting them inside `<TextContent>` is not required.
-
-You cannot nest other components within `<Text>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Text>` component's properties to achieve the same results.
-
-For example, rather than nesting the `<List>` and `<Title>` components within `<Text>`, you should pass `component="h1"` into the `<TextList>` and `<Text>` components. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Text>` supports, which will be styled as a divider.
-
-## Examples
-
-### Headings
-
-```ts file="./TextHeadings.tsx"
-
-```
-
-### Body
-
-```ts file="./TextBody.tsx"
-
-```
-
-### Unordered list
-
-```ts file="./TextUnorderedList.tsx"
-
-```
-
-### Ordered list
-
-```ts file="./TextOrderedList.tsx"
-
-```
-
-### Plain list
-
-```ts file="./TextPlainList.tsx"
-
-```
-
-### Description list
-
-```ts file="./TextDescriptionList.tsx"
-
-```
-
-Text components such as Text, TextList, TextListItem can be placed within a TextContent to provide styling for html elements, and additional styling options applied to the children.
-
-### Wrapped in TextContent
-
-```ts file="./TextContentWrapped.tsx"
-
-```
-
-### Link and visited link
-
-```ts file="./TextVisited.tsx"
-
-```
+The `<Text>` component has been renamed to [Content](/components/content).

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/WizardFooter.tsx

@@ -10,7 +10,7 @@ import { ActionList, ActionListGroup, ActionListItem } from '../ActionList';
  * 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 +39,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 +76,11 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel',
   nextButtonProps,
   backButtonProps,
-  cancelButtonProps
+  cancelButtonProps,
+  className,
+  ...props
 }: Omit<WizardFooterProps, 'activeStep'>) => (
-  <WizardFooterWrapper>
+  <WizardFooterWrapper className={className} {...props}>
     <ActionList>
       <ActionListGroup>
         {!isBackHidden && (

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}

package/src/components/Wizard/WizardNavItem.tsx

@@ -8,7 +8,11 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
 
-export interface WizardNavItemProps extends OUIAProps {
+export interface WizardNavItemProps
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
+    OUIAProps {
+  /** Additional classes spread to the wizard nav item */
+  className?: string;
   /** Can nest a WizardNav component for substeps */
   children?: React.ReactNode;
   /** The content to display in the navigation item */
@@ -53,7 +57,9 @@ export const WizardNavItem = ({
   status = 'default',
   target,
   ouiaId,
-  ouiaSafe = true
+  ouiaSafe = true,
+  className,
+  ...props
 }: WizardNavItemProps) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
@@ -72,8 +78,10 @@ export const WizardNavItem = ({
       className={css(
         styles.wizardNavItem,
         isExpandable && styles.modifiers.expandable,
-        isExpandable && isExpanded && styles.modifiers.expanded
+        isExpandable && isExpanded && styles.modifiers.expanded,
+        className
       )}
+      {...props}
     >
       <NavItemComponent
         {...(NavItemComponent === 'a'
@@ -97,7 +105,7 @@ export const WizardNavItem = ({
       >
         {status === WizardNavItemStatus.Error && (
           <>
-            <span className="pf-v5-screen-reader">, {status}</span>
+            <span className="pf-v6-screen-reader">, {status}</span>
             <span className={css(styles.wizardNavLinkStatusIcon)}>
               <ExclamationCircleIcon />
             </span>

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

@@ -3,11 +3,20 @@ import { render, screen } from '@testing-library/react';
 import { WizardBody } from '../WizardBody';
 
 test('renders children without additional props', () => {
-  const { container } = render(<WizardBody>content</WizardBody>);
+  render(<WizardBody data-testid="test-id">content</WizardBody>);
 
-  expect(container).toHaveTextContent('content');
-  expect(container).not.toHaveAttribute('aria-label');
-  expect(container).not.toHaveAttribute('aria-labelledby');
+  expect(screen.getByTestId('test-id')).toHaveTextContent('content');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-label');
+  expect(screen.getByTestId('test-id')).not.toHaveAttribute('aria-labelledby');
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardBody className="custom-class" data-testid="test-id">
+      Test
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
 });
 
 test('has no padding className when hasNoPadding is not specified', () => {
@@ -21,11 +30,19 @@ test('has padding className when hasNoPadding is specified', () => {
 });
 
 test('wrapper element is of type div when component is not specified', () => {
-  const { container } = render(<WizardBody aria-label="Wizard body">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('DIV');
+  render(
+    <WizardBody data-testid="test-id" aria-label="Wizard body">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('DIV');
 });
 
 test('renders with custom component', () => {
-  const { container } = render(<WizardBody component="main">content</WizardBody>);
-  expect(container.firstElementChild?.tagName).toEqual('MAIN');
+  render(
+    <WizardBody component="main" data-testid="test-id">
+      content
+    </WizardBody>
+  );
+  expect(screen.getByTestId('test-id').tagName).toEqual('MAIN');
 });

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

@@ -20,6 +20,15 @@ test('has button names of "Next", "Back", and "Cancel" by default', () => {
   expect(screen.getByRole('button', { name: 'Cancel' })).toBeVisible();
 });
 
+test(`Renders with additional classes when className is passed`, () => {
+  render(
+    <WizardFooter {...defaultProps} className="custom-class" data-testid="test-id">
+      Test
+    </WizardFooter>
+  );
+  expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+});
+
 test('calls onNext when the next button is clicked', async () => {
   const onNext = jest.fn();
   const user = userEvent.setup();