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 -
+
@@ -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 @@

Stacked Form Fields

-
+
@@ -41,129 +41,100 @@

Stacked Blocks

-
-

V1 Feature — extended Stack

- -
- -

Stacked Blocks

- -
    -
  • -
    - Block 1 -
    -
  • -
  • -
    - Block 2 -
    -
  • -
  • -
    - Block 3 -
    -
  • -
- -
- -
- -

Stacked Blocks with Vertical Spacing

- -
    -
  • -
    - Block 1 -
    -
  • -
  • -
    - Block 2 -
    -
  • -
  • -
    - Block 3 -
    -
  • -
- -
- -
- -

Stacked Blocks with Inner Dividers and Vertical Spacing

- -
    -
  • -
    - Block 1 -
    -
  • -
  • -
    - Block 2 -
    -
  • -
  • -
    - Block 3 -
    -
  • -
- -
- -
- -

Stacked Blocks with Inner and Outer Dividers and Vertical Spacing

- -
    -
  • -
    - Block 1 -
    -
  • -
  • -
    - Block 2 -
    -
  • -
  • -
    - Block 3 -
    -
  • -
- -
- -
- -

Stacked Blocks with Inner Dividers without Vertical Spacing

- -
    -
  • -
    - Block 1 -
    -
  • -
  • -
    - Block 2 -
    -
  • -
  • -
    - Block 3 -
    -
  • -
- -
- -
+
+ +

Stacked Blocks with Vertical Spacing

+ +
    +
  • +
    + Block 1 +
    +
  • +
  • +
    + Block 2 +
    +
  • +
  • +
    + Block 3 +
    +
  • +
+ +
+ +
+ +

Stacked Blocks with Inner Dividers and Vertical Spacing

+ +
    +
  • +
    + Block 1 +
    +
  • +
  • +
    + Block 2 +
    +
  • +
  • +
    + Block 3 +
    +
  • +
+ +
+ +
+ +

Stacked Blocks with Inner and Outer Dividers and Vertical Spacing

+ +
    +
  • +
    + Block 1 +
    +
  • +
  • +
    + Block 2 +
    +
  • +
  • +
    + Block 3 +
    +
  • +
+ +
+ +
+ +

Stacked Blocks with Inner Dividers without Vertical Spacing

+ +
    +
  • +
    + Block 1 +
    +
  • +
  • +
    + Block 2 +
    +
  • +
  • +
    + Block 3 +
    +
  • +
+ +
{{/layout/plain }}