Looking at the toolbar CSS, I noticed a few things. Note that I didn't go through everything in detail, but that may be a good for whoever picks this up if they're comfortable.
<ToolbarContent> supports alignment, but I do not see any CSS support for .pf-m-align-[left/right] for .pf-c-toolbar__content
The <ToolbarItem> supports a width prop that allows a custom CSS width with breakpoint support by setting --pf-c-toolbar__item--Width[-breakpoint], which is awesome. The CSS also supports the same for min-width via --pf-c-toolbar__item--MinWidth[-breakpoint] - I don't see that in the react component. A use case for that is something like width: 80%; min-width: 300px; for something you want to consume 80% of the parent, but never shrink below 300px.
Looking at the toolbar CSS, I noticed a few things. Note that I didn't go through everything in detail, but that may be a good for whoever picks this up if they're comfortable.
.pf-m-wrap
and.pf-m-nowrap
modifier classes that support breakpoint suffixes to control the flex wrapping behavior of.pf-c-toolbar__group
and.pf-c-toolbar__content-section
. I couldn't find support for these modifiers in the react component, but maybe I missed them? https://github.com/patternfly/patternfly/blob/e362c95792e234592911881cb3c818177c023fd5/src/patternfly/components/Toolbar/toolbar.scss#L497-L506<ToolbarContent>
supportsalignment
, but I do not see any CSS support for.pf-m-align-[left/right]
for.pf-c-toolbar__content
<ToolbarItem>
supports awidth
prop that allows a custom CSSwidth
with breakpoint support by setting --pf-c-toolbar__item--Width[-breakpoint], which is awesome. The CSS also supports the same formin-width
via --pf-c-toolbar__item--MinWidth[-breakpoint] - I don't see that in the react component. A use case for that is something likewidth: 80%; min-width: 300px;
for something you want to consume 80% of the parent, but never shrink below300px
.