Files
VoiceStudio/frontend/src/test/visual/__screenshots__/Tabs-default.png
T
740a690644 feat(ui): convert Dialog/Slider/Table/Tabs to Tailwind utilities (visual-verified) (#779)
Continue the component CSS -> Tailwind v4 utility migration for UI group 3.
Added Slider, Table, and Tabs to the visual-regression harness (specs.jsx +
manifest.ts) and committed machine-local baselines, then converted each
component, proving the result pixel-identical with `bun run test:visual`.

- Slider: fully converted; Slider.css deleted (no keyframes / complex
  selectors). Token + arbitrary-value utilities preserve exact pixels; thumb
  hover/active/focus-visible and the multi-easing transition are kept faithful
  via arbitrary-property utilities. Visual-verified across all 3 themes.

- Tabs: fully converted; Tabs.css deleted. pill/underline variants, size,
  active and hover:not(active) states mapped to conditional utility sets. The
  `ui-tabs* / is-active / ui-tabs__icon` class names are retained as inert
  hooks so Settings.css's unlayered overrides (`.ui-tabs.settings-tabs-ui …`)
  keep winning over the layered utilities — Settings tab rail unchanged.
  Visual-verified across all 3 themes.

- Dialog: partial conversion. Header / title / body / footer box-model +
  typography and per-size max-width converted to utilities; the glass
  gradient surface, backdrop-filter, fixed centering, and open/close
  @keyframes remain in Dialog.css (cannot be reduced to utilities). NOT
  visually verified: Radix Portal + position:fixed render the dialog outside
  the harness's #visual-root, so it can't be snapshotted in isolation;
  verified instead by 1:1 token equivalence + build + unit tests.

- Table: LEFT AS CSS (STOP rule). Its classes are a shared CSS contract, not
  a private leaf — ModelsTable.jsx renders `ui-table-header`/`ui-table-header__cell`
  directly without the component, and DubSegmentTable.css,
  EngineCompatibilityMatrix.css, Settings.css, and index.css all hook those
  global classes. Removing Table.css would break them, so converting yields no
  safe net benefit. Added to the harness with a baseline for a future pass.

Verified: oxlint (0 errors), oxfmt --check (clean), vite build, vitest
(641 passed), bun install --frozen-lockfile (no changes), test:visual (24
passed).

Co-authored-by: mergetest <test@local>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 16:50:02 +05:30

12 KiB
460x720px