Remove color props from Tag component & TagBadge common type (#2114)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## 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

<!-- Please link to issue if one exists -->

- Fixes #1879 

## Summary

<!-- Please brief explanation of the changes made -->

Remove `color` props from `Tag` component & TagBadge common type

## Details

- `Tag` 컴포넌트에서 `color` 속성을 제거하고, `variant` 속성을 통해서만 스타일링할 수 있도록 합니다.
마찬가지로 불필요한 `TagBadgeBgColorPreset` 을 제거합니다.
- `TagBadgeCommon` 의 스타일을 `Tag` 와 `Badge` 에서 import하여 조립해 사용하는 대신, 스타일이
포함된 `BaseTagBadge` 컴포넌트를 만들고 재사용하도록 했습니다. 또한 Size, Variant type을 각
컴포넌트에서 직접 정의하여 사용하도록 변경했습니다. 이 방식이 현재 components 디렉토리 내부 구성 방식-컴포넌트명이
폴더-에 더 적합하다고 판단했습니다.

<!-- Please elaborate description of the changes -->

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

Yes

.changeset/calm-llamas-bake.md

@@ -0,0 +1,9 @@
+---
+"@channel.io/bezier-react": major
+---
+
+**Breaking changes: Remove TagBadge-related types**
+
+- Remove `color` prop of `TagProps` and `TagBadgeBgColorPreset`.
+- Remove `TagBadgeSize`. Please change it to `TagSize` and `BadgeSize`.
+- Remove `TagBadgeVariant`. Please change it to `TagVariant` and `BadgeVariant`.

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

@@ -1,18 +1,12 @@
 import React, { forwardRef, memo } from 'react'
 
-import classNames from 'classnames'
-
 import { isEmpty } from '~/src/utils/type'
 
+import { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'
 import { Icon } from '~/src/components/Icon'
-import { getProperTagBadgeTypo } from '~/src/components/TagBadgeCommon'
-import commonStyles from '~/src/components/TagBadgeCommon/TagBadge.module.scss'
-import { Text } from '~/src/components/Text'
 
 import { type BadgeProps } from './Badge.types'
 
-import styles from './Badge.module.scss'
-
 export const BADGE_TEST_ID = 'bezier-badge'
 
 /**
@@ -30,19 +24,14 @@ export const BADGE_TEST_ID = 'bezier-badge'
  */
 export const Badge = memo(
   forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-    { size = 'm', variant = 'default', icon, children, className, ...rest },
+    { size = 'm', variant = 'default', icon, children, ...rest },
     forwardedRef
   ) {
     return (
-      <div
+      <BaseTagBadge
         ref={forwardedRef}
-        className={classNames(
-          styles.Badge,
-          styles[`variant-${variant}`],
-          commonStyles.TagBadge,
-          commonStyles[`size-${size}`],
-          className
-        )}
+        size={size}
+        variant={variant}
         data-testid={BADGE_TEST_ID}
         {...rest}
       >
@@ -54,14 +43,14 @@ export const Badge = memo(
         )}
 
         {!isEmpty(children) && (
-          <Text
-            typo={getProperTagBadgeTypo(size)}
+          <BaseTagBadgeText
+            size={size}
             marginHorizontal={3}
           >
             {children}
-          </Text>
+          </BaseTagBadgeText>
         )}
-      </div>
+      </BaseTagBadge>
     )
   })
 )

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

@@ -8,9 +8,13 @@ import {
 } from '~/src/types/props'
 
 import {
-  type TagBadgeSize,
-  type TagBadgeVariant,
-} from '~/src/components/TagBadgeCommon'
+  type BaseTagBadgeSize,
+  type BaseTagBadgeVariant,
+} from '~/src/components/BaseTagBadge'
+
+export type BadgeSize = BaseTagBadgeSize
+
+export type BadgeVariant = BaseTagBadgeVariant
 
 interface BadgeOwnProps {
   /**
@@ -22,6 +26,6 @@ interface BadgeOwnProps {
 export interface BadgeProps
   extends BezierComponentProps<'div'>,
     ChildrenProps,
-    SizeProps<TagBadgeSize>,
-    VariantProps<TagBadgeVariant>,
+    SizeProps<BadgeSize>,
+    VariantProps<BadgeVariant>,
     BadgeOwnProps {}

packages/bezier-react/src/components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Badge test > Snapshot > 1`] = `
 <div
-  class="Badge variant-default TagBadge size-m"
+  class="BaseTagBadge size-m variant-default"
   data-testid="bezier-badge"
 />
 `;

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

@@ -1,2 +1,2 @@
 export { Badge } from './Badge'
-export type { BadgeProps } from './Badge.types'
+export type { BadgeProps, BadgeSize, BadgeVariant } from './Badge.types'

packages/bezier-react/src/components/Badge/Badge.module.scss → packages/bezier-react/src/components/BaseTagBadge/BaseTagBadge.module.scss

@@ -1,7 +1,24 @@
-.Badge {
+.BaseTagBadge {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+
   color: var(--b-tag-badge-color);
+
   background-color: var(--b-tag-badge-background-color);
 
+  &:where(.size-xs) {
+    padding: 1px 2px;
+    border-radius: var(--radius-4);
+  }
+
+  &:where(.size-s, .size-m, .size-l) {
+    padding: 1px 4px;
+    border-radius: var(--radius-6);
+  }
+
   &:where(.variant-default) {
     --b-tag-badge-background-color: var(--bg-black-lighter);
     --b-tag-badge-color: var(--txt-black-darkest);

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

@@ -0,0 +1,63 @@
+import React, { forwardRef } from 'react'
+
+import classNames from 'classnames'
+
+import { Text } from '~/src/components/Text'
+
+import {
+  type BaseTagBadgeProps,
+  type BaseTagBadgeSize,
+  type BaseTagBadgeTextProps,
+} from './BaseTagBadge.types'
+
+import styles from './BaseTagBadge.module.scss'
+
+function getProperTypo(size: BaseTagBadgeSize) {
+  return (
+    {
+      xs: '11',
+      s: '13',
+      m: '14',
+      l: '15',
+    } as const
+  )[size]
+}
+
+/**
+ * `BaseTagBadge` is the component on which `Tag` and `Badge` components are based.
+ */
+export const BaseTagBadge = forwardRef<HTMLDivElement, BaseTagBadgeProps>(
+  function Tag({ size, variant, children, className, ...rest }, forwardedRef) {
+    return (
+      <div
+        ref={forwardedRef}
+        className={classNames(
+          styles.BaseTagBadge,
+          styles[`size-${size}`],
+          styles[`variant-${variant}`],
+          className
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+/**
+ * `BaseTagBadgeText` is the component on which `Tag` and `Badge` components are based.
+ */
+export const BaseTagBadgeText = forwardRef<
+  HTMLDivElement,
+  BaseTagBadgeTextProps
+>(function BaseTagBadgeText({ size, children, ...rest }) {
+  return (
+    <Text
+      typo={getProperTypo(size)}
+      {...rest}
+    >
+      {children}
+    </Text>
+  )
+})

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

@@ -0,0 +1,36 @@
+import {
+  type BezierComponentProps,
+  type ChildrenProps,
+  type SizeProps,
+  type VariantProps,
+} from '~/src/types/props'
+
+import { type TextProps } from '~/src/components/Text'
+
+export type BaseTagBadgeSize = 'xs' | 's' | 'm' | 'l'
+
+export type BaseTagBadgeVariant =
+  | 'default'
+  | 'monochrome-light'
+  | 'monochrome-dark'
+  | 'blue'
+  | 'cobalt'
+  | 'teal'
+  | 'green'
+  | 'olive'
+  | 'pink'
+  | 'navy'
+  | 'yellow'
+  | 'orange'
+  | 'red'
+  | 'purple'
+
+export interface BaseTagBadgeProps
+  extends BezierComponentProps<'div'>,
+    ChildrenProps,
+    Required<SizeProps<BaseTagBadgeSize>>,
+    Required<VariantProps<BaseTagBadgeVariant>> {}
+
+export interface BaseTagBadgeTextProps
+  extends Omit<TextProps, 'typo'>,
+    Required<SizeProps<BaseTagBadgeSize>> {}

packages/bezier-react/src/components/BaseTagBadge/index.ts

@@ -0,0 +1,5 @@
+export { BaseTagBadge, BaseTagBadgeText } from './BaseTagBadge'
+export type {
+  BaseTagBadgeSize,
+  BaseTagBadgeVariant,
+} from './BaseTagBadge.types'

packages/bezier-react/src/components/Tag/Tag.module.scss

@@ -1,15 +1,4 @@
-.Tag {
-  /**
-  * TODO
-  * @see {@link https://github.com/channel-io/bezier-react/issues/1879}
-  * share background style logic with `Badge` after removing `color` props
-  */
-  --b-tag-badge-background-color: initial;
-
-  background-color: var(--b-tag-badge-background-color);
-}
-
-.CloseIcon {
+.TagDeleteIcon {
   cursor: pointer;
 
   &:where(:focus-visible) {

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

@@ -1,19 +1,11 @@
-import React, { type CSSProperties, forwardRef, memo } from 'react'
+import React, { forwardRef, memo } from 'react'
 
 import { CancelSmallIcon } from '@channel.io/bezier-icons'
-import classNames from 'classnames'
 
-import { type SemanticColor } from '~/src/types/tokens'
-import { cssVar } from '~/src/utils/style'
 import { isEmpty, isNil } from '~/src/utils/type'
 
+import { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'
 import { Icon } from '~/src/components/Icon'
-import {
-  getProperTagBadgeBgColor,
-  getProperTagBadgeTypo,
-} from '~/src/components/TagBadgeCommon'
-import commonStyles from '~/src/components/TagBadgeCommon/TagBadge.module.scss'
-import { Text } from '~/src/components/Text'
 
 import { type TagProps } from './Tag.types'
 
@@ -37,54 +29,32 @@ export const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'
  */
 export const Tag = memo(
   forwardRef<HTMLDivElement, TagProps>(function Tag(
-    {
-      size = 'm',
-      variant = 'default',
-      color: givenColor,
-      children,
-      className,
-      onDelete,
-      style,
-      ...rest
-    },
+    { size = 'm', variant = 'default', children, onDelete, ...rest },
     forwardedRef
   ) {
-    const bgColor: SemanticColor =
-      givenColor || getProperTagBadgeBgColor(variant)
-
     return (
-      <div
-        style={
-          {
-            '--b-tag-badge-background-color': cssVar(bgColor),
-            ...style,
-          } as CSSProperties
-        }
-        className={classNames(
-          styles.Tag,
-          commonStyles.TagBadge,
-          commonStyles[`size-${size}`],
-          className
-        )}
+      <BaseTagBadge
         ref={forwardedRef}
+        size={size}
+        variant={variant}
         data-testid={TAG_TEST_ID}
         {...rest}
       >
         {!isEmpty(children) && (
-          <Text
-            typo={getProperTagBadgeTypo(size)}
+          <BaseTagBadgeText
+            size={size}
             marginHorizontal={2}
             color="txt-black-darkest"
           >
             {children}
-          </Text>
+          </BaseTagBadgeText>
         )}
 
         {!isNil(onDelete) && (
           <Icon
             role="button"
             tabIndex={0}
-            className={styles.CloseIcon}
+            className={styles.TagDeleteIcon}
             source={CancelSmallIcon}
             size="xs"
             color="txt-black-darker"
@@ -95,7 +65,7 @@ export const Tag = memo(
             data-testid={TAG_DELETE_TEST_ID}
           />
         )}
-      </div>
+      </BaseTagBadge>
     )
   })
 )

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

@@ -1,15 +1,18 @@
 import {
   type BezierComponentProps,
   type ChildrenProps,
-  type ColorProps,
   type SizeProps,
   type VariantProps,
 } from '~/src/types/props'
 
 import {
-  type TagBadgeSize,
-  type TagBadgeVariant,
-} from '~/src/components/TagBadgeCommon'
+  type BaseTagBadgeSize,
+  type BaseTagBadgeVariant,
+} from '~/src/components/BaseTagBadge'
+
+export type TagSize = BaseTagBadgeSize
+
+export type TagVariant = BaseTagBadgeVariant
 
 interface TagOwnProps {
   /**
@@ -21,9 +24,8 @@ interface TagOwnProps {
 }
 
 export interface TagProps
-  extends Omit<BezierComponentProps<'div'>, keyof ColorProps>,
+  extends BezierComponentProps<'div'>,
     ChildrenProps,
-    SizeProps<TagBadgeSize>,
-    VariantProps<TagBadgeVariant>,
-    ColorProps,
+    SizeProps<TagSize>,
+    VariantProps<TagVariant>,
     TagOwnProps {}