chore(button): update disabled badge styles#6616
Conversation
|
Preview: https://patternfly-pr-6616.surge.sh A11y report: https://patternfly-pr-6616-a11y.surge.sh |
|
@evwilkin if you rebase, you should get the update to @lboehling - on evan's note about the badge background color, reading the original issue...
That reads like we have a "disabled" badge (as a variation of the badge component) that should be used in a disabled button. And looking in figma, I see a disabled badge (the tooltip on the last one says type="disabled") 
So I'm wondering - is the design intent that we have a disabled variation of the badge that we use here and in menu toggles (and anywhere else a badge might be included in something that's disabled)? Or is this a style update we apply in the button and other places we have disabled badges? On a related note, I looked at menu toggle to see if there was any similarity and the count toggles look like they may have an issue. I looked to see if we're using the same disabled badge styles in disabled menu toggles, and looks like it's different... but not sure if that's on purpose or just an issue with the designs? 
|
There was a problem hiding this comment.
Left some feedback in slack, but I think from the convo with @lboehling we're going to add a disabled variation to the badge that we can use when the badge is included in a disabled interactive thing.
|
@lboehling if badges have disabled styling, is it correct to assume that there will be no difference in styling between read & unread badges that are disabled (ex: Badge & Button examples).
|
|
@evwilkin, yep! There would be just one disabled style. I'm noticing that the disabled badge uses the nonstatus color on-gray token for the text. Can you update it to use text--color--on-disabled? Thank you! |
There was a problem hiding this comment.
Looks good! Just one small change to remove the screen reader text from the disabled/read examples 👍
There was a problem hiding this comment.
For feature parity, looks like the disabled state needs pointer-events: none; for disabled state:
&:is(:disabled, .pf-m-disabled) {
--#{$badge}--Color: var(--#{$badge}--disabled--Color);
--#{$badge}--BackgroundColor: var(--#{$badge}--disabled--BackgroundColor);
pointer-events: none;
}
}
There was a problem hiding this comment.
Changes LGTM for the referenced issue, but left a comment about a side effect of one of the hbs changes we'll need to clean up 👍
|
This should wait to merge until its react followup patternfly/patternfly-react#10417 is also ready for the release. |
|
🎉 This PR is included in version 6.0.0-alpha.147 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #6558
This PR:
BadgeBadgeas needed when used within aButton