feat(Wizard): added plain styling (#12289)

* feat(Wizard): added plain styling

* Replaced hardcoded classes with style object

* Used style object in tests

* Added beta flag

* Bumped core for new class name

* Added console warning

* Removed console warning

* Updated noglass prop description

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;
+  /** @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}
     >
       <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 } : {})

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

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