chore(Badge/MenuToggle): updated styling#6543
Conversation
|
Preview: https://patternfly-pr-6543.surge.sh A11y report: https://patternfly-pr-6543-a11y.surge.sh |
|
The menu toggle example looks good here The breadcrumb example crops the hover/focus states to fit is this caused by the breadcrumbs height? |
|
@andrew-ronaldson that's from setting the padding top/bottom on the MenuToggle in that particular instance to 0 to try and get it closer to being contained in the outer breadcrumb element. I can remove those style overrides which would result in the following:
|
9d332ba to
db10778
Compare
|
Seems like the breadcrumbs version now butts up against the dividers. Think it needs an xs spacer for margin start/end |
|
@andrew-ronaldson Does this look more inline with what we'd want?
I updated the |
|
Looks good with that update @thatblindgeye |
db10778 to
aa1677a
Compare
b544e3c to
9387453
Compare
| .#{$menu-toggle} { | ||
| padding-block-start: var(--#{$breadcrumb}__menu-toggle--PaddingBlockStart); | ||
| padding-block-end: var(--#{$breadcrumb}__menu-toggle--PaddingBlockEnd); | ||
| line-height: var(--#{$breadcrumb}__menu-toggle--c-menu-toggle--LineHeight); | ||
| } |
There was a problem hiding this comment.
discussed in the working section that we can keep the padding as long as it it doesn't change the shape of the outer breadcrumb box. also looks like line-height is the same with or without this declaration, so I think we can nix this whole block!
|
🎉 This PR is included in version 6.0.0-alpha.148 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #6463
Currently I'm applying some additional styling to a
pf-m-smallMenuToggle rather than only when it's inside a breadcrumb dropdown. I can update to only change that styling when the MenuToggle is inside the breadcrumb dropdown, but was curious if it would make sense to adjust other styling for apf-m-smallMenu Toggle rather than only the top/bottom padding.Also note that the
pf-m-textmodifier on MenuToggle no longer actually does anything, but we've kept it on the React component.