opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-07 16:23:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): align form control focus rings (#37069)

Browse Source
This commit is contained in:
yyh 2026-06-04 22:12:28 +08:00 committed by GitHub
parent 0bfbd2061e
commit a8f009a965
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/dify-ui/src/checkbox/__tests__/index.spec.tsx
View File

@ -17,6 +17,7 @@ describe('Checkbox', () => {
await expect.element(checkbox).toHaveAttribute('data-unchecked', '')
await expect.element(checkbox).not.toHaveAttribute('data-checked')
await expect.element(checkbox).not.toHaveAttribute('data-indeterminate')
await expect.element(checkbox).toHaveClass('focus-visible:ring-2', 'focus-visible:ring-components-input-border-hover')
})
it('should expose checked data attributes and icon styling hooks', async () => {

2
packages/dify-ui/src/checkbox/index.tsx
View File

@ -9,7 +9,7 @@ const checkboxRootClassName = cn(
'inline-flex size-4 shrink-0 touch-manipulation items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3 transition-colors motion-reduce:transition-none',
'border border-components-checkbox-border bg-components-checkbox-bg-unchecked text-components-checkbox-icon',
'hover:border-components-checkbox-border-hover hover:bg-components-checkbox-bg-unchecked-hover',
'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-checkbox-bg focus-visible:ring-offset-0',
'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-input-border-hover focus-visible:ring-offset-0',
'data-checked:border-transparent data-checked:bg-components-checkbox-bg data-checked:hover:bg-components-checkbox-bg-hover',
'data-indeterminate:border-transparent data-indeterminate:bg-components-checkbox-bg data-indeterminate:hover:bg-components-checkbox-bg-hover',
'data-disabled:cursor-not-allowed data-disabled:border-components-checkbox-border-disabled data-disabled:bg-components-checkbox-bg-disabled',

11
packages/dify-ui/src/slider/__tests__/index.spec.tsx
View File

@ -80,6 +80,17 @@ describe('Slider', () => {
expect(screen.container.querySelector('.outer-test')).toBeInTheDocument()
})
it('should expose focus-visible ring styles on the thumb wrapper', async () => {
const screen = await render(<Slider value={10} onValueChange={vi.fn()} aria-label="Value" />)
const thumb = screen.getByLabelText('Value').element().parentElement
expect(thumb).toHaveClass(
'has-[:focus-visible]:ring-2',
'has-[:focus-visible]:ring-components-input-border-hover',
)
})
it('should not render prehydration script tags', async () => {
const screen = await render(<Slider value={10} onValueChange={vi.fn()} aria-label="Value" />)

2
packages/dify-ui/src/slider/index.tsx
View File

@ -73,7 +73,7 @@ const sliderThumbClassName = cn(
'border-components-slider-knob-border bg-components-slider-knob shadow-sm',
'transition-[background-color,border-color,box-shadow,opacity] motion-reduce:transition-none',
'hover:bg-components-slider-knob-hover',
'focus-visible:ring-2 focus-visible:ring-components-slider-knob-border-hover focus-visible:ring-offset-0 focus-visible:outline-hidden',
'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-components-input-border-hover has-[:focus-visible]:ring-offset-0',
'active:shadow-md',
'group-data-disabled/slider:border-components-slider-knob-border group-data-disabled/slider:bg-components-slider-knob-disabled group-data-disabled/slider:shadow-none',
)