Text, Heading: Ensure maxLines truncates correctly in flex container (

#1580)
seek-oss · Sep 18, 2024 · c2161e5 · c2161e5
1 parent fe87543
commit c2161e5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 0 deletions.
diff --git a/.changeset/hungry-ads-cheer.md b/.changeset/hungry-ads-cheer.md
@@ -0,0 +1,11 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Text
+  - Heading
+---
+
+**Text, Heading:** Ensure `maxLines` truncates correctly when used as the direct child of a flex container.
diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx
@@ -110,6 +110,18 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'Max lines = 1 (in flex container, should be same as truncation)',
+      Example: () => (
+        <Box display="flex" flexDirection="column" style={{ width: 220 }}>
+          <Box style={{ border: '1px solid red' }} />
+          <Heading level="2" maxLines={1}>
+            Limiting to 1 line that won’t fit in the layout
+          </Heading>
+          <Box style={{ border: '1px solid red' }} />
+        </Box>
+      ),
+    },
     {
       label: 'Max lines = 3',
       Example: () => (

diff --git a/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx b/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx
@@ -139,6 +139,16 @@ export const screenshots: ComponentScreenshot = {
         </Box>
       ),
     },
+    {
+      label: 'Max lines = 1 (in flex container, should be same as truncation)',
+      Example: () => (
+        <Box display="flex" style={{ width: 215 }}>
+          <Text maxLines={1}>
+            Text limited to 1 line that won’t fit in the layout
+          </Text>
+        </Box>
+      ),
+    },
     {
       label: 'Max lines = 3',
       Example: () => (

diff --git a/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx b/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx
@@ -70,6 +70,7 @@ export const Typography = ({
         className,
         isTruncated ? descenderCropFixForWebkitBox : undefined,
       ]}
+      minWidth={isTruncated ? 0 : undefined}
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       {icon ? (