Skip to content

Commit 27deefc

Browse files
crishpeenliterat
crishpeen
authored and
literat
committed
BREAKING CHANGE(web): Set Stack default spacing to zero #DS-741
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.
1 parent ab62f78 commit 27deefc

File tree

4 files changed

+97
-142
lines changed

4 files changed

+97
-142
lines changed

‎packages/web/src/scss/components/Stack/README.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Stack is a component that allows you to compose elements vertically.
99
Usage with form fields:
1010

1111
```html
12-
<div class="Stack">
12+
<div class="Stack Stack--hasSpacing">
1313
<div class="TextField">
1414
<label for="textfieldStack1" class="TextField__label TextField__label--required">Label</label>
1515
<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
4545

4646
### Spacing between items
4747

48-
⚠ **DEPRECATED:** Be aware that the `Stack` component will have no default spacing between its descendants with the next major version.
49-
The spacing between items will be set via `Stack--hasSpacing`.
50-
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.
51-
5248
👉 The vertical spacing between items is applied via `Stack--hasSpacing`. The size corresponds with the value of the design token `$space-600`.
5349
In case you need another spacing, please use utility classes or add custom-defined styles to the direct descendants.
5450

‎packages/web/src/scss/components/Stack/_Stack.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
// 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`.
2-
// This will be removed in major release and the new spacing will be the default.
3-
41
@use 'sass:math';
52
@use 'theme';
63

74
.Stack {
85
display: grid;
9-
gap: theme.$gap;
106
padding-left: 0;
117
margin-block: 0;
128
list-style: none;
@@ -62,8 +58,3 @@
6258
.Stack--hasSpacing.Stack--hasEndDivider > :last-child {
6359
padding-block-end: theme.$padding-block;
6460
}
65-
66-
// 1.
67-
:where(.spirit-v1-stack-no-default-gap) .Stack {
68-
gap: 0;
69-
}

‎packages/web/src/scss/components/Stack/_theme.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,3 @@
22

33
$border: tokens.$border-width-100 tokens.$border-style-100 tokens.$border-secondary-default;
44
$padding-block: tokens.$space-600;
5-
6-
// @deprecated Will be removed in next major version.
7-
$gap: tokens.$space-600;

‎packages/web/src/scss/components/Stack/index.html‎

Lines changed: 96 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<h2 class="docs-Heading">Stacked Form Fields</h2>
66

7-
<div class="Stack">
7+
<div class="Stack Stack--hasSpacing">
88
<div class="TextField">
99
<label for="textfieldStack1" class="TextField__label TextField__label--required">Label</label>
1010
<input type="text" id="textfieldStack1" class="TextField__input" placeholder="Placeholder" />
@@ -41,129 +41,100 @@ <h2 class="docs-Heading">Stacked Blocks</h2>
4141

4242
</section>
4343

44-
<div class="spirit-v1-stack-no-default-gap">
45-
<h2 class="docs-Heading">V1 Feature &mdash; extended Stack</h2>
46-
47-
<section class="docs-Section">
48-
49-
<h3 class="docs-Heading">Stacked Blocks</h3>
50-
51-
<ul class="Stack">
52-
<li>
53-
<div class="docs-Box">
54-
Block 1
55-
</div>
56-
</li>
57-
<li>
58-
<div class="docs-Box">
59-
Block 2
60-
</div>
61-
</li>
62-
<li>
63-
<div class="docs-Box">
64-
Block 3
65-
</div>
66-
</li>
67-
</ul>
68-
69-
</section>
70-
71-
<section class="docs-Section">
72-
73-
<h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
74-
75-
<ul class="Stack Stack--hasSpacing">
76-
<li>
77-
<div class="docs-Box">
78-
Block 1
79-
</div>
80-
</li>
81-
<li>
82-
<div class="docs-Box">
83-
Block 2
84-
</div>
85-
</li>
86-
<li>
87-
<div class="docs-Box">
88-
Block 3
89-
</div>
90-
</li>
91-
</ul>
92-
93-
</section>
94-
95-
<section class="docs-Section">
96-
97-
<h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
98-
99-
<ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
100-
<li>
101-
<div class="docs-Box">
102-
Block 1
103-
</div>
104-
</li>
105-
<li>
106-
<div class="docs-Box">
107-
Block 2
108-
</div>
109-
</li>
110-
<li>
111-
<div class="docs-Box">
112-
Block 3
113-
</div>
114-
</li>
115-
</ul>
116-
117-
</section>
118-
119-
<section class="docs-Section">
120-
121-
<h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
122-
123-
<ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
124-
<li>
125-
<div class="docs-Box">
126-
Block 1
127-
</div>
128-
</li>
129-
<li>
130-
<div class="docs-Box">
131-
Block 2
132-
</div>
133-
</li>
134-
<li>
135-
<div class="docs-Box">
136-
Block 3
137-
</div>
138-
</li>
139-
</ul>
140-
141-
</section>
142-
143-
<section class="docs-Section">
144-
145-
<h3 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h3>
146-
147-
<ul class="Stack Stack--hasIntermediateDividers">
148-
<li>
149-
<div class="docs-Box">
150-
Block 1
151-
</div>
152-
</li>
153-
<li>
154-
<div class="docs-Box">
155-
Block 2
156-
</div>
157-
</li>
158-
<li>
159-
<div class="docs-Box">
160-
Block 3
161-
</div>
162-
</li>
163-
</ul>
164-
165-
</section>
166-
167-
</div>
44+
<section class="docs-Section">
45+
46+
<h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
47+
48+
<ul class="Stack Stack--hasSpacing">
49+
<li>
50+
<div class="docs-Box">
51+
Block 1
52+
</div>
53+
</li>
54+
<li>
55+
<div class="docs-Box">
56+
Block 2
57+
</div>
58+
</li>
59+
<li>
60+
<div class="docs-Box">
61+
Block 3
62+
</div>
63+
</li>
64+
</ul>
65+
66+
</section>
67+
68+
<section class="docs-Section">
69+
70+
<h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
71+
72+
<ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
73+
<li>
74+
<div class="docs-Box">
75+
Block 1
76+
</div>
77+
</li>
78+
<li>
79+
<div class="docs-Box">
80+
Block 2
81+
</div>
82+
</li>
83+
<li>
84+
<div class="docs-Box">
85+
Block 3
86+
</div>
87+
</li>
88+
</ul>
89+
90+
</section>
91+
92+
<section class="docs-Section">
93+
94+
<h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
95+
96+
<ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
97+
<li>
98+
<div class="docs-Box">
99+
Block 1
100+
</div>
101+
</li>
102+
<li>
103+
<div class="docs-Box">
104+
Block 2
105+
</div>
106+
</li>
107+
<li>
108+
<div class="docs-Box">
109+
Block 3
110+
</div>
111+
</li>
112+
</ul>
113+
114+
</section>
115+
116+
<section class="docs-Section">
117+
118+
<h3 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h3>
119+
120+
<ul class="Stack Stack--hasIntermediateDividers">
121+
<li>
122+
<div class="docs-Box">
123+
Block 1
124+
</div>
125+
</li>
126+
<li>
127+
<div class="docs-Box">
128+
Block 2
129+
</div>
130+
</li>
131+
<li>
132+
<div class="docs-Box">
133+
Block 3
134+
</div>
135+
</li>
136+
</ul>
137+
138+
</section>
168139

169140
{{/layout/plain }}

0 commit comments

Comments
 (0)