feat(button): add plain variant by jcmill · Pull Request #8305 · patternfly/patternfly

jcmill · 2026-04-13T16:08:52Z

Adds plain variant to stateful buttons.

Changes
button.scss: For stateful buttons, PaddingInlineStart / PaddingInlineEnd now use --pf-t--global--spacer--action--horizontal--plain--default instead of the control horizontal default, so plain stateful controls match plain action padding in figma.

Button.md: Adds a Read Plain demo (read + clicked) next to the existing stateful examples, and extends the .pf-m-plain table description to include stateful use cases.

Summary by CodeRabbit

Style
- Adjusted plain icon/button modifier order to change override precedence and refine spacing and hover/click visuals for plain and no‑padding stateful/read variants.
Documentation
- Added stateful "Plain" examples (Read, Unread, Attention — clicked/non-clicked) including variants with visible counts and screen‑reader labels; expanded plain-button usage guidance.

coderabbitai · 2026-04-13T16:10:16Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 24c025ac-c0a3-457d-b3c6-16675d9b602f

📥 Commits

Reviewing files that changed from the base of the PR and between 62b8687 and 60af8c8.

📒 Files selected for processing (1)

src/patternfly/components/Button/examples/Button.md

🚧 Files skipped from review as they are similar to previous changes (1)

src/patternfly/components/Button/examples/Button.md

Walkthrough

Relocated and redefined the .pf-m-plain modifier block in Button SCSS, changing which CSS custom properties it assigns and its override precedence relative to stateful/read/unread/attention variants. Added stateful plain/icon button examples (including count variants) to Button documentation.

Changes

Cohort / File(s)	Summary
Button styling `src/patternfly/components/Button/button.scss`	Moved and redefined the `&.pf-m-plain` block earlier in the file. Adjusted which CSS custom properties `pf-m-plain` sets (including stateful padding and read background/hover/click tokens) and changed override precedence versus `pf-m-stateful`, `pf-m-read`, `pf-m-unread`, and `pf-m-attention`. `pf-m-plain &.pf-m-no-padding` remains but now lives under the relocated block.
Button documentation / examples `src/patternfly/components/Button/examples/Button.md`	Added "Plain" subsections under the Stateful examples: plain stateful/icon buttons for Read/Read+Clicked/Unread/Unread+Clicked/Attention/Attention+Clicked, and a "Plain with count" variant demonstrating counts plus screen-reader text. Updated `.pf-m-plain` example list to include "stateful".

Sequence Diagram(s)

(omitted — changes are styling and docs only)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix: updated with notfication badge with unified theme #8206: Modifies the same Button SCSS and overlaps on stateful/read CSS tokens and modifier adjustments.
fix(button): use correct border radius token on plain buttons #8175: Adjusts plain button selector/token rules in Button SCSS, likely touching similar pf-m-plain concerns.
fix(button): apply unified tokens and new icons #8165: Related edits around plain/stateful selectors and variables in Button SCSS.

Suggested labels

released on @prerelease``

Suggested reviewers

andrew-ronaldson
mcoker
kmcfaul

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'feat(button): add plain variant' follows conventional commit format with type and scope, but is incomplete—it doesn't add the plain variant, it reorganizes existing plain variant code for stateful buttons.	Consider clarifying the title to reflect the actual change: 'feat(button): apply plain variant to stateful buttons' or 'feat(button): add plain styling to stateful components' for better accuracy.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR successfully implements the plain variant for stateful buttons, using plain-specific spacing tokens and relocating CSS blocks to allow proper override precedence as outlined in issue `#8212`.
Out of Scope Changes check	✅ Passed	All changes are within scope: button.scss refactoring implements plain variant for stateful buttons with correct spacing, and Button.md adds required plain variant examples and documentation updates.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

patternfly-build · 2026-04-13T16:12:50Z

Preview: https://pf-pr-8305.surge.sh

A11y report: https://pf-pr-8305-a11y.surge.sh

mcoker · 2026-04-13T23:58:07Z

@andrew-ronaldson can you confirm that the left/right padding for the notification badge (all variants) should use the plain (sm) spacer token? Looks like everything is using a small spacer in figma. IIRC I thought the plain variant would look like this compared to the default notfication badge

andrew-ronaldson · 2026-04-14T13:04:45Z

All the stateful buttons have a sm spacer in Figma. I see the react and core examples have md spacers on org but that feels too wide.

mcoker · 2026-04-15T05:21:25Z

All the stateful buttons have a sm spacer in Figma. I see the react and core examples have md spacers on org but that feels too wide.

Looks like it was a change we made in v6, I'm guessing since they look like control buttons by default, they use the control button spacer. If we update the non-plain notification badge to small left/right spacers, wdyt about using the "plain" spacer token versus the "sm" spacer? Another way of asking is, if users customize the plain button spacer (or we do with some new theme or whatever), would we expect the non-plain notification badge spacers to update, too?

andrew-ronaldson · 2026-04-16T18:30:19Z

I talked to Lucia about this one.
We can use the normal control--horizontal--default spacer for the default stateful button (the same as other control buttons). For the plain style it can be the control--horizontal--plain spacer.

mcoker · 2026-04-16T19:11:32Z

@jcmill fwiw here are the updates I made for the screenshot referenced above.

Move the stateful/read/unread/attention selector blocks so they come after .pf-m-plain instead of before
Add the following to the plain modifier vars

--#{$button}--m-stateful--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
--#{$button}--m-stateful--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
--#{$button}--m-read--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
--#{$button}--m-read--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
--#{$button}--m-read--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);

…riting vars, remove background for read modifier and background and hover background to plain

coderabbitai

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/patternfly/components/Button/button.scss`:
- Around line 224-225: The two root stateful custom properties
(--#{$button}--m-stateful--PaddingInlineStart and
--#{$button}--m-stateful--PaddingInlineEnd) are forcing the plain spacer onto
all .pf-m-stateful buttons; change their values back to the normal control
spacing variable used for non-plain controls and then override those two
properties inside the .pf-m-plain rule to the plain spacer. Locate the
declarations for --#{$button}--m-stateful--PaddingInlineStart /
--#{$button}--m-stateful--PaddingInlineEnd and set them to the standard control
spacer token, then add/modify the .pf-m-plain block to explicitly set those two
properties to the plain spacer token.
- Around line 733-738: The .pf-m-read modifier currently only maps border tokens
but not the read background tokens, causing read buttons to fall back to base
backgrounds; update the .pf-m-read block to also forward the background custom
properties by setting --#{$button}--Background to
var(--#{$button}--m-read--Background), --#{$button}--hover--Background to
var(--#{$button}--m-read--hover--Background) and
--#{$button}--m-clicked--Background to
var(--#{$button}--m-read--m-clicked--Background) so the declared read background
tokens are consumed for normal, hover and clicked states.
- Around line 713-717: The overrides that forward stateful/read variables (e.g.,
--#{$button}--m-stateful--PaddingInlineEnd,
--#{$button}--m-stateful--PaddingInlineStart,
--#{$button}--m-read--hover--BackgroundColor,
--#{$button}--m-read--m-clicked--BackgroundColor,
--#{$button}--m-read--BackgroundColor) are currently only applied under the
`.pf-m-no-padding` context; update the selector that contains this block so it
also targets `.pf-m-plain` buttons (for example include `.pf-m-plain` alongside
`.pf-m-no-padding` in the selector) so plain stateful buttons receive the same
padding and read background variable forwarding as the no-padding variant.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 3572d7c5-018d-4d5c-a7ab-afa55529e64f

📥 Commits

Reviewing files that changed from the base of the PR and between 6772256 and f00179b.

📒 Files selected for processing (1)

src/patternfly/components/Button/button.scss

…lain variation

coderabbitai

♻️ Duplicate comments (1)

src/patternfly/components/Button/button.scss (1)
734-738: ⚠️ Potential issue | 🟠 Major

Non-plain read buttons lose background styling.

.pf-m-read only forwards border tokens now; --#{$button}--m-read--BackgroundColor, --#{$button}--m-read--hover--BackgroundColor, and --#{$button}--m-read--m-clicked--BackgroundColor (declared at lines 230/232/234) are no longer consumed on non-plain read buttons, so they fall back to the root transparent background instead of --pf-t--global--background--color--control--default. This regresses the existing (non-plain) notification badge read state shown in Button.md.
🎨 Proposed fix
   // Read
   &.pf-m-read {
+    --#{$button}--BackgroundColor: var(--#{$button}--m-read--BackgroundColor);
     --#{$button}--BorderColor: var(--#{$button}--m-read--BorderColor);
+    --#{$button}--hover--BackgroundColor: var(--#{$button}--m-read--hover--BackgroundColor);
     --#{$button}--hover--BorderColor: var(--#{$button}--m-read--hover--BorderColor);
+    --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-read--m-clicked--BackgroundColor);
     --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-read--m-clicked--BorderColor);
   }
Because .pf-m-plain is declared before .pf-m-read in the cascade and both forward into the same --#{$button}--BackgroundColor etc., plain+read composition should still pick up the plain forwarding via the root --#{$button}--m-read--BackgroundColor token the plain block already overrides (lines 702-704). Worth verifying visually.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Button/button.scss` around lines 734 - 738, The
.pf-m-read rule only forwards border tokens and omits the read Background
tokens, causing non-plain read buttons to lose their background; update the
.pf-m-read block to also forward --#{$button}--m-read--BackgroundColor,
--#{$button}--m-read--hover--BackgroundColor, and
--#{$button}--m-read--m-clicked--BackgroundColor into
--#{$button}--BackgroundColor, --#{$button}--hover--BackgroundColor, and
--#{$button}--m-clicked--BackgroundColor respectively (preserving existing
border forwards), so non-plain read state uses the intended background while
plain+read composition still picks up the plain overrides.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@src/patternfly/components/Button/button.scss`:
- Around line 734-738: The .pf-m-read rule only forwards border tokens and omits
the read Background tokens, causing non-plain read buttons to lose their
background; update the .pf-m-read block to also forward
--#{$button}--m-read--BackgroundColor,
--#{$button}--m-read--hover--BackgroundColor, and
--#{$button}--m-read--m-clicked--BackgroundColor into
--#{$button}--BackgroundColor, --#{$button}--hover--BackgroundColor, and
--#{$button}--m-clicked--BackgroundColor respectively (preserving existing
border forwards), so non-plain read state uses the intended background while
plain+read composition still picks up the plain overrides.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: bc288dd6-eb3c-413a-84e0-37eb61c5c9f7

📥 Commits

Reviewing files that changed from the base of the PR and between f00179b and 1a16e6f.

📒 Files selected for processing (1)

src/patternfly/components/Button/button.scss

…plain with count for each stateful variation

mcoker

Just a few small docs updates to match the existing stateful example. Otherwise LGTM!

mcoker

Also noticed the a11y tests are failing because the plain (without count) need a label or text - https://pf-pr-8305-a11y.surge.sh/

You could add a button--aria-label of something like "All items read" for read, "Unread items" for unread and "Unread items, needs attention" for needs attention.

mcoker

🚀

patternfly-build · 2026-04-23T15:09:36Z

🎉 This PR is included in version 6.5.0-prerelease.76 🎉

The release is available on:

Your semantic-release bot 📦🚀

add plain option to button, update padding on stateful buttons

6772256

jcmill requested review from andrew-ronaldson and mcoker April 13, 2026 16:08

move plain modifier class above stateful, add stateful and read overw…

f00179b

…riting vars, remove background for read modifier and background and hover background to plain

coderabbitai Bot reviewed Apr 20, 2026

View reviewed changes

Comment thread src/patternfly/components/Button/button.scss Outdated

Comment thread src/patternfly/components/Button/button.scss Outdated

Comment thread src/patternfly/components/Button/button.scss

revert statefull paddings to control vars, new vars to overwrite in p…

1a16e6f

…lain variation

coderabbitai Bot reviewed Apr 21, 2026

View reviewed changes

mcoker requested changes Apr 22, 2026

View reviewed changes

Comment thread src/patternfly/components/Button/examples/Button.md

Comment thread src/patternfly/components/Button/button.scss

bring back pf-m-read background colors, update examples as plain and …

62b8687

…plain with count for each stateful variation

mcoker reviewed Apr 22, 2026

View reviewed changes

update sr wording, add aria label to plain to match plain with count

60af8c8

jcmill requested a review from mcoker April 23, 2026 14:22

mcoker approved these changes Apr 23, 2026

View reviewed changes

mcoker added the Needs design review label Apr 23, 2026

mcoker merged commit f4f0266 into patternfly:main Apr 23, 2026
5 checks passed

patternfly-build added the released on @prerelease label Apr 23, 2026

jcmill deleted the feat/8212-notification-plain-badge branch May 13, 2026 15:07

Conversation

jcmill commented Apr 13, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Pre-merge checks failed

❌ Failed checks (1 inconclusive)

Uh oh!

patternfly-build commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcoker commented Apr 13, 2026

Uh oh!

andrew-ronaldson commented Apr 14, 2026

Uh oh!

mcoker commented Apr 15, 2026

Uh oh!

andrew-ronaldson commented Apr 16, 2026

Uh oh!

mcoker commented Apr 16, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Apr 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jcmill commented Apr 13, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 13, 2026 •

edited

Loading

patternfly-build commented Apr 13, 2026 •

edited

Loading