Tearsheet design exploration: Header

[RichKummer]

The Tearsheet has a number of design challenges associated, primarily with header action placement (along with AI label), the truncation rules around the description, and its responsiveness.

Exploration file

1. Header actions: consider placement with 'x' button and AI label What are header actions purpose. We ideally should only have one primary button in view.

2. Truncation (which causes accessibility issues). Truncated list (experimental) string formatter (experimental) Do we provide options for adopters? Prop for showing more than two lines/no truncation? Review options with Gower.

3. Explore header responsiveness

   • We should also consider how the header elements will behave on smaller screen sizes/increased zoom.