diff --git a/packages/react-core/package.json b/packages/react-core/package.json index e2fd022d13e..28f8552376d 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -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" diff --git a/packages/react-core/src/components/Wizard/Wizard.tsx b/packages/react-core/src/components/Wizard/Wizard.tsx index cefa9a22f65..1d183a6cca9 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. When both this and isPlain are true, isPlain takes precedence. */ + isNoPlainOnGlass?: boolean; } export const Wizard = ({ @@ -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]); @@ -181,7 +194,12 @@ export const Wizard = ({ mainWrapperRef={wrapperRef} >
{ render( @@ -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( + + + + ); + + 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); +}); + +test('Does not log a warning when only isPlain is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + + + ); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Does not log a warning when only isNoPlainOnGlass is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + + + ); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Logs a warning when both isPlain and isNoPlainOnGlass are passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + + + ); + + 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.` + ); +}); 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

+
+
+); diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 2e97461e6e6..c66ff6d2d2a 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -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:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index f9a1078d21d..97672e2d39a 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -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" diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 914d47b2e1c..878cd9a93aa 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -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" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index f692d63231f..f3d6f52f130 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -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" } } diff --git a/yarn.lock b/yarn.lock index d63a624fc8a..3bd295b02d9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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 @@ -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:^" @@ -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:^" @@ -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" @@ -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 @@ -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