fix(button): define missing variables and remove unused ones by tarunvashishth · Pull Request #8136 · patternfly/patternfly

tarunvashishth · 2026-02-16T04:16:51Z

PR Summary
This PR fixes undefined/unused Button CSS variable issues in src/patternfly/components/Button/button.scss.

Added missing display-lg token: --#{$button}--m-display-lg--FontSize.
Wired --#{$button}--m-display-lg--FontWeight into .pf-m-display-lg.
Replaced hardcoded disabled border color with --#{$button}--disabled--BorderColor.
Wired hover icon transition delay token into hover/focus state.
Added base corner-radius fallback tokens (BorderStartStart/StartEnd/EndStart/EndEndRadius) to match existing var(...) usage.
Removed unused --#{$button}__progress--Opacity.

Summary by CodeRabbit

New Features
- Added font-size controls for large and link-large button variants
- Enhanced typography controls for large button variants
Style
- Added configurable icon hover transition delay
- Improved disabled button border visibility
- Refined button progress element styling (removed default hidden opacity)

coderabbitai · 2026-02-16T04:17:14Z

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: a26109bd-d5a3-4fd3-a6e5-b835a8297045

📥 Commits

Reviewing files that changed from the base of the PR and between 9afa956 and c2722d8.

📒 Files selected for processing (1)

src/patternfly/components/Button/button.scss

Walkthrough

Adds missing display-lg font-size tokens (link and main), maps display-lg font-weight, introduces a hover icon transition-delay variable and wires it into hover/focus, removes the default progress opacity variable, and changes the disabled ripple ::after border-color to use the disabled border-color variable.

Changes

Button Styling Variables

Layer / File(s)	Summary
Display-lg sizing tokens `src/patternfly/components/Button/button.scss`	Adds `--#{$button}--m-link--m-display-lg--FontSize`, `--#{$button}--m-display-lg--FontSize`, and sets `--#{$button}--FontWeight` from `--#{$button}--m-display-lg--FontWeight`.
Hover icon transition & progress `src/patternfly/components/Button/button.scss`	Adds `--#{$button}--hover__icon--TransitionDelay`, wires `--#{$button}__icon--TransitionDelay` to it on hover/focus, and removes default `--#{$button}__progress--Opacity`.
Disabled ripple border-color `src/patternfly/components/Button/button.scss`	Changes disabled/aria-disabled `&::after` border-color from `transparent` to `var(--#{$button}--disabled--BorderColor)`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

patternfly/patternfly#8165: Modifies Button SCSS display-lg/link and hover-state variables similar to this PR.

Suggested labels

released on @prerelease``

Suggested reviewers

lboehling
mcoker
kmcfaul

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and directly summarizes the main changes: defining missing CSS variables and removing unused ones in the Button component.
Linked Issues check	✅ Passed	The PR addresses all coding requirements from issue `#7952`: defines missing --#{$button}--m-display-lg--FontSize, wires --#{$button}--m-display-lg--FontWeight to .pf-m-display-lg, uses --#{$button}--disabled--BorderColor in disabled styles, removes unused --#{$button}__progress--Opacity, and wires hover icon transition delay.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to addressing the undefined and unused CSS variable issues identified in issue `#7952`; no extraneous modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

⚔️ Resolve merge conflicts

Resolve merge conflict in branch fix/button-unused-variables

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-02-16T04:19:57Z

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

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

github-actions · 2026-04-24T11:55:20Z

This PR has been automatically marked as stale because it has not had activity in the last 60 days.

jcmill · 2026-05-27T20:10:19Z

  --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
+  --#{$button}--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
  --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);


This is a small nit, but this could be moved to the block of tokens from line 95-115 (Link)

jcmill · 2026-05-27T20:10:22Z

+  --#{$button}--BorderStartStartRadius: var(--#{$button}--BorderRadius);
+  --#{$button}--BorderStartEndRadius: var(--#{$button}--BorderRadius);
+  --#{$button}--BorderEndStartRadius: var(--#{$button}--BorderRadius);
+  --#{$button}--BorderEndEndRadius: var(--#{$button}--BorderRadius);


Because there is a fallback defined in the button border-radius, we don't need to add these. It creates some unnecessary overhead in an already large file. But these do get defined in places like a horizontal scrolling nav.

…lay-lg font-size

mcoker

Thanks @tarunvashishth! Noted in a comment but just a heads up that you'll need to rebase and fix a couple of conflicts.

…iables # Conflicts: # src/patternfly/components/Button/button.scss

mcoker

LGTM, visual regressions passed.

patternfly-build · 2026-07-31T20:51:53Z

🎉 This PR is included in version 6.6.0-prerelease.27 🎉

The release is available on:

Your semantic-release bot 📦🚀

fix(button): define missing variables and remove unused ones

9afa956

github-actions Bot added the Stale label Apr 24, 2026

jcmill reviewed May 27, 2026

View reviewed changes

github-actions Bot removed the Stale label May 30, 2026

fix(button): remove redundant border radius tokens and move link disp…

c2722d8

…lay-lg font-size

mcoker requested changes Jul 10, 2026

View reviewed changes

Merge remote-tracking branch 'origin/main' into fix/button-unused-var…

cf97195

…iables # Conflicts: # src/patternfly/components/Button/button.scss

tarunvashishth force-pushed the fix/button-unused-variables branch from 5e75c24 to cf97195 Compare July 11, 2026 15:08

tarunvashishth requested review from jcmill and mcoker July 29, 2026 19:39

mcoker approved these changes Jul 31, 2026

View reviewed changes

mcoker merged commit 35618e4 into patternfly:main Jul 31, 2026
6 checks passed

patternfly-build added the released on @prerelease label Jul 31, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(button): define missing variables and remove unused ones - #8136

fix(button): define missing variables and remove unused ones#8136
mcoker merged 3 commits into
patternfly:mainfrom
tarunvashishth:fix/button-unused-variables

tarunvashishth commented Feb 16, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Feb 16, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Feb 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 24, 2026

Uh oh!

jcmill May 27, 2026

Uh oh!

jcmill May 27, 2026

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

tarunvashishth commented Feb 16, 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 Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Apr 24, 2026

Uh oh!

jcmill May 27, 2026

Choose a reason for hiding this comment

Uh oh!

jcmill May 27, 2026

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Jul 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tarunvashishth commented Feb 16, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 16, 2026 •

edited

Loading

patternfly-build commented Feb 16, 2026 •

edited

Loading