BREAKING CHANGE(web-twig): Set Stack default spacing to zero #DS-741

The feature class enabling this behavior was removed.

Improved demos.

 ## Migration Guide

If you need the `Stack` to have a spacing, add
`hasSpacing` prop. By default, `Stack` has zero
inner spacing.

- `<Stack …>` → `<Stack hasSpacing …>`

If you already used the feature class, you can remove it
and don't need to do any other changes.

Please refer back to this guide or reach out to our team
if you encounter any issues during migration.

packages/web-twig/src/Resources/components/Stack/Stack.stories.twig

@@ -2,29 +2,40 @@
 
 {% block content %}
 
-{# Stack Form Fields #}
-{% include '@components/Stack/stories/StackFormFields.twig' %}
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Stacked Form Fields</h2>
 
-{# Stack Blocks #}
-{% include '@components/Stack/stories/StackBlocks.twig' %}
+        {% include '@components/Stack/stories/StackFormFields.twig' %}
+    </section>
 
-<div class="spirit-v1-stack-no-default-gap">
-    <h2 class="docs-Heading">Feature flag <code>spirit-v1-stack-no-default-gap</code></h2>
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Stacked Blocks</h2>
 
-    {# Stack Blocks with `spirit-v1-stack-no-default-gap` #}
-    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocks.twig' %}
+        {% include '@components/Stack/stories/StackBlocks.twig' %}
+    </section>
 
-    {# Stack Blocks with `spirit-v1-stack-no-default-gap` and Vertical Spacing #}
-    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithVerticalSpacing.twig' %}
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Stacked Blocks with Vertical Spacing</h2>
 
-    {# Stack Blocks with `spirit-v1-stack-no-default-gap`, Inner Dividers and Vertical Spacing #}
-    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersAndVerticalSpacing.twig' %}
+        {% include '@components/Stack/stories/StackBlocksWithVerticalSpacing.twig' %}
+    </section>
 
-    {# Stack Blocks with `spirit-v1-stack-no-default-gap`, Inner and Outer Dividers and Vertical Spacing #}
-    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig' %}
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h2>
 
-    {# Stack Blocks with `spirit-v1-stack-no-default-gap`, Inner Dividers without Vertical Spacing #}
-    {% include '@components/Stack/stories/StackV1NoDefaultGapBlocksWithInnerDividersWithoutVerticalSpacing.twig' %}
-</div>
+        {% include '@components/Stack/stories/StackBlocksWithInnerDividersAndVerticalSpacing.twig' %}
+    </section>
+
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h2>
+
+        {% include '@components/Stack/stories/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig' %}
+    </section>
+
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h2>
+
+        {% include '@components/Stack/stories/StackBlocksWithInnerDividersWithoutVerticalSpacing.twig' %}
+    </section>
 
 {% endblock %}

packages/web-twig/src/Resources/components/Stack/stories/StackBlocks.twig

@@ -1,15 +1,9 @@
-<section class="docs-Section">
-
-    <h2 class="docs-Heading">Stacked Blocks</h2>
-
-    <Stack elementType="ul">
-        {% for i in 1..3 %}
-            <li>
-                <div class="docs-Box">
-                    Block {{ i }}
-                </div>
-            </li>
-        {% endfor %}
-    </Stack>
-
-</section>
+<Stack elementType="ul">
+    {% for i in 1..3 %}
+        <li>
+            <div class="docs-Box">
+                Block {{ i }}
+            </div>
+        </li>
+    {% endfor %}
+</Stack>

packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.twig

@@ -0,0 +1,9 @@
+<Stack elementType="ul" hasSpacing hasIntermediateDividers hasStartDivider hasEndDivider>
+    {% for i in 1..3 %}
+        <li>
+            <div class="docs-Box">
+                Block {{ i }}
+            </div>
+        </li>
+    {% endfor %}
+</Stack>

packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithInnerDividersAndVerticalSpacing.twig

@@ -0,0 +1,9 @@
+<Stack elementType="ul" hasSpacing hasIntermediateDividers>
+    {% for i in 1..3 %}
+        <li>
+            <div class="docs-Box">
+                Block {{ i }}
+            </div>
+        </li>
+    {% endfor %}
+</Stack>

packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithInnerDividersWithoutVerticalSpacing.twig

@@ -0,0 +1,9 @@
+<Stack elementType="ul" hasIntermediateDividers>
+    {% for i in 1..3 %}
+        <li>
+            <div class="docs-Box">
+                Block {{ i }}
+            </div>
+        </li>
+    {% endfor %}
+</Stack>

packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithVerticalSpacing.twig

@@ -0,0 +1,9 @@
+<Stack elementType="ul" hasSpacing>
+    {% for i in 1..3 %}
+        <li>
+            <div class="docs-Box">
+                Block {{ i }}
+            </div>
+        </li>
+    {% endfor %}
+</Stack>

packages/web-twig/src/Resources/components/Stack/stories/StackFormFields.twig

@@ -1,10 +1,4 @@
-<section class="docs-Section">
-
-    <h2 class="docs-Heading">Stacked Form Fields</h2>
-
-    <Stack>
-        <TextField id="textfieldStack1" label="Label" name="textfieldStack1" placeholder="Placeholder" isRequired />
-        <TextField id="textfieldStack2" label="Label" name="textfieldStack2" placeholder="Placeholder" isRequired />
-    </Stack>
-
-</section>
+<Stack hasSpacing>
+    <TextField id="textfieldStack1" label="Label" name="textfieldStack1" placeholder="Placeholder" isRequired />
+    <TextField id="textfieldStack2" label="Label" name="textfieldStack2" placeholder="Placeholder" isRequired />
+</Stack>