feat(tooltip): add the sx prop to tooltip component

vtexdocs · Jul 22, 2022 · d5db1d9 · d5db1d9
1 parent df88d6b
commit d5db1d9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip/index.tsx
@@ -1,17 +1,15 @@
 import { useEffect, useRef, useState } from 'react'
-import { Box, Flex, TooltipProps } from '@vtex/brand-ui'
+import { Box, Flex, TooltipProps, SxStyleProp } from '@vtex/brand-ui'
 
 import CaretIcon from 'components/icons/caret'
 
 import styles from './styles'
-
-// type Props = Pick<TooltipProps, 'children' | 'label' | 'placement'>
-
 interface Props extends Pick<TooltipProps, 'children' | 'label' | 'placement'> {
+  sx?: SxStyleProp
   isCard?: boolean
 }
 
-const Tooltip = ({ children, label, placement, isCard }: Props) => {
+const Tooltip = ({ children, label, placement, sx, isCard }: Props) => {
   const box = useRef<HTMLDivElement>()
   const [boxWidth, setBoxWidth] = useState(0)
   const [boxHeight, setBoxHeight] = useState(0)
@@ -43,6 +41,7 @@ const Tooltip = ({ children, label, placement, isCard }: Props) => {
       {visible && (isCard ?? true) && (
         <Flex
           sx={styles.tooltipContainer(
+            sx,
             placement || 'top',
             boxWidth,
             boxHeight,

diff --git a/src/components/tooltip/styles.ts b/src/components/tooltip/styles.ts
@@ -3,12 +3,13 @@ import { SxStyleProp } from '@vtex/brand-ui'
 type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 const tooltipContainer: (
+  sx: SxStyleProp,
   placement: Placement,
   width: number,
   height: number,
   x: number,
   y: number
-) => SxStyleProp = (placement, width, height, x, y) => {
+) => SxStyleProp = (sx, placement, width, height, x, y) => {
   const position = {
     bottom: {
       left: `${x + width / 2}px`,
@@ -43,6 +44,7 @@ const tooltipContainer: (
   }
 
   return {
+    ...sx,
     zIndex: '100',
     position: 'absolute',
     alignItems: 'center',