diff --git a/src/components/SwitchButtonGroup.tsx b/src/components/SwitchButtonGroup.tsx index c46a6f1..06f5703 100644 --- a/src/components/SwitchButtonGroup.tsx +++ b/src/components/SwitchButtonGroup.tsx @@ -23,10 +23,12 @@ const SIZE_CLASSES = { large: 'text-base h-11 px-4 py-2 rounded-lg', } as const; +const INTERACTIVE_CLASSES = + 'active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted'; + const SELECTED_CLASSES = - 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95 hover:shadow-md active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted'; -const UNSELECTED_CLASSES = - 'hover:bg-background/50 hover:text-foreground/80 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted'; + 'bg-background text-foreground shadow-sm font-semibold hover:bg-background hover:text-foreground'; +const UNSELECTED_CLASSES = 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'; export default function SwitchButtonGroup({ value, @@ -39,7 +41,7 @@ export default function SwitchButtonGroup({ return (
({ className={cn( 'flex-1 transition-all', SIZE_CLASSES[size], + INTERACTIVE_CLASSES, value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES, )} > diff --git a/src/components/__tests__/SwitchButtonGroup.test.tsx b/src/components/__tests__/SwitchButtonGroup.test.tsx index de0492b..1a59c96 100644 --- a/src/components/__tests__/SwitchButtonGroup.test.tsx +++ b/src/components/__tests__/SwitchButtonGroup.test.tsx @@ -22,7 +22,7 @@ describe('SwitchButtonGroup 组件', () => { const buttonB = screen.getByRole('button', { name: /选项B/i }); expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm'); - expect(buttonB).toHaveClass('hover:bg-background/50'); + expect(buttonB).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground'); }); it('点击未选中按钮时应触发 onChange 并传入选中值', () => { @@ -34,11 +34,12 @@ describe('SwitchButtonGroup 组件', () => { expect(handleChange).toHaveBeenCalledWith('b'); }); - it('点击已选中按钮时不应触发 onChange', () => { + it('点击已选中按钮时仍会触发 onChange 并传回原值', () => { const handleChange = vi.fn(); render(); fireEvent.click(screen.getByRole('button', { name: /选项A/i })); + expect(handleChange).toHaveBeenCalledTimes(1); expect(handleChange).toHaveBeenCalledWith('a'); }); @@ -58,13 +59,6 @@ describe('SwitchButtonGroup 组件', () => { expect(button).toHaveClass('text-xs'); }); - it('应支持 buttonSx 自定义按钮样式', () => { - render(); - - const button = screen.getByRole('button', { name: /选项A/i }); - expect(button).toBeInTheDocument(); - }); - it('应支持 ReactNode 类型的 label', () => { const nodeOptions = [{ value: 'x', label: 自定义 }]; render(); @@ -72,20 +66,6 @@ describe('SwitchButtonGroup 组件', () => { expect(screen.getByTestId('custom-label')).toBeInTheDocument(); }); - it('默认按钮样式应禁止文字换行', () => { - render(); - - const button = screen.getByRole('button', { name: /选项A/i }); - expect(button).toHaveClass('whitespace-nowrap'); - }); - - it('buttonSx 传入时应覆盖默认换行样式', () => { - render(); - - const button = screen.getByRole('button', { name: /选项A/i }); - expect(button).toBeInTheDocument(); - }); - describe('number 类型支持', () => { const numberOptions = [ { value: 2, label: '2' }, @@ -105,7 +85,7 @@ describe('SwitchButtonGroup 组件', () => { const button2 = screen.getByRole('button', { name: /^2$/i }); const button4 = screen.getByRole('button', { name: /^4$/i }); - expect(button2).toHaveClass('hover:bg-background/50'); + expect(button2).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground'); expect(button4).toHaveClass('bg-background', 'text-foreground', 'shadow-sm'); });