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.
