Been stuck with this bug for awhile and I’m not sure what I’m doing wrong. Probably better explained in the GIF below:
Basically I have created menu items (variants for icon only + active states) to put on a menu list (variants for expanded and collapsed). The arrow button would swap the menu list variants.
Here’s the Figma file if anyone’s interested in taking a look. Thank you so much in advance!
But run into the same issue Andrew described: if there’s a hover state on the cell atom component, the segmented controller/toggle molecule component doesn’t work as expected, instead getting stuck in weird states with multiple cells being active.
It only works in the following states, neither desired:
Remove hover states.
Add a molecule component permutation for EVERY hover state.
@Andrew_Q_Tran, your problem is that your collapsed and expanded variants for the menu button are different. The collapsed variant should have the text layer from the expanded variant, but hidden.
@Eduardo_RH, your problem is different from the problem of the author of this topic. Your problem is that Figma preserve states. The solution is very simple—select all cell instances in the Toggle component variants, open the “on click” interaction details and check the “Reset component state” checkbox.