feat(text): add multiline ellipsis option to text

channel-io · Jan 2, 2024 · a564146 · a564146
1 parent c1b66fb
commit a564146
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/packages/bezier-react/src/components/Text/Text.module.scss b/packages/bezier-react/src/components/Text/Text.module.scss
@@ -1,6 +1,8 @@
 @layer components {
   .Text {
     --b-text-color: inherit;
+    --b-text-line-clamp: 1;
+    --b-text-line-height: inherit; 
 
     color: var(--b-text-color);
     font-style: normal;
@@ -22,6 +24,16 @@
       white-space: nowrap;
     }
 
+    &.multi-line-truncated {
+      display: -webkit-box;
+      max-height: calc(var(--b-text-line-clamp) * var(--b-text-line-height));
+      overflow: hidden;
+      line-height: var(--b-text-line-height);
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--b-text-line-clamp);
+    }
+
     &.align-left {
       text-align: left;
     }
@@ -37,68 +49,80 @@
     &.typo-11 {
       font-size: var(--typography-size-11-font-size);
       line-height: var(--typography-size-11-line-height);
+      --b-text-line-height: var(--typography-size-11-line-height);
     }
 
     &.typo-12 {
       font-size: var(--typography-size-12-font-size);
       line-height: var(--typography-size-12-line-height);
+      --b-text-line-height: var(--typography-size-12-line-height);
     }
 
     &.typo-13 {
       font-size: var(--typography-size-13-font-size);
       line-height: var(--typography-size-13-line-height);
+      --b-text-line-height: var(--typography-size-13-line-height);
     }
 
     &.typo-14 {
       font-size: var(--typography-size-14-font-size);
       line-height: var(--typography-size-14-line-height);
+      --b-text-line-height: var(--typography-size-14-line-height);
     }
 
     &.typo-15 {
       font-size: var(--typography-size-15-font-size);
       line-height: var(--typography-size-15-line-height);
       letter-spacing: var(--typography-size-15-letter-spacing);
+      --b-text-line-height: var(--typography-size-15-line-height);
     }
 
     &.typo-16 {
       font-size: var(--typography-size-16-font-size);
       line-height: var(--typography-size-16-line-height);
       letter-spacing: var(--typography-size-16-letter-spacing);
+      --b-text-line-height: var(--typography-size-16-line-height);
     }
 
     &.typo-17 {
       font-size: var(--typography-size-17-font-size);
       line-height: var(--typography-size-17-line-height);
       letter-spacing: var(--typography-size-17-letter-spacing);
+      --b-text-line-height: var(--typography-size-17-line-height);
     }
 
     &.typo-18 {
       font-size: var(--typography-size-18-font-size);
       line-height: var(--typography-size-18-line-height);
+      --b-text-line-height: var(--typography-size-18-line-height);
     }
 
     &.typo-22 {
       font-size: var(--typography-size-22-font-size);
       line-height: var(--typography-size-22-line-height);
       letter-spacing: var(--typography-size-22-letter-spacing);
+      --b-text-line-height: var(--typography-size-22-line-height);
     }
 
     &.typo-24 {
       font-size: var(--typography-size-24-font-size);
       line-height: var(--typography-size-24-line-height);
       letter-spacing: var(--typography-size-24-letter-spacing);
+      --b-text-line-height: var(--typography-size-24-line-height);
     }
 
     &.typo-30 {
       font-size: var(--typography-size-30-font-size);
       line-height: var(--typography-size-30-line-height);
       letter-spacing: var(--typography-size-30-letter-spacing);
+      --b-text-line-height: var(--typography-size-30-line-height);
     }
 
     &.typo-36 {
       font-size: var(--typography-size-36-font-size);
       line-height: var(--typography-size-36-line-height);
       letter-spacing: var(--typography-size-36-letter-spacing);
+      --b-text-line-height: var(--typography-size-36-line-height);
     }
   }
 }
diff --git a/packages/bezier-react/src/components/Text/Text.tsx b/packages/bezier-react/src/components/Text/Text.tsx
@@ -47,11 +47,13 @@ export const Text = forwardRef<HTMLElement, TextProps>(function Text(props, forw
     align,
     ...rest
   } = marginRest
+  const isMultiLineTruncated = typeof truncated === 'number' && truncated >= 1
 
   return createElement(as, {
     ref: forwardedRef,
     style: {
       '--b-text-color': tokenCssVar(color),
+      '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
       ...marginStyle.style,
       ...style,
     },
@@ -60,7 +62,8 @@ export const Text = forwardRef<HTMLElement, TextProps>(function Text(props, forw
       styles[`typo-${typo}`],
       bold && styles.bold,
       italic && styles.italic,
-      truncated && styles.truncated,
+      truncated === true && styles.truncated,
+      isMultiLineTruncated && styles['multi-line-truncated'],
       align && styles[`align-${align}`],
       marginStyle.className,
       className,

diff --git a/packages/bezier-react/src/components/Text/Text.types.ts b/packages/bezier-react/src/components/Text/Text.types.ts
@@ -62,9 +62,10 @@ interface TextOwnProps {
   italic?: boolean
   /**
    * Whether the text is truncated.
+   * If it is a number type, it means the maximum number of lines.
    * @default false
    */
-  truncated?: boolean
+  truncated?: boolean | number
   /**
    * Horizontal alignment of the text.
    */