SOV-4406: Fix Tooltip arrow color (#994)

* feat: add styles to tooltip props * Create thick-flies-hope.md
DistributedCollective · Sep 6, 2024 · e9a9400 · e9a9400
1 parent 23f1f6d
commit e9a9400
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 6 deletions.
diff --git a/.changeset/thick-flies-hope.md b/.changeset/thick-flies-hope.md
@@ -0,0 +1,5 @@
+---
+"@sovryn/ui": patch
+---
+
+SOV-4406: Fix Tooltip arrow color
diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.module.css b/packages/ui/src/2_molecules/Tooltip/Tooltip.module.css
@@ -1,5 +1,5 @@
 .tooltip {
-  @apply bg-gray-10 text-xs rounded p-3 text-gray-90 absolute top-0 inline-block min-w-5 max-w-64 sm:max-w-96 leading-5 opacity-0;
+  @apply text-xs rounded p-3 absolute top-0 inline-block min-w-5 max-w-64 sm:max-w-96 leading-5 opacity-0;
   z-index: 999999;
   word-break: break-word;
 
@@ -21,35 +21,51 @@
     }
   }
 
+  &.primary {
+    @apply bg-gray-10 text-gray-90;
+
+    &:after {
+      @apply border-gray-10;
+    }
+  }
+
+  &.secondary {
+    @apply bg-gray-80 text-gray-10;
+
+    &:after {
+      @apply border-gray-80;
+    }
+  }
+
   &.top,
   &.top-start,
   &.top-end {
     &:after {
-      @apply border-t-[0.625rem] border-b-0 border-t-gray-10 border-b-transparent -bottom-[0.625rem] border-x-[0.516rem] border-x-transparent;
+      @apply border-t-[0.625rem] border-b-0  border-b-transparent -bottom-[0.625rem] border-x-[0.516rem] border-x-transparent;
     }
   }
 
   &.right,
   &.right-start,
   &.right-end {
     &:after {
-      @apply border-r-[0.625rem] border-l-0 border-r-gray-10 border-l-transparent -left-[0.625rem] border-y-[0.516rem] border-y-transparent;
+      @apply border-r-[0.625rem] border-l-0 border-l-transparent -left-[0.625rem] border-y-[0.516rem] border-y-transparent;
     }
   }
 
   &.left,
   &.left-start,
   &.left-end {
     &:after {
-      @apply border-l-[0.625rem] border-r-0 border-l-gray-10 border-r-transparent -right-[0.625rem] border-y-[0.516rem] border-y-transparent;
+      @apply border-l-[0.625rem] border-r-0 border-r-transparent -right-[0.625rem] border-y-[0.516rem] border-y-transparent;
     }
   }
 
   &.bottom,
   &.bottom-start,
   &.bottom-end {
     &:after {
-      @apply border-b-[0.625rem] border-t-0 border-b-gray-10 border-t-transparent -top-[0.625rem] border-x-[0.516rem] border-x-transparent;
+      @apply border-b-[0.625rem] border-t-0 border-t-transparent -top-[0.625rem] border-x-[0.516rem] border-x-transparent;
     }
   }
 

diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.stories.tsx b/packages/ui/src/2_molecules/Tooltip/Tooltip.stories.tsx
@@ -4,7 +4,11 @@ import React, { ComponentProps } from 'react';
 
 import { Button, Icon, Link } from '../../1_atoms';
 import { Tooltip } from './Tooltip';
-import { TooltipPlacement, TooltipTrigger } from './Tooltip.types';
+import {
+  TooltipPlacement,
+  TooltipStyle,
+  TooltipTrigger,
+} from './Tooltip.types';
 
 export default {
   title: 'Molecule/Tooltip',
@@ -40,6 +44,7 @@ Basic.args = {
   placement: TooltipPlacement.top,
   disabled: false,
   trigger: TooltipTrigger.hover,
+  style: TooltipStyle.primary,
 };
 Basic.argTypes = {
   content: {
@@ -97,6 +102,12 @@ Basic.argTypes = {
     description: 'The tooltip trigger behavior',
     defaultValue: TooltipTrigger.hover,
   },
+  style: {
+    control: 'select',
+    options: Object.values(TooltipStyle),
+    defaultValue: TooltipStyle.primary,
+    description: 'The style to apply to the tooltip',
+  },
 };
 
 const InteractiveTemplate: Story<ComponentProps<typeof Tooltip>> = args => (

diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.tsx b/packages/ui/src/2_molecules/Tooltip/Tooltip.tsx
@@ -23,6 +23,7 @@ import {
   TooltipPlacement,
   TooltipTrigger,
   TooltipEvents,
+  TooltipStyle,
 } from './Tooltip.types';
 import { CLOSE_DELAY, getTooltipPosition } from './Tooltip.utils';
 
@@ -41,6 +42,7 @@ type TooltipProps = {
   onHide?: () => void;
   disabled?: boolean;
   trigger?: TooltipTrigger;
+  style?: TooltipStyle;
 };
 
 export const Tooltip: FC<TooltipProps> = ({
@@ -55,6 +57,7 @@ export const Tooltip: FC<TooltipProps> = ({
   onHide,
   disabled = false,
   trigger = TooltipTrigger.hover,
+  style = TooltipStyle.secondary,
 }) => {
   const tooltipRef = useRef<HTMLDivElement>(null);
   const targetRef = useRef<HTMLElement>(null);
@@ -177,6 +180,7 @@ export const Tooltip: FC<TooltipProps> = ({
               styles.tooltip,
               styles[tooltipPosition?.arrowStyles],
               tooltipClassName,
+              styles[style],
             )}
             style={tooltipPosition?.positionStyles}
             ref={tooltipRef}

diff --git a/packages/ui/src/2_molecules/Tooltip/Tooltip.types.ts b/packages/ui/src/2_molecules/Tooltip/Tooltip.types.ts
@@ -29,3 +29,8 @@ export enum TooltipEvents {
   scroll = 'scroll',
   wheel = 'wheel',
 }
+
+export enum TooltipStyle {
+  primary = 'primary',
+  secondary = 'secondary',
+}