feat(button): add warning modifier to buttons #3349
Conversation
|
Preview: https://patternfly-pr-3349.surge.sh A11y report: https://patternfly-pr-3349-coverage.surge.sh CSS Size Report
|
| // Warning btn | ||
| --pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100); | ||
| --pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100); | ||
| --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200); |
There was a problem hiding this comment.
I checked with @mceledonia and he suggested using --pf-global--palette--gold-500 for hover/focus/active background color instead, and leaving the text color as it is.
There was a problem hiding this comment.
Thank you Michael! Sounds good -- I'll make this change.
|
Looks like there are multiple styles for the states for the warning button, which makes for a jarring experience. Most buttons have an initial state and their hover/focus are the same, should we also do that for the warning button? The initial state is: The hover state is: The focus state is: Thoughts? @mceledonia @mcoker @jenny-s51 |
|
Good catch @christiemolloy . Why would the label color invert on focus? Feels like a bug. |
|
@christiemolloy good catch! I think the focus color is just an oversight. Confirmed with @mceledonia it should be the normal text color. @jenny-s51 when you get a chance, can you make that update? |
nice catch @christiemolloy! fixed 👍 |
|
🎉 This PR is included in version 4.32.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #3251