layout and styling for page-level actions

[jgiardino]

After drilling down to a page that provides a resource-level view, there are actions we display in the table view kebab menu that we want to surface in this page, too.

This seems to be a common use case, to surface resource-level actions in a dropdown in the page header of the resource-level view. We'd like some guidance regarding overall layout and visual styling of this type of dropdown menu so that we can adopt a recommended pattern throughout all services we support.

Specifically, these are the use cases we'd like guidance on:

• There is a primary action that we want to highlight in addition to a dropdown menu of less important actions
• There isn't a primary action to highlight, but only a dropdown menu.

Link any detailed design documents, rough sketches, wireframes or workflows.

The standard pattern we were seeing in other examples provided a dropdown in the page header with the label Actions. Most patterns showed this toggle was using the default styles. We started to create mockups based on this pattern, which you can see here.

During a design review, one of the designers shared an example from the OpenShift design library, showing a similar dropdown toggle with a label Actions, but using the primary variant: http://openshift.github.io/openshift-origin-design/conventions/documentation/actionmenus.html

cc @mcarrano @lboehling

[mcarrano]

Thanks for entering this @jgiardino . I will consider how we can best address this in PatternFly and get back to you.

[jgiardino]

I wanted to expand on this bullet point with a couple of examples that have been explored

• There is a primary action that we want to highlight in addition to a dropdown menu of less important actions

In some cases, we have tabs, and there can be a primary action that we want to display for that tab along with the contents.

In other cases, we did not have tabs, but still wanted to highlight a primary action for the contents that displayed. This was an example of this pattern we were considering for this use case:

[mcarrano]

We will add design guidance to reflect our recommendations. https://github.com/patternfly/patternfly-org/issues/3267 is opened to track that. @mmenestr can you add a link to your recommendations here and I will close this design issue. Thanks.

[mmenestr]

Recommendations at bottom of this doc.