fix(banner): link colors by jcmill · Pull Request #8412 · patternfly/patternfly

jcmill · 2026-05-18T13:37:18Z

Fixes link text decoration colors. Links and their underlines now inherit the banner's text color tokens (on-danger, on-success, etc.) instead of using default link colors.

Summary by CodeRabbit

Style
- Improved banner link styling so text-decoration-color is now consistently applied, including correct behavior for hover states.
- Added dedicated theming variables for banner-level and link-level text-decoration color, ensuring inline link-styled buttons match banner link appearance.

… for banners

patternfly-build · 2026-05-18T13:42:04Z

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

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

coderabbitai · 2026-05-18T13:45:06Z

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

Walkthrough

This PR updates the banner component's SCSS to introduce CSS custom properties for link text-decoration-color. Banner-level variables are defined, applied to anchor elements, and propagated through button .pf-m-link modifiers to ensure consistent text-decoration styling on colored banners.

Changes

Banner link text-decoration styling

Layer / File(s)	Summary
Text-decoration color CSS custom properties and rules `src/patternfly/components/Banner/banner.scss`	Added `--<banner>--a--TextDecorationColor` set to `currentcolor` and mapped it into `--<banner>--m-link--TextDecorationColor` and `--<banner>--m-link--hover--TextDecorationColor`. Applied `text-decoration-color` to anchor elements and extended the inline button `.pf-m-link` modifier to set button-level `TextDecorationColor` and hover variants from the banner link variables.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

released on @prerelease``

Suggested reviewers

mcoker
bekah-stephens
kaylachumley

🚥 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 'fix(banner): link colors' follows conventional commit format with proper prefix and clearly describes the banner link color fix.
Linked Issues check	✅ Passed	Changes to banner.scss properly implement text-decoration-color support for links and inline buttons, directly addressing issue `#8403`'s requirement to override text-decoration styles.
Out of Scope Changes check	✅ Passed	All modifications are scoped to banner link styling and directly related to fixing text-decoration color inheritance for banner-specific background colors.

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

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.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/patternfly/components/Banner/banner.scss (1)
81-83: ⚡ Quick win

Consider consolidating anchor element rules.

There are now two separate a element rules in the .#{$banner} block (lines 81-83 and lines 161-176). While the separation may be intentional for cascade ordering, consolidating them would improve maintainability and make the anchor styling easier to locate.
♻️ Proposed consolidation

Move the text-decoration-color rule into the existing anchor block:
-  a {
-    text-decoration-color: var(--#{$banner}--a--TextDecorationColor);
-  }
-
   &.pf-m-danger {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor);
     --#{$banner}--Color: var(--#{$banner}--m-danger--Color);
And update the existing anchor rule:
   a {
     color: var(--#{$banner}--link--Color);
     text-decoration-line: var(--#{$banner}--link--TextDecoration);
+    text-decoration-color: var(--#{$banner}--a--TextDecorationColor);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/patternfly/components/Banner/banner.scss` around lines 81 - 83, There are
duplicate anchor rules inside the .#{$banner} block: the isolated `a {
text-decoration-color: var(--#{$banner}--a--TextDecorationColor); }` should be
consolidated into the main anchor rule (the other `a` selector block that
contains the banner link styles) — move the `text-decoration-color` declaration
into that existing `a` block and remove the standalone `a` rule so all banner
anchor styles live in one place.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/patternfly/components/Banner/banner.scss`:
- Line 26: Change the CSS value "currentColor" to lowercase "currentcolor" in
the banner CSS custom property declaration for
--#{$banner}--a--TextDecorationColor (located in banner.scss) so the keyword is
lowercase and satisfies stylelint; update that single declaration accordingly.

---

Nitpick comments:
In `@src/patternfly/components/Banner/banner.scss`:
- Around line 81-83: There are duplicate anchor rules inside the .#{$banner}
block: the isolated `a { text-decoration-color:
var(--#{$banner}--a--TextDecorationColor); }` should be consolidated into the
main anchor rule (the other `a` selector block that contains the banner link
styles) — move the `text-decoration-color` declaration into that existing `a`
block and remove the standalone `a` rule so all banner anchor styles live in one
place.

🪄 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: 29ba05d1-f84a-4920-a940-42c6be769fc9

📥 Commits

Reviewing files that changed from the base of the PR and between 7d298e4 and cadfae8.

📒 Files selected for processing (1)

src/patternfly/components/Banner/banner.scss

Co-authored-by: Michael Coker <[email protected]>

mcoker

🦸‍♂️

patternfly-build · 2026-06-23T21:38:33Z

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

The release is available on:

Your semantic-release bot 📦🚀

fix anchor tags and link modifiers to inherit text color in overwrite…

cadfae8

… for banners

jcmill requested review from andrew-ronaldson and mcoker May 18, 2026 13:37

coderabbitai Bot reviewed May 18, 2026

View reviewed changes

Comment thread src/patternfly/components/Banner/banner.scss Outdated

jcmill added 2 commits May 18, 2026 10:04

fix type

62ed771

fix(banner): text decoration color set to currentcolor

26e1044

thatblindgeye approved these changes Jun 17, 2026

View reviewed changes

andrew-ronaldson approved these changes Jun 17, 2026

View reviewed changes

mcoker requested changes Jun 23, 2026

View reviewed changes

Comment thread src/patternfly/components/Banner/banner.scss Outdated

Comment thread src/patternfly/components/Banner/banner.scss Outdated

Comment thread src/patternfly/components/Banner/banner.scss Outdated

jcmill and others added 4 commits June 23, 2026 10:27

Update src/patternfly/components/Banner/banner.scss

9191447

Co-authored-by: Michael Coker <[email protected]>

Update src/patternfly/components/Banner/banner.scss

51d4bdd

Co-authored-by: Michael Coker <[email protected]>

Update src/patternfly/components/Banner/banner.scss

523c3d2

Co-authored-by: Michael Coker <[email protected]>

fix gh suggestion merge issue

dc94da7

jcmill requested a review from mcoker June 23, 2026 16:28

mcoker reviewed Jun 23, 2026

View reviewed changes

Comment thread src/patternfly/components/Banner/banner.scss Outdated

mcoker reviewed Jun 23, 2026

View reviewed changes

Comment thread src/patternfly/components/Banner/banner.scss Outdated

apply suggested change in removing tokens and removed blank spaces

ea60758

mcoker approved these changes Jun 23, 2026

View reviewed changes

mcoker merged commit 05a468c into patternfly:main Jun 23, 2026
6 checks passed

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

coderabbitai Bot mentioned this pull request Jun 24, 2026

fix(button): fix clicked styles on inline link #8473

Merged

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Navigation Menu

fix(banner): link colors - #8412

fix(banner): link colors#8412
mcoker merged 8 commits into
patternfly:mainfrom
jcmill:bug/8403-banner-inline-links

jcmill commented May 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

patternfly-build commented May 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 18, 2026 •

edited

Loading

Reviews paused

Uh oh!

coderabbitai Bot 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 Jun 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

jcmill commented May 18, 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!

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

Uh oh!

Uh oh!

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

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Uh oh!

coderabbitai Bot 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 Jun 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jcmill commented May 18, 2026 •

edited by coderabbitai Bot

Loading

patternfly-build commented May 18, 2026 •

edited

Loading

coderabbitai Bot commented May 18, 2026 •

edited

Loading