Overriding colors in nested components for swapped instances

Hello everyone!

I am trying to use the idea of component nesting but have encountered some nuances.

Key aspects:

  • A base (root) component is created which implements the layout details of the component, does not contain any styling;
  • An instance of the root component is created and wrapped in another, parent component, which already implements appearance variations and other properties;

Using the example of a button, I faced the following problem: I created a root (.Root Button) component that implements the layout of the button in different sizes and its children (icon, label). I wrapped this component into another component (Button) and created two button implementations - Default and Accent. The buttons have an icon and an associated property to replace the instance with another icon. When trying to use this button there is no problem exactly until the icon is replaced by another icon and a different size option is selected, in which case the icon colour is not overridden.

On the one hand, I understand the reason for this behaviour, the icon colour is not overridden because the Button component that uses .Root Button in its implementation simply does not have a styling option for other sizes, but the idea of creating the same styling options for different sizes in an inherited component seems like an overly silly idea that nullifies the usefulness of inheritance and still leads to the fact that you have to create literally dozens of variants that do not differ from each other, except for size, which are already implemented in the root component.

In the current implementation, if we need to change the appearance of a state, we just do it in one place, instead of duplicating the same steps for other variants that differ only in size but not in style, just to make the icon colour override work -_-.

I am attaching a reproducible example and would be happy if someone could share their thoughts on this topic and maybe some other approaches to organise components using inheritance, so as not to create thousands of identical variants while maintaining the swapped instance colour override functionality.

Reproducible example.

Hello @DESSADER, Thank you for reaching out! I understand the importance of maintaining the icon color when changing the size.
I appreciate you taking the time to explain the current settings and the reason behind this issue. I also believe that this is an expected behavior.

Although I haven’t found an exact article to help you from our side yet, here are some resources that you might find useful:

I hope you find some insights in these resources.

If any other community members have experienced a similar situation and have insights or workarounds, we would love to hear from you! Please feel free to jump in!

Thanks,

@DESSADER In the past I’ve run into issues with icons+buttons and changing colors and sizes. So I put together an example file on ways I found to fix some of those issues.

For example, in my file I use color modes to change colors of the icons/buttons, but as shown below, even if I overide the icon color, it maintains that new color even after swapping icons and sizes. Hope this helps!

Get example file

1 Like