@channel.io/bezier-react 3.0.2 → 3.1.0

package/dist/types/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAE3C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,kGA+BjB,CAAA"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAE3C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,kGAgCjB,CAAA"}

package/dist/types/components/Badge/Badge.types.d.ts

@@ -8,6 +8,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 extends BezierComponentProps<'div'>, ChildrenProps, SizeProps<BadgeSize>, VariantProps<BadgeVariant>, BadgeOwnProps {
 }

package/dist/types/components/Badge/Badge.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,0BAAyB;AAE1B,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACzB,wBAAqC;AAEtC,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAA;AAExC,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAA;AAE9C,UAAU,aAAa;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,SAAS,CAAC,EACpB,YAAY,CAAC,YAAY,CAAC,EAC1B,aAAa;CAAG"}
+{"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,0BAAyB;AAE1B,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACzB,wBAAqC;AAEtC,MAAM,MAAM,SAAS,GAAG,gBAAgB,CAAA;AAExC,MAAM,MAAM,YAAY,GAAG,mBAAmB,CAAA;AAE9C,UAAU,aAAa;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,aAAa,EACb,SAAS,CAAC,SAAS,CAAC,EACpB,YAAY,CAAC,YAAY,CAAC,EAC1B,aAAa;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -64,7 +64,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@channel.io/bezier-icons": "0.39.0",
+    "@channel.io/bezier-icons": "0.40.0",
     "@chromatic-com/storybook": "^3.2.2",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-alias": "^5.1.1",

package/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',
 }

package/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>

package/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

package/src/components/Banner/Banner.module.scss

@@ -7,6 +7,8 @@
   min-width: 200px;
   padding: 12px;
 
+  text-align: left;
+
   border-radius: var(--radius-12);
 
   &:where(.variant-default) {