Feat(web-twig): Stack no longer requires the hasSpacing prop to a…

…pply custom `spacing` #DS-1133 For custom spacing, using the `spacing` prop alone is just fine. The `hasSpacing` prop is still available to quickly apply default spacing.
lmc-eu · Feb 29, 2024 · 75da15b · 75da15b
1 parent c30f353
commit 75da15b
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 24 deletions.
diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md
@@ -51,32 +51,42 @@ Without lexer:
 ## Custom Spacing
 
 You can use the `spacing` prop to apply custom spacing between items. The prop
-accepts either a spacing token (eg. `space-100`) or an object with breakpoint keys and spacing token values.
+accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values.
+
+Default spacing:
 
 ```twig
-<Stack hasSpacing spacing="space-1200">
-  <div>Block 1</div>
-  <div>Block 2</div>
-  <div>Block 3</div>
+<Stack hasSpacing>
+  <!-- Stacked content -->
 </Stack>
+```
 
-<Stack hasSpacing spacing="{{ { mobile: 'space-400', tablet: 'space-800' } }}">
-  <div>Block 1</div>
-  <div>Block 2</div>
-  <div>Block 3</div>
+Custom spacing:
+
+```twig
+<Stack spacing="space-1200">
+  <!-- Stacked content -->
+</Stack>
+```
+
+Custom responsive spacing:
+
+```twig
+<Stack spacing="{{ { mobile: 'space-400', tablet: 'space-800' } }}">
+  <!-- Stacked content -->
 </Stack>
 ```
 
 ## API
 
-| Name                      | Type                          | Default | Required | Description                                                         |
-| ------------------------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------------- |
-| `elementType`             | `string`                      | `div`   | ✕        | Element type of the wrapper element                                 |
-| `hasEndDivider`           | `bool`                        | `false` | ✕        | Render a divider after the last item                                |
-| `hasIntermediateDividers` | `bool`                        | `false` | ✕        | Render dividers between items                                       |
-| `hasSpacing`              | `bool`                        | `false` | ✕        | Apply a spacing between items                                       |
-| `hasStartDivider`         | `bool`                        | `false` | ✕        | Render a divider before the first item                              |
-| `spacing`                 | [`spacing token` \| `object`] | `null`  | ✕        | Custom spacing between items, see [Custom Spacing](#custom-spacing) |
+| Name                      | Type                          | Default | Required | Description                                           |
+| ------------------------- | ----------------------------- | ------- | -------- | ----------------------------------------------------- |
+| `elementType`             | `string`                      | `div`   | ✕        | Element type of the wrapper element                   |
+| `hasEndDivider`           | `bool`                        | `false` | ✕        | Render a divider after the last item                  |
+| `hasIntermediateDividers` | `bool`                        | `false` | ✕        | Render dividers between items                         |
+| `hasSpacing`              | `bool`                        | `false` | ✕        | Apply default spacing between items                   |
+| `hasStartDivider`         | `bool`                        | `false` | ✕        | Render a divider before the first item                |
+| `spacing`                 | [`spacing token` \| `object`] | `null`  | ✕        | Apply [custom spacing](#custom-spacing) between items |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]

diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.twig b/packages/web-twig/src/Resources/components/Stack/Stack.twig
@@ -11,7 +11,7 @@
 {%- set _rootClassName = _spiritClassPrefix ~ 'Stack' -%}
 {%- set _rootBottomDividerClassName = _hasEndDivider ? _spiritClassPrefix ~ 'Stack--hasEndDivider' : null -%}
 {%- set _rootMiddleDividersClassName = _hasIntermediateDividers ? _spiritClassPrefix ~ 'Stack--hasIntermediateDividers' : null -%}
-{%- set _rootSpacingClassName = _hasSpacing ? _spiritClassPrefix ~ 'Stack--hasSpacing' : null -%}
+{%- set _rootSpacingClassName = _hasSpacing or _spacing is not null ? _spiritClassPrefix ~ 'Stack--hasSpacing' : null -%}
 {%- set _rootTopDividerClassName = _hasStartDivider ? _spiritClassPrefix ~ 'Stack--hasStartDivider' : null -%}
 
 {# Miscellaneous #}

diff --git a/packages/web-twig/src/Resources/components/Stack/__tests__/__fixtures__/stackDefault.twig b/packages/web-twig/src/Resources/components/Stack/__tests__/__fixtures__/stackDefault.twig
@@ -25,14 +25,14 @@
 </Stack>
 
 <!-- Render with custom spacing -->
-<Stack hasSpacing spacing="space-1200">
+<Stack spacing="space-1200">
     <div>Block 1</div>
     <div>Block 2</div>
     <div>Block 3</div>
 </Stack>
 
 <!-- Render with custom breakpoint spacing -->
-<Stack hasSpacing spacing="{{ { mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' } }}">
+<Stack spacing="{{ { mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' } }}">
     <div>Block 1</div>
     <div>Block 2</div>
     <div>Block 3</div>

diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig
@@ -1,4 +1,4 @@
-<Stack elementType="ul" hasSpacing spacing="space-1200">
+<Stack elementType="ul" spacing="space-1200">
     {% for i in 1..3 %}
         <li>
             <DocsBox>Block {{ i }}</DocsBox>

diff --git a/...-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig b/...-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig
@@ -1,6 +1,5 @@
 <Stack
     elementType="ul"
-    hasSpacing
     hasStartDivider
     hasEndDivider
     hasIntermediateDividers

diff --git a/...src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingForEachBreakpoint.twig b/...src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingForEachBreakpoint.twig
@@ -1,4 +1,4 @@
-<Stack elementType="ul" hasSpacing spacing="{{ { mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' } }}">
+<Stack elementType="ul" spacing="{{ { mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' } }}">
     {% for i in 1..3 %}
         <li>
             <DocsBox>Block {{ i }}</DocsBox>

diff --git a/.../Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig b/.../Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig
@@ -1,4 +1,4 @@
-<Stack elementType="ul" hasSpacing spacing="{{ { tablet: 'space-1200' } }}">
+<Stack elementType="ul" spacing="{{ { tablet: 'space-1200' } }}">
     {% for i in 1..3 %}
         <li>
             <DocsBox>Block {{ i }}</DocsBox>