As I was building a scrollable list composed by accordions I noticed that stacks ignore component state changes.
- Scroll group
-- Stack group (Vertical 2px distance)
--- Component 1 (Default state) Closed accordion
--- Component 2 (Default state) Closed accordion
--- Component 3 (Default state) Closed accordion
The situation above is the default view of the Scroll group. I have set "Open states" triggered by "Tap" to each of the Components and the accordions expand to display items inside them like this:
--- Component 1 (Open state) Open accordion
---- Option 1
---- Option 2
---- Option 3
I was expecting that the remaining components (Component 2 and 3) would be pushed down with the new state change from (Component 1 vertical growth) and respect the 2px distance set by the stack group, instead they get covered and remain their original position.
I have been trying to figure a work around but without success, I am not sure if I am doing something incorrectly or if this is a known issue.
Thank you for taking the time to help.
Can you share screenshot of your work. That can help
What if you do that without stack option - do it by hand. Will this work for you?
For the time being yes. Requires me to create an artboard for each combination of opened and closed component, but its possible. I really wish Stacks will recognize component states in the future! Thanks for the help.
Update: Stack group will recognize the component states if the stack group is itself the component.
- Stack group (Component)
-- Group 1
-- Group 2
-- Group 3
Setting states to the stack group will respect the stack settings.
This fixed my issue using only 1 artboard.
Your solution of making the stack group a component does not work for me.
The stacking of nested groups responds correctly in the design file, but not in the preview mode.