Added title props on tooltip component (#1666)

channel-io · Oct 10, 2023 · 21fcc70 · 21fcc70
1 parent 87b8519
commit 21fcc70
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/tiny-countries-deliver.md b/.changeset/tiny-countries-deliver.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Add `title` props on `Tooltip`
diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.stories.tsx b/packages/bezier-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -59,6 +59,7 @@ Primary.args = {
   allowHover: false,
   delayShow: undefined,
   delayHide: undefined,
+  title: 'Lorem Ipsum is simply dummy text',
   children: (<Button text="Button" />),
   content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry 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.',
   description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.styled.ts b/packages/bezier-react/src/components/Tooltip/Tooltip.styled.ts
@@ -40,6 +40,11 @@ export const TextContainer = styled.div`
   overflow: hidden;
 `
 
+export const Title = styled(Text).attrs({ typo: Typography.Size13, bold: true })`
+  margin-bottom: 2px;
+  color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};
+`
+
 export const Content = styled(Text).attrs({ typo: Typography.Size13 })`
   color: ${({ foundation }) => foundation?.subTheme?.['txt-black-darkest']};
   /* NOTE: Line height of Typography.Size13  */

diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx
@@ -164,6 +164,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip
   onShow: onShowProp,
   onHide: onHideProp,
   disabled,
+  title,
   content,
   description,
   icon,
@@ -274,6 +275,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip
         >
           <Styled.TooltipContent forwardedAs={as}>
             <Styled.TextContainer>
+              { title && (<Styled.Title>{ title }</Styled.Title>) }
+
               <Styled.Content>
                 { content }
               </Styled.Content>

diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.types.ts b/packages/bezier-react/src/components/Tooltip/Tooltip.types.ts
@@ -53,6 +53,10 @@ interface TooltipOptions {
    * The open state of the tooltip when it is initially rendered.
    */
   defaultShow?: boolean
+  /**
+   * An element that sits above the tooltip content.
+   */
+  title?: React.ReactNode
   /**
    * An element that sits below the tooltip content.
    */
@@ -130,5 +134,5 @@ export interface TooltipProps extends
   ChildrenProps<React.ReactElement>,
   ContentProps,
   DisableProps,
-  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps | keyof ChildrenProps>,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | keyof ContentProps | keyof ChildrenProps>,
   TooltipOptions {}