You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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
.The text was updated successfully, but these errors were encountered: