Spread: Apply content width to children

seek-oss · Sep 18, 2024 · 6a5257d · 6a5257d
1 parent c2161e5
commit 6a5257d
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 13 deletions.
diff --git a/.changeset/smart-rocks-wait.md 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
@@ -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
@@ -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: () => (
         <Spread space="large">
-          <Placeholder height={60} width="100%" />
-          <Placeholder height={60} width={80} />
+          <Box background="neutral" width="full" padding="small">
+            <Text>100% width</Text>
+          </Box>
+          <Box background="neutral" style={{ width: 80 }} padding="small">
+            <Text>80px</Text>
+          </Box>
         </Spread>
       ),
     },
     {
-      label: 'Horizontal both full width',
+      label:
+        'Horizontal both full width (should be content width and spread to each side)',
       Example: () => (
         <Spread space="large">
-          <Placeholder height={60} width="100%" />
-          <Placeholder height={60} width="100%" />
+          <Box background="neutral" width="full" padding="small">
+            <Text>100% width</Text>
+          </Box>
+          <Box background="neutral" width="full" padding="small">
+            <Text>100% width</Text>
+          </Box>
         </Spread>
       ),
     },
     {
-      label: 'Horizontal single child full width',
+      label: 'Horizontal single child full width (should be content width)',
       Example: () => (
         <Spread space="large">
-          <Placeholder height={60} width="100%" />
+          <Box background="neutral" width="full" padding="small">
+            <Text>100% width</Text>
+          </Box>
         </Spread>
       ),
     },
@@ -175,5 +187,62 @@ export const screenshots: ComponentScreenshot = {
         </Spread>
       ),
     },
+    {
+      label:
+        'Test: Horizontal without alignY (`Content` should align top and not stretch)',
+      Example: () => (
+        <Spread space="large">
+          <Box background="neutral" style={{ width: 105 }} padding="small">
+            <Text>Wrapping lines of content</Text>
+          </Box>
+          <Box background="promote" padding="small">
+            <Text>Content</Text>
+          </Box>
+        </Spread>
+      ),
+    },
+    {
+      label:
+        'Test: Text truncation horizontal, should consume available space without pushing `Content` out of screen',
+      Example: () => (
+        <Spread space="large" alignY="center">
+          <Text maxLines={1}>
+            Should end in ellipsis. Another example of really really long text
+            that will truncate even on the largest of screen resolutions.
+          </Text>
+          <Box background="neutral" padding="small">
+            <Text>Content</Text>
+          </Box>
+        </Spread>
+      ),
+    },
+    {
+      label:
+        'Test: Text truncation vertical, should be limited to container width and respect `align` prop',
+      Example: () => (
+        <Stack space="xlarge">
+          {(['left', 'center', 'right'] as const).map((align) => (
+            <Spread
+              space="medium"
+              direction="vertical"
+              align={align}
+              key={align}
+            >
+              <Text maxLines={1}>
+                Should end in ellipsis. Another example of really really long
+                text that will truncate even on the largest of screen
+                resolutions.
+              </Text>
+              <Box background="promote" padding="small">
+                <Text>Align {align}</Text>
+              </Box>
+              <Box background="neutral" width="full" padding="large">
+                <Text>Full width</Text>
+              </Box>
+            </Spread>
+          ))}
+        </Stack>
+      ),
+    },
   ],
 };
diff --git 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}