@channel.io/bezier-react 1.6.2 → 1.7.0

package/src/components/Forms/Slider/__snapshots__/Slider.test.tsx.snap

@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider Snapshot should match snapshot 1`] = `
+.c0 {
+  --bezier-slider-width: auto;
+  --bezier-slider-thumb-size: 20px;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: var(--bezier-slider-width);
+  height: var(--bezier-slider-thumb-size);
+  touch-action: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+}
+
+.c0[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.c1 {
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 6px;
+  background-color: var(--bg-black-dark);
+  border-radius: 3px;
+}
+
+.c2 {
+  position: absolute;
+  height: 100%;
+  background-color: var(--bgtxt-green-normal);
+  border-radius: 3px;
+}
+
+.c3 {
+  --bezier-slider-guide-height: 8px;
+  position: absolute;
+  top: calc(-1 * (var(--bezier-slider-guide-height) + 3px));
+  left: calc(var(--bezier-slider-thumb-size) / 2);
+  width: calc(100% - var(--bezier-slider-thumb-size));
+}
+
+.c4 {
+  --bezier-slider-guide-left: 0;
+  position: absolute;
+  top: 0;
+  left: var(--bezier-slider-guide-left);
+  width: 2px;
+  height: var(--bezier-slider-guide-height);
+  background-color: var(--bg-black-light);
+  border-radius: 1px;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.c5 {
+  all: unset;
+  display: block;
+  width: var(--bezier-slider-thumb-size);
+  height: var(--bezier-slider-thumb-size);
+  border-radius: 12px;
+  background-color: #FFFFFF;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
+  background-color: var(--bgtxt-absolute-white-dark);
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: box-shadow;
+  transition-property: box-shadow;
+}
+
+.c5:hover {
+  background-color: #FFFFFF;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+  background-color: var(--bgtxt-absolute-white-dark);
+}
+
+.c5:focus-visible {
+  box-shadow: 0 0 0 3px #5E56F04D, inset 0 0 0 1px #5E56F0;
+}
+
+<div>
+  <span
+    aria-disabled="false"
+    class="c0"
+    data-orientation="horizontal"
+    data-testid="bezier-react-slider"
+    dir="ltr"
+    foundation="[object Object]"
+    style="--bezier-slider-width: 36px; --radix-slider-thumb-transform: translateX(-50%);"
+  >
+    <span
+      class="c1"
+      data-orientation="horizontal"
+      foundation="[object Object]"
+    >
+      <span
+        class="c2"
+        data-orientation="horizontal"
+        foundation="[object Object]"
+        style="left: 0%; right: 50%;"
+      />
+      <div
+        class="c3"
+      >
+        <div
+          class="c4"
+          style="--bezier-slider-guide-left: 50%;"
+        />
+      </div>
+    </span>
+    <span
+      style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(50% + 0px);"
+    >
+      <div
+        aria-orientation="horizontal"
+        aria-valuemax="10"
+        aria-valuemin="0"
+        aria-valuenow="5"
+        class="c5"
+        data-orientation="horizontal"
+        data-radix-collection-item=""
+        data-state="closed"
+        role="slider"
+        style=""
+        tabindex="0"
+      />
+    </span>
+  </span>
+</div>
+`;

package/src/components/Help/Help.styled.ts

@@ -1,17 +1,14 @@
 import { styled } from '~/src/foundation'
 
 import { Icon as BaseIcon } from '~/src/components/Icon'
-import { Tooltip as BaseTooltip } from '~/src/components/Tooltip'
 
 export const Icon = styled(BaseIcon)``
 
-export const Tooltip = styled(BaseTooltip)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
+export const Trigger = styled.div`
+  line-height: 0;
 
-  &:hover {
-    > ${Icon} {
+  &:not([data-state="closed"]) {
+    ${Icon} {
       color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']};
     }
   }

package/src/components/Help/Help.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import { HelpFilledIcon } from '@channel.io/bezier-icons'
 
 import { isEmpty } from '~/src/utils/typeUtils'
 
 import { IconSize } from '~/src/components/Icon'
+import { Tooltip } from '~/src/components/Tooltip'
 
 import type HelpProps from './Help.types'
 
@@ -13,23 +14,29 @@ import * as Styled from './Help.styled'
 export const HELP_TEST_ID = 'bezier-react-help'
 export const HELP_DISPLAY_NAME = 'Help'
 
-function Help({
+const Help = forwardRef<HTMLDivElement, HelpProps>(function Help({
   children,
   ...rest
-}: HelpProps) {
+}, forwardedRef) {
   if (isEmpty(children)) { return null }
 
   return (
-    <Styled.Tooltip {...rest} content={children}>
-      <Styled.Icon
-        testId={HELP_TEST_ID}
-        source={HelpFilledIcon}
-        size={IconSize.XS}
-        color="txt-black-dark"
-      />
-    </Styled.Tooltip>
+    <Tooltip
+      {...rest}
+      ref={forwardedRef}
+      content={children}
+    >
+      <Styled.Trigger>
+        <Styled.Icon
+          testId={HELP_TEST_ID}
+          source={HelpFilledIcon}
+          size={IconSize.XS}
+          color="txt-black-dark"
+        />
+      </Styled.Trigger>
+    </Tooltip>
   )
-}
+})
 
 Help.displayName = HELP_DISPLAY_NAME
 

package/src/components/Help/Help.types.ts

@@ -8,4 +8,4 @@ import { type TooltipProps } from '~/src/components/Tooltip'
 export default interface HelpProps extends
   BezierComponentProps,
   ChildrenProps,
-  Omit<TooltipProps, 'content'> {}
+  Omit<TooltipProps, 'content' | 'children'> {}

package/src/components/KeyValueListItem/KeyValueListItem.test.tsx

@@ -8,8 +8,6 @@ import userEvent from '@testing-library/user-event'
 
 import { render } from '~/src/utils/testUtils'
 
-import { TOOLTIP_TEST_ID } from '~/src/components/Tooltip/Tooltip'
-
 import KeyValueListItem from './KeyValueListItem'
 import { TEST_ID_MAP } from './KeyValueListItem.const'
 import { type KeyValueListItemProps } from './KeyValueListItem.types'
@@ -168,11 +166,17 @@ describe('KeyValueListItem', () => {
         expect(actions.onClick).toBeCalledTimes(2)
       })
 
-      it('actions의 tooltip이 있으면, tooltip이 렌더링된다.', () => {
+      it('actions의 tooltip이 있으면, tooltip이 렌더링된다.', async () => {
+        const user = userEvent.setup()
+
         const actions: KeyValueListItemActionProps = { icon: BadgeIcon, tooltip: 'tooltip' }
-        const { getByTestId } = renderComponent({ actions })
-        const rendered = getByTestId(TOOLTIP_TEST_ID)
-        expect(rendered).toBeInTheDocument()
+        const { getByRole, getByTestId } = renderComponent({ actions })
+        const rendered = getByTestId(TEST_ID_MAP.ACTIONS_ITEM)
+        const actionItemIconWrapper = rendered?.firstChild
+        const actionItemIcon = actionItemIconWrapper?.firstChild
+
+        await user.hover(actionItemIcon as HTMLElement)
+        expect(getByRole('tooltip')).toBeInTheDocument()
       })
     })
 

package/src/components/KeyValueListItem/__snapshots__/KeyValueListItem.test.tsx.snap

@@ -1,16 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`KeyValueListItem Snapshot > 1`] = `
-.c6 {
-  font-size: 1.2rem;
-  line-height: 1.6rem;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.c5 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   margin: 0px 0px 0px 0px;
-  font-style: normal;
-  font-weight: bold;
   color: #00000066;
   -webkit-transition-delay: 0ms;
   transition-delay: 0ms;
@@ -22,11 +17,16 @@ exports[`KeyValueListItem Snapshot > 1`] = `
   transition-property: color;
 }
 
-.c5 {
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
+.c6 {
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   margin: 0px 0px 0px 0px;
+  font-style: normal;
+  font-weight: bold;
   color: #00000066;
   -webkit-transition-delay: 0ms;
   transition-delay: 0ms;

package/src/components/KeyValueListItem/common/ItemActions/ItemAction.styled.ts

@@ -7,8 +7,6 @@ import { type AdditionalColorProps } from '~/src/types/ComponentProps'
 import { isNil } from '~/src/utils/typeUtils'
 
 import { Icon } from '~/src/components/Icon'
-import { LegacyIcon } from '~/src/components/LegacyIcon'
-import { Tooltip } from '~/src/components/Tooltip'
 
 export const ItemActionWrapper = styled.div`
   display: flex;
@@ -19,9 +17,10 @@ interface ActionWrapperProps extends AdditionalColorProps<['hoverBackground', 'h
 }
 
 export const ActionIcon = styled(Icon)``
-export const ActionLegacyIcon = styled(LegacyIcon)``
 
-export const ActionIconWrapper = styled.div<ActionWrapperProps>`
+export const ActionIconWrapper = styled.button<ActionWrapperProps>`
+  all: unset;
+
   display: ${({ show }) => (show ? 'flex' : 'none')};
   align-items: center;
   justify-content: center;
@@ -31,7 +30,8 @@ export const ActionIconWrapper = styled.div<ActionWrapperProps>`
 
   ${({ foundation }) => foundation?.rounding?.round6}
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     ${({ foundation, hoverBackgroundColor }) => !isNil(hoverBackgroundColor) && css`
       background-color: ${foundation?.theme?.[hoverBackgroundColor]};
     `}
@@ -41,15 +41,5 @@ export const ActionIconWrapper = styled.div<ActionWrapperProps>`
         color: ${foundation?.theme?.[hoverIconColor]};
       `}
     }
-    
-    ${ActionLegacyIcon} {
-      ${({ foundation, hoverIconColor }) => !isNil(hoverIconColor) && css`
-        color: ${foundation?.theme?.[hoverIconColor]};
-      `}
-    }
   }
 `
-
-export const ActionIconTooltip = styled(Tooltip)`
-  margin-left: auto;
-`

package/src/components/KeyValueListItem/common/ItemActions/ItemAction.tsx

@@ -18,7 +18,7 @@ import {
 
 import { IconSize } from '~/src/components/Icon'
 import { TEST_ID_MAP } from '~/src/components/KeyValueListItem/KeyValueListItem.const'
-import { isIconName } from '~/src/components/LegacyIcon'
+import { Tooltip } from '~/src/components/Tooltip'
 
 import {
   type ItemActionProps,
@@ -32,16 +32,6 @@ function ActionIcon({
   icon,
   iconColor,
 }: ItemActionWithIcon) {
-  if (isIconName(icon)) {
-    return (
-      <Styled.ActionLegacyIcon
-        name={icon}
-        color={iconColor ?? 'txt-black-dark'}
-        size={IconSize.XS}
-      />
-    )
-  }
-
   return (
     <Styled.ActionIcon
       source={icon}
@@ -75,9 +65,12 @@ function ItemAction(
 
       if (!isEmpty(action.tooltip)) {
         return (
-          <Styled.ActionIconTooltip key={key} content={action.tooltip}>
+          <Tooltip
+            key={key}
+            content={action.tooltip}
+          >
             { iconElement }
-          </Styled.ActionIconTooltip>
+          </Tooltip>
         )
       }
       return iconElement

package/src/components/KeyValueListItem/common/ItemActions/ItemAction.types.ts

@@ -1,9 +1,6 @@
 import type React from 'react'
 
-import {
-  type BezierIcon,
-  type IconName,
-} from '@channel.io/bezier-icons'
+import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
   AdditionalColorProps,
@@ -12,10 +9,10 @@ import type {
 } from '~/src/types/ComponentProps'
 
 export type ItemActionWithIcon = {
-  icon: IconName | BezierIcon
+  icon: BezierIcon
   tooltip?: string
   show?: boolean
-  onClick?: React.MouseEventHandler<HTMLDivElement>
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
 } & AdditionalColorProps<['icon', 'hoverBackground', 'hoverIcon']>
 
 export type KeyValueListItemActionProps = ItemActionWithIcon | React.ReactElement

package/src/components/KeyValueListItem/common/KeyItem/KeyItem.types.ts

@@ -1,9 +1,6 @@
 import type React from 'react'
 
-import {
-  type BezierIcon,
-  type IconName,
-} from '@channel.io/bezier-icons'
+import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
   BezierComponentProps,
@@ -11,7 +8,7 @@ import type {
 } from '~/src/types/ComponentProps'
 
 interface KeyItemOptions {
-  keyIcon?: IconName | BezierIcon | React.ReactNode
+  keyIcon?: BezierIcon | React.ReactNode
 }
 
 export interface KeyItemProps extends

package/src/components/LegacyTooltip/LegacyTooltip.stories.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+
+import {
+  type Meta,
+  type Story,
+} from '@storybook/react'
+import { base } from 'paths.macro'
+
+import { styled } from '~/src/foundation'
+
+import { getTitle } from '~/src/utils/storyUtils'
+
+import { LegacyTooltip } from './LegacyTooltip'
+import { type LegacyTooltipProps } from './LegacyTooltip.types'
+import { LegacyTooltipPosition } from './LegacyTooltip.types'
+
+export default {
+  title: getTitle(base),
+  component: LegacyTooltip,
+  argTypes: {
+    content: {
+      control: {
+        type: 'text',
+      },
+    },
+    placement: {
+      control: {
+        type: 'radio',
+        options: [
+          LegacyTooltipPosition.TopCenter,
+          LegacyTooltipPosition.TopLeft,
+          LegacyTooltipPosition.TopRight,
+          LegacyTooltipPosition.RightCenter,
+          LegacyTooltipPosition.RightTop,
+          LegacyTooltipPosition.RightBottom,
+          LegacyTooltipPosition.BottomCenter,
+          LegacyTooltipPosition.BottomLeft,
+          LegacyTooltipPosition.BottomRight,
+          LegacyTooltipPosition.LeftCenter,
+          LegacyTooltipPosition.LeftTop,
+          LegacyTooltipPosition.LeftBottom,
+        ],
+      },
+    },
+    offset: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 50,
+        step: 1,
+      },
+    },
+    delayShow: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 5000,
+        step: 100,
+      },
+    },
+    delayHide: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 5000,
+        step: 100,
+      },
+    },
+  },
+} as Meta
+
+const Target = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 40px;
+  background-color: ${props => props.foundation?.theme?.['bg-black-dark']};
+  border-radius: 4px;
+`
+
+const Template: Story<LegacyTooltipProps> = (props) => (
+  <LegacyTooltip
+    {...props}
+  >
+    <Target>
+      Target
+    </Target>
+  </LegacyTooltip>
+)
+
+export const Primary = Template.bind({})
+
+Primary.args = {
+  // eslint-disable-next-line max-len
+  content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
+  lazy: true,
+  placement: LegacyTooltipPosition.BottomCenter,
+  offset: 4,
+  disabled: false,
+  keepInContainer: false,
+  allowHover: false,
+  delayShow: 0,
+  delayHide: 0,
+}

package/src/components/LegacyTooltip/LegacyTooltip.styled.ts

@@ -0,0 +1,46 @@
+import {
+  LineHeightAbsoluteNumber,
+  css,
+  ellipsis,
+  styled,
+} from '~/src/foundation'
+
+import { ZIndex } from '~/src/constants/ZIndex'
+import type { InterpolationProps } from '~/src/types/Foundation'
+
+interface ContentWrapperProps {
+  disabled: boolean
+}
+
+export const Container = styled.div`
+  position: relative;
+`
+export const ContentWrapper = styled.div<ContentWrapperProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: ${ZIndex.Tooltip};
+
+  ${({ disabled }) => disabled && css`
+    display: none;
+  `}
+`
+
+export const Content = styled.div<InterpolationProps>`
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 260px;
+  height: max-content;
+  padding: 8px 14px;
+  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};
+  word-break: normal;
+  word-wrap: break-word;
+  ${({ foundation }) => foundation?.elevation?.ev2(true)};
+  ${({ foundation }) => foundation?.rounding?.round8};
+
+  ${({ interpolation }) => interpolation}
+`
+
+export const EllipsisableContent = styled.div`
+  ${ellipsis(20, LineHeightAbsoluteNumber.Lh18)}
+`

package/src/components/LegacyTooltip/LegacyTooltip.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+
+import { fireEvent } from '@testing-library/dom'
+import { act } from '@testing-library/react'
+
+import { css } from '~/src/foundation'
+
+import { render } from '~/src/utils/testUtils'
+
+import {
+  LegacyTooltip,
+  TOOLTIP_CONTENT_TEST_ID,
+  TOOLTIP_TEST_ID,
+} from './LegacyTooltip'
+import { type LegacyTooltipProps } from './LegacyTooltip.types'
+
+const RootTooltip: React.FC<LegacyTooltipProps> = ({ children, ...rests }) => (
+  <LegacyTooltip {...rests}>
+    { children }
+  </LegacyTooltip>
+)
+
+describe('Tooltip test >', () => {
+  let props: LegacyTooltipProps
+
+  const content = 'Hovered'
+
+  beforeEach(() => {
+    props = {
+      children: 'Text',
+      content,
+    }
+
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  const renderTooltip = (optionProps?: LegacyTooltipProps) => render(
+    <RootTooltip {...props} {...optionProps} />,
+  )
+
+  it('Tooltip with default props', () => {
+    const { baseElement, getByTestId } = renderTooltip()
+
+    act(() => {
+      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+
+      jest.runAllTimers()
+    })
+
+    expect(baseElement).toMatchSnapshot()
+  })
+
+  it('Tooltip with contentInterpolation prop', async () => {
+    const { baseElement, getByTestId } = renderTooltip({
+      contentInterpolation: css`background-color: black;`,
+    })
+
+    act(() => {
+      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+
+      jest.runAllTimers()
+    })
+
+    expect(baseElement).toMatchSnapshot()
+  })
+
+  it('TooltipContent not rendered at first', async () => {
+    const { queryByTestId } = renderTooltip()
+
+    expect(queryByTestId(TOOLTIP_CONTENT_TEST_ID)).toBeNull()
+  })
+
+  it('TooltipContent rendered after mouseover', async () => {
+    const { getByTestId, queryByTestId } = renderTooltip()
+
+    act(() => {
+      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+
+      jest.runAllTimers()
+    })
+
+    expect(queryByTestId(TOOLTIP_CONTENT_TEST_ID)).toBeVisible()
+  })
+
+  it('Tooltip with disabled prop not rendered even after mouseover', async () => {
+    const { getByTestId, queryByTestId } = renderTooltip({ disabled: true })
+
+    act(() => {
+      fireEvent.mouseOver(getByTestId(TOOLTIP_TEST_ID))
+
+      jest.runAllTimers()
+    })
+
+    expect(queryByTestId(TOOLTIP_CONTENT_TEST_ID)).toBeNull()
+  })
+})