Add truncated props in Badge

.changeset/funny-eyes-shop.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Add truncated props in the Badge

packages/bezier-react/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,8 @@
 import { AppleIcon } from '@channel.io/bezier-icons'
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
+import { Box } from '~/src/components/Box'
+
 import { Badge } from './Badge'
 import { type BadgeProps } from './Badge.types'
 
@@ -14,6 +16,12 @@ const Template: StoryFn<BadgeProps> = ({ children, ...badgeProps }) => (
   <Badge {...badgeProps}>{children}</Badge>
 )
 
+const Truncated: StoryFn<BadgeProps> = ({ children, ...badgeProps }) => (
+  <Box width={200}>
+    <Badge {...badgeProps}>{children}</Badge>
+  </Box>
+)
+
 export const Primary: StoryObj<BadgeProps> = {
   render: Template,
 
@@ -23,4 +31,24 @@ export const Primary: StoryObj<BadgeProps> = {
     icon: AppleIcon,
     variant: 'default',
   },
+  argTypes: {
+    truncated: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export const Secondary: StoryObj<BadgeProps> = {
+  render: Truncated,
+
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    size: 'm',
+    icon: AppleIcon,
+    variant: 'default',
+    truncated: true,
+  },
+  name: 'Truncated',
 }

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

@@ -26,7 +26,7 @@ export const BADGE_TEST_ID = 'bezier-badge'
  */
 export const Badge = memo(
   forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-    { size = 'm', variant = 'default', icon, children, ...rest },
+    { size = 'm', variant = 'default', truncated ,icon, children, ...rest },
     forwardedRef
   ) {
     return (
@@ -48,6 +48,7 @@ export const Badge = memo(
           <BaseTagBadgeText
             size={size}
             marginHorizontal={3}
+            truncated={truncated}
           >
             {children}
           </BaseTagBadgeText>

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

@@ -21,6 +21,12 @@ interface BadgeOwnProps {
    * Icon to be shown on the left side of the badge.
    */
   icon?: BezierIcon
+  /**
+   * Whether the text is truncated.
+   * If it is a positive integer, it means the maximum number of lines.
+   * @default false
+   */
+  truncated?: boolean | number
 }
 
 export interface BadgeProps