@patternfly/react-core 6.5.0-prerelease.48 → 6.5.0-prerelease.49

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.47","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.48","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.47","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.48","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.47","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.48","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.48",
+  "version": "6.5.0-prerelease.49",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,7 +46,7 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.19",
+    "@patternfly/react-icons": "^6.5.0-prerelease.20",
     "@patternfly/react-styles": "^6.5.0-prerelease.15",
     "@patternfly/react-tokens": "^6.5.0-prerelease.14",
     "focus-trap": "7.6.6",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "d12d240eb2218407d455c9b06478e1a38357d3f7"
+  "gitHead": "a7a847c33ba834994e3a1db186ee071e7fbdd7ad"
 }

package/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 } : {})

package/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);
+});

package/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.

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