I’m creating a menu that has options with different selected states.
One option has no selected state, one option has an icon/text change when selected, and the last two options have colour changes when selected.
To make this all work in an interactive prototype, I created a base “Menu Item” component that has three colour variants – White, Blue, and Red. Each colour variant has three states – Default, Hover, and Active.
I then created three new components to handle the three individual Menu Items that change when selected. All of these components are just an instance of the first component wrapped in a new component, with a variant for the selected state, to be changed to once clicked.
- In the case of the second menu item (Apply Tag), the variant uses the same colour variant of the base component (White) but the text and icon are changed.
- In the case of the third menu item (Interested), the variant uses a different colour variant of the base component (Blue).
- In the case of the fourth menu item (Not interested), the variant uses a different colour variant of the base component (Red).
I then added these all to a Menu component. Here is what it looks like in Figma:
To make both the selected state (parent component) and interactive state (nested component) interactions worked simultaneously, the interactive state interactions are triggered While Hovering and While Pressing, while the selected state interactions are triggered on Mouse Up.
In the prototype, “Apply Tag” successfully changes to “Remove Tag.” However, “Interested” and “Not Interested” do not change to the Blue / Red variant. I can confirm that the Mouse Up interaction is working by having the variant use a different icon, but for some reason the colour does not change.
Here is a link to the prototype.
PS: If I remove the hover interactions on the nested component variants, the colour change works properly. But it’s not like the hover interaction was preventing the Mouse Up interaction from working as evidenced by the icon change…
Does anyone have any idea why this isn’t working properly ?