I’m not sure what the thinking is with the way variant overrides are preserved is, but it seems wrong to me…
Why respect the placeholder stuff from my base component over edits made to the component instances? The whole point of variants seems to be to make swapping styles / states of components easier, but it doesn’t work as far as i can tell?
How would I make my text / nested icon overrides preserve in this use case?
I see there is some internal uncertainty over whether the current approach is right, and lots of people obviously struggling with this.
Am I missing something? Or have the wrong choices been made in the current implementation ?
Reading the docs on this, it feels slightly confusing, but as far as i can tell i’m doing things right, but still unable to achieve the desired result.
Rename your Icon components in the main component to Right/Left or Start/End icons and try again. Figma won’t be able to tell which one you want to keep and will preserve whatever it finds.
Your btn-sm/primary/icon right/default vs. .../secondary/... button component instances have different names. rename that in the Button primary component to e.g. ButtonBase
Here is an editable file i made from scratch, and as simply as possible.
Variant overrides are not preserved as you would expect for the most basic use case - changing the state or type of a button - following best practices
+1 to wishing nested variants would preserve when changing the parent state. I’ve got instances where a nested variant has +20 states and the thought of multiplying that into my parent component is stressful.
For me variant component icons are not honoring color overrides. This is probably a bug I can’t see it being an acceptable implementation exception. The use case is crystal, icon button variant (of buttons) swap icon, icon should still be same color as variant design main.
By the shapes do you mean the vector networks within the icons - its too late for that I have 100’s icons with different vector network names. It’s useful to know this is the controlling factor.
Well, somehow this broke for me throughout this day.
I’m currently working on relatively simple Link and Button components which are each combined to Variants.
When placing a button component into a layout I could change the text and states without any problems. But within the last hour or so this doesn’t seem to work for other components which have the same layer structure and architecture in terms of property and value naming conventions.
Huh… weird.