nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
22.14k stars 1.56k forks source link

[Feature Request] Support slot customizing within compoundVariants #2628

Open vetan2 opened 8 months ago

vetan2 commented 8 months ago

Is your feature request related to a problem? Please describe.

related issue: https://github.com/nextui-org/nextui/issues/1692

Ex) I want to add xl size for Input. So...

import { Input as _Input, extendVariants } from "@nextui-org/react";

export const Input = extendVariants(_Input, {
  variants: {
    size: {
      xl: {
        inputWrapper: "h-unit-14 min-h-unit-14 rounded-large",
        input: "text-large",
        clearButton: "text-large",
      },
    },
  },
});

After looking at style source of Input, I realized that I needed to set multiple compountVariants to get the input to look right.

So I tried:

import { Input as _Input, extendVariants } from "@nextui-org/react";

export const Input = extendVariants(_Input, {
  variants: {
    size: {
      xl: {
        inputWrapper: "h-unit-14 min-h-unit-14 rounded-large",
        input: "text-large",
        clearButton: "text-large",
      },
    },
  },
compoundVariants: [
    {
      radius: "full",
      size: "xl",
      class: {
        inputWrapper: "px-6", // ERROR: Type '{ inputWrapper: string; }' is not assignable to type 'ClassNameValue'.
      },
    }
  ]
});

But type of compoundVariants[number]["class"] cannot be object, I encountered a type error.

In the example above, the px of inputRapper may be trivial, but for the label, the UI is significantly warped.

It would be nice to be able to customize slots within compoundVariants.

Or is there another way to do this that I'm not aware of?

Describe the solution you'd like

import { Input as _Input, extendVariants } from "@nextui-org/react";

export const Input = extendVariants(_Input, {
  variants: {
    size: {
      xl: {
        inputWrapper: "h-unit-14 min-h-unit-14 rounded-large",
        input: "text-large",
        clearButton: "text-large",
      },
    },
  },
compoundVariants: [
    {
      radius: "full",
      size: "xl",
      class: {
        inputWrapper: "px-6", // <--
      },
    }
  ]
});

I expect to be able to customize the slot within compoundVariants.

Describe alternatives you've considered

I can do this:


<Input
  classNames={{
    inputWrapper: "px-6"
  }}
/>

But in my case, I think it's better to use extendVariants.

Screenshots or Videos

No response

linear[bot] commented 8 months ago

ENG-597 [Feature Request] Support slot customizing for compoundVariants

rettimo commented 3 months ago

I have the same problem with any compoundVariants. It just doesn't apply the styles. Any updates on this?

slimshreydy commented 1 month ago

Same issue here -- at least make a note in the docs saying this isn't supported@