feat(tabs,button): migrate TabItem to BaseButton, add TabItem maxWidth with truncation tooltip, disallow Button children prop (#2689)

<!--
  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
<!-- Link issues here, e.g. Fixes #1234 -->

Fixes #2688

## Summary

- refactor(button): disallow children prop
- refactor(tabs): migrate TabItem to BaseButton
- feat(tabs): add maxWidth and truncation tooltip

This PR migrates TabItem from Button to BaseButton, introduces an
optional maxWidth prop for TabItem, and shows a Tooltip only when the
label is truncated. It also disallows the children prop in Button to
enforce the intended API.

## Details
- `Tabs`
- Migrate TabItem to BaseButton to simplify styling and reduce Button
dependencies
  - Port only tertiary + monochrome-light styles
    - Default background transparent; hover uses var(--bg-black-lighter)
    - Border radius: s/m = radius-8, l = radius-12
    - Inactive text color aligned to var(--txt-black-darker)
  - Add maxWidth to TabItem; ellipsis detection via useElementTruncated
- Tooltip shows the full label only when truncated (disabled otherwise)
- `Button`
- Disallow children prop (typed as never) to encourage using text,
leftContent, rightContent
- `Docs`
  - Update Tabs stories to cover long labels and truncation behavior

## Breaking change? (Yes/No)
Yes

- Button no longer accepts children. Passing children will produce type
errors.
- Migration:
- Replace `<Button><span>Label</span></Button>` with `<Button
text="Label" />`
  - Move any leading/trailing visuals into leftContent/rightContent
  - Example:
    - Before: `<Button><Icon />Save</Button>`
    - After: `<Button text="Save" leftContent={<Icon />} />`

## References

[related
thread](https://desk.channel.io/root/threads/groups/WebBezier-124831/68bea56a6f3b4b747751/68bea56a6f3b4b747751)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- Breaking Changes
- Button이 더 이상 children을 허용하지 않습니다. 대신 text, leftContent, rightContent를
사용하세요.

- New Features
  - Tabs: TabItem에 선택적 maxWidth 속성 추가.
  - Tab 라벨이 실제로 잘릴 때만 Tooltip이 자동으로 표시됩니다.
  - 콘텐츠 절단 감지 훅 추가로 툴팁 표시가 동적으로 처리됩니다.

- Style
  - Tabs: 크기별 Tab 버튼 레이아웃, 활성/호버/비활성 상태 스타일(.TabItemButton 등) 추가.

- Chores
  - 배포용 변경 로그(changeset) 추가 및 마이너 릴리스 준비.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: j-nary

.changeset/five-ties-agree.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': minor
+---
+
+Add `maxWidth` prop to `TabItem` and show `Tooltip` only when truncated.

.changeset/forty-pillows-reply.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': minor
+---
+
+Remove unused `children` prop from `Button` component.

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

@@ -79,7 +79,7 @@ interface ButtonOwnProps {
 }
 
 export interface ButtonProps
-  extends BezierComponentProps<'button'>,
+  extends Omit<BezierComponentProps<'button'>, 'children'>,
     PolymorphicProps,
     SizeProps<ButtonSize>,
     DisableProps,

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

@@ -31,10 +31,20 @@ $tab-item-indicator-height: 3px;
   display: flex;
 }
 
-.TabItem {
+.TabItemButton {
+  position: relative;
   top: 4px;
+
   overflow: visible;
 
+  box-sizing: border-box;
+
+  background-color: transparent;
+
+  transition:
+    background-color var(--transition-s),
+    box-shadow var(--transition-s);
+
   &::after {
     content: '';
 
@@ -51,6 +61,56 @@ $tab-item-indicator-height: 3px;
     transition: height var(--transition-s);
   }
 
+  &:where(.size-s) {
+    min-width: 24px;
+    height: 24px;
+    padding: 0 4px;
+    border-radius: var(--radius-8);
+
+    & :where(.TabItemButtonText) {
+      padding: 0 3px;
+    }
+  }
+
+  &:where(.size-m) {
+    min-width: 36px;
+    height: 36px;
+    padding: 0 10px;
+    border-radius: var(--radius-8);
+  }
+
+  &:where(.size-l) {
+    min-width: 44px;
+    height: 44px;
+    padding: 0 12px;
+    border-radius: var(--radius-12);
+  }
+
+  &:where(.size-m, .size-l) {
+    & :where(.TabItemButtonContent) {
+      gap: 2px;
+    }
+
+    & :where(.TabItemButtonText) {
+      padding: 0 4px;
+    }
+  }
+
+  &:where(.active, :hover):where(:not(:disabled)) {
+    background-color: var(--bg-black-lighter);
+  }
+
+  /* NOTE: If there is no text, button is square, so padding is 0 */
+  &:not(:has(.TabItemButtonText)) {
+    padding: 0;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--opacity-disabled);
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
   &:where([data-state='active']) {
     color: var(--bgtxt-blue-normal);
 

packages/bezier-react/src/components/Tabs/Tabs.stories.tsx

@@ -66,7 +66,12 @@ function TabsComposition({
           <TabItems>
             <TabItem value="One">Tab1</TabItem>
             <TabItem value="Two">Tab2</TabItem>
-            <TabItem value="Three">Tab3</TabItem>
+            <TabItem
+              value="Three"
+              maxWidth={50}
+            >
+              LongLongLabelTab
+            </TabItem>
           </TabItems>
 
           <TabActions>
@@ -95,7 +100,7 @@ function TabsComposition({
         </TabContent>
         <TabContent value="Three">
           <Center height={100}>
-            <Text color="txt-black-darkest">Tab3 content</Text>
+            <Text color="txt-black-darkest">LongLongLabelTab content</Text>
           </Center>
         </TabContent>
       </Tabs>

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

@@ -1,18 +1,18 @@
 'use client'
 
-import { type JSX, forwardRef, useMemo } from 'react'
+import { type JSX, forwardRef, useMemo, useRef } from 'react'
 import * as React from 'react'
 
 import { OpenInNewIcon } from '@channel.io/bezier-icons'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar'
 import classNames from 'classnames'
 
+import useElementTruncated from '~/src/hooks/useElementTruncated'
 import { createContext } from '~/src/utils/react'
 import { isNil } from '~/src/utils/type'
 
 import { BaseButton } from '~/src/components/BaseButton'
-import { Button } from '~/src/components/Button'
 import { Icon } from '~/src/components/Icon'
 import {
   type TabActionElement,
@@ -27,6 +27,7 @@ import {
   type TabsProps,
 } from '~/src/components/Tabs/Tabs.types'
 import { Text } from '~/src/components/Text'
+import { Tooltip } from '~/src/components/Tooltip'
 
 import styles from './Tabs.module.scss'
 
@@ -130,16 +131,66 @@ function getButtonSizeBy(size: TabSize) {
   )[size]
 }
 
+function getTypography(size: TabSize) {
+  return (
+    {
+      s: '13',
+      m: '14',
+      l: '15',
+    } as const
+  )[size]
+}
+
+const TabItemButton = forwardRef<HTMLButtonElement, TabItemProps>(
+  function TabItemButton(
+    { className, disabled, value, children, maxWidth, style, ...rest },
+    forwardedRef
+  ) {
+    const contentRef = useRef<HTMLElement>(null)
+    const isTruncated = useElementTruncated(contentRef)
+
+    const { size } = useTabListContext()
+
+    return (
+      <Tooltip
+        content={children}
+        disabled={!isTruncated}
+        offset={6}
+      >
+        <BaseButton
+          className={classNames(
+            styles.TabItemButton,
+            styles[`size-${getButtonSizeBy(size)}`],
+            className
+          )}
+          disabled={disabled}
+          ref={forwardedRef}
+          style={{ maxWidth, ...style }}
+          {...rest}
+        >
+          <Text
+            ref={contentRef}
+            className={styles.TabItemButtonText}
+            typo={getTypography(size)}
+            bold
+            truncated
+          >
+            {children}
+          </Text>
+        </BaseButton>
+      </Tooltip>
+    )
+  }
+)
+
 /**
  * `TabItem` is a button that activates its associated content.
  */
 export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(
   function TabItem(
-    { className, disabled, value, children, ...rest },
+    { className, disabled, value, children, maxWidth, style, ...rest },
     forwardedRef
   ) {
-    const { size } = useTabListContext()
-
     if (typeof children !== 'string') {
       return null
     }
@@ -150,16 +201,17 @@ export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(
         value={value}
         asChild
       >
-        <Button
-          className={classNames(styles.TabItem, className)}
-          disabled={disabled}
-          text={children}
-          size={getButtonSizeBy(size)}
-          colorVariant="monochrome-light"
-          styleVariant="tertiary"
+        <TabItemButton
           ref={forwardedRef}
+          className={className}
+          disabled={disabled}
+          value={value}
+          maxWidth={maxWidth}
+          style={style}
           {...rest}
-        />
+        >
+          {children}
+        </TabItemButton>
       </TabsPrimitive.TabsTrigger>
     )
   }

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

@@ -1,4 +1,5 @@
 import type React from 'react'
+import { type CSSProperties } from 'react'
 
 import {
   type BezierComponentProps,
@@ -52,6 +53,7 @@ interface TabItemOwnProps {
    * A unique value that associates the trigger with a content.
    */
   value: string
+  maxWidth?: CSSProperties['maxWidth']
 }
 
 interface TabContentOwnProps {

packages/bezier-react/src/hooks/useElementTruncated.ts

@@ -0,0 +1,36 @@
+import type { RefObject } from 'react'
+import { useEffect, useState } from 'react'
+
+const useElementTruncated = <Element extends HTMLElement>(
+  ref: RefObject<Element | null>
+): boolean => {
+  const [isTruncated, setTruncated] = useState(false)
+
+  useEffect(
+    function initResizeObserver() {
+      if (ref.current) {
+        const resizeObserver = new ResizeObserver((entries) => {
+          const firstEntry = entries[0]
+          if (firstEntry.target) {
+            setTruncated(
+              firstEntry.target.scrollWidth > firstEntry.target.clientWidth ||
+                firstEntry.target.scrollHeight > firstEntry.target.clientHeight
+            )
+          }
+        })
+        resizeObserver.observe(ref.current)
+
+        return function cleanup() {
+          return resizeObserver.disconnect()
+        }
+      }
+
+      return undefined
+    },
+    [ref]
+  )
+
+  return isTruncated
+}
+
+export default useElementTruncated