Migrate Tooltip, Help component with scss

packages/bezier-react/src/components/Forms/Slider/Slider.test.tsx

@@ -15,7 +15,9 @@ import {
 import type SliderProps from './Slider.types'
 
 describe('Slider', () => {
-  const renderSlider = (props?: Partial<SliderProps>) => render(<Slider {...props} />)
+  const renderSlider = (props?: Partial<SliderProps>) => render(
+    <Slider {...props} />,
+  )
 
   let user: ReturnType<typeof userEvent.setup>
 

packages/bezier-react/src/components/Help/Help.module.scss

@@ -0,0 +1,11 @@
+@layer components {
+  .Help {
+    line-height: 0;
+
+    &:not([data-state="closed"]) {
+      > .Icon {
+        color: var(--txt-black-darkest);
+      }
+    }
+  }
+}

packages/bezier-react/src/components/Help/Help.tsx

@@ -4,12 +4,15 @@ import { HelpFilledIcon } from '@channel.io/bezier-icons'
 
 import { isEmpty } from '~/src/utils/type'
 
-import { IconSize } from '~/src/components/Icon'
+import {
+  Icon,
+  IconSize,
+} from '~/src/components/Icon'
 import { Tooltip } from '~/src/components/Tooltip'
 
 import type HelpProps from './Help.types'
 
-import * as Styled from './Help.styled'
+import styles from './Help.module.scss'
 
 export const HELP_TEST_ID = 'bezier-react-help'
 export const HELP_DISPLAY_NAME = 'Help'
@@ -26,14 +29,15 @@ const Help = forwardRef<HTMLDivElement, HelpProps>(function Help({
       ref={forwardedRef}
       content={children}
     >
-      <Styled.Trigger>
-        <Styled.Icon
+      <div className={styles.Help}>
+        <Icon
+          className={styles.Icon}
           testId={HELP_TEST_ID}
           source={HelpFilledIcon}
           size={IconSize.XS}
           color="txt-black-dark"
         />
-      </Styled.Trigger>
+      </div>
     </Tooltip>
   )
 })

packages/bezier-react/src/components/Help/Help.types.ts

@@ -1,11 +1,11 @@
 import {
-  type BezierComponentProps,
+  type AlphaBezierComponentProps,
   type ChildrenProps,
 } from '~/src/types/ComponentProps'
 
 import { type TooltipProps } from '~/src/components/Tooltip'
 
 export default interface HelpProps extends
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   ChildrenProps,
   Omit<TooltipProps, 'content' | 'children'> {}

packages/bezier-react/src/components/Help/__snapshots__/Help.test.tsx.snap

@@ -2,10 +2,9 @@
 
 exports[`Help > Snapshot > 1`] = `
 <svg
-  class="Icon margin "
+  class="Icon margin Icon"
   data-testid="bezier-react-help"
   fill="none"
-  foundation="[object Object]"
   height="16"
   style="--b-icon-color: var(--txt-black-dark);"
   viewBox="0 0 24 24"

packages/bezier-react/src/components/Text/Text.module.scss

@@ -1,10 +1,17 @@
 @layer components {
   .Text {
     --b-text-color: inherit;
+    --b-text-line-clamp: 1;
+    --b-text-line-height: initial; 
+    --b-text-font-size: initial;
+    --b-text-letter-spacing: initial;
 
     color: var(--b-text-color);
     font-style: normal;
     font-weight: var(--font-weight-400);
+    font-size: var(--b-text-font-size);
+    line-height: var(--b-text-line-height);
+    letter-spacing: var(--b-text-letter-spacing);
     transition: color var(--transition-s);
 
     &:where(.bold) {
@@ -22,6 +29,15 @@
       white-space: nowrap;
     }
 
+    &:where(.multi-line-truncated) {
+      display: -webkit-box;
+      max-height: calc(var(--b-text-line-clamp) * var(--b-text-line-height));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--b-text-line-clamp);
+    }
+
     &:where(.align-left) {
       text-align: left;
     }
@@ -35,70 +51,70 @@
     }
 
     &:where(.typo-11) {
-      font-size: var(--typography-size-11-font-size);
-      line-height: var(--typography-size-11-line-height);
+      --b-text-font-size: var(--typography-size-11-font-size);
+      --b-text-line-height: var(--typography-size-11-line-height);
     }
 
     &:where(.typo-12) {
-      font-size: var(--typography-size-12-font-size);
-      line-height: var(--typography-size-12-line-height);
+      --b-text-font-size: var(--typography-size-12-font-size);
+      --b-text-line-height: var(--typography-size-12-line-height);
     }
 
     &:where(.typo-13) {
-      font-size: var(--typography-size-13-font-size);
-      line-height: var(--typography-size-13-line-height);
+      --b-text-font-size: var(--typography-size-13-font-size);
+      --b-text-line-height: var(--typography-size-13-line-height);
     }
 
     &:where(.typo-14) {
-      font-size: var(--typography-size-14-font-size);
-      line-height: var(--typography-size-14-line-height);
+      --b-text-font-size: var(--typography-size-14-font-size);
+      --b-text-line-height: var(--typography-size-14-line-height);
     }
 
     &:where(.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-font-size: var(--typography-size-15-font-size);
+      --b-text-letter-spacing: var(--typography-size-15-letter-spacing);
+      --b-text-line-height: var(--typography-size-15-line-height);
     }
 
     &:where(.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-font-size: var(--typography-size-16-font-size);
+      --b-text-letter-spacing: var(--typography-size-16-letter-spacing);
+      --b-text-line-height: var(--typography-size-16-line-height);
     }
 
     &:where(.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-font-size: var(--typography-size-17-font-size);
+      --b-text-letter-spacing: var(--typography-size-17-letter-spacing);
+      --b-text-line-height: var(--typography-size-17-line-height);
     }
 
     &:where(.typo-18) {
-      font-size: var(--typography-size-18-font-size);
-      line-height: var(--typography-size-18-line-height);
+      --b-text-font-size: var(--typography-size-18-font-size);
+      --b-text-line-height: var(--typography-size-18-line-height);
     }
 
     &:where(.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-font-size: var(--typography-size-22-font-size);
+      --b-text-letter-spacing: var(--typography-size-22-letter-spacing);
+      --b-text-line-height: var(--typography-size-22-line-height);
     }
 
     &:where(.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-font-size: var(--typography-size-24-font-size);
+      --b-text-letter-spacing: var(--typography-size-24-letter-spacing);
+      --b-text-line-height: var(--typography-size-24-line-height);
     }
 
     &:where(.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-font-size: var(--typography-size-30-font-size);
+      --b-text-letter-spacing: var(--typography-size-30-letter-spacing);
+      --b-text-line-height: var(--typography-size-30-line-height);
     }
 
     &:where(.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-font-size: var(--typography-size-36-font-size);
+      --b-text-letter-spacing: var(--typography-size-36-letter-spacing);
+      --b-text-line-height: var(--typography-size-36-line-height);
     }
   }
 }

packages/bezier-react/src/components/Text/Text.tsx

@@ -10,6 +10,7 @@ import {
   splitByMarginProps,
 } from '~/src/utils/props'
 import { tokenCssVar } from '~/src/utils/style'
+import { isNumber } from '~/src/utils/type'
 
 import { type TextProps } from './Text.types'
 
@@ -47,11 +48,13 @@ export const Text = forwardRef<HTMLElement, TextProps>(function Text(props, forw
     align,
     ...rest
   } = marginRest
+  const isMultiLineTruncated = isNumber(truncated) && 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 +63,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,

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 positive integer, it means the maximum number of lines.
    * @default false
    */
-  truncated?: boolean
+  truncated?: boolean | number
   /**
    * Horizontal alignment of the text.
    */

packages/bezier-react/src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,30 @@
+@layer components {
+  .Tooltip {
+    z-index: var(--z-index-tooltip);
+
+    box-sizing: border-box;
+    width: max-content;
+    max-width: 260px;
+    height: max-content;
+    padding: 5px 8px;
+    word-break: normal;
+    word-wrap: break-word;
+
+    background-color: var(--bg-white-low);
+    overflow: hidden;
+    border-radius: var(--radius-8);
+    box-shadow: var(--ev-3);
+  }
+
+  .TooltipContainer {
+    overflow: hidden;
+  }
+
+  .TooltipContent {
+    white-space: pre-wrap;
+  }
+
+  .Icon {
+    padding: 1px;
+  }
+}