Skip to content

Commit

Permalink
BREAKING CHANGE(web): Set Stack default spacing to zero #DS-741
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@crishpeen @literat
crishpeen authored and literat committed Jul 21, 2023
1 parent ab62f78 commit 27deefc
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 142 deletions.
6 changes: 1 addition & 5 deletions packages/web/src/scss/components/Stack/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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.

Expand Down
9 changes: 0 additions & 9 deletions packages/web/src/scss/components/Stack/_Stack.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
}
3 changes: 0 additions & 3 deletions packages/web/src/scss/components/Stack/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
221 changes: 96 additions & 125 deletions packages/web/src/scss/components/Stack/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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 }}

0 comments on commit 27deefc

Please sign in to comment.