From 6a5257d1668956ff71fb61f3bc54be40e7255634 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 18 Sep 2024 11:44:58 +1000 Subject: [PATCH] Spread: Apply content width to children --- .changeset/smart-rocks-wait.md | 13 +++ .../src/lib/components/Spread/Spread.css.ts | 12 +++ .../components/Spread/Spread.screenshots.tsx | 87 +++++++++++++++++-- .../src/lib/components/Spread/Spread.tsx | 17 +++- 4 files changed, 116 insertions(+), 13 deletions(-) create mode 100644 .changeset/smart-rocks-wait.md diff --git a/.changeset/smart-rocks-wait.md b/.changeset/smart-rocks-wait.md new file mode 100644 index 00000000000..8425c98048b --- /dev/null +++ b/.changeset/smart-rocks-wait.md @@ -0,0 +1,13 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Spread +--- + +**Spread:** Apply content width to children + +Align the behaviour of children in `Spread` to be the same as `Inline` children. +This makes their behaviour more predicatable when spreading full width elements, while also ensuring child elements are not stretched vertically. diff --git a/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts b/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts index 0c0bb728502..e0a20ab8005 100644 --- a/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts +++ b/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts @@ -1,3 +1,4 @@ +import { globalStyle, style } from '@vanilla-extract/css'; import { defineProperties, createSprinkles, @@ -6,6 +7,17 @@ import { import { breakpoints } from '../../css/breakpoints'; import { space } from '../../css/atoms/atomicProperties'; +export const fitContent = style({}); +globalStyle(`${fitContent} > *`, { + flexBasis: 'auto', + width: 'auto', +}); + +export const maxWidth = style({}); +globalStyle(`${maxWidth} > *`, { + maxWidth: '100%', +}); + const responsiveGapProperties = defineProperties({ defaultCondition: 'mobile', conditions: { diff --git a/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx b/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx index 32476ca63d5..851298c4600 100644 --- a/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Spread/Spread.screenshots.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { ComponentScreenshot } from 'site/types'; -import { Spread, Tiles } from '../'; +import { Box, Spread, Stack, Text, Tiles } from '../'; import { Placeholder } from '../private/Placeholder/Placeholder'; export const screenshots: ComponentScreenshot = { @@ -17,28 +17,40 @@ export const screenshots: ComponentScreenshot = { ), }, { - label: 'Horizontal single full width', + label: + 'Horizontal single full width (should be content width and spread to each side)', Example: () => ( - - + + 100% width + + + 80px + ), }, { - label: 'Horizontal both full width', + label: + 'Horizontal both full width (should be content width and spread to each side)', Example: () => ( - - + + 100% width + + + 100% width + ), }, { - label: 'Horizontal single child full width', + label: 'Horizontal single child full width (should be content width)', Example: () => ( - + + 100% width + ), }, @@ -175,5 +187,62 @@ export const screenshots: ComponentScreenshot = { ), }, + { + label: + 'Test: Horizontal without alignY (`Content` should align top and not stretch)', + Example: () => ( + + + Wrapping lines of content + + + Content + + + ), + }, + { + label: + 'Test: Text truncation horizontal, should consume available space without pushing `Content` out of screen', + Example: () => ( + + + Should end in ellipsis. Another example of really really long text + that will truncate even on the largest of screen resolutions. + + + Content + + + ), + }, + { + label: + 'Test: Text truncation vertical, should be limited to container width and respect `align` prop', + Example: () => ( + + {(['left', 'center', 'right'] as const).map((align) => ( + + + Should end in ellipsis. Another example of really really long + text that will truncate even on the largest of screen + resolutions. + + + Align {align} + + + Full width + + + ))} + + ), + }, ], }; diff --git a/packages/braid-design-system/src/lib/components/Spread/Spread.tsx b/packages/braid-design-system/src/lib/components/Spread/Spread.tsx index 151530031b5..3d46219b694 100644 --- a/packages/braid-design-system/src/lib/components/Spread/Spread.tsx +++ b/packages/braid-design-system/src/lib/components/Spread/Spread.tsx @@ -8,7 +8,12 @@ import { type Align, alignToFlexAlign, } from '../../utils/align'; -import { type RequiredResponsiveValue, responsiveGap } from './Spread.css'; +import { + fitContent, + maxWidth, + type RequiredResponsiveValue, + responsiveGap, +} from './Spread.css'; import buildDataAttributes, { type DataAttributeMap, } from '../private/buildDataAttributes'; @@ -29,7 +34,7 @@ export const Spread = ({ space, direction = 'horizontal', align, - alignY, + alignY = 'top', data, ...restProps }: SpreadProps) => { @@ -39,7 +44,7 @@ export const Spread = ({ if (align && isVertical) { alignItems = alignToFlexAlign(align); - } else if (alignY && isHorizontal) { + } else if (isHorizontal) { alignItems = alignYToFlexAlign(alignY); } @@ -52,7 +57,11 @@ export const Spread = ({ height={isVertical ? 'full' : undefined} justifyContent="spaceBetween" alignItems={alignItems} - className={responsiveGap({ gap: space })} + className={[ + isHorizontal ? fitContent : undefined, + isVertical ? maxWidth : undefined, + responsiveGap({ gap: space }), + ]} {...buildDataAttributes({ data, validateRestProps: restProps })} > {children}