mirror of
https://github.com/iflytek/skillhub.git
synced 2026-10-07 02:57:51 +00:00
fix(select): use pointer cursor for expanded options
This commit is contained in:
parent
862328a915
commit
0dea20f4be
2 changed files with 13 additions and 9 deletions
|
|
@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
|
|||
import {
|
||||
SELECT_CONTENT_CLASS_NAME,
|
||||
SELECT_ITEM_CLASS_NAME,
|
||||
SELECT_SCROLL_BUTTON_CLASS_NAME,
|
||||
SELECT_TRIGGER_CLASS_NAME,
|
||||
normalizeSelectValue,
|
||||
} from './select'
|
||||
|
|
@ -31,6 +32,11 @@ describe('shared select contract', () => {
|
|||
expect(SELECT_ITEM_CLASS_NAME).toContain('rounded-md')
|
||||
})
|
||||
|
||||
it('uses pointer cursors for expanded select interactions', () => {
|
||||
expect(SELECT_ITEM_CLASS_NAME).toContain('cursor-pointer')
|
||||
expect(SELECT_SCROLL_BUTTON_CLASS_NAME).toContain('cursor-pointer')
|
||||
})
|
||||
|
||||
it('maps empty and nullish form state to an undefined Radix value', () => {
|
||||
expect(normalizeSelectValue('')).toBeUndefined()
|
||||
expect(normalizeSelectValue(null)).toBeUndefined()
|
||||
|
|
|
|||
|
|
@ -21,10 +21,14 @@ export const SELECT_CONTENT_CLASS_NAME = cn(
|
|||
)
|
||||
|
||||
export const SELECT_ITEM_CLASS_NAME = cn(
|
||||
'relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-8 text-sm outline-none',
|
||||
'relative flex w-full cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-8 text-sm outline-none',
|
||||
'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
|
||||
)
|
||||
|
||||
export const SELECT_SCROLL_BUTTON_CLASS_NAME = cn(
|
||||
'flex cursor-pointer items-center justify-center py-1 text-muted-foreground'
|
||||
)
|
||||
|
||||
export function normalizeSelectValue(value?: string | null) {
|
||||
return typeof value === 'string' && value.length > 0 ? value : undefined
|
||||
}
|
||||
|
|
@ -57,10 +61,7 @@ const SelectScrollUpButton = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-default items-center justify-center py-1 text-muted-foreground',
|
||||
className
|
||||
)}
|
||||
className={cn(SELECT_SCROLL_BUTTON_CLASS_NAME, className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
|
|
@ -75,10 +76,7 @@ const SelectScrollDownButton = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-default items-center justify-center py-1 text-muted-foreground',
|
||||
className
|
||||
)}
|
||||
className={cn(SELECT_SCROLL_BUTTON_CLASS_NAME, className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue