mirror of
https://github.com/langgenius/dify.git
synced 2026-06-16 22:11:09 +08:00
fix: keep segmented control focus ring inset (#37448)
This commit is contained in:
parent
3fc9f525b7
commit
0c5b3fd0f2
@ -25,7 +25,7 @@ describe('SegmentedControl wrappers', () => {
|
||||
await expect.element(screen.getByRole('button', { name: 'One' })).toHaveClass(
|
||||
'data-pressed:bg-components-segmented-control-item-active-bg',
|
||||
'data-pressed:text-text-accent-light-mode-only',
|
||||
'focus-visible:z-10',
|
||||
'focus-visible:ring-inset',
|
||||
)
|
||||
})
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@ export function SegmentedControlItem<Value extends string = string>({
|
||||
}: SegmentedControlItemProps<Value>) {
|
||||
return (
|
||||
<BaseToggle
|
||||
className={cn('relative flex h-7 min-w-0 touch-manipulation items-center justify-center gap-0.5 overflow-hidden whitespace-nowrap rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium text-text-secondary transition-colors duration-150 hover:bg-state-base-hover hover:text-text-secondary focus-visible:z-10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-pressed:border-components-segmented-control-item-active-border data-pressed:bg-components-segmented-control-item-active-bg data-pressed:text-text-accent-light-mode-only data-pressed:shadow-xs data-pressed:shadow-shadow-shadow-3 data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:text-text-disabled data-disabled:shadow-none data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled motion-reduce:transition-none', className)}
|
||||
className={cn('relative flex h-7 min-w-0 touch-manipulation items-center justify-center gap-0.5 overflow-hidden whitespace-nowrap rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium text-text-secondary transition-colors duration-150 hover:bg-state-base-hover hover:text-text-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset data-pressed:border-components-segmented-control-item-active-border data-pressed:bg-components-segmented-control-item-active-bg data-pressed:text-text-accent-light-mode-only data-pressed:shadow-xs data-pressed:shadow-shadow-shadow-3 data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:text-text-disabled data-disabled:shadow-none data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled motion-reduce:transition-none', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user