search

patternfly / patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
114 stars 103 forks source link

Need guidance on action button location for toolbars and breadcrumbs #593

Closed beanh66 closed 6 years ago

beanh66 commented 6 years ago

Update Toolbar and Breadcrumbs patterns to provide explicit guidance on where primary and secondary actions belong. For example in the toolbar, two actions are shown, but it is not clear if the primary action is the right-most or left-most action. In the breadcrumbs pattern, can actions be placed on right side when there is no toolbar below? Seems like a better use of space then adding another horizontal row just for actions.

This is a pattern enhancement. Use cases were discussed with @catrobson @serenamarie125 and @amysueg as we are not currently consistent across products in this area.

I am happy to contribute these updates. Open to suggestions on where the primary action belongs. Note the various layouts:

screen shot 2018-03-01 at 6 29 51 pm
beanh66 commented 6 years ago

Here are some examples where actions are not consistent when used in conjunction with a breadcrumbs bar and without a toolbar.

iPaas: (Inconsistent order for primary and secondary actions)

screen shot 2018-03-01 at 6 31 55 pm

OpenShift: (Buttons are floating)

screen shot 2018-03-01 at 6 32 12 pm
mcarrano commented 6 years ago

@beanh66 Agree that more guidance on placement of primary actions in the Toolbar will be helpful. @cshinn has been working on an Actions pattern so I want to involve him in this discussion. See #508 . As for including actions as part of a "breadcrumbs bar" I think this is potentially a different pattern that is useful for drill-down or object detail pages but not really part of the breadcrumb IMO.

mcarrano commented 6 years ago

Per 3/2 PF-UXS mtg we should address the "breadcrumb header" case as either a new pattern of guideline to cover common cases. Consider how this plays within the page.