Tabs: Aligning to the Grid design guidance

[sstrubberg]

Grid aware tabs

Acceptance criteria

• Finalize design spec and guidance.
  • Explore left UI shell implications (non-grid influencers and grid influencers)
  • Define main design guidance rules (Responsive behavior / Truncation / etc.)

[laurenmrice]

Design specs and guidance

Implications of UI shell

• Decision to have the same design guidance for UI shell grid influencer and non-grid influencer situations.

Breakpoints

• Max, XLG, LG: Use 8 grid-aware tabs or less.
• MD, SM: Grid-aware tabs will be automatically changed to auto-width tabs.

Responsive behavior

• Tabs should not wrap to multiple lines and stack.
• Include truncation of tab labels with ellipsis (...).
• Horizontal scroll containers when needed.

---