ui-components icon indicating copy to clipboard operation
ui-components copied to clipboard
verified publisher icon GovAlta

feat(#3095): Tabs v2 styling update

Open twjeffery opened this issue 5 months ago • 1 comments

Summary

Updates the Tabs component to support V2 design system styling while maintaining full backward compatibility with V1.

Changes

New Props

  • version ("1" | "2", default "1"): Controls V1 vs V2 styling

V2 Styling Updates

Typography & Colors

  • Active tabs: Semibold weight with blue text (color.interactive.default)
  • Inactive tabs: Medium weight with grey text (color.greyscale.600)
  • Hover state: Medium weight with black text (color.text.default)
  • All tabs now use 16px/22px typography with -0.5px letter spacing

Spacing

  • Gap between tabs reduced from 32px to 16px on desktop
  • Desktop padding: 8px 4px 9px 4px (adjusted for 3px indicator + visual spacing)
  • Mobile padding: 4px 12px 4px 15px (accommodates left-side indicator)

Active Indicators

  • Desktop: 3px height bottom indicator with rounded top corners (6px)
  • Mobile: 3px width left indicator with rounded right corners (6px)
  • Active state: Blue indicator (color.interactive.default)
  • Hover state: Grey indicator (color.greyscale.300) with rounded corners

State Styling

  • Focus: Updated focus outline width to 4px (from 3px)
  • Hover (Desktop): Bottom border changes to grey underline with rounded corners
  • Hover (Mobile): Left border changes to grey with light grey background (color.greyscale.50)
  • Container: Updated bottom border color to lighter grey (color.greyscale.150)

Other Improvements

  • Mobile active tabs maintain light blue background (color.info.light)
  • Responsive behavior preserved (horizontal desktop, vertical mobile)
  • All state transitions use token-driven colors

Technical Implementation

Token + CSS Approach

  • Pseudo-elements (::after) required for rounded corner indicators
  • CSS borders cannot apply border-radius to specific corners
  • Positioned absolutely within relatively positioned tabs

V2 CSS Scoping

  • All V2-specific styles use .v2 class selector
  • V1 behavior preserved exactly as-is
  • Structural changes isolated to V2 scope

Testing

All changes tested in web components playground with:

  • Desktop and mobile layouts (responsive transition)
  • All tab states (default, active, hover, focus)
  • Multiple tab counts (2, 3, 5, 8+ tabs)
  • Keyboard navigation (arrow keys, Home, End)
  • Hash-based routing and deep linking
  • Tab change events and initial tab selection

Related

twjeffery avatar Oct 09 '25 23:10 twjeffery

@bdfranck updated with your feedback. I pushed an update to this PR and the design tokens PR

twjeffery avatar Oct 23 '25 23:10 twjeffery

:tada: This PR is included in version 1.40.0-dev.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge avatar Nov 19 '25 17:11 tzuge

:tada: This PR is included in version 6.10.0-dev.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge avatar Nov 20 '25 23:11 tzuge

:tada: This PR is included in version 4.10.0-dev.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge avatar Nov 26 '25 23:11 tzuge