-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Open
Description
HeroUI Version
@heroui/react@2.8.8
Describe the bug
After upgrading from @heroui/react@2.8.7 to @heroui/react@2.8.8, compoundVariants classes defined via extendVariants are no longer applied to the rendered component.
This appears to be a regression introduced by the fix for #5778. The fix in 2.8.8 changed how extendVariants handles the as prop internally, which causes the base component (e.g., HeroUI Button) to be bypassed when compoundVariants classes should be merged.
Downgrading to 2.8.7 resolves the issue.
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
- Create a custom Button using
extendVariantswithcompoundVariants:
import { extendVariants, Button as HerouiButton } from '@heroui/react';
const CustomButton = extendVariants(HerouiButton, {
variants: {
variant: {
solid: '',
shadow: '',
ghost: '',
},
},
defaultVariants: {
color: 'primary',
variant: 'solid',
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
className: 'bg-gradient-to-r from-blue-500 to-green-500',
},
{
color: 'primary',
variant: 'shadow',
className: 'bg-gradient-to-r from-blue-500 to-green-500',
},
{
color: 'primary',
variant: 'ghost',
className: 'hover:bg-gradient-to-r from-blue-500 to-green-500',
},
],
});- Use the component:
<CustomButton variant="solid">Click me</CustomButton>- With
@heroui/react@2.8.7: the gradient classes fromcompoundVariantsare applied correctly. - With
@heroui/react@2.8.8: the gradient classes are not applied, and the button loses its custom styling (size, background color, etc. may also be affected).
Expected behavior
compoundVariants classes defined in extendVariants should be applied to the rendered component, as they were in 2.8.7 and earlier versions.
Screenshots or Videos
| 2.8.8 (broken) | 2.8.7 (working) |
|---|---|
Operating System Version
macOS
Browser
Chrome
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels