Stack no longer requires the hasSpacing prop to apply custom spacing #DS-1133

packages/web-react/src/components/Stack/README.md

@@ -31,32 +31,36 @@ Advanced example usage:
 ## 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:
 
 ```jsx
-<Stack hasSpacing spacing="space-1200">
-  <div>Block 1</div>
-  <div>Block 2</div>
-  <div>Block 3</div>
-</Stack>
+<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>
-</Stack>
+Custom spacing:
+
+```jsx
+<Stack spacing="space-1200">{/* Stacked content */}</Stack>
+```
+
+Custom responsive spacing:
+
+```jsx
+<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`                 | [`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | —       | ✕        | 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`                 | [`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | —       | ✕        | 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]

packages/web-react/src/components/Stack/__tests__/Stack.test.tsx

@@ -49,17 +49,15 @@ describe('Stack', () => {
   });
 
   it('should render with custom spacing', () => {
-    const dom = render(<Stack hasSpacing spacing="space-1000" />);
+    const dom = render(<Stack spacing="space-1000" />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Stack--hasSpacing');
     expect(element).toHaveStyle({ '--stack-spacing': 'var(--spirit-space-1000)' });
   });
 
   it('should render with custom spacing for each breakpoint', () => {
-    const dom = render(
-      <Stack hasSpacing spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} />,
-    );
+    const dom = render(<Stack spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Stack--hasSpacing');
@@ -69,7 +67,7 @@ describe('Stack', () => {
   });
 
   it('should render with custom spacing for only one breakpoint', () => {
-    const dom = render(<Stack hasSpacing spacing={{ tablet: 'space-1000' }} />);
+    const dom = render(<Stack spacing={{ tablet: 'space-1000' }} />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Stack--hasSpacing');

packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx

@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacing = () => (
-  <Stack elementType="ul" hasSpacing spacing="space-1200">
+  <Stack elementType="ul" spacing="space-1200">
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-${i}`}>
         <DocsBox>Block {i}</DocsBox>

packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx

@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacingAndDividers = () => (
-  <Stack elementType="ul" hasSpacing hasStartDivider hasEndDivider hasIntermediateDividers spacing="space-800">
+  <Stack elementType="ul" hasStartDivider hasEndDivider hasIntermediateDividers spacing="space-800">
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-dividers-${i}`}>
         <DocsBox>Block {i}</DocsBox>

packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx

@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacingForEachBreakpoint = () => (
-  <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' }}>
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-breakpoints-${i}`}>
         <DocsBox>Block {i}</DocsBox>

packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx

@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacingFromTabletBreakpoint = () => (
-  <Stack elementType="ul" hasSpacing spacing={{ tablet: 'space-1200' }}>
+  <Stack elementType="ul" spacing={{ tablet: 'space-1200' }}>
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-tablet-${i}`}>
         <DocsBox>Block {i}</DocsBox>

packages/web-react/src/components/Stack/useStackStyleProps.ts

@@ -27,7 +27,7 @@ export function useStackStyleProps<T extends ElementType = 'div'>(props: SpiritS
   const classProps = classNames(StackClass, {
     [StackBottomDividerClass]: hasEndDivider,
     [StackMiddleDividersClass]: hasIntermediateDividers,
-    [StackSpacingClass]: hasSpacing,
+    [StackSpacingClass]: hasSpacing || spacing,
     [StackTopDividerClass]: hasStartDivider,
   });
 

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]

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 #}

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>

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>

packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig

@@ -1,6 +1,5 @@
 <Stack
     elementType="ul"
-    hasSpacing
     hasStartDivider
     hasEndDivider
     hasIntermediateDividers

packages/web-twig/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>

packages/web-twig/src/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>