fix(options-menu, dropdown): normalized plain toggle size #3878
Conversation
|
Preview: https://patternfly-pr-3878.surge.sh
A11y report: https://patternfly-pr-3878-coverage.surge.sh |
| @@ -6,7 +6,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", " | |||
| --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm); | |||
| --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element); | |||
| --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm); | |||
| --pf-c-dropdown__toggle--MinWidth: var(--pf-global--target-size--MinWidth); | |||
| --pf-c-dropdown__toggle--MinWidth: 0; | |||
There was a problem hiding this comment.
Looks like you need to keep the var(--pf-global--target-size--MinWidth); value as the button is the correct height now, but narrower than before.
The toolbar spacing issue seems to be a result of a misconfiguration in the toolbar demos. Right now, these buttons are part of an overflow menu whereas they should just be in an toolbar icon group.
To correct, we could A) move the overflow menu with the kebab into the icon button group, B) negative margin an overflow menu that appears next to an icon button group or C) use the built in margining to space the overflow menu. I think I'd most support option B, as it seems to be the most flexible solution. Because the icon buttons pf-m-plain their padding provides the expected visual spacing, but that may cause and issue when they're a sibling to any other button when it is exposed from an overflow menu.
There was a problem hiding this comment.
Looks like you need to keep the var(--pf-global--target-size--MinWidth); value as the button is the correct height now, but narrower than before.
I think that's OK, this update basically just updates the plain toggles to match the plain button sizes, so if you have a plain button and a plain dropdown toggle, they'll be the same size in react anyways since our FA icons are a variable width. To make them the same in core, I think all of the plain actions (buttons/toggles) would need some sort of min-width - even then you'd have some variation since some core icons are wider than they are tall.
|
🎉 This PR is included in version 4.89.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This makes the plain toggles match the plain button size.
fixes #3437