Prototype page header requirements

[elycheea]

Background

As the page header spec is being finalized, there are a few details we’d like to prototype to better answer some of the behaviors, alignment, or interactions.

Tasks

• Explore alignment of “contextual actions” and “page actions” if users do include elements larger (or smaller) than the 40px expectation.

  
  
  (e.g. large icons / icon buttons, dropdowns instead of the tags in contextual or smaller variants of buttons in page actions)

• Test different responsive behaviors for the page header title and page header contextual actions based on the content priority, e.g. these scenarios:

  • The page header contextual actions remain inline and wrap with the title up to 2 lines¹
  • The page header contextual actions wrap at smaller breakpoints²

• Explore example or utility code for collapsing actions/buttons into a single menu button

• Explore utility or handling of page header collapsed state (can be on scroll or precollapsed in current experience) — this includes whether we move the collapsed button (previous task) or provide a separate slot for consumers to handle the primary action moving in the collapsed state

Resources

Figma: specs draft

Footnotes

1. In this scenario, the contextual actions would be considered comparable priority to the title — in an extreme scenario where the content exceeds 2 lines, would the title truncate to make space for the icon? (The examples show the potential actions, but would apply for either 1 or 2 lines of titles)
   
   Example 1: Example 2: ↩

2. In this scenario, the title is given priority for the allocated 640px and the contextual actions should wrap. ↩