Skip to content

fix(label-group): adjust close icon color - #7691

Merged
mcoker merged 2 commits into
patternfly:mainfrom
mcoker:issue-7676
Jul 30, 2025
Merged

mcoker merged 2 commits into
patternfly:mainfrom
mcoker:issue-7676

Conversation

@mcoker

@mcoker mcoker commented Jul 28, 2025 •

Copy link
Copy Markdown
Contributor

fixes #7676

This fixes the color. After chatting with @lboehling, we decided to use a small button here, which has a black icon by default.

Opened a follow-up issue in react to fix the icon - patternfly/patternfly-react#11941

@patternfly-build

patternfly-build commented Jul 28, 2025 •

Copy link
Copy Markdown
Collaborator

@mcoker

mcoker commented Jul 28, 2025 •

Copy link
Copy Markdown
Contributor Author

@bekah-stephens @lboehling - looks like the label group remove/close icon uses our plain/no-padding button variation, which has a grey icon to indicate that it's interactive (turns black on hover), since it doesn't have a background color change on hover. This PR keeps that variation and just updates the button's icon color.

And here is what the label group close/remove icon looks like if I also remove the no-padding variation. I think this looks a lot better and is probably what we're going for instead?

Screenshot 2025-07-28 at 6 35 58 PM

@srambach pointed out that our outlined label close button icons are also grey (because they use the no-padding button variation) - https://www.patternfly.org/components/label#outlined-labels. The filled label close button icons are not grey because they are all set to use unique colors - the --on-[color] icon color token for whatever the label color is. For example, --pf-t--global--icon--color--nonstatus--on-orangered--default.

FWIW here is what a small plain button (removed the no-padding variation) looks like in a label if I also reduce the font-size to match the label text, in case we wanted to update the label close icons to use regular buttons so they would have some change when you hover/focus on them, indicating they're interactive. That would also mean the outlined label close buttons could be black, too.

Screenshot 2025-07-28 at 6 30 08 PM

All that said, are there any other updates we want to make here?

@mcoker

mcoker commented Jul 30, 2025

Copy link
Copy Markdown
Contributor Author

After chatting with @lboehling, updated to use a small/plain button here instead.

@srambach srambach left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏻
Should we update screen shots soon to keep current?

@bekah-stephens bekah-stephens left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm!

@mcoker
mcoker merged commit 2147287 into patternfly:main Jul 30, 2025
@mcoker
mcoker deleted the issue-7676 branch July 30, 2025 16:01
@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.3.0-prerelease.46 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - Label - Incorrect "x" icon and color used in Label Groups

4 participants