Skip to content

[BUG] - extendVariants compoundVariants classes not applied in 2.8.8 (regression from #5778 fix) #6234

@y-kakichi

Description

@y-kakichi

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

  1. Create a custom Button using extendVariants with compoundVariants:
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',
    },
  ],
});
  1. Use the component:
<CustomButton variant="solid">Click me</CustomButton>
  1. With @heroui/react@2.8.7: the gradient classes from compoundVariants are applied correctly.
  2. 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)
broken working

Operating System Version

macOS

Browser

Chrome

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions