feat(Wizard): added plain styling

Author: thatblindgeye

packages/react-core/src/components/Wizard/Wizard.tsx

@@ -59,6 +59,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
    * 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}
     >
       <div
-        className={css(styles.wizard, className)}
+        className={css(styles.wizard, isPlain && 'pf-m-plain', isNoPlainOnGlass && 'pf-m-no-plain', className)}
         style={{
           ...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
           ...(width ? { width } : {})

packages/react-core/src/components/Wizard/__tests__/Wizard.test.tsx

@@ -666,3 +666,23 @@ test('clicking parent step navigates to first visible sub-step when first sub-st
     WizardStepChangeScope.Nav
   );
 });
+
+test('Renders with pf-m-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('pf-m-plain');
+});
+
+test('Renders with pf-m-no-plain 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('pf-m-no-plain');
+});

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.

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 = () => (
+  <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>
+);