From a598ae0a67c455aa65b2228d6d2e1babef30347e Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 24 Mar 2026 13:32:29 -0400 Subject: [PATCH 1/8] feat(Wizard): added plain styling --- .../src/components/Wizard/Wizard.tsx | 8 +++++++- .../Wizard/__tests__/Wizard.test.tsx | 20 +++++++++++++++++++ .../src/components/Wizard/examples/Wizard.md | 6 ++++++ .../Wizard/examples/WizardPlain.tsx | 15 ++++++++++++++ 4 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 packages/react-core/src/components/Wizard/examples/WizardPlain.tsx diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index cefa9a22f65..4bfb303e85b 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -59,6 +59,10 @@ export interface WizardProps extends React.HTMLProps { * are called. */ shouldFocusContent?: boolean; + /** Adds plain styling to the wizard. */ + isPlain?: boolean; + /** Prevents the wizard from automatically applying plain styling when glass theme is enabled. */ + isNoPlainOnGlass?: boolean; } export const Wizard = ({ @@ -77,6 +81,8 @@ export const Wizard = ({ onSave, onClose, shouldFocusContent = true, + isPlain = false, + isNoPlainOnGlass = false, ...wrapperProps }: WizardProps) => { const [activeStepIndex, setActiveStepIndex] = useState(startIndex); @@ -181,7 +187,7 @@ export const Wizard = ({ mainWrapperRef={wrapperRef} >
{ + render( + + + + ); + + expect(screen.getByTestId('wizard-plain')).toHaveClass('pf-m-plain'); +}); + +test('Renders with pf-m-no-plain class when isNoPlainOnGlass is true', () => { + render( + + + + ); + + expect(screen.getByTestId('wizard-no-plain')).toHaveClass('pf-m-no-plain'); +}); diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md index d82dbb17698..19d77d777d9 100644 --- a/packages/react-core/src/components/Wizard/examples/Wizard.md +++ b/packages/react-core/src/components/Wizard/examples/Wizard.md @@ -63,6 +63,12 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye'; ``` +### Plain + +```ts file="./WizardPlain.tsx" + +``` + ### Focus content on next/back To focus the main content element of the `Wizard`, pass in the `shouldFocusContent` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order. diff --git a/packages/react-core/src/components/Wizard/examples/WizardPlain.tsx b/packages/react-core/src/components/Wizard/examples/WizardPlain.tsx new file mode 100644 index 00000000000..025cd6f20a5 --- /dev/null +++ b/packages/react-core/src/components/Wizard/examples/WizardPlain.tsx @@ -0,0 +1,15 @@ +import { Wizard, WizardStep } from '@patternfly/react-core'; + +export const WizardPlain: React.FunctionComponent = () => ( + + +

Step 1 content

+ + +

Step 2 content

+ + +

Review step content

+ + +); From ea0ba2c9e55d162d6b127f4e39a2d0a323bf6621 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 24 Mar 2026 15:17:49 -0400 Subject: [PATCH 2/8] Replaced hardcoded classes with style object --- packages/react-core/src/components/Wizard/Wizard.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index 4bfb303e85b..3c57617089e 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -187,7 +187,12 @@ export const Wizard = ({ mainWrapperRef={wrapperRef} >
Date: Wed, 25 Mar 2026 10:21:15 -0400 Subject: [PATCH 3/8] Used style object in tests --- .../src/components/Wizard/__tests__/Wizard.test.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx index 9ac9aa7d19e..28a167c007c 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx +++ b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx @@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Wizard, WizardFooterProps, WizardStep, WizardNavProps, WizardStepChangeScope } from '../'; +import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; test('renders step when child is of type WizardStep', () => { render( @@ -667,22 +668,22 @@ test('clicking parent step navigates to first visible sub-step when first sub-st ); }); -test('Renders with pf-m-plain class when isPlain is true', () => { +test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => { render( ); - expect(screen.getByTestId('wizard-plain')).toHaveClass('pf-m-plain'); + expect(screen.getByTestId('wizard-plain')).toHaveClass(styles.modifiers.plain); }); -test('Renders with pf-m-no-plain class when isNoPlainOnGlass is true', () => { +test(`Renders with ${styles.modifiers.noPlain} class when isNoPlainOnGlass is true`, () => { render( ); - expect(screen.getByTestId('wizard-no-plain')).toHaveClass('pf-m-no-plain'); + expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlain); }); From 352f5cb97f8e73983ba0e5a5d305fddc16a1d9e4 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 25 Mar 2026 10:29:04 -0400 Subject: [PATCH 4/8] Added beta flag --- packages/react-core/src/components/Wizard/Wizard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index 3c57617089e..5c4ff7c982e 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -61,7 +61,7 @@ export interface WizardProps extends React.HTMLProps { shouldFocusContent?: boolean; /** Adds plain styling to the wizard. */ isPlain?: boolean; - /** Prevents the wizard from automatically applying plain styling when glass theme is enabled. */ + /** @beta Prevents the wizard from automatically applying plain styling when glass theme is enabled. */ isNoPlainOnGlass?: boolean; } From bddd792e6e74008d853eca6f9d93f04ef644f820 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 25 Mar 2026 13:24:51 -0400 Subject: [PATCH 5/8] Bumped core for new class name --- packages/react-core/src/components/Wizard/Wizard.tsx | 2 +- .../src/components/Wizard/__tests__/Wizard.test.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index 5c4ff7c982e..31705ba44ec 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -190,7 +190,7 @@ export const Wizard = ({ className={css( styles.wizard, isPlain && styles.modifiers.plain, - isNoPlainOnGlass && styles.modifiers.noPlain, + isNoPlainOnGlass && styles.modifiers.noPlainOnGlass, className )} style={{ diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx index 28a167c007c..6fbd32fbc97 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx +++ b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx @@ -678,12 +678,12 @@ test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => expect(screen.getByTestId('wizard-plain')).toHaveClass(styles.modifiers.plain); }); -test(`Renders with ${styles.modifiers.noPlain} class when isNoPlainOnGlass is true`, () => { +test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => { render( ); - expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlain); + expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlainOnGlass); }); From d3403b4cded2320ca3521ffdae85a49c37bb3359 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 26 Mar 2026 11:02:17 -0400 Subject: [PATCH 6/8] Added console warning --- .../src/components/Wizard/Wizard.tsx | 9 ++++- .../Wizard/__tests__/Wizard.test.tsx | 38 +++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index 31705ba44ec..1d183a6cca9 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -61,7 +61,7 @@ export interface WizardProps extends React.HTMLProps { shouldFocusContent?: boolean; /** Adds plain styling to the wizard. */ isPlain?: boolean; - /** @beta Prevents the wizard from automatically applying plain styling when glass theme is enabled. */ + /** @beta Prevents the wizard from automatically applying plain styling when glass theme is enabled. When both this and isPlain are true, isPlain takes precedence. */ isNoPlainOnGlass?: boolean; } @@ -85,6 +85,13 @@ export const Wizard = ({ isNoPlainOnGlass = false, ...wrapperProps }: WizardProps) => { + if (isPlain && isNoPlainOnGlass) { + // eslint-disable-next-line no-console + console.warn( + `Wizard: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` + ); + } + const [activeStepIndex, setActiveStepIndex] = useState(startIndex); const initialSteps = buildSteps(children); const firstStepRef = useRef(initialSteps[startIndex - 1]); diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx index 6fbd32fbc97..b5192888611 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx +++ b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx @@ -687,3 +687,41 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlas expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlainOnGlass); }); + +test('Does not log a warning when only isPlain is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + + + ); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Does not log a warning when only isNoPlainOnGlass is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + + + ); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Logs a warning when both isPlain and isNoPlainOnGlass are passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + + + ); + + expect(consoleWarning).toHaveBeenCalledWith( + `Wizard: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` + ); +}); From f7ca617f8c3da687b7012f79b1cbb93bffd6d829 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 1 Apr 2026 11:00:17 -0400 Subject: [PATCH 7/8] Removed console warning --- .../src/components/Wizard/Wizard.tsx | 7 ---- .../Wizard/__tests__/Wizard.test.tsx | 38 ------------------- 2 files changed, 45 deletions(-) diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index 1d183a6cca9..f05df22e39f 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -85,13 +85,6 @@ export const Wizard = ({ isNoPlainOnGlass = false, ...wrapperProps }: WizardProps) => { - if (isPlain && isNoPlainOnGlass) { - // eslint-disable-next-line no-console - console.warn( - `Wizard: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` - ); - } - const [activeStepIndex, setActiveStepIndex] = useState(startIndex); const initialSteps = buildSteps(children); const firstStepRef = useRef(initialSteps[startIndex - 1]); diff --git a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx index b5192888611..6fbd32fbc97 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx +++ b/packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx @@ -687,41 +687,3 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlas expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlainOnGlass); }); - -test('Does not log a warning when only isPlain is passed', () => { - const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); - - render( - - - - ); - - expect(consoleWarning).not.toHaveBeenCalled(); -}); - -test('Does not log a warning when only isNoPlainOnGlass is passed', () => { - const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); - - render( - - - - ); - - expect(consoleWarning).not.toHaveBeenCalled(); -}); - -test('Logs a warning when both isPlain and isNoPlainOnGlass are passed', () => { - const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); - - render( - - - - ); - - expect(consoleWarning).toHaveBeenCalledWith( - `Wizard: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` - ); -}); From b6eebe04399473402188b7942a75ad3b138e1cb9 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 1 Apr 2026 14:40:39 -0400 Subject: [PATCH 8/8] Updated noglass prop description --- packages/react-core/src/components/Wizard/Wizard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index f05df22e39f..31705ba44ec 100644 --- a/packages/react-core/src/components/Wizard/Wizard.tsx +++ b/packages/react-core/src/components/Wizard/Wizard.tsx @@ -61,7 +61,7 @@ export interface WizardProps extends React.HTMLProps { shouldFocusContent?: boolean; /** Adds plain styling to the wizard. */ isPlain?: boolean; - /** @beta Prevents the wizard from automatically applying plain styling when glass theme is enabled. When both this and isPlain are true, isPlain takes precedence. */ + /** @beta Prevents the wizard from automatically applying plain styling when glass theme is enabled. */ isNoPlainOnGlass?: boolean; }