Skip to content

Add plain styling support to Wizard component #12277

@thatblindgeye

Description

@thatblindgeye

Context

This is followup work from patternfly#8215.

Changes in patternfly

  • Added plain styling (transparent background) for Wizard components

  • New CSS variables for plain modifier: --pf-m-plain__header--BackgroundColor, --pf-m-plain__toggle--BackgroundColor, --pf-m-plain__nav--BackgroundColor, --pf-m-plain__outer-wrap--BackgroundColor, --pf-m-plain__footer--BackgroundColor

  • Updated border radius token for nav links to use --pf-t--global--border--radius--action--plain--default

  • Auto-applies plain styling when glass theme is enabled (unless .pf-m-no-plain is used)

  • Added new "Plain" example in documentation

  • Added .pf-m-plain and .pf-m-no-plain modifiers

Work Needed in patternfly-react

  • Add `isPlain` prop to Wizard component to apply `.pf-m-plain` modifier

  • Add `isNoPlain` prop to Wizard component to apply `.pf-m-no-plain` modifier (to prevent auto-plain styling with glass theme)

  • Create a new "Plain" example/demo matching the HTML example added in patternfly

  • Update component tests if needed

  • Update TypeScript types for new props


Jira Issue: PF-3735

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Needs triage

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions