Skip to content

feat(labs): polish toolbar UX layout - #6067

Open
copybara-service[bot] wants to merge 1 commit into
mainfrom
cl/990327342
Open

copybara-service[bot] wants to merge 1 commit into
mainfrom
cl/990327342

Conversation

@copybara-service

@copybara-service copybara-service Bot commented Sep 29, 2026 •

Copy link
Copy Markdown

feat(labs): polish toolbar UX layout

This change implements UX evaluation refinements for the labs toolbar:

  • Slot spacing: floating toolbars keep a 4px gap between slots and 8px inline padding; docked toolbars never shrink below the 4px gap. Tests assert the rendered gap and padding.
  • Fix button shapes: enforce circular shape (50%) for icon buttons and pill shape (9999px) for labeled buttons across rest, active, and selected states.
  • Ensure 48px minimum touch targets on all interactive elements.
  • Fix hideLabels shape transition: suppress cubic-bezier spring overshoot so buttons transition smoothly between pill and circle without becoming square.
  • Accessible label derivation: automatically derive ARIA label from text nodes when hideLabels is active, preserving consumer labels.
  • Individually disabled buttons: scope the toolbar's color overrides to enabled buttons (:not([disabled], [soft-disabled])) so a disabled md-gb-button / md-gb-icon-button inside the toolbar shows the button's own disabled content color (on-surface 38%) with no container (selected or not) and no state layer. CSS only; no toolbar-level disabled propagation.
  • Update demo playground: update trailing slot to a labeled button with more_vert icon, add per-button disable knobs, and add standard and vibrant toolbars with disabled buttons to Expressive Variants.
  • Add comprehensive unit test suite in toolbar_test.ts, including spacing and disabled-button tests.

@copybara-service
copybara-service Bot force-pushed the cl/990327342 branch 4 times, most recently from bc4039c to 71848f9 Compare September 29, 2026 17:28
@copybara-service copybara-service Bot changed the title Polish UX layout, disabled states, and transitions for gBreeze Toolbar feat(labs): polish UX layout, disabled states, and transitions for gBreeze toolbar Sep 29, 2026
@copybara-service
copybara-service Bot force-pushed the cl/990327342 branch 3 times, most recently from 54defb8 to a903ef8 Compare September 29, 2026 17:56
@copybara-service copybara-service Bot changed the title feat(labs): polish UX layout, disabled states, and transitions for gBreeze toolbar feat(labs): polish toolbar UX layout and disabled states Sep 29, 2026
@copybara-service
copybara-service Bot force-pushed the cl/990327342 branch 8 times, most recently from c6cfa7c to bf3d87c Compare September 29, 2026 21:44
@copybara-service copybara-service Bot changed the title feat(labs): polish toolbar UX layout and disabled states feat(labs): polish toolbar UX layout Nov 4, 2026
This change implements UX evaluation refinements for the labs toolbar:
- Slot spacing: floating toolbars keep a 4px gap between slots and 8px inline padding; docked toolbars never shrink below the 4px gap. Tests assert the rendered gap and padding.
- Fix button shapes: enforce circular shape (50%) for icon buttons and pill shape (9999px) for labeled buttons across rest, active, and selected states.
- Ensure 48px minimum touch targets on all interactive elements.
- Fix hideLabels shape transition: suppress cubic-bezier spring overshoot so buttons transition smoothly between pill and circle without becoming square.
- Accessible label derivation: automatically derive ARIA label from text nodes when hideLabels is active, preserving consumer labels.
- Individually disabled buttons: scope the toolbar's color overrides to enabled buttons (`:not([disabled], [soft-disabled])`) so a disabled `md-gb-button` / `md-gb-icon-button` inside the toolbar shows the button's own disabled content color (on-surface 38%) with no container (selected or not) and no state layer. CSS only; no toolbar-level disabled propagation.
- Update demo playground: update trailing slot to a labeled button with more_vert icon, add per-button disable knobs, and add standard and vibrant toolbars with disabled buttons to Expressive Variants.
- Add comprehensive unit test suite in toolbar_test.ts, including spacing and disabled-button tests.

PiperOrigin-RevId: 990327342

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant