Stack component slide transition glitch

[notramo]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

The Stack component uses CSS gap for spacing. It causes a glitch with transition:slide, becase when the element reaches 0 height, gap is still retained, and when it's removed, the gap is suddenly removed without animation.

It can be fixed by replacing gap with margins on child elements. Is it possible to do it on the Stack component?

In which browser(s) did the problem occur?

Other - list in description

Steps To Reproduce

Click a square to remove it.

import { Stack } from '@svelteuidev/core';
<script>
  let items = [1,2,3,4,5,6,7,8,9,10];
  const removeItem = (index) => {
    items.splice(index, 1);
    items = items;
  };
</script>
<Stack spacing="xl">
  {#each items as item, index (item)}
    <div
      transition:slide
      style="height: 50px; background-color: black"
      on:click={removeItem(index)}
    ></div>
  {/each}
</Stack>

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

I would like, but unfortunately there are too few documentation on contributing.

[BeeMargarida]

Hi @notramo! If you would like to contribute a fix for this, we would greatly appreaciate! We have a Contributing guide here and another in our website. If you have any questions you can always ask us here or on discord

[notramo]

@BeeMargarida I couldn't find documentation on how Stitches is used in this project. Could you provide some guidance on where to look for examples?

This fix would involve setting margin-top on direct child components. Is it something that can be solved with Stitches? It requires a > selector.

[BeeMargarida]

We have some examples in this part of the docs and the stitches docs are also really good. So, for example, in the Stack styles, you have the root object, which style the root component of the Stack. If you want to modify the style of it's direct children, with would be something like the code below would work.

root: {
   ....
   '& > *': {
      ...
    }
}

One example where we have similar logic is in the styles for the Group component.

You can use the storybook (run yarn dev) to test out your approach.