From 27deefce38c5c49a59a92e0f8843cf0cc0e2a553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 29 Jun 2023 15:16:03 +0200
Subject: [PATCH] BREAKING CHANGE(web): Set `Stack` default spacing to zero
 #DS-741
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the feature class which enabled this behaviour.

 ## Migration Guide

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

- `<ul class="Stack" …>` → `<ul class="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.
---
 .../web/src/scss/components/Stack/README.md   |   6 +-
 .../web/src/scss/components/Stack/_Stack.scss |   9 -
 .../web/src/scss/components/Stack/_theme.scss |   3 -
 .../web/src/scss/components/Stack/index.html  | 221 ++++++++----------
 4 files changed, 97 insertions(+), 142 deletions(-)

diff --git a/packages/web/src/scss/components/Stack/README.md b/packages/web/src/scss/components/Stack/README.md
index c9acd957d2..bf530be9f2 100644
--- a/packages/web/src/scss/components/Stack/README.md
+++ b/packages/web/src/scss/components/Stack/README.md
@@ -9,7 +9,7 @@ Stack is a component that allows you to compose elements vertically.
 Usage with form fields:
 
 ```html
-<div class="Stack">
+<div class="Stack Stack--hasSpacing">
   <div class="TextField">
     <label for="textfieldStack1" class="TextField__label TextField__label--required">Label</label>
     <input type="text" id="textfieldStack1" class="TextField__input" placeholder="Placeholder" />
@@ -45,10 +45,6 @@ Otherwise, the applied spacing via vertical padding could break the visual view
 
 ### Spacing between items
 
-⚠ **DEPRECATED:** Be aware that the `Stack` component will have no default spacing between its descendants with the next major version.
-The spacing between items will be set via `Stack--hasSpacing`.
-Use the feature flag class `spirit-v1-stack-no-default-gap` that has been prepared for the temporary usage to achieve upcoming default behaviour and prevent breaking change.
-
 👉 The vertical spacing between items is applied via `Stack--hasSpacing`. The size corresponds with the value of the design token `$space-600`.
 In case you need another spacing, please use utility classes or add custom-defined styles to the direct descendants.
 
diff --git a/packages/web/src/scss/components/Stack/_Stack.scss b/packages/web/src/scss/components/Stack/_Stack.scss
index b3fc85b591..51dd9424d0 100644
--- a/packages/web/src/scss/components/Stack/_Stack.scss
+++ b/packages/web/src/scss/components/Stack/_Stack.scss
@@ -1,12 +1,8 @@
-// 1. Enable a new approach for creating spacing of the component using `spirit-v1-stack-no-default-gap` on the root element, eg. body, together with `Stack--hasSpacing`.
-//    This will be removed in major release and the new spacing will be the default.
-
 @use 'sass:math';
 @use 'theme';
 
 .Stack {
     display: grid;
-    gap: theme.$gap;
     padding-left: 0;
     margin-block: 0;
     list-style: none;
@@ -62,8 +58,3 @@
 .Stack--hasSpacing.Stack--hasEndDivider > :last-child {
     padding-block-end: theme.$padding-block;
 }
-
-// 1.
-:where(.spirit-v1-stack-no-default-gap) .Stack {
-    gap: 0;
-}
diff --git a/packages/web/src/scss/components/Stack/_theme.scss b/packages/web/src/scss/components/Stack/_theme.scss
index 7dc65f5fda..923161a4c2 100644
--- a/packages/web/src/scss/components/Stack/_theme.scss
+++ b/packages/web/src/scss/components/Stack/_theme.scss
@@ -2,6 +2,3 @@
 
 $border: tokens.$border-width-100 tokens.$border-style-100 tokens.$border-secondary-default;
 $padding-block: tokens.$space-600;
-
-// @deprecated Will be removed in next major version.
-$gap: tokens.$space-600;
diff --git a/packages/web/src/scss/components/Stack/index.html b/packages/web/src/scss/components/Stack/index.html
index f510573558..4c727acd50 100644
--- a/packages/web/src/scss/components/Stack/index.html
+++ b/packages/web/src/scss/components/Stack/index.html
@@ -4,7 +4,7 @@
 
     <h2 class="docs-Heading">Stacked Form Fields</h2>
 
-    <div class="Stack">
+    <div class="Stack Stack--hasSpacing">
       <div class="TextField">
         <label for="textfieldStack1" class="TextField__label TextField__label--required">Label</label>
         <input type="text" id="textfieldStack1" class="TextField__input" placeholder="Placeholder" />
@@ -41,129 +41,100 @@ <h2 class="docs-Heading">Stacked Blocks</h2>
 
   </section>
 
-  <div class="spirit-v1-stack-no-default-gap">
-    <h2 class="docs-Heading">V1 Feature &mdash; extended Stack</h2>
-
-    <section class="docs-Section">
-
-      <h3 class="docs-Heading">Stacked Blocks</h3>
-
-      <ul class="Stack">
-        <li>
-          <div class="docs-Box">
-            Block 1
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 2
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 3
-          </div>
-        </li>
-      </ul>
-
-    </section>
-
-    <section class="docs-Section">
-
-      <h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
-
-      <ul class="Stack Stack--hasSpacing">
-        <li>
-          <div class="docs-Box">
-            Block 1
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 2
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 3
-          </div>
-        </li>
-      </ul>
-
-    </section>
-
-    <section class="docs-Section">
-
-      <h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
-
-      <ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
-        <li>
-          <div class="docs-Box">
-            Block 1
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 2
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 3
-          </div>
-        </li>
-      </ul>
-
-    </section>
-
-    <section class="docs-Section">
-
-      <h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
-
-      <ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
-        <li>
-          <div class="docs-Box">
-            Block 1
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 2
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 3
-          </div>
-        </li>
-      </ul>
-
-    </section>
-
-    <section class="docs-Section">
-
-      <h3 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h3>
-
-      <ul class="Stack Stack--hasIntermediateDividers">
-        <li>
-          <div class="docs-Box">
-            Block 1
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 2
-          </div>
-        </li>
-        <li>
-          <div class="docs-Box">
-            Block 3
-          </div>
-        </li>
-      </ul>
-
-    </section>
-
-  </div>
+<section class="docs-Section">
+
+  <h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
+
+  <ul class="Stack Stack--hasSpacing">
+    <li>
+      <div class="docs-Box">
+        Block 1
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 2
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 3
+      </div>
+    </li>
+  </ul>
+
+</section>
+
+<section class="docs-Section">
+
+  <h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
+
+  <ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
+    <li>
+      <div class="docs-Box">
+        Block 1
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 2
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 3
+      </div>
+    </li>
+  </ul>
+
+</section>
+
+<section class="docs-Section">
+
+  <h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
+
+  <ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
+    <li>
+      <div class="docs-Box">
+        Block 1
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 2
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 3
+      </div>
+    </li>
+  </ul>
+
+</section>
+
+<section class="docs-Section">
+
+  <h3 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h3>
+
+  <ul class="Stack Stack--hasIntermediateDividers">
+    <li>
+      <div class="docs-Box">
+        Block 1
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 2
+      </div>
+    </li>
+    <li>
+      <div class="docs-Box">
+        Block 3
+      </div>
+    </li>
+  </ul>
+
+</section>
 
 {{/layout/plain }}