fix: state in radix components changed (#6233)

This commit is contained in:
Kamil Kisiela 2024-12-30 14:15:56 +01:00 committed by GitHub
parent c1e0a1e046
commit 7b0c920c57
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 10 additions and 5 deletions

View file

@ -0,0 +1,5 @@
---
'hive': patch
---
Tiny UI fixes

View file

@ -24,7 +24,7 @@ const tabsTriggerVariants = cva('cursor-pointer !appearance-none text-sm font-me
variant: {
default:
'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:shadow-sm disabled:cursor-not-allowed active:disabled:pointer-events-none',
menu: 'text-white radix-state-active:border-b-orange-500 border-b-2 border-b-transparent px-4 py-3 hover:border-b-orange-900',
menu: 'text-white data-[state=active]:border-b-orange-500 border-b-2 border-b-transparent px-4 py-3 hover:border-b-orange-900',
content:
'mb-[-1px] rounded-none border-b first:pl-1 py-1 px-2 text-white data-[state=active]:border-orange-500 data-[state=active]:text-orange-500',
},

View file

@ -14,7 +14,7 @@ export const Radio = ({ children, className, ...props }: RadioGroupItemProps): R
return (
<Item
className={clsx(
'radix-state-checked:border-orange-500 relative overflow-hidden rounded-sm border text-left hover:border-orange-500/50 focus:ring',
'relative overflow-hidden rounded-sm border text-left hover:border-orange-500/50 focus:ring data-[state=checked]:border-orange-500',
className,
)}
{...props}

View file

@ -13,8 +13,8 @@ const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(
'focus-within:ring',
// Register all radix states
'group',
'dark:radix-state-open:bg-gray-900',
'dark:radix-state-on:bg-gray-900',
'dark:data-[state=open]:bg-gray-900',
'dark:data-[state=on]:bg-gray-900',
className,
)}
>

View file

@ -15,7 +15,7 @@ export const Switch = ({ className, disabled, ...props }: SwitchProps): ReactEle
>
<SwitchPrimitive.Thumb
className={clsx(
'radix-state-checked:translate-x-5 radix-state-checked:bg-orange-500 hover:radix-state-checked:border-orange-800 block size-[25px] rounded-full border-2 border-transparent bg-gray-500 transition-all',
'block size-[25px] rounded-full border-2 border-transparent bg-gray-500 transition-all data-[state=checked]:translate-x-5 data-[state=checked]:bg-orange-500 hover:data-[state=checked]:border-orange-800',
!disabled && 'hover:border-gray-700',
)}
/>