Stacks should dynamically shift content in Preview
Create component - + New state (bigger than the default) - Merge the component with another one or another element into a stack -
Preview mode - click the component to change state and the stack doesn't respect padding .
Please note that stacks is a feature that is intended to be used at design time, and does not dynamically shift the stack in preview. I’m going to rewrite this particular request to be more precisely about the latter suggestion.
Stefan Dickerson commented
Yes please! Trees, accordions, progressive disclosure forms, and the like would all come to life without us having to draw up (and wire together) every permutation of open and closed things!
I have the same problem, since the beginning of our project I have some expanding components and it is very important to move the content when the component expands - in design mode it is just perfect, but in preview mode, it isn't.
Cyrill Studer commented
Yes, I would like the stack to update when a component inside it auto-animates to a larger or smaller state!
Absolutely crucial! please add this ASAP. It would help with my workflow immensely and save a ton of time.
Torbjörn Hedberg commented
+1 here as well. Works perfectly in the Design mode so it's a shame it doesn't in Prototype mode.
Brandon Beiler commented
Constantly run into scenarios where this would be insanely helpful. +1
Gabriel Häggebrink commented
+1 Here! Missing this virtually every project I do, would be an amazing addition.
When I launch a preview of a page including a component whose shape changes (addition of an element in the component) it overflows despite the use of the stack function.
Phil Bowell commented
In the same way that stacks resizes it would be great if screens could resize their height dynamically. This would allow for auto-animating between different component states and the elements around them to move but retain the spacing.
An example would be in a form that works with progressive disclosure based on selecting different answers. Rather than animating between two screens, it could be between two states of a component and the screens responds dynamically.
When you have a lot of vertical content, duplicating artboards to create a dropdown menu requires a lot of effort, especially when each message has an accordion style dropdown menu. It would be nice to have the benefits of Stacks for this behavior.
Expanded/collapsed states are useless as long as preview mode does not adapt to them. A real shame and lost some hours due this particular design...
Since the stack dynamically expands (changes) in design mode, I have spent some time understanding that this does not happen in Preview.
I can understand why people might think this is annoying to have by default, but it could be an additional option when setting up a stack..
Anyways, it would really be incredibly useful to have this behaviour in the preview too.
Florian Pürschel commented
It is so sad that this feature is missing. I have a list with a lot of expanding elements. When changing the state to "expanded" everything adjusts just fine in design mode. Unfortunately it does not adjust in preview which forces me to add 2342346456 additional artboards to present every possible combination of expanded elements. This is really really annoying
I could really use this feature in prototype now. I have a sidebar with a ton of filters where I have expanded/collapsed states. Right now the expanded state in prototype just goes over the other elements.
This wold be a really cool thing to implement. You already to auto-animate so creating a stack that animate should be relatively simple. Let's say you have a stack of expanding components. Then as each component expands, the stack responds and expands as well.
With the new update the stack and scrolling verticaly/horizoontaly.
Create Component -> Repeat Grid -> Ungroup -> Group - > Create Stack ->inside the stack main component -> Create new state (After) -> On after state(Make the space vericaly larger) ->Default to normal state back -> press preview.
Result : Inise Xd Programe, is shows that the component is pushing the stack. When preview mode, doesnt push the stack accordingly.