Nested components do not update state specific overrides when changing states on mother component

Ask the community
, , ,
1

I have two component’s in my prototype.

BUTTON COMPONENT
A typical button with props for state=[resting|hover], text={string} and Icon={string}.
It changes states with “while hovering” interaction and updates it’s state prop from resting to hover.
The hover state has different fill and stroke, so while hovering the button changes design.
Pretty standard button stuff.

SHOW MORE COMPONENT
A section off truncated text that can be expanded to view the full text.
It has props content={string} and state=[open|closed]
The component has a nested BUTTON the user can click on the toggle READ MORE’s state between state=open and state=closed.
Depending on state=[open|closed] the instance of BUTTON will have different values for text and icon, i.g.:

  • expanded=true has button[text="less", icon="minus"]
  • expanded=false has button[text="more", icon="plus"]

THE PROBLEM
In my prototype the BUTTON props are fixed to whatever they were on first render.
BUTTON will not update new values for text or icon when SHOW MORE changes states form open to closed. If I remove the “while hovering” state from BUTTON it works as intended, so my guess its something to do with interactive components inside interactive components.

THINGS I’VE TRIED

  • Resetting component state on change of state in component (no change in behavior)
  • Changing “while hovering” to “on enter”/“on exit” (no change in behavior)
  • Naming BUTTON different things in state=open and state=closed (this fixes the prop issue but breaks the animations)

2

I’d try to name differently some layers inside the button, something like adding Open/ Close to the text layer and icon layer

3

Thank you for the idea!

This works for changing the content but the component will not animate properly (as the button moves with the bottom edge of the content when expanding the read more component).

Workaround so far is to have two buttons in each state, one for open and one for close, than hide/show the one I need depending on state, but it makes the component needlessly complex. There is also a slight catch where the first component added will be the same regardless of name, this is a little confusing to explain over text)

My thought is that it has to do with how Figma handles nested instances, as if you expose the button it will only have 1 value for text/icon at the top layer, so i guess it keeps these.