search

blackbaud / skyux2

SKY UX 2 is the new version of Blackbaud’s user experience framework that implements Blackbaud design patterns. It extends the framework to abstract many complexities of modern web development and takes advantage of Angular 2 to increase the tooling, testing, and performance available.
https://developer.blackbaud.com/skyux
MIT License
32 stars 65 forks source link

In a tile, sky-toolbar items run off page instead of onto a second line #2315

Closed Blackbaud-MitchellThomas closed 5 years ago

Blackbaud-MitchellThomas commented 5 years ago

Expected behavior

The sky-toolbar items show flow onto a second line when the container is too narrow.

Actual behavior

In a tile, they run out the side of the container and subsequently can be lost under another item or off the side of the page.

Steps to reproduce

In a tile, add items to a sky-toolbar so it runs out of horizontal space to display all of the items. Observe the items running out of the side of the toolbar row in the tile.

Plunker (see example SKY UX 2 plunker template at: https://plnkr.co/edit/EZCG7xcyM6NmlmB0wp3F?p=preview

Severity

The items in the toolbar become inaccessible, so there's a potential that the end user is unable to complete their task.

Impact

All tiles with a toolbar are potentially impacted.

Blackbaud-ToddRoberts commented 5 years ago

If there are too many actions to fit in the toolbar, the excess actions should be placed in a More dropdown menu. See "More actions" section here https://developer.blackbaud.com/skyux/components/toolbar#ux-guidelines

Blackbaud-MitchellThomas commented 5 years ago

Ok, so I gather we are supposed to estimate a media query point where we would expect it to run over and visually replace the last few buttons in the toolbar with a more actions dropdown?

Blackbaud-AlexKingman commented 5 years ago

Hi @Blackbaud-MitchellThomas ! Re: your question about adding logic to look at certain breakpoints - we're looking at ways to make that functionality (or something like it) a 1st class offering of the toolbar component. However, that will take some time before becoming a reality. In the meantime, we're looking into adding some styles on the toolbar that will wrap those buttons automatically. It isn't the end-all solution, but will prevent your users from missing out on some toolbar functionality. More to come on this soon!

Blackbaud-AlexKingman commented 5 years ago

Issue moved to blackbaud/skyux-layout #27 via ZenHub

Blackbaud-AlexKingman commented 5 years ago

@Blackbaud-MitchellThomas for future reference, I've created a new issue to track the "more actions" dropdown enhancement here: blackbaud/skyux-layout#28