Merge branch 'master' into dev-entries

seek-oss · Feb 18, 2024 · 49297c3 · 49297c3
2 parents 7fbb161 + d5c2e27
commit 49297c3
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/.changeset/itchy-mayflies-allow.md b/.changeset/itchy-mayflies-allow.md
@@ -0,0 +1,13 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Text
+  - Heading
+---
+
+**Text, Heading:** Fix `maxLines` cropping of decending characters
+
+Fixes a bug when using -webkit-box, where the descender on the last line of text could be cropped based on the combination of line height and font size.
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
@@ -90,30 +90,36 @@ export const screenshots: ComponentScreenshot = {
       label: 'Truncation (legacy)',
       Example: () => (
         <Box style={{ width: 220 }}>
+          <Box style={{ border: '1px solid red' }} />
           <Heading level="2" truncate>
-            Limited to 1 line that won’t fit in the layout
+            Limiting to 1 line that won’t fit in the layout
           </Heading>
+          <Box style={{ border: '1px solid red' }} />
         </Box>
       ),
     },
     {
       label: 'Max lines = 1 (should be same as truncation)',
       Example: () => (
         <Box style={{ width: 220 }}>
+          <Box style={{ border: '1px solid red' }} />
           <Heading level="2" maxLines={1}>
-            Limited to 1 line that won’t fit in the layout
+            Limiting to 1 line that won’t fit in the layout
           </Heading>
+          <Box style={{ border: '1px solid red' }} />
         </Box>
       ),
     },
     {
       label: 'Max lines = 3',
       Example: () => (
         <Box style={{ width: 220 }}>
+          <Box style={{ border: '1px solid red' }} />
           <Heading level="2" maxLines={3}>
-            Another example of long text, but limited to 3 lines, and won’t fit
+            Another example of long text, but limiting to 3 lines, and won’t fit
             in the layout.
           </Heading>
+          <Box style={{ border: '1px solid red' }} />
         </Box>
       ),
     },

diff --git a/packages/braid-design-system/src/lib/components/private/MaxLines/MaxLines.css.ts b/packages/braid-design-system/src/lib/components/private/MaxLines/MaxLines.css.ts
@@ -1,6 +1,17 @@
 import { createVar, style } from '@vanilla-extract/css';
 import { atoms } from '../../../../entries/css';
 
+/*
+Fixes a bug when using -webkit-box, where the descender on the last line
+of text could be cropped based on the combination of line height and
+font size.
+*/
+const descenderCropFixOffset = '0.1em';
+const negateDescenderCropFixOffset = `-${descenderCropFixOffset}`;
+export const descenderCropFixForWebkitBox = style({
+  marginBottom: negateDescenderCropFixOffset,
+});
+
 export const base = style([
   atoms({
     display: 'block',
@@ -10,6 +21,11 @@ export const base = style([
   {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    selectors: {
+      [`${descenderCropFixForWebkitBox} &`]: {
+        paddingBottom: descenderCropFixOffset,
+      },
+    },
   },
 ]);
 

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
@@ -7,6 +7,7 @@ import { MaxLines } from '../MaxLines/MaxLines';
 import type { UseIconProps } from '../../../hooks/useIcon';
 import { alignToFlexAlign } from '../../../utils/align';
 import dedent from 'dedent';
+import { descenderCropFixForWebkitBox } from '../MaxLines/MaxLines.css';
 
 export interface TypographyProps extends Pick<BoxProps, 'id' | 'component'> {
   children?: ReactNode;
@@ -34,12 +35,12 @@ export const Typography = ({
   ...restProps
 }: PrivateTypographyProps) => {
   const lines = truncate ? 1 : maxLines;
-  const contents =
-    typeof lines === 'number' ? (
-      <MaxLines lines={lines}>{children}</MaxLines>
-    ) : (
-      children
-    );
+  const isTruncated = typeof lines === 'number';
+  const contents = isTruncated ? (
+    <MaxLines lines={lines}>{children}</MaxLines>
+  ) : (
+    children
+  );
 
   if (process.env.NODE_ENV !== 'production') {
     if (truncate) {
@@ -65,7 +66,10 @@ export const Typography = ({
       display="block"
       component={component}
       textAlign={align}
-      className={className}
+      className={[
+        className,
+        isTruncated ? descenderCropFixForWebkitBox : undefined,
+      ]}
       {...buildDataAttributes({ data, validateRestProps: restProps })}
     >
       {icon ? (