[Feat] Add arrow and light theme props to TippyTooltip (#2140)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Jacob Wasilkowski <4933392+jwasilgeo@users.noreply.github.com>
keplergl · Feb 27, 2023 · 332a94a · 332a94a
1 parent c79896b
commit 332a94a
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 39 deletions.
diff --git a/src/components/src/common/tippy-tooltip.tsx b/src/components/src/common/tippy-tooltip.tsx
@@ -35,60 +35,76 @@ const TippyArrow = styled.div`
   }
 `;
 
-const TippyTooltipContent = styled(({children, ...props}) => (
+const TippyTooltipContent = styled(({children, arrow, isLightTheme, ...props}) => (
   <div {...props}>
     {children}
-    <TippyArrow className="svg-arrow" data-popper-arrow="">
-      <svg width={15} height={15}>
-        <path d="M2,7.5 7.5,2 13,7.5Z" />
-      </svg>
-    </TippyArrow>
+    {arrow ? (
+      <TippyArrow className="svg-arrow" data-popper-arrow="">
+        <svg width={15} height={15}>
+          <path d="M2,7.5 7.5,2 13,7.5Z" />
+        </svg>
+      </TippyArrow>
+    ) : null}
   </div>
 ))`
   font-family: ${props => props.theme.fontFamily};
   font-size: ${props => props.theme.tooltipFontSize};
   font-weight: 400;
   padding: 7px 18px;
-  box-shadow: ${props => props.theme.tooltipBoxShadow};
-  background-color: ${props => props.theme.tooltipBg};
-  color: ${props => props.theme.tooltipColor};
+  box-shadow: ${props =>
+    props.isLightTheme ? props.theme.panelBoxShadow : props.theme.tooltipBoxShadow};
+  background-color: ${props =>
+    props.isLightTheme ? props.theme.tooltipBgLT : props.theme.tooltipBg};
+  color: ${props => (props.isLightTheme ? props.theme.tooltipColorLT : props.theme.tooltipColor)};
   border-radius: ${props => props.theme.primaryBtnRadius};
-  &[data-placement^='top'] > .svg-arrow {
-    bottom: 0;
-    &::after,
-    > svg {
-      top: 7px;
-      transform: rotate(180deg);
+  ${props =>
+    props.arrow
+      ? `
+    &[data-placement^='top'] > .svg-arrow {
+      bottom: 0;
+      &::after,
+      > svg {
+        top: 7px;
+        transform: rotate(180deg);
+      }
     }
-  }
 
-  &[data-placement^='bottom'] > .svg-arrow {
-    top: 0;
-    > svg {
-      bottom: 7px;
+    &[data-placement^='bottom'] > .svg-arrow {
+      top: 0;
+      > svg {
+        bottom: 7px;
+      }
     }
-  }
 
-  &[data-placement^='left'] > .svg-arrow {
-    right: 0;
-    &::after,
-    > svg {
-      transform: rotate(90deg);
-      left: 7px;
+    &[data-placement^='left'] > .svg-arrow {
+      right: 0;
+      &::after,
+      > svg {
+        transform: rotate(90deg);
+        left: 7px;
+      }
     }
-  }
 
-  &[data-placement^='right'] > .svg-arrow {
-    left: 0;
-    &::after,
-    > svg {
-      transform: rotate(-90deg);
-      right: 7px;
+    &[data-placement^='right'] > .svg-arrow {
+      left: 0;
+      &::after,
+      > svg {
+        transform: rotate(-90deg);
+        right: 7px;
+      }
     }
-  }
+  `
+      : ''}
 `;
 
-const TippyTooltip = ({children, render, duration = 200, ...rest}: TippyProps) => {
+const TippyTooltip = ({
+  children,
+  render,
+  duration = 200,
+  arrow = true,
+  isLightTheme = false,
+  ...rest
+}: TippyProps & {isLightTheme?: boolean}) => {
   const [opacity, setOpacity] = useState(0);
   const [timer, setTimer] = useState(null);
   function onMount() {
@@ -121,7 +137,12 @@ const TippyTooltip = ({children, render, duration = 200, ...rest}: TippyProps) =
           appendTo={context?.current || 'parent'}
           animation={true}
           render={attrs => (
-            <TippyTooltipContent {...attrs} style={{opacity, transition: `opacity ${duration}ms`}}>
+            <TippyTooltipContent
+              {...attrs}
+              style={{opacity, transition: `opacity ${duration}ms`}}
+              arrow={arrow}
+              isLightTheme={isLightTheme}
+            >
               {render?.(attrs)}
             </TippyTooltipContent>
           )}

diff --git a/src/styles/src/base.ts b/src/styles/src/base.ts
@@ -283,7 +283,9 @@ export const panelBorderLT = `1px solid ${borderColorLT}`;
 export const mapPanelBackgroundColor = '#242730';
 export const mapPanelHeaderBackgroundColor = '#29323C';
 export const tooltipBg = '#3A414C';
+export const tooltipBgLT = '#1869B5';
 export const tooltipColor = textColorHl;
+export const tooltipColorLT = '#FFFFFF';
 export const tooltipBoxShadow = boxShadow;
 export const tooltipFontSize = '10px';
 
@@ -1397,7 +1399,9 @@ export const theme = {
   textTruncate,
   titleColorLT,
   tooltipBg,
+  tooltipBgLT,
   tooltipColor,
+  tooltipColorLT,
   tooltipBoxShadow,
   tooltipFontSize,
   logoColor,
@@ -1547,8 +1551,8 @@ export const themeLT = {
   titleTextColor: '#000000',
   sidePanelHeaderBg: '#F7F7F7',
   subtextColorActive: activeColorLT,
-  tooltipBg: '#1869B5',
-  tooltipColor: '#FFFFFF',
+  tooltipBg: tooltipBgLT,
+  tooltipColor: tooltipColorLT,
   dropdownListBgd: '#FFFFFF',
   toolbarItemBgdHover: '#F7F7F7',
   textColorHl: activeColorLT,