Skip to main content
Question

Number variables (width, height, gap...) not working with variants and instances

Riccardo_Marconato

I created a component with 3 variants: desktop, tablet, and mobile, each having different number variables for their respective widths: desktop-width (1440px), tablet-width (850px), and mobile-width (390px).

I assigned desktop-width to the desktop variant, tablet-width to the tablet variant, and mobile-width to the mobile variant.

However, when I switch from the desktop instance to the tablet instance, the width remains at 1440px instead of changing to 850px, which should correspond to the tablet-width.

I have checked the width, and it still reflects desktop-width (1440px) even though it should show tablet-width (850px). Is this a bug in the system, or am I doing something wrong?

This topic has been closed for comments

2 replies

maria.perlovskaya

I have a similar issue: I have 4 variants of a button in a component of different sizes, the size is regulated by internal padding, and they are different for each option.

When I changed the paddings from assigned values to numbered variables, different indents were no longer applied in the copy of the component when the variant was changed by the Size prop.

Now, depending on which option I copy, when I change its size through the prop, its padding value are saved: if I changed the button 56 to the button 48, then both will have a padding of 16px (the value from the first 56-height variant), and if I changed the button is 32 to the button 56, both will have a 6px padding (the value from the first 32-height variant)

Screenshot 2023-08-29 at 17.15.52

Adam_UX
  • Adam_UX
  • 5 replies
  • August 29, 2023

I also have this problem. Instances have the wrong variable when switching

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings