@channel.io/bezier-react 2.2.2 → 2.2.4

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

@@ -7,7 +7,6 @@ export declare const EMOJI_TEST_ID = "bezier-emoji";
  * ```tsx
  * <Emoji
  *   name="A"
- *   imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
  *   size="20"
  * />
  * ```

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

@@ -1 +1 @@
-{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAM7D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAI/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAE3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,mFAoBhB,CAAA"}
+{"version":3,"file":"Emoji.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAO7D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAA;AAI/C,eAAO,MAAM,aAAa,iBAAiB,CAAA;AAM3C;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,mFAwBhB,CAAA"}

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

@@ -1,8 +1,15 @@
 import type { BezierComponentProps, SizeProps } from "../../types/props";
 export type EmojiSize = '16' | '20' | '24' | '30' | '36' | '42' | '48' | '60' | '72' | '90' | '120';
 interface EmojiOwnProps {
+    /**
+     * Name of the emoji. e.g. 'grinning', 'smiley', etc.
+     */
     name: string;
-    imageUrl: string;
+    /**
+     * @deprecated
+     * `imageUrl` is created in the component and will be removed in the next major version.
+     */
+    imageUrl?: string;
 }
 export interface EmojiProps extends BezierComponentProps<'div'>, SizeProps<EmojiSize>, EmojiOwnProps {
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Emoji.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,0BAAyB;AAExE,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAA;AAET,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,SAAS,CAAC,SAAS,CAAC,EACpB,aAAa;CAAG"}
+{"version":3,"file":"Emoji.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Emoji/Emoji.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,0BAAyB;AAExE,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,CAAA;AAET,UAAU,aAAa;IACrB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,UACf,SAAQ,oBAAoB,CAAC,KAAK,CAAC,EACjC,SAAS,CAAC,SAAS,CAAC,EACpB,aAAa;CAAG"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type TokenContextValue, type TokenProviderProps } from './TokenProvider.types';
-declare const useTokenContext: (consumerName: string) => NonNullable<TokenContextValue | null>;
+declare const useTokenContext: (consumerName: string) => TokenContextValue;
 export { useTokenContext };
 /**
  * @private

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

@@ -1 +1 @@
-{"version":3,"file":"TokenProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenProvider/TokenProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAOtC,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAA;AAE9B,QAAA,MAA6B,eAAe,iEACoB,CAAA;AAEhE,OAAO,EAAE,eAAe,EAAE,CAAA;AAa1B;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAcxE"}
+{"version":3,"file":"TokenProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/TokenProvider/TokenProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAOtC,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAA;AAE9B,QAAA,MAA6B,eAAe,6CACoB,CAAA;AAEhE,OAAO,EAAE,eAAe,EAAE,CAAA;AAa1B;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAcxE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "React components library that implements Bezier design system.",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@channel.io/bezier-icons": "0.31.1",
+    "@channel.io/bezier-icons": "0.32.0",
     "@chromatic-com/storybook": "^1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
@@ -73,6 +73,7 @@
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/addon-actions": "^8.1.10",
     "@storybook/addon-controls": "^8.1.10",
+    "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-docs": "^8.1.10",
     "@storybook/addon-measure": "^8.1.10",
     "@storybook/addon-outline": "^8.1.10",

package/src/components/AlphaAvatar/AlphaAvatar.stories.tsx

@@ -28,7 +28,6 @@ const Template: StoryFn<AvatarProps> = (args) => <Avatar {...args} />
 
 export const Primary: StoryObj<AvatarProps> = {
   render: Template,
-
   args: {
     avatarUrl: MOCK_AVATAR_URL,
     name: 'Channel',
@@ -37,6 +36,12 @@ export const Primary: StoryObj<AvatarProps> = {
     disabled: false,
     smoothCorners: true,
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/aJJF4bU82uR0jAsmWp5wlE/Navigation?node-id=0-1&t=9HAqBVHxkd1tUwxF-1',
+    },
+  },
 }
 
 const TemplateWithCustomStatus: StoryFn<AvatarProps> = (args) => (
@@ -60,4 +65,10 @@ export const WithCustomStatus: StoryObj<AvatarProps> = {
     showBorder: false,
     disabled: false,
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/aJJF4bU82uR0jAsmWp5wlE/Navigation?node-id=0-1&t=9HAqBVHxkd1tUwxF-1',
+    },
+  },
 }

package/src/components/AlphaAvatarGroup/AlphaAvatarGroup.stories.tsx

@@ -52,4 +52,10 @@ export const Primary: StoryObj<AvatarGroupProps> = {
     size: '30',
     spacing: 4,
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/aJJF4bU82uR0jAsmWp5wlE/Navigation?node-id=1-1389&t=63YtY9eXtdx4ujrv-0',
+    },
+  },
 }

package/src/components/AlphaButton/AlphaButton.stories.tsx

@@ -26,4 +26,10 @@ export const Primary: StoryObj<AlphaButtonProps> = {
     variant: 'primary',
     color: 'blue',
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=0-1&t=WwfuBAWI872yYPf8-1',
+    },
+  },
 }

package/src/components/AlphaFloatingButton/AlphaFloatingButton.stories.tsx

@@ -26,4 +26,10 @@ export const Primary: StoryObj<AlphaFloatingButtonProps> = {
     variant: 'primary',
     color: 'blue',
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=112-2766&t=7KmMal05dj8QL5kK-1',
+    },
+  },
 }

package/src/components/AlphaFloatingIconButton/AlphaFloatingIconButton.stories.tsx

@@ -25,4 +25,10 @@ export const Primary: StoryObj<AlphaFloatingIconButtonProps> = {
     variant: 'primary',
     color: 'blue',
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=112-2766&t=7KmMal05dj8QL5kK-1',
+    },
+  },
 }

package/src/components/AlphaFloatingIconButton/FloatingIconButton.module.scss

@@ -161,6 +161,10 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple';
 
   /* internal components */
   & :where(.ButtonContent) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     &:where(.loading) {
       visibility: hidden;
     }

package/src/components/AlphaLoader/AlphaLoader.stories.tsx

@@ -20,4 +20,10 @@ export const Primary = {
     size: 'm',
     variant: 'secondary',
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/KyhPPZeeC0JBmTclJGe3nn/Status?node-id=6-69&t=aiOXLQegb05Jiqqg-1',
+    },
+  },
 }

package/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx

@@ -24,4 +24,10 @@ export const Primary = {
     value: 'invite',
     variant: 'primary',
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=426-1255&t=tGbZuTTPrTF5lobw-0',
+    },
+  },
 } satisfies StoryObj<typeof meta>

package/src/components/AlphaToggleButtonGroup/AlphaToggleButtonGroup.stories.tsx

@@ -68,6 +68,12 @@ export const Primary = {
     shape: 'rectangle',
     fullWidth: false,
   },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=426-1255&t=tGbZuTTPrTF5lobw-0',
+    },
+  },
 } satisfies StoryObj<typeof meta>
 
 export default meta

package/src/components/Button/Button.module.scss

@@ -157,7 +157,6 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
         color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
-          color: var(--bgtxt-#{$color-variant}-dark);
           background-color: var(--bgtxt-#{$color-variant}-lightest);
         }
       }

package/src/components/Checkbox/Checkbox.module.scss

@@ -12,6 +12,16 @@
 .Checkbox {
   cursor: inherit;
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  margin: 1px;
+
+  background-color: var(--bg-white-normal);
+  border-radius: 7px;
+  box-shadow: inset 0 0 0 2px var(--bdr-black-dark);
+
   /* stylelint-disable-next-line order/order */
   @include dimension.square(18px);
 
@@ -25,16 +35,6 @@
     }
   }
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  margin: 1px;
-
-  background-color: var(--bg-white-normal);
-  border-radius: 7px;
-  box-shadow: inset 0 0 0 2px var(--bdr-black-dark);
-
   &:where([data-disabled]) {
     background-color: var(--bg-black-dark);
     box-shadow: none;

package/src/components/Emoji/Emoji.stories.tsx

@@ -3,25 +3,15 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { Emoji } from './Emoji'
 import { type EmojiProps } from './Emoji.types'
 
-const MOCK_EMOJI_URL =
-  'https://cf.exp.channel.io/asset/emoji/images/80/blush.png'
-
-const meta: Meta<typeof Emoji> = {
+const meta = {
   component: Emoji,
-  argTypes: {
-    imageUrl: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-}
+} satisfies Meta<EmojiProps>
 
 export default meta
 
-export const Primary: StoryObj<EmojiProps> = {
+export const Primary = {
   args: {
     size: '24',
-    imageUrl: MOCK_EMOJI_URL,
+    name: 'blush',
   },
-}
+} satisfies StoryObj<typeof meta>

package/src/components/Emoji/Emoji.test.tsx

@@ -5,10 +5,8 @@ import { render } from '~/src/utils/test'
 import { EMOJI_TEST_ID, Emoji } from './Emoji'
 import { type EmojiProps } from './Emoji.types'
 
-const MOCK_EMOJI_URL = 'https://cf.exp.channel.io/asset/emoji/images/80/a.png'
-
 describe('Emoji Test >', () => {
-  const defaultProps: EmojiProps = { imageUrl: MOCK_EMOJI_URL, name: 'a' }
+  const defaultProps: EmojiProps = { size: '24', name: 'a' }
 
   const renderComponent = (props?: Partial<EmojiProps>) =>
     render(

package/src/components/Emoji/Emoji.tsx

@@ -2,6 +2,7 @@ import React, { type CSSProperties, forwardRef } from 'react'
 
 import classNames from 'classnames'
 
+import { isDev } from '~/src/utils/assert'
 import { cssUrl } from '~/src/utils/style'
 
 import { type EmojiProps } from './Emoji.types'
@@ -10,13 +11,16 @@ import styles from './Emoji.module.scss'
 
 export const EMOJI_TEST_ID = 'bezier-emoji'
 
+const getEmojiUrl = (name: EmojiProps['name'], size: '160' | '80' | '44') => {
+  return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${name}.png`
+}
+
 /**
  * `Emoji` is a component for representing emoji with variant size.
  * @example
  * ```tsx
  * <Emoji
  *   name="A"
- *   imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
  *   size="20"
  * />
  * ```
@@ -25,6 +29,8 @@ export const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(
   { style, imageUrl, className, name, size = '24', ...rest },
   forwardedRef
 ) {
+  const assetSize = Number(size) >= 60 ? '160' : '80'
+
   return (
     <div
       ref={forwardedRef}
@@ -32,7 +38,9 @@ export const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(
       aria-description={name}
       style={
         {
-          '--b-emoji-background-image': cssUrl(imageUrl),
+          '--b-emoji-background-image': cssUrl(
+            imageUrl ?? getEmojiUrl(name, assetSize)
+          ),
           ...style,
         } as CSSProperties
       }

package/src/components/Emoji/Emoji.types.ts

@@ -14,8 +14,15 @@ export type EmojiSize =
   | '120'
 
 interface EmojiOwnProps {
+  /**
+   * Name of the emoji. e.g. 'grinning', 'smiley', etc.
+   */
   name: string
-  imageUrl: string
+  /**
+   * @deprecated
+   * `imageUrl` is created in the component and will be removed in the next major version.
+   */
+  imageUrl?: string
 }
 
 export interface EmojiProps

package/src/components/OutlineItem/OutlineItem.module.scss

@@ -35,9 +35,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
-  width: 16px;
-  height: 100%;
+  margin-right: 6px;
 }
 
 .LeftContent {

package/src/components/OutlineItem/OutlineItem.tsx

@@ -86,7 +86,7 @@ export const OutlineItem = forwardRef<
               <Icon
                 className={styles.Icon}
                 source={open ? ChevronSmallDownIcon : ChevronSmallRightIcon}
-                size="xs"
+                size="s"
                 color="txt-black-dark"
               />
             )}

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -19,11 +19,6 @@ $inner-indicator-size: 8px;
 }
 
 .RadioGroupItem {
-  @include interaction.touchable-hover {
-    @include outer-indicator-focus-styles;
-    @include inner-indicator-focus-styles;
-  }
-
   position: relative;
 
   display: flex;
@@ -33,6 +28,12 @@ $inner-indicator-size: 8px;
 
   outline: none;
 
+  /* stylelint-disable-next-line order/order */
+  @include interaction.touchable-hover {
+    @include outer-indicator-focus-styles;
+    @include inner-indicator-focus-styles;
+  }
+
   /* Outer Indicator */
   &::before {
     @include dimension.square($outer-indicator-size);

package/src/components/TextField/TextField.module.scss

@@ -104,6 +104,7 @@
 
 .RightContentWrapper {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   padding-right: 2px;
 }