@channel.io/bezier-react 2.2.2 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/bezier-react",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "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/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/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);