fix(toolbar): align toolbar actions with filtered items #7532
Conversation
|
Preview: https://patternfly-pr-7532.surge.sh A11y report: https://patternfly-pr-7532-a11y.surge.sh |
| display: flex; | ||
| align-items: baseline; | ||
|
|
||
| > :first-child { |
There was a problem hiding this comment.
I'm wondering if we'd ever expect more than one toolbar group? Then they wouldn't get spaced correctly.
Also, can you add this new class to the documentation section?
mcoker
left a comment
mcoker
left a comment
There was a problem hiding this comment.
I think you called this out in the PR description, but this is what it looks like for me by default
Looks like that, and @srambach's comment are because .pf-m-toolbar-filtered-items doesn't wrap. The PF5 filter group wrapped - https://v5-archive.patternfly.org/components/toolbar/react/with-filters/
Here's what it looks like if it's set to wrap
May-29-2025.17-10-03.mp4
The only thing is if there are 2+ rows of filters, the clear all buttons wrap below all of them on their own line, but it was like that in PF5, too
Here's this PR with multiple rows and it set to wrap
And PF5
Any reason we wouldn't add flex-wrap: wrap to .pf-m-toolbar-filtered-items?
Also we'll need to validate with a react dev that they can add .pf-m-toolbar-filtered-items to that <ToolbarContent>. At first glance, looks like we generate it internally for the filter groups, so I'm guessing it's possible, but we'll need to verify. cc @kmcfaul - can you verify if we're able to add a class to this .pf-v6-c-toolbar__content element that wraps filter labels?
|
This PR has been automatically marked as stale because it has not had activity in the last 60 days. |
4 participants
address #7348
Moves toolbar action links to be inline with the filtered items.
Requires follow on changes to add
pf-m-toolbar-filtered-itemshere. https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Toolbar/ToolbarLabelGroupContent.tsx#L76https://patternfly-pr-7532.surge.sh/components/toolbar/html-demos#toolbar-attribute-value-checkbox-menu-toggle-filter-on-desktop
note: in the above html-demo there is wider spacing between the filter label groups and the action links, which is intended, because of this change to maintain long label groups presented inline and wrap when needed. The links will be spaced closer if there is only a single label group.
