From 086628ad8a194cf94b016e4ec56b6c8193e00add Mon Sep 17 00:00:00 2001 From: teknium1 <127238744+teknium1@users.noreply.github.com> Date: Fri, 18 Sep 2026 23:50:35 -0700 Subject: [PATCH] Revert "feat(ui): support icon-only segmented controls" This reverts commit 2e05fcf52405a6b558ab8f5a814192706206e473. --- apps/desktop/DESIGN.md | 3 +- .../components/ui/segmented-control.test.tsx | 51 ------------------- .../src/components/ui/segmented-control.tsx | 14 ++--- 3 files changed, 4 insertions(+), 64 deletions(-) delete mode 100644 apps/desktop/src/components/ui/segmented-control.test.tsx diff --git a/apps/desktop/DESIGN.md b/apps/desktop/DESIGN.md index ed32a81e88..45c4da7cd6 100644 --- a/apps/desktop/DESIGN.md +++ b/apps/desktop/DESIGN.md @@ -231,8 +231,7 @@ blurred backdrop. Empty lists hide their search field. - **`SegmentedControl`** — the choice control for small mutually-exclusive sets (color mode, tool-call display, usage period). Replaces radio piles and - pill rows. `iconOnly` renders compact icon buttons with label tooltips and - accessible names; use `codiconIcon()` for Codicon options. + pill rows. - **`Switch`** (`size="xs"`) — bare, with `aria-label`. No bordered text wrapper. - **`FanMenu`** (`src/components/ui/fan-menu.tsx`) — one hub control that fans sibling toggles out on hover: `direction` `vertical` | `horizontal` diff --git a/apps/desktop/src/components/ui/segmented-control.test.tsx b/apps/desktop/src/components/ui/segmented-control.test.tsx deleted file mode 100644 index 110acbe9fa..0000000000 --- a/apps/desktop/src/components/ui/segmented-control.test.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { cleanup, fireEvent, render, screen } from '@testing-library/react' -import { afterEach, describe, expect, it, vi } from 'vitest' - -import { codiconIcon } from './codicon' -import { SegmentedControl } from './segmented-control' - -const options = [ - { id: 'list', label: 'List view', icon: codiconIcon('list-unordered') }, - { id: 'cards', label: 'Card view', icon: codiconIcon('extensions') } -] - -afterEach(cleanup) - -describe('SegmentedControl', () => { - it('preserves visible labels by default', () => { - render() - - expect(screen.getByRole('button', { name: 'Card view', pressed: true }).textContent).toBe('Card view') - expect(screen.getByRole('button', { name: 'List view', pressed: false }).textContent).toBe('List view') - }) - - it('keeps accessible labels and selection behavior for icon-only controls', () => { - const onChange = vi.fn() - render() - const list = screen.getByRole('button', { name: 'List view', pressed: false }) - const cards = screen.getByRole('button', { name: 'Card view', pressed: true }) - - expect(list.textContent).toBe('') - expect(cards.textContent).toBe('') - expect(list.querySelector('.codicon-list-unordered')).not.toBeNull() - expect(cards.querySelector('.codicon-extensions')).not.toBeNull() - fireEvent.click(list) - expect(onChange).toHaveBeenCalledExactlyOnceWith('list') - }) - - it('retains a visible label when an icon-only option has no icon', () => { - render() - - expect(screen.getByRole('button', { name: 'List view' }).textContent).toBe('List view') - }) - - it('does not change a disabled icon-only control', () => { - const onChange = vi.fn() - render() - const list = screen.getByRole('button', { name: 'List view' }) - - expect(list.disabled).toBe(true) - fireEvent.click(list) - expect(onChange).not.toHaveBeenCalled() - }) -}) diff --git a/apps/desktop/src/components/ui/segmented-control.tsx b/apps/desktop/src/components/ui/segmented-control.tsx index 4e5a9e625a..45c854ecf2 100644 --- a/apps/desktop/src/components/ui/segmented-control.tsx +++ b/apps/desktop/src/components/ui/segmented-control.tsx @@ -1,4 +1,3 @@ -import { Tip } from '@/components/ui/tooltip' import type { IconComponent } from '@/lib/icons' import { cn } from '@/lib/utils' @@ -13,8 +12,6 @@ interface SegmentedControlProps { value: T onChange: (id: T) => void className?: string - /** Icon buttons retain localized labels for tooltips and screen readers. */ - iconOnly?: boolean /** Dims the whole track and blocks selection (e.g. gated behind a prerequisite). */ disabled?: boolean } @@ -27,7 +24,6 @@ interface SegmentedControlProps { export function SegmentedControl({ className, disabled = false, - iconOnly = false, onChange, options, value @@ -43,14 +39,12 @@ export function SegmentedControl({ {options.map(({ id, label, icon: Icon }) => { const active = value === id - const button = ( + return ( ) - - return iconOnly && Icon ? {button} : button })} )