From d5db1d95c98e5d2bff33aaf0d44877383f2f9a3c Mon Sep 17 00:00:00 2001
From: Robson Oliveira <ropj@cin.ufpe.br>
Date: Fri, 22 Jul 2022 18:57:58 -0300
Subject: [PATCH] feat(tooltip): add the sx prop to tooltip component

---
 src/components/tooltip/index.tsx | 9 ++++-----
 src/components/tooltip/styles.ts | 4 +++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/tooltip/index.tsx b/src/components/tooltip/index.tsx
index 82c71010e..23d9554fb 100644
--- 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
index 7d9127626..af816496c 100644
--- 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',