Issue with hover state of an interactive component instance (button) inside an instance of another component

Question

Hi all,
I have come across some unexpected behaviour when I am trying to use an instance of my Button component inside another component. My Button component consists of an Icon Wrapper to adjust the size of the icon as suggested by @Ridd in the past. When I change the icon using the Swap Icon property and try to hover over the button, the icon seems to not preserve the color. I have kept the nomenclature the same for all icons.
This is the structure I am following -

Please check the GIF below to understand the issue better -

I am scratching my head for the past couple of days over this issue, but can’t seem to understand the problem. I have created a Figma file as a sample and would really appreciate any help on this -
Figma – 28 Mar 23

Thanks in advance!

tank666 · Accepted Answer

Vector fill color (nested component) doesn't change back to the one specified in the default variant after interaction Interactive Components        Pay attention to the order of the layers. For the color override to work correctly, you need to adhere to the following structure: Union > Icon Instance > Vector. Union — to color override;Icon Instance — to swap icons.I edited your file and now it works as expected. You may notice that I used a structure like this: .base-icon > Union > Icon Instance > Vector. This is done to keep the icon at its original size. If you don’t use .base-icon, the icon will be resized due to Union. Design fil…

Harshesh_Sayani2 · Answer

Hi Yury, this helped us. I really appreciate your help, thank you!

Sign up

Login with SSO

Login to the community

Login with SSO