diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index cefa9a22f65..31705ba44ec 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; + /** @beta 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,12 @@ export const Wizard = ({ mainWrapperRef={wrapperRef} >
{ render( @@ -666,3 +667,23 @@ 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( + + + + ); + + expect(screen.getByTestId('wizard-plain')).toHaveClass(styles.modifiers.plain); +}); + +test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => { + render( + + + + ); + + expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlainOnGlass); +}); 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

+
+
+);