From 75da15b70e36b09d963b6444dc5bf02bc0973b14 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Thu, 29 Feb 2024 14:41:59 +0100 Subject: [PATCH 1/2] Feat(web-twig): `Stack` no longer requires the `hasSpacing` prop to apply 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. --- .../src/Resources/components/Stack/README.md | 44 ++++++++++++------- .../src/Resources/components/Stack/Stack.twig | 2 +- .../__tests__/__fixtures__/stackDefault.twig | 4 +- .../stories/StackBlocksWithCustomSpacing.twig | 2 +- ...ackBlocksWithCustomSpacingAndDividers.twig | 1 - ...cksWithCustomSpacingForEachBreakpoint.twig | 2 +- ...WithCustomSpacingFromTabletBreakpoint.twig | 2 +- 7 files changed, 33 insertions(+), 24 deletions(-) diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md index 46d86c2e3c..97fa3e00ed 100644 --- 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 - -
Block 1
-
Block 2
-
Block 3
+ + +``` - -
Block 1
-
Block 2
-
Block 3
+Custom spacing: + +```twig + + + +``` + +Custom responsive spacing: + +```twig + + ``` ## 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 index 3e88465bea..9790ec18ee 100644 --- 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 index 77493f2fac..3501d62af2 100644 --- 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 @@ - +
Block 1
Block 2
Block 3
 - +
Block 1
Block 2
Block 3
diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacing.twig index 7b015f347d..e3222bfd5b 100644 --- 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 @@ - + {% for i in 1..3 %}
  • Block {{ i }} diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig index 948a9fd049..d805ac9ad8 100644 --- a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig +++ b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingAndDividers.twig @@ -1,6 +1,5 @@ + {% for i in 1..3 %}
  • Block {{ i }} diff --git a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig index c21d738c6c..ce01469009 100644 --- a/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig +++ b/packages/web-twig/src/Resources/components/Stack/stories/StackBlocksWithCustomSpacingFromTabletBreakpoint.twig @@ -1,4 +1,4 @@ - + {% for i in 1..3 %}
  • Block {{ i }} From 0994ce89fe41bf566e84704a7d998fddd0db3fc8 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Thu, 29 Feb 2024 14:56:13 +0100 Subject: [PATCH 2/2] Feat(web-react): `Stack` no longer requires the `hasSpacing` prop to apply 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. --- .../web-react/src/components/Stack/README.md | 42 ++++++++++--------- .../components/Stack/__tests__/Stack.test.tsx | 8 ++-- .../demo/StackBlocksWithCustomSpacing.tsx | 2 +- ...tackBlocksWithCustomSpacingAndDividers.tsx | 2 +- ...ocksWithCustomSpacingForEachBreakpoint.tsx | 2 +- ...sWithCustomSpacingFromTabletBreakpoint.tsx | 2 +- .../components/Stack/useStackStyleProps.ts | 2 +- 7 files changed, 31 insertions(+), 29 deletions(-) diff --git a/packages/web-react/src/components/Stack/README.md b/packages/web-react/src/components/Stack/README.md index 98917cdca7..e82c4e360d 100644 --- a/packages/web-react/src/components/Stack/README.md +++ b/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 - -
    Block 1
    -
    Block 2
    -
    Block 3
    -     +{/* Stacked content */} +``` - -
    Block 1
    -
    Block 2
    -
    Block 3
    -     +Custom spacing: + +```jsx +{/* Stacked content */} +``` + +Custom responsive spacing: + +```jsx +{/* Stacked content */} ``` ## 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>`] | — | ✕ | 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>`] | — | ✕ | 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-react/src/components/Stack/__tests__/Stack.test.tsx b/packages/web-react/src/components/Stack/__tests__/Stack.test.tsx index 2b58c89d61..ffd3332769 100644 --- a/packages/web-react/src/components/Stack/__tests__/Stack.test.tsx +++ b/packages/web-react/src/components/Stack/__tests__/Stack.test.tsx @@ -49,7 +49,7 @@ describe('Stack', () => { }); it('should render with custom spacing', () => { - const dom = render(); + const dom = render(); const element = dom.container.querySelector('div') as HTMLElement; expect(element).toHaveClass('Stack--hasSpacing'); @@ -57,9 +57,7 @@ describe('Stack', () => { }); it('should render with custom spacing for each breakpoint', () => { - const dom = render( - , - ); + const dom = render(); 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(); + const dom = render(); const element = dom.container.querySelector('div') as HTMLElement; expect(element).toHaveClass('Stack--hasSpacing'); diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx index a1edf415d8..d53588185d 100644 --- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx +++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx @@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox'; import Stack from '../Stack'; const StackBlocksWithCustomSpacing = () => ( - + {[1, 2, 3].map((i) => (
  • Block {i} diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx index dc12608e9a..87b0552a78 100644 --- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx +++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx @@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox'; import Stack from '../Stack'; const StackBlocksWithCustomSpacingAndDividers = () => ( - + {[1, 2, 3].map((i) => (
  • Block {i} diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx index d863c2b756..c7d35b18b2 100644 --- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx +++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx @@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox'; import Stack from '../Stack'; const StackBlocksWithCustomSpacingForEachBreakpoint = () => ( - + {[1, 2, 3].map((i) => (
  • Block {i} diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx index 331393a091..54955ce0c7 100644 --- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx +++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx @@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox'; import Stack from '../Stack'; const StackBlocksWithCustomSpacingFromTabletBreakpoint = () => ( - + {[1, 2, 3].map((i) => (
  • Block {i} diff --git a/packages/web-react/src/components/Stack/useStackStyleProps.ts b/packages/web-react/src/components/Stack/useStackStyleProps.ts index ec528d7f5a..8e83eaaba4 100644 --- a/packages/web-react/src/components/Stack/useStackStyleProps.ts +++ b/packages/web-react/src/components/Stack/useStackStyleProps.ts @@ -27,7 +27,7 @@ export function useStackStyleProps(props: SpiritS const classProps = classNames(StackClass, { [StackBottomDividerClass]: hasEndDivider, [StackMiddleDividersClass]: hasIntermediateDividers, - [StackSpacingClass]: hasSpacing, + [StackSpacingClass]: hasSpacing || spacing, [StackTopDividerClass]: hasStartDivider, });