fix(label-group): adjust close icon color - #7691
Conversation
|
Preview: https://patternfly-pr-7691.surge.sh A11y report: https://patternfly-pr-7691-a11y.surge.sh |
|
@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?
@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 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.
All that said, are there any other updates we want to make here? |
|
After chatting with @lboehling, updated to use a small/plain button here instead. |
|
🎉 This PR is included in version 6.3.0-prerelease.46 🎉 The release is available on: Your semantic-release bot 📦🚀 |


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