Patternfly-react: Responsive state of toolbar - missing padding?

[katierik]

Noticeable in the toolbar demo, there is no padding on the top of the action button in the responsive state, meaning that the dropdown and button are touching.

I would expect an 8px or 16px spacer here. Guidance on responsive toolbars are needed.

[tlabaj]

cc @nicolethoen @mattnolting

[nicolethoen]

@tlabaj
The Toolbar is different than the DataToolbar. This Toolbar component is not very responsive at all. We can add padding for now, but are we making design changes to the Toolbar anymore? @mcarrano

[mcarrano]

Agree with @nicolethoen Can we just remove/deprecate this demo? Thoughts @LHinson @rachael-phillips ?

[katierik]

This is also seen on the "Data Toolbar" example.

https://www.patternfly.org/v4/documentation/react/experimental/datatoolbar

[mcarrano]

@mattnolting can you comment here? I'm not sure that these examples illustrate best practices in designing a responsive toolbar. But I can see how they might be misunderstood. In reality we would probably use a toggle group or an overflow menu to get the proper responsive toolbar behavior, but wanted to get your perspective.

[nicolethoen]

@mcarrano
Matt Nolting is on PTO this week.

Maybe this is a good place for an overflow menu, since the toggle group is a little more 'advanced' and introduced in later examples on the page. That's my opinion at least.

[mcarrano]

Thanks for the update @nicolethoen . Had forgotten that. Perhaps we can take this up again after the break?

[mcoker]

Hey @katierik, the demos you references are just demonstrating specific toolbar functionality and aren't responsive.

The adjusting item spacers example shows how to use the spacer system to create space between things. Ideally the application developer would place a groups of buttons like that in an overflow menu so that multiple actions on the same row collapse before wrapping this way.

And the groups example builds upon the items example is just showing how to place items within groups. Similarly, a developer would use toggle groups and an overflow menu to collapse items in the group as the window shrinks so that the items and groups don't wrap as shown in the screenshot.

[mattnolting]

This is also seen on the "Data Toolbar" example.

As @mcoker highlighted, this example is intended to illustrate available spacer adjustment and is not intended to be responsive. I think eliminating the toolbar layout/demo will help here.

@mattnolting can you comment here? I'm not sure that these examples illustrate best practices in designing a responsive toolbar. But I can see how they might be misunderstood. In reality we would probably use a toggle group or an overflow menu to get the proper responsive toolbar behavior, but wanted to get your perspective.

The toolbar layout demo should be deprecated. It's only adds to confusion as the toolbar is no longer strictly a layout and is replaced by data-toolbar.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.