Skip to content

feat(Wizard): added plain styling #12289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thatblindgeye wants to merge 6 commits into
base: main
Choose a base branch
from
+113 −15
Open

feat(Wizard): added plain styling #12289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8261457
feat(Wizard): added plain styling
thatblindgeye Mar 24, 2026
4f85c37
Replaced hardcoded classes with style object
thatblindgeye Mar 24, 2026
34b4cb1
Used style object in tests
thatblindgeye Mar 25, 2026
31f5f63
Added beta flag
thatblindgeye Mar 25, 2026
c8a8f74
Bumped core for new class name
thatblindgeye Mar 25, 2026
aeaf892
Added console warning
thatblindgeye Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"tslib": "^2.8.1"
},
"devDependencies": {
"@patternfly/patternfly": "6.5.0-prerelease.55",
"@patternfly/patternfly": "6.5.0-prerelease.58",
"case-anything": "^3.1.2",
"css": "^3.0.0",
"fs-extra": "^11.3.3"
Expand Down
20 changes: 19 additions & 1 deletion packages/react-core/src/components/Wizard/Wizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
* are called.
*/
shouldFocusContent?: boolean;
/** Adds plain styling to the wizard. */
isPlain?: boolean;
Copy link
Copy Markdown
Contributor

@tlabaj tlabaj Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious, does this prop do nothing? Or are style changes applied with pf-m-plain. I ask because it is hard coded below so I am assuming it has no styles associated with it.
If the prop does not do anything, do we need to add it.

Copy link
Copy Markdown
Contributor Author

@thatblindgeye thatblindgeye Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prop will dictate whether the pf-m-plain class is applied

Copy link
Copy Markdown
Contributor

@mcoker mcoker Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious - why is isNoPlainOnGlass beta but isPlain isn't? I'm not suggesting updating it, I just hadn't thought of these being beta.

Copy link
Copy Markdown
Contributor Author

@thatblindgeye thatblindgeye Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably could make both beta; I think at least having the isNo... prop as beta gives us an easier means to remove the prop if needed down the line (without having to deprecate then wait for a breaking release)

/** @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;
}

export const Wizard = ({
Expand All @@ -77,8 +81,17 @@ export const Wizard = ({
onSave,
onClose,
shouldFocusContent = true,
isPlain = false,
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]);
Expand Down Expand Up @@ -181,7 +194,12 @@ export const Wizard = ({
mainWrapperRef={wrapperRef}
>
<div
className={css(styles.wizard, className)}
className={css(
styles.wizard,
isPlain && styles.modifiers.plain,
isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
className
)}
style={{
...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
...(width ? { width } : {})
Expand Down
59 changes: 59 additions & 0 deletions packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -666,3 +667,61 @@ test('clicking parent step navigates to first visible sub-step when first sub-st
WizardStepChangeScope.Nav
);
});

test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => {
render(
<Wizard isPlain data-testid="wizard-plain">
<WizardStep id="test-step" name="Test step" />
</Wizard>
);

expect(screen.getByTestId('wizard-plain')).toHaveClass(styles.modifiers.plain);
});

test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => {
render(
<Wizard isNoPlainOnGlass data-testid="wizard-no-plain">
<WizardStep id="test-step" name="Test step" />
</Wizard>
);

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(
<Wizard isPlain>
<WizardStep id="test-step" name="Test step" />
</Wizard>
);

expect(consoleWarning).not.toHaveBeenCalled();
});

test('Does not log a warning when only isNoPlainOnGlass is passed', () => {
const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();

render(
<Wizard isNoPlainOnGlass>
<WizardStep id="test-step" name="Test step" />
</Wizard>
);

expect(consoleWarning).not.toHaveBeenCalled();
});

test('Logs a warning when both isPlain and isNoPlainOnGlass are passed', () => {
const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();

render(
<Wizard isPlain isNoPlainOnGlass>
<WizardStep id="test-step" name="Test step" />
</Wizard>
);

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.`
);
});
6 changes: 6 additions & 0 deletions packages/react-core/src/components/Wizard/examples/Wizard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
15 changes: 15 additions & 0 deletions packages/react-core/src/components/Wizard/examples/WizardPlain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Wizard, WizardStep } from '@patternfly/react-core';

export const WizardPlain: React.FunctionComponent = () => (
<Wizard height={400} title="Plain wizard" isPlain>
<WizardStep name="Step 1" id="plain-first-step">
<p>Step 1 content</p>
</WizardStep>
<WizardStep name="Step 2" id="plain-second-step">
<p>Step 2 content</p>
</WizardStep>
<WizardStep name="Review" id="plain-review-step" footer={{ nextButtonText: 'Finish' }}>
<p>Review step content</p>
</WizardStep>
</Wizard>
);
2 changes: 1 addition & 1 deletion packages/react-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
},
"dependencies": {
"@patternfly/patternfly": "6.5.0-prerelease.55",
"@patternfly/patternfly": "6.5.0-prerelease.58",
"@patternfly/react-charts": "workspace:^",
"@patternfly/react-code-editor": "workspace:^",
"@patternfly/react-core": "workspace:^",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@patternfly/patternfly": "6.5.0-prerelease.55",
"@patternfly/patternfly": "6.5.0-prerelease.58",
"@rhds/icons": "^2.1.0",
"fs-extra": "^11.3.3",
"tslib": "^2.8.1"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"clean": "rimraf dist css"
},
"devDependencies": {
"@patternfly/patternfly": "6.5.0-prerelease.55",
"@patternfly/patternfly": "6.5.0-prerelease.58",
"change-case": "^5.4.4",
"fs-extra": "^11.3.3"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
},
"devDependencies": {
"@adobe/css-tools": "^4.4.4",
"@patternfly/patternfly": "6.5.0-prerelease.55",
"@patternfly/patternfly": "6.5.0-prerelease.58",
"fs-extra": "^11.3.3"
}
}
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5079,10 +5079,10 @@ __metadata:
languageName: node
linkType: hard

"@patternfly/patternfly@npm:6.5.0-prerelease.55":
version: 6.5.0-prerelease.55
resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.55"
checksum: 10c0/02921ae29db7ac07ec977589b5233397536831d818372289f040685835031562bff398f9e5cd594210bfc6d216dbbf22a9d70a454a5d044bb99e53e186651f1e
"@patternfly/patternfly@npm:6.5.0-prerelease.58":
version: 6.5.0-prerelease.58
resolution: "@patternfly/patternfly@npm:6.5.0-prerelease.58"
checksum: 10c0/b2262ff41ee3cbf376e978e2e9c2290f105c1784b2f7968981769221f464afb9aac84b91462581f58b55bc9fb6a71d617253bbbf69f30ea89f5117122c78c154
languageName: node
linkType: hard

Expand Down Expand Up @@ -5180,7 +5180,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@patternfly/react-core@workspace:packages/react-core"
dependencies:
"@patternfly/patternfly": "npm:6.5.0-prerelease.55"
"@patternfly/patternfly": "npm:6.5.0-prerelease.58"
"@patternfly/react-icons": "workspace:^"
"@patternfly/react-styles": "workspace:^"
"@patternfly/react-tokens": "workspace:^"
Expand All @@ -5201,7 +5201,7 @@ __metadata:
resolution: "@patternfly/react-docs@workspace:packages/react-docs"
dependencies:
"@patternfly/documentation-framework": "npm:^6.36.7"
"@patternfly/patternfly": "npm:6.5.0-prerelease.55"
"@patternfly/patternfly": "npm:6.5.0-prerelease.58"
"@patternfly/patternfly-a11y": "npm:5.1.0"
"@patternfly/react-charts": "workspace:^"
"@patternfly/react-code-editor": "workspace:^"
Expand Down Expand Up @@ -5241,7 +5241,7 @@ __metadata:
"@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
"@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
"@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
"@patternfly/patternfly": "npm:6.5.0-prerelease.55"
"@patternfly/patternfly": "npm:6.5.0-prerelease.58"
"@rhds/icons": "npm:^2.1.0"
fs-extra: "npm:^11.3.3"
tslib: "npm:^2.8.1"
Expand Down Expand Up @@ -5328,7 +5328,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@patternfly/react-styles@workspace:packages/react-styles"
dependencies:
"@patternfly/patternfly": "npm:6.5.0-prerelease.55"
"@patternfly/patternfly": "npm:6.5.0-prerelease.58"
change-case: "npm:^5.4.4"
fs-extra: "npm:^11.3.3"
languageName: unknown
Expand Down Expand Up @@ -5370,7 +5370,7 @@ __metadata:
resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
dependencies:
"@adobe/css-tools": "npm:^4.4.4"
"@patternfly/patternfly": "npm:6.5.0-prerelease.55"
"@patternfly/patternfly": "npm:6.5.0-prerelease.58"
fs-extra: "npm:^11.3.3"
languageName: unknown
linkType: soft
Expand Down
Loading