Add ToggleEmojiButtonGroup and ToggleEmojiButtonSource component (#…

…2301)  ## 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  - #2293  ## Summary  - `ToggleEmojiButtonGroup`과 `ToggleEmojiButtonSource` 컴포넌트를 구현합니다. ## Details  - fillDirection="all" 일 때 컨테이너에 넘치지 않을 만큼 가로 세로 1:1 비율로 늘어나는 스타일을 css 로 구현하는 것이 어려웠습니다. aspect-ration: 1/1, width: 100%, height: auto 로 시도해봤으나, 컨테이너가 100px * 50px 의 크기를 가질 때 버튼이 100px * 100px 로 되버리는 문제가 있었습니다. 어쩔 수 없이 js로 계산해서 resizeObserver까지 다는 방식으로 구현했습니다. - `ToggleEmojiButtonSource`컴포넌트안에 이모지를 보여줄때, imageUrl를 props로 열여주는 것도 생각했지만 이렇게 하면 모바일에서 구현이 어려운 문제가 있어서 content속성을 그대로 활용했습니다. ### Breaking change? (Yes/No)  - No ## References  - [컴포넌트 스펙(internal)](https://www.notion.so/channelio/Toggle-Icon-Button-Group-8b320d0c2dbe4d4b8d5731f95fece172) - [디자인(internal)](https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=534-870&t=yVpw7vZQjCm6IsCK-0)
channel-io · Nov 6, 2024 · 26658dc · 26658dc
1 parent 8e6fb64
commit 26658dc
Show file tree

Hide file tree

Showing 12 changed files with 423 additions and 55 deletions.
diff --git a/.changeset/wild-ducks-nail.md b/.changeset/wild-ducks-nail.md
@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Add `ToggleEmojiButtonGroup` and `ToggleEmojiButtonSource` component.
diff --git a/packages/bezier-react/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx b/packages/bezier-react/src/components/AlphaToggleButton/AlphaToggleButton.stories.tsx
@@ -16,7 +16,6 @@ export const Primary = {
   args: {
     text: 'Invite',
     selected: false,
-    loading: false,
     prefixContent: GiftIcon,
     suffixContent: ArrowRightIcon,
     size: 'm',

diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.module.scss
@@ -1,8 +1,3 @@
-@use '../../styles/mixins/dimension';
-@use 'sass:map';
-
-@import '../Icon/Icon.module';
-
 .Button {
   position: relative;
 
@@ -89,25 +84,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    &:where(.loading) {
-      visibility: hidden;
-    }
-  }
-
-  & :where(.ButtonLoader) {
-    position: absolute;
-    inset: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:where(.size-s) {
-      & :is(.Loader) {
-        @include dimension.square(#{map.get($size-map, 's')}px);
-      }
-    }
   }
 
   /* NOTE: this fixes container width when bold toggles */

diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.tsx
@@ -6,7 +6,6 @@ import { isBezierIcon } from '@channel.io/bezier-icons'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
 import classNames from 'classnames'
 
-import { AlphaLoader } from '~/src/components/AlphaLoader'
 import { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'
 import { BaseButton } from '~/src/components/BaseButton'
 import { Icon, type IconSize } from '~/src/components/Icon'
@@ -45,7 +44,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
       shape: shapeProps,
       size = 'm',
       className,
-      loading,
       onSelectedChange,
       ...rest
     },
@@ -72,12 +70,7 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
             className
           )}
         >
-          <div
-            className={classNames(
-              styles.ButtonContent,
-              loading && styles.loading
-            )}
-          >
+          <div className={classNames(styles.ButtonContent)}>
             <SideContent
               size={ICON_SIZE}
               content={prefixContent}
@@ -98,22 +91,6 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
               content={suffixContent}
             />
           </div>
-
-          {loading && (
-            <div
-              className={classNames(
-                styles.ButtonLoader,
-                // NOTE: Loader size is the same as icon size
-                styles[`size-${ICON_SIZE}`]
-              )}
-            >
-              <AlphaLoader
-                size="s"
-                className={styles.Loader}
-                variant="secondary"
-              />
-            </div>
-          )}
         </Comp>
       </TogglePrimitive.Root>
     )

diff --git a/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.types.ts b/packages/bezier-react/src/components/AlphaToggleButton/ToggleButton.types.ts
@@ -17,12 +17,6 @@ interface ToggleButtonOwnProps {
    */
   text: string
 
-  /**
-   * If `loading` is true, spinner will be shown, replacing the content.
-   * @default false
-   */
-  loading?: boolean
-
   /**
    * Props that shows whether the button is selected.
    * @default false

diff --git a/...-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx b/...-react/src/components/AlphaToggleEmojiButtonGroup/AlphaToggleEmojiButtonGroup.stories.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
+
+import { Center } from '~/src/components/Center'
+
+import {
+  ToggleEmojiButtonGroup,
+  ToggleEmojiButtonSource,
+} from './ToggleEmojiButtonGroup'
+import type {
+  ToggleEmojiButtonGroupProps,
+  ToggleEmojiButtonSourceProps,
+} from './ToggleEmojiButtonGroup.types'
+
+const meta: Meta<typeof ToggleEmojiButtonGroup> = {
+  component: ToggleEmojiButtonGroup,
+}
+export default meta
+
+type ToggleButtonCompositionType = ToggleEmojiButtonGroupProps &
+  Pick<ToggleEmojiButtonSourceProps, 'variant'>
+
+const Template: StoryFn<ToggleButtonCompositionType> = ({
+  fillDirection,
+  variant,
+}) => {
+  return (
+    <Center
+      width="25vw"
+      height="15vh"
+      backgroundColor="bg-lounge"
+    >
+      <ToggleEmojiButtonGroup
+        defaultValue="blush"
+        fillDirection={fillDirection}
+      >
+        <ToggleEmojiButtonSource
+          variant={variant}
+          value="blush"
+          name="blush"
+        />
+        <ToggleEmojiButtonSource
+          variant={variant}
+          value="grinning"
+          name="grinning"
+        />
+      </ToggleEmojiButtonGroup>
+    </Center>
+  )
+}
+
+export const Primary = {
+  render: Template,
+
+  args: {
+    fillDirection: 'horizontal',
+    variant: 'primary',
+  },
+  parameters: {
+    design: {
+      type: 'link',
+      url: 'https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=425-281&t=ktusTVyr8cD3cTlt-1',
+    },
+  },
+} satisfies StoryObj<ToggleButtonCompositionType>
diff --git a/...ezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss b/...ezier-react/src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.module.scss
@@ -0,0 +1,76 @@
+@use '../../styles/mixins/dimension';
+
+.ToggleEmojiButtonGroup {
+  display: flex;
+  gap: var(--b-toggle-emoji-button-group-gap);
+  align-items: center;
+  justify-content: center;
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:where(.fillDirection-horizontal) {
+    width: 100%;
+
+    & :where(.ToggleEmojiButtonSource) {
+      flex-grow: 1;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  &:where(.fillDirection-all) {
+    width: 100%;
+    height: 100%;
+
+    & :is(.ToggleEmojiButtonSource) {
+      max-width: 160px;
+      max-height: 160px;
+    }
+  }
+}
+
+.ToggleEmojiButtonSource {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 12px;
+
+  border-radius: var(--radius-12);
+
+  &:where(.size-m) {
+    @include dimension.square(var(--b-toggle-emoji-button-size));
+  }
+
+  &:where(.variant-primary) {
+    background-color: var(--alpha-color-bg-grey-lightest);
+    box-shadow: var(--alpha-shadow-input-default);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-grey-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-bg-blue-lightest);
+      box-shadow: 0 0 0 1px var(--alpha-color-primary-bg-normal) inset;
+    }
+  }
+
+  &:where(.variant-secondary) {
+    background-color: var(--alpha-color-bg-black-lightest);
+
+    &:where(&:hover) {
+      background-color: var(--alpha-color-bg-black-lighter);
+    }
+
+    &:where([data-state='on']) {
+      background-color: var(--alpha-color-primary-bg-lighter);
+    }
+  }
+
+  & :where(.ButtonContent) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}