@channel.io/bezier-react 1.6.2 → 1.7.1

package/src/components/{Tooltip → LegacyTooltip}/utils.ts

@@ -3,14 +3,14 @@ import { getRootElement } from '~/src/utils/domUtils'
 import {
   type GetReplacement,
   type GetTooltipStyle,
-  TooltipPosition,
-} from './Tooltip.types'
+  LegacyTooltipPosition,
+} from './LegacyTooltip.types'
 
 export function getReplacement({
   tooltip,
   keepInContainer,
   placement,
-}: GetReplacement): TooltipPosition {
+}: GetReplacement): LegacyTooltipPosition {
   if (!keepInContainer) {
     return placement
   }
@@ -36,42 +36,42 @@ export function getReplacement({
 
   if (isOverTop) {
     if (isOverLeft) {
-      return TooltipPosition.BottomLeft
+      return LegacyTooltipPosition.BottomLeft
     }
     if (isOverRight) {
-      return TooltipPosition.BottomRight
+      return LegacyTooltipPosition.BottomRight
     }
-    return TooltipPosition.BottomCenter
+    return LegacyTooltipPosition.BottomCenter
   }
 
   if (isOverBottom) {
     if (isOverLeft) {
-      return TooltipPosition.TopLeft
+      return LegacyTooltipPosition.TopLeft
     }
     if (isOverRight) {
-      return TooltipPosition.TopRight
+      return LegacyTooltipPosition.TopRight
     }
-    return TooltipPosition.TopCenter
+    return LegacyTooltipPosition.TopCenter
   }
 
   if (isOverLeft) {
     if (isOverTop) {
-      return TooltipPosition.RightTop
+      return LegacyTooltipPosition.RightTop
     }
     if (isOverBottom) {
-      return TooltipPosition.RightBottom
+      return LegacyTooltipPosition.RightBottom
     }
-    return TooltipPosition.RightCenter
+    return LegacyTooltipPosition.RightCenter
   }
 
   if (isOverRight) {
     if (isOverTop) {
-      return TooltipPosition.LeftTop
+      return LegacyTooltipPosition.LeftTop
     }
     if (isOverBottom) {
-      return TooltipPosition.LeftBottom
+      return LegacyTooltipPosition.LeftBottom
     }
-    return TooltipPosition.LeftCenter
+    return LegacyTooltipPosition.LeftCenter
   }
 
   return placement
@@ -102,50 +102,50 @@ export function getTooltipStyle({
   let offsetStyle = {}
 
   switch (placement) {
-    case TooltipPosition.TopCenter:
-    case TooltipPosition.TopLeft:
-    case TooltipPosition.TopRight:
+    case LegacyTooltipPosition.TopCenter:
+    case LegacyTooltipPosition.TopLeft:
+    case LegacyTooltipPosition.TopRight:
       translateY = -100
       offsetBottom = offset
       break
-    case TooltipPosition.RightCenter:
-    case TooltipPosition.RightTop:
-    case TooltipPosition.RightBottom:
+    case LegacyTooltipPosition.RightCenter:
+    case LegacyTooltipPosition.RightTop:
+    case LegacyTooltipPosition.RightBottom:
       left += containerWidth
       offsetLeft = offset
       break
-    case TooltipPosition.BottomCenter:
-    case TooltipPosition.BottomLeft:
-    case TooltipPosition.BottomRight:
+    case LegacyTooltipPosition.BottomCenter:
+    case LegacyTooltipPosition.BottomLeft:
+    case LegacyTooltipPosition.BottomRight:
       top += containerHeight
       offsetTop = offset
       break
-    case TooltipPosition.LeftCenter:
-    case TooltipPosition.LeftTop:
-    case TooltipPosition.LeftBottom:
+    case LegacyTooltipPosition.LeftCenter:
+    case LegacyTooltipPosition.LeftTop:
+    case LegacyTooltipPosition.LeftBottom:
       translateX = -100
       offsetRight = offset
       break
   }
 
   switch (placement) {
-    case TooltipPosition.TopCenter:
-    case TooltipPosition.BottomCenter:
+    case LegacyTooltipPosition.TopCenter:
+    case LegacyTooltipPosition.BottomCenter:
       translateX = -50
       left += (containerWidth / 2)
       break
-    case TooltipPosition.TopRight:
-    case TooltipPosition.BottomRight:
+    case LegacyTooltipPosition.TopRight:
+    case LegacyTooltipPosition.BottomRight:
       translateX = -100
       left += containerWidth
       break
-    case TooltipPosition.RightCenter:
-    case TooltipPosition.LeftCenter:
+    case LegacyTooltipPosition.RightCenter:
+    case LegacyTooltipPosition.LeftCenter:
       translateY = -50
       top += (containerHeight / 2)
       break
-    case TooltipPosition.RightBottom:
-    case TooltipPosition.LeftBottom:
+    case LegacyTooltipPosition.RightBottom:
+    case LegacyTooltipPosition.LeftBottom:
       translateY = -100
       top += containerHeight
       break

package/src/components/ListMenuTitle/ListMenuTitle.tsx

@@ -1,4 +1,7 @@
-import React, { useCallback } from 'react'
+import React, {
+  forwardRef,
+  useCallback,
+} from 'react'
 
 import { noop } from '~/src/utils/functionUtils'
 import { isNil } from '~/src/utils/typeUtils'
@@ -12,17 +15,17 @@ import {
 
 export const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title'
 
-function ListMenuTitle({
+const ListMenuTitle = forwardRef<HTMLDivElement, ListMenuTitleProps>(function ListMenuTitle({
   as,
   testId = SIDEBAR_MENU_TITLE_TEST_ID,
   content,
   hide = false,
   rightAction = null,
-  onClick = noop,
   onClickAction = noop,
   style,
   className,
-}: ListMenuTitleProps) {
+  ...rest
+}, forwardedRef) {
   const handleClickAction = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {
     ev.stopPropagation()
     onClickAction()
@@ -34,11 +37,12 @@ function ListMenuTitle({
 
   return (
     <Wrapper
+      {...rest}
+      ref={forwardedRef}
       data-testid={testId}
       as={as}
       style={style}
       className={className}
-      onClick={onClick}
     >
       <TitleWrapper>
         { content }
@@ -54,6 +58,6 @@ function ListMenuTitle({
       }
     </Wrapper>
   )
-}
+})
 
 export default ListMenuTitle

package/src/components/ListMenuTitle/ListMenuTitle.types.ts

@@ -8,13 +8,13 @@ import {
 interface ListMenuTitleOptions {
   rightAction?: React.ReactNode
   hide?: boolean
-  onClick?: React.MouseEventHandler
   onClickAction?: () => void
 }
 
 export default interface ListMenuTitleProps extends
   BezierComponentProps,
   ContentProps,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'content'>,
   ListMenuTitleOptions {}
 
 export interface StyledWrapperProps extends BezierComponentProps {}

package/src/components/Modals/Modal/Modal.types.ts

@@ -128,10 +128,10 @@ export interface ModalFooterProps extends
   ModalFooterOptions {}
 
 export interface ModalTriggerProps extends
-  ChildrenProps {}
+  ChildrenProps<React.ReactElement> {}
 
 export interface ModalCloseProps extends
-  ChildrenProps {}
+  ChildrenProps<React.ReactElement> {}
 
 export interface ModalContentContextValue extends
   NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}

package/src/components/Navigator/NavGroup/NavGroup.stories.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 
-import { DotIcon } from '@channel.io/bezier-icons'
+import {
+  DotIcon,
+  SettingsIcon,
+} from '@channel.io/bezier-icons'
 import {
   type Meta,
   type Story,
@@ -54,6 +57,6 @@ Primary.args = {
   active: false,
   name: 'general',
   content: '일반 설정',
-  leftIcon: 'settings',
+  leftIcon: SettingsIcon,
   rightContent: <Icon source={DotIcon} size={IconSize.XS} color="bgtxt-orange-normal" />,
 }

package/src/components/Navigator/NavGroup/NavGroup.test.tsx

@@ -22,7 +22,7 @@ describe('NavGroup Test >', () => {
 
   beforeEach(() => {
     props = {
-      leftIcon: 'dot',
+      leftIcon: DotIcon,
       name: 'general',
       content: 'test-content',
       rightContent: <Icon source={DotIcon} size={IconSize.XS} color="bgtxt-orange-normal" />,

package/src/components/Navigator/NavGroup/NavGroup.tsx

@@ -1,4 +1,5 @@
 import React, {
+  forwardRef,
   memo,
   useCallback,
 } from 'react'
@@ -17,10 +18,6 @@ import {
   Icon,
   IconSize,
 } from '~/src/components/Icon'
-import {
-  LegacyIcon,
-  isIconName,
-} from '~/src/components/LegacyIcon'
 import { Text } from '~/src/components/Text'
 
 import type NavGroupProps from './NavGroup.types'
@@ -37,7 +34,7 @@ import {
 export const NAV_GROUP_TEST_ID = 'bezier-react-nav-group'
 export const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-react-nav-group-left-icon'
 
-function NavGroup({
+const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(function NavGroup({
   as,
   testId = NAV_GROUP_TEST_ID,
   name,
@@ -51,7 +48,8 @@ function NavGroup({
   open,
   active,
   onClick = noop,
-}: NavGroupProps) {
+  ...rest
+}, forwardedRef) {
   const handleClickItem = useCallback((e?: React.MouseEvent) => {
     onClick(e, name)
   }, [
@@ -61,12 +59,13 @@ function NavGroup({
 
   const hasChildren = !isNil(children)
   const chevronIconSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon
-  const showLeftIcon = isIconName(leftIcon)
   const ariaName = `${name}Menu`
 
   return (
     <Wrapper role="none">
       <Item
+        {...rest}
+        ref={forwardedRef}
         as={as}
         active={active}
         style={style}
@@ -80,14 +79,12 @@ function NavGroup({
         aria-controls={ariaName}
       >
         <LeftIconWrapper>
-          { showLeftIcon && (
-            <LegacyIcon
-              testId={NAV_GROUP_LEFT_ICON_TEST_ID}
-              name={leftIcon}
-              size={IconSize.S}
-              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}
-            />
-          ) }
+          <Icon
+            testId={NAV_GROUP_LEFT_ICON_TEST_ID}
+            source={leftIcon}
+            size={IconSize.S}
+            color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}
+          />
         </LeftIconWrapper>
 
         <Text typo={Typography.Size14} truncated>
@@ -121,6 +118,6 @@ function NavGroup({
       ) }
     </Wrapper>
   )
-}
+})
 
 export default memo(NavGroup)

package/src/components/Navigator/NavGroup/NavGroup.types.ts

@@ -1,4 +1,4 @@
-import { type IconName } from '@channel.io/bezier-icons'
+import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
   ActivatableProps,
@@ -10,7 +10,7 @@ import type {
 
 interface NavGroupOptions {
   open?: boolean
-  leftIcon: IconName
+  leftIcon: BezierIcon
   name: string
   onClick?: (e?: React.MouseEvent, name?: string) => void
 }
@@ -21,4 +21,5 @@ export default interface NavGroupProps extends
   ContentProps,
   Pick<SideContentProps, 'rightContent'>,
   Pick<ActivatableProps, 'active'>,
+  Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'content'>,
   NavGroupOptions {}

package/src/components/Navigator/NavItem/NavItem.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { DotIcon } from '@channel.io/bezier-icons'
+
 import { LightTheme } from '~/src/foundation/Colors/Theme'
 
 import { render } from '~/src/utils/testUtils'
@@ -15,7 +17,7 @@ describe('NavItem Test >', () => {
 
   beforeEach(() => {
     props = {
-      leftIcon: 'dot',
+      leftIcon: DotIcon,
       name: 'general',
       content: 'test-content',
     }

package/src/components/Navigator/NavItem/NavItem.tsx

@@ -1,4 +1,5 @@
 import React, {
+  forwardRef,
   memo,
   useCallback,
 } from 'react'
@@ -7,11 +8,10 @@ import { Typography } from '~/src/foundation'
 
 import { noop } from '~/src/utils/functionUtils'
 
-import { IconSize } from '~/src/components/Icon'
 import {
-  LegacyIcon,
-  isIconName,
-} from '~/src/components/LegacyIcon'
+  Icon,
+  IconSize,
+} from '~/src/components/Icon'
 import { Text } from '~/src/components/Text'
 
 import type NavItemProps from './NavItem.types'
@@ -26,7 +26,7 @@ import {
 export const NAV_ITEM_TEST_ID = 'bezier-react-nav-item'
 export const NAV_ITEM_LEFT_ICON_TEST_ID = 'bezier-react-nav-item-left-icon'
 
-function NavItem({
+const NavItem = forwardRef<HTMLAnchorElement, NavItemProps>(function NavItem({
   as,
   testId = NAV_ITEM_TEST_ID,
   name,
@@ -40,7 +40,8 @@ function NavItem({
   leftIcon,
   active,
   onClick = noop,
-}: NavItemProps) {
+  ...rest
+}, forwardedRef) {
   const handleClickItem = useCallback((e?: React.MouseEvent) => {
     onClick(e, name)
   }, [
@@ -48,11 +49,11 @@ function NavItem({
     onClick,
   ])
 
-  const showLeftIcon = isIconName(leftIcon)
-
   return (
     <Wrapper role="none">
       <Item
+        {...rest}
+        ref={forwardedRef}
         as={as}
         active={active}
         style={style}
@@ -65,10 +66,10 @@ function NavItem({
         role="menuitem"
       >
         <LeftIconWrapper>
-          { showLeftIcon && (
-            <LegacyIcon
+          { leftIcon && (
+            <Icon
               testId={NAV_ITEM_LEFT_ICON_TEST_ID}
-              name={leftIcon}
+              source={leftIcon}
               size={IconSize.S}
               color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}
             />
@@ -87,6 +88,6 @@ function NavItem({
       </Item>
     </Wrapper>
   )
-}
+})
 
 export default memo(NavItem)

package/src/components/Navigator/NavItem/NavItem.types.ts

@@ -1,4 +1,4 @@
-import { type IconName } from '@channel.io/bezier-icons'
+import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
   ActivatableProps,
@@ -9,7 +9,7 @@ import type {
 } from '~/src/types/ComponentProps'
 
 interface NavItemOptions {
-  leftIcon?: IconName
+  leftIcon?: BezierIcon
   name: string
   target?: HTMLAnchorElement['target']
   onClick?: (e?: React.MouseEvent, name?: string) => void
@@ -21,4 +21,5 @@ export default interface NavItemProps extends
   LinkProps,
   Pick<SideContentProps, 'rightContent'>,
   Pick<ActivatableProps, 'active'>,
+  Omit<React.HTMLAttributes<HTMLAnchorElement>, 'onClick' | 'content'>,
   NavItemOptions {}

package/src/components/SectionLabel/SectionLabel.stories.tsx

@@ -127,7 +127,7 @@ const Template: Story<SectionLabelProps & {
         />
       </SectionLabel>
       <SectionLabel
-        help={{ tooltipContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }}
+        help="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         rightContent={{ icon: open ? 'chevron-down' : 'chevron-right' }}
         {...otherSectionLabelProps}
       />

package/src/components/SectionLabel/SectionLabel.styled.ts

@@ -42,9 +42,7 @@ const ContentWrapper = styled.div<InterpolationProps>`
   ${({ interpolation }) => interpolation}
 `
 
-const HelpIconWrapper = styled.div`
-  width: 16px;
-  height: 16px;
+const HelpContainer = styled.div`
   margin-left: 8px;
 `
 
@@ -86,7 +84,7 @@ export default {
   LeftContentWrapper,
   ContentText,
   ContentWrapper,
-  HelpIconWrapper,
+  HelpContainer,
   RightContentWrapper,
   RightItemWrapper,
   ChildrenWrapper,

package/src/components/SectionLabel/SectionLabel.test.tsx

@@ -6,11 +6,11 @@ import { render } from '~/src/utils/testUtils'
 
 import { BUTTON_TEST_ID } from '~/src/components/Button/Button'
 import { DIVIDER_TEST_ID } from '~/src/components/Divider/Divider'
+import { HELP_TEST_ID } from '~/src/components/Help/Help'
 import { ICON_TEST_ID } from '~/src/components/Icon/Icon'
 
 import SectionLabel, {
   SECTION_LABEL_TEST_CONTENT_ID,
-  SECTION_LABEL_TEST_HELP_CONTENT_ID,
   SECTION_LABEL_TEST_ID,
   SECTION_LABEL_TEST_LEFT_CONTENT_ID,
   SECTION_LABEL_TEST_RIGHT_CONTENT_ID,
@@ -83,32 +83,12 @@ describe('SectionLabel', () => {
     expect(leftIcon?.id).toBe('foo')
   })
 
-  it('renders help content with default color if the help prop exists', () => {
+  it('renders help icon if help prop exists', () => {
     const { getByTestId } = renderComponent({
-      help: {
-        tooltipContent: <div>happy</div>,
-      },
+      help: <div>happy</div>,
     })
-    const helpContent = getByTestId(SECTION_LABEL_TEST_HELP_CONTENT_ID)
-
-    const helpIcon = helpContent.children.item(0)
-    expect(helpIcon).toHaveAttribute('data-testid', ICON_TEST_ID)
-    expect(helpIcon).toHaveStyle(`color: ${LightFoundation.theme['txt-black-dark']};`)
-  })
-
-  it('renders help content with specified icon and icon color', () => {
-    const { getByTestId } = renderComponent({
-      help: {
-        icon: 'weather-snow',
-        tooltipContent: <div>happy</div>,
-        iconColor: 'txt-white-normal',
-      },
-    })
-    const helpContent = getByTestId(SECTION_LABEL_TEST_HELP_CONTENT_ID)
-
-    const helpIcon = helpContent.children.item(0)
-    expect(helpIcon).toHaveAttribute('data-testid', ICON_TEST_ID)
-    expect(helpIcon).toHaveStyle(`color: ${LightFoundation.theme['txt-white-normal']};`)
+    const helpContent = getByTestId(HELP_TEST_ID)
+    expect(helpContent).toBeInTheDocument()
   })
 
   it('does not render right content if given null', () => {

package/src/components/SectionLabel/SectionLabel.tsx

@@ -1,4 +1,5 @@
 import React, {
+  forwardRef,
   useCallback,
   useMemo,
 } from 'react'
@@ -23,9 +24,9 @@ import {
   ButtonStyleVariant,
 } from '~/src/components/Button'
 import { Divider } from '~/src/components/Divider'
+import { Help } from '~/src/components/Help'
 import { IconSize } from '~/src/components/Icon'
 import { LegacyIcon } from '~/src/components/LegacyIcon'
-import { Tooltip } from '~/src/components/Tooltip'
 
 import { type SectionLabelItemProps } from './SectionLabel.types'
 import type SectionLabelProps from './SectionLabel.types'
@@ -36,7 +37,6 @@ export const SECTION_LABEL_TEST_ID = 'bezier-react-section-label'
 export const SECTION_LABEL_TEST_CONTENT_ID = 'bezier-react-section-label-content'
 export const SECTION_LABEL_TEST_LEFT_CONTENT_ID = 'bezier-react-section-label-left-content'
 export const SECTION_LABEL_TEST_RIGHT_CONTENT_ID = 'bezier-react-section-label-right-content'
-export const SECTION_LABEL_TEST_HELP_CONTENT_ID = 'bezier-react-section-label-help-content'
 
 function clickableClassName(onClick?: React.MouseEventHandler) {
   return !isNil(onClick) ? 'clickable' : undefined
@@ -81,7 +81,7 @@ function renderSectionLabelActionItem(props: SectionLabelItemProps, key?: string
   )
 }
 
-function SectionLabel({
+const SectionLabel = forwardRef<HTMLDivElement, SectionLabelProps>(function SectionLabel({
   content: givenContent,
   open = true,
   divider = false,
@@ -99,7 +99,7 @@ function SectionLabel({
   rightWrapperClassName,
   rightWrapperInterpolation,
   ...props
-}: SectionLabelProps) {
+}, forwardedRef) {
   const content = useMemo(() => (
     <Styled.ContentWrapper
       className={contentWrapperClassName}
@@ -181,24 +181,18 @@ function SectionLabel({
   ])
 
   const helpContent = useMemo(() => !isNil(help) && (
-    <Tooltip
-      content={help.tooltipContent}
-      allowHover
-    >
-      <Styled.HelpIconWrapper data-testid={SECTION_LABEL_TEST_HELP_CONTENT_ID}>
-        <LegacyIcon
-          name={help.icon ?? 'help-filled'}
-          size={IconSize.XS}
-          color={help.iconColor ?? 'txt-black-dark'}
-        />
-      </Styled.HelpIconWrapper>
-    </Tooltip>
+    <Styled.HelpContainer>
+      <Help allowHover>
+        { help }
+      </Help>
+    </Styled.HelpContainer>
   ), [help])
 
   return (
     <div data-testid={SECTION_LABEL_TEST_ID}>
       { divider && <Divider orientation="horizontal" /> }
       <Styled.Wrapper
+        ref={forwardedRef}
         className={classNames(
           wrapperClassName,
           clickableClassName(onClick),
@@ -219,6 +213,6 @@ function SectionLabel({
       ) }
     </div>
   )
-}
+})
 
 export default SectionLabel

package/src/components/SectionLabel/SectionLabel.types.ts

@@ -11,17 +11,10 @@ import type {
   SideContentProps,
 } from '~/src/types/ComponentProps'
 
-import type { IconSize } from '~/src/components/Icon'
-
 interface IconInfo extends AdditionalColorProps<'icon'> {
   icon: IconName
 }
 
-interface SectionLabelHelpProps extends Partial<IconInfo> {
-  iconSize?: IconSize
-  tooltipContent: React.ReactNode
-}
-
 export type SectionLabelItemProps = (IconInfo & {
   onClick?: React.MouseEventHandler
 }) | React.ReactElement
@@ -29,7 +22,7 @@ export type SectionLabelItemProps = (IconInfo & {
 interface SectionLabelOptions {
   open?: boolean
   divider?: boolean
-  help?: SectionLabelHelpProps
+  help?: React.ReactNode
   onClick?: React.MouseEventHandler
 }
 
@@ -40,4 +33,5 @@ export default interface SectionLabelProps extends
   ChildrenProps,
   SideContentProps<SectionLabelItemProps, SectionLabelItemProps | SectionLabelItemProps[]>,
   AdditionalStylableProps<['wrapper', 'contentWrapper', 'leftWrapper', 'rightWrapper']>,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'onClick'>,
   SectionLabelOptions {}