Enhancement Text component to support new typography token (#1820)

## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue  - Fixes #1833 - #1733 ## Summary  - `Text` 컴포넌트의 스타일링을 scss 기반으로 변경 - typo의 타입을 CSS interpolation에서 string literal로 변경 ## Details  - `typo` : CSS interpolation에서 string literal로 변경합니다. - `align` 속성을 추가합니다. text-align 속성을 지원하기 위한 속성입니다. - `TextElementType` : 라이브러리들을 참고하여 최대한 broad하게 잡았습니다. `div` 타입은 블록 요소로 사용하고 싶을 때, 채널 데스크 애플리케이션에서 자주 사용하던 방법이라 포함했습니다. ### Breaking change? (Yes/No)  Yes ## References  - https://polaris.shopify.com/components/typography/text - https://www.radix-ui.com/themes/docs/components/text
channel-io · Dec 19, 2023 · a510882 · a510882
1 parent 37d79d2
commit a510882
Show file tree

Hide file tree

Showing 65 changed files with 736 additions and 1,543 deletions.
diff --git a/.changeset/modern-houses-give.md b/.changeset/modern-houses-give.md
@@ -0,0 +1,35 @@
+---
+"@channel.io/bezier-react": major
+---
+
+`typo` prop of `Text` component is changed to a string literal. Please migrate it like below. With the removal of the styled-component from bezier-react, CSS interpolation is no longer available.
+
+```tsx
+/* AS-IS */
+<Text typo={Typography.Size11} />
+<Text typo={Typography.Size12} />
+<Text typo={Typography.Size13} />
+<Text typo={Typography.Size14} />
+<Text typo={Typography.Size15} />
+<Text typo={Typography.Size16} />
+<Text typo={Typography.Size17} />
+<Text typo={Typography.Size18} />
+<Text typo={Typography.Size22} />
+<Text typo={Typography.Size24} />
+<Text typo={Typography.Size30} />
+<Text typo={Typography.Size36} />
+
+/* TO-BE */
+<Text typo="11" />
+<Text typo="12" />
+<Text typo="13" />
+<Text typo="14" />
+<Text typo="15" />
+<Text typo="16" />
+<Text typo="17" />
+<Text typo="18" />
+<Text typo="22" />
+<Text typo="24" />
+<Text typo="30" />
+<Text typo="36" />
+```
diff --git a/.changeset/three-mirrors-hunt.md b/.changeset/three-mirrors-hunt.md
@@ -0,0 +1,11 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Add `align` prop to `Text` component. This prop is used to set horizontal alignment of text.
+
+```tsx
+<Text align="left" />
+<Text align="center" />
+<Text align="right" />
+```
diff --git a/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx b/packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx
@@ -11,7 +11,6 @@ import {
   ButtonStyleVariant,
   StackItem,
   Text,
-  Typography,
   VStack,
 } from '@channel.io/bezier-react'
 
@@ -27,7 +26,7 @@ function ExtractSuccess() {
   return (
     <VStack align="center" justify="center" spacing={2}>
       <StackItem>
-        <Text typo={Typography.Size18}>아이콘 추출 성공!</Text>
+        <Text typo="18">아이콘 추출 성공!</Text>
       </StackItem>
       <StackItem>
         { /* @ts-ignore */ }

diff --git a/packages/bezier-react/.storybook/WithFoundationProvider.jsx b/packages/bezier-react/.storybook/WithFoundationProvider.jsx
@@ -10,8 +10,6 @@ import { AppProvider } from '~/src/providers/AppProvider'
 import { InvertedThemeProvider } from '~/src/providers/ThemeProvider'
 import { Text } from '~/src/components/Text'
 
-import '~/src/styles/index.scss'
-
 const FoundationKeyword = {
   Light: 'light',
   Dark: 'dark',

diff --git a/packages/bezier-react/.storybook/preview.ts b/packages/bezier-react/.storybook/preview.ts
@@ -1,5 +1,7 @@
 import type { Preview } from "@storybook/react"
 
+import '~/src/styles/index.scss'
+
 import { WithFoundationProvider } from './WithFoundationProvider'
 
 const preview: Preview = {

diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts
@@ -12,8 +12,6 @@ export const AvatarEllipsisCount = styled(Text)`
   align-items: center;
   height: var(--b-avatar-group-size);
   color: var(--txt-black-dark);
-
-  ${({ interpolation }) => interpolation}
 `
 
 export const AvatarGroup = styled.div`

diff --git a/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx
@@ -6,8 +6,6 @@ import React, {
 
 import { MoreIcon } from '@channel.io/bezier-icons'
 
-import { Typography } from '~/src/foundation'
-
 import { isLastIndex } from '~/src/utils/array'
 import { noop } from '~/src/utils/function'
 import { px } from '~/src/utils/style'
@@ -58,14 +56,14 @@ function getProperIconSize(avatarSize: AvatarSize) {
 // TODO: Not specified
 function getProperTypoSize(avatarSize: AvatarSize) {
   return {
-    [AvatarSize.Size20]: Typography.Size12,
-    [AvatarSize.Size24]: Typography.Size13,
-    [AvatarSize.Size30]: Typography.Size15,
-    [AvatarSize.Size36]: Typography.Size16,
-    [AvatarSize.Size42]: Typography.Size18,
-    [AvatarSize.Size48]: Typography.Size24,
-    [AvatarSize.Size90]: Typography.Size24,
-    [AvatarSize.Size120]: Typography.Size24,
+    [AvatarSize.Size20]: '12',
+    [AvatarSize.Size24]: '13',
+    [AvatarSize.Size30]: '15',
+    [AvatarSize.Size36]: '16',
+    [AvatarSize.Size42]: '18',
+    [AvatarSize.Size48]: '24',
+    [AvatarSize.Size90]: '24',
+    [AvatarSize.Size120]: '24',
   }[avatarSize]
 }
 
@@ -90,7 +88,6 @@ export const AvatarGroup = forwardRef(function AvatarGroup({
   ellipsisType = AvatarGroupEllipsisType.Icon,
   onMouseEnterEllipsis = noop,
   onMouseLeaveEllipsis = noop,
-  ellipsisInterpolation,
   style,
   className,
   children,
@@ -139,7 +136,6 @@ forwardedRef: React.Ref<HTMLDivElement>,
           <Styled.AvatarEllipsisIconWrapper
             data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}
             key="ellipsis"
-            interpolation={ellipsisInterpolation}
             onMouseEnter={onMouseEnterEllipsis}
             onMouseLeave={onMouseLeaveEllipsis}
           >
@@ -172,7 +168,6 @@ forwardedRef: React.Ref<HTMLDivElement>,
             >
               <Styled.AvatarEllipsisCount
                 forwardedAs="span"
-                interpolation={ellipsisInterpolation}
                 typo={getProperTypoSize(size)}
               >
                 { getRestAvatarListCountText(avatarListCount, max) }
@@ -190,7 +185,6 @@ forwardedRef: React.Ref<HTMLDivElement>,
     children,
     spacing,
     ellipsisType,
-    ellipsisInterpolation,
     avatarListCount,
     renderAvatarElement,
     onMouseEnterEllipsis,

diff --git a/...s/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/...s/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
@@ -1,23 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
-.c5 {
-  font-size: 1.3rem;
-  line-height: 1.8rem;
-  margin: 0px 0px 0px 0px;
-  font-style: normal;
-  font-weight: normal;
-  color: inherit;
-  -webkit-transition-delay: 0ms;
-  transition-delay: 0ms;
-  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
-  transition-timing-function: cubic-bezier(.3,0,0,1);
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-property: color;
-  transition-property: color;
-}
-
 .c2 {
   --b-alpha-smooth-corners-box-border-radius: 0;
   --b-alpha-smooth-corners-box-shadow-offset-x: 0;
@@ -124,7 +107,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
   --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius)));
 }
 
-.c6 {
+.c5 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -263,8 +246,9 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
     style="--b-avatar-group-ellipsis-mr: 5px; --b-avatar-group-ellipsis-ml: 4px;"
   >
     <span
-      class="c5 c6"
+      class="margin Text typo-13 c5"
       data-testid="bezier-react-text"
+      foundation="[object Object]"
     >
       +1
     </span>

diff --git a/packages/bezier-react/src/components/Banner/Banner.test.tsx b/packages/bezier-react/src/components/Banner/Banner.test.tsx
@@ -38,8 +38,6 @@ describe('Banner >', () => {
 
     expect(bannerLink.tagName).toBe('A')
     expect(bannerLink.children.item(0)).toHaveStyle('text-decoration: underline;')
-    expect(bannerLink.children.item(0)).toHaveStyle('font-weight: bold;')
-    expect(bannerLink.children.item(0)).toHaveStyle('font-size: 1.4rem;')
   })
 
   it('renders action button if actionIcon is correct value', () => {

diff --git a/packages/bezier-react/src/components/Banner/Banner.tsx b/packages/bezier-react/src/components/Banner/Banner.tsx
@@ -2,8 +2,6 @@ import React, { forwardRef } from 'react'
 
 import { isBezierIcon } from '@channel.io/bezier-icons'
 
-import { Typography } from '~/src/foundation'
-
 import { warn } from '~/src/utils/assert'
 import {
   isNil,
@@ -62,7 +60,7 @@ function Link({
   return renderLink({
     content: (
       <Styled.Link
-        typo={Typography.Size14}
+        typo="14"
         color={TEXT_COLORS[variant]}
         bold
       >
@@ -130,7 +128,7 @@ export const Banner = forwardRef(function Banner(
         <Styled.ContentWrapper variant={variant}>
           { isString(content) ? (
             <Text
-              typo={Typography.Size14}
+              typo="14"
               color={TEXT_COLORS[variant]}
             >
               { content }

diff --git a/packages/bezier-react/src/components/Box/Box.types.ts b/packages/bezier-react/src/components/Box/Box.types.ts
@@ -11,6 +11,9 @@ type Display = 'block' | 'inline' | 'inline-block'
 type BoxElementType = 'div' | 'span' | 'section' | 'legend' | 'ul' | 'li'
 
 interface BoxOwnProps {
+  /**
+   * Display type of the box.
+   */
   display?: Display
 }
 

diff --git a/packages/bezier-react/src/components/Button/Button.stories.tsx b/packages/bezier-react/src/components/Button/Button.stories.tsx
@@ -24,10 +24,7 @@ import {
   type StoryObj,
 } from '@storybook/react'
 
-import {
-  Typography,
-  styled,
-} from '~/src/foundation'
+import { styled } from '~/src/foundation'
 
 import { Avatar } from '~/src/components/Avatars/Avatar'
 import { ButtonGroup } from '~/src/components/ButtonGroup'
@@ -389,7 +386,7 @@ export const UsageVariousContentsCustom: StoryObj<{}> = {
           text="New messages"
           rightContent={(
             <AlertBadge>
-              <Text typo={Typography.Size13} color="txt-white-normal">
+              <Text typo="13" color="txt-white-normal">
                 1
               </Text>
             </AlertBadge>
@@ -468,7 +465,7 @@ const OpenDropdownButton = () => {
         marginY={6}
       >
         <Dropdown>
-          <Text typo={Typography.Size13} marginLeft={6}>Dropdown content</Text>
+          <Text typo="13" ml={6}>Dropdown content</Text>
         </Dropdown>
       </Overlay>
     </div>
@@ -493,7 +490,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Blue</Text>
+            <Text typo="13">Blue</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -507,7 +504,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Red</Text>
+            <Text typo="13">Red</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -521,7 +518,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Green</Text>
+            <Text typo="13">Green</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -535,7 +532,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Cobalt</Text>
+            <Text typo="13">Cobalt</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -549,7 +546,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Orange</Text>
+            <Text typo="13">Orange</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -563,7 +560,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Pink</Text>
+            <Text typo="13">Pink</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -577,7 +574,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Purple</Text>
+            <Text typo="13">Purple</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -591,7 +588,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Monochrome Dark</Text>
+            <Text typo="13">Monochrome Dark</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -605,7 +602,7 @@ export const VariantsColor: StoryObj<{}> = {
       <StackItem>
         <HStack spacing={24} align="center">
           <StackItem size={80}>
-            <Text typo={Typography.Size13}>Monochrome Light</Text>
+            <Text typo="13">Monochrome Light</Text>
           </StackItem>
           <StackItem>
             <Button
@@ -629,7 +626,7 @@ export const VariantsStyle: StoryObj<{}> = {
         <StackItem key={styleVariant}>
           <HStack spacing={24} align="center">
             <StackItem size={80}>
-              <Text typo={Typography.Size13}>{ key }</Text>
+              <Text typo="13">{ key }</Text>
             </StackItem>
             <StackItem>
               <Button
@@ -656,7 +653,7 @@ export const VariantsSize: StoryObj<{}> = {
         <StackItem key={key}>
           <HStack spacing={24} align="center">
             <StackItem size={80}>
-              <Text typo={Typography.Size13}>{ key }</Text>
+              <Text typo="13">{ key }</Text>
             </StackItem>
             <StackItem>
               <Button