[feat] Enhance the Tooltip component (#2889)

aimhubio · Jul 3, 2023 · 5abdc43 · 5abdc43
1 parent df61a77
commit 5abdc43
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 48 deletions.
diff --git a/src/aimcore/web/ui/src/components/kit_v2/Popover/Popover.style.ts b/src/aimcore/web/ui/src/components/kit_v2/Popover/Popover.style.ts
@@ -1,26 +1,12 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { keyframes, styled } from 'config/stitches';
-
-const slideUpAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateY(2px)' },
-  '100%': { opacity: 1, transform: 'translateY(0)' },
-});
-
-const slideRightAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateX(-2px)' },
-  '100%': { opacity: 1, transform: 'translateX(0)' },
-});
-
-const slideDownAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateY(-2px)' },
-  '100%': { opacity: 1, transform: 'translateY(0)' },
-});
-
-const slideLeftAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateX(2px)' },
-  '100%': { opacity: 1, transform: 'translateX(0)' },
-});
+import { styled } from 'config/stitches';
+import {
+  slideDownAndFade,
+  slideLeftAndFade,
+  slideRightAndFade,
+  slideUpAndFade,
+} from 'config/stitches/animations';
 
 const StyledContent = styled(PopoverPrimitive.Content, {
   br: '5px',

diff --git a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.d.ts b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.d.ts
@@ -36,4 +36,10 @@ export interface ITooltipProps extends TooltipProps {
    * @optional
    */
   hasArrow?: boolean;
+  /**
+   * The color of the tooltip.
+   * @defaultValue 'info'
+   * @optional
+   */
+  color?: 'info' | 'success' | 'warning' | 'danger';
 }
diff --git a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.style.ts b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.style.ts
@@ -1,37 +1,24 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
 
-import { keyframes, styled } from 'config/stitches';
-
-const slideUpAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateY(2px)' },
-  '100%': { opacity: 1, transform: 'translateY(0)' },
-});
-
-const slideRightAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateX(-2px)' },
-  '100%': { opacity: 1, transform: 'translateX(0)' },
-});
-
-const slideDownAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateY(-2px)' },
-  '100%': { opacity: 1, transform: 'translateY(0)' },
-});
-
-const slideLeftAndFade = keyframes({
-  '0%': { opacity: 0, transform: 'translateX(2px)' },
-  '100%': { opacity: 1, transform: 'translateX(0)' },
-});
+import { styled } from 'config/stitches';
+import {
+  slideDownAndFade,
+  slideLeftAndFade,
+  slideRightAndFade,
+  slideUpAndFade,
+} from 'config/stitches/animations';
 
 const TooltipContent = styled(Tooltip.Content, {
   borderRadius: 4,
-  padding: '10px 15px',
+  p: '$4 $5',
   maxWidth: 400,
   fontSize: '$3',
-  border: '1px solid rgba(90, 102, 122, 0.2)',
+  border: '1px solid $colors$border-bgborder-airly-opacity',
   wordBreak: 'break-word',
   lineHeight: 1,
   backgroundColor: 'white',
-  bs: 'rgba(90, 102, 122, 0.3) 0px 10px 38px -10px, rgba(90, 102, 122, 0.3) 0px 10px 20px -15px',
+  bs: '$moderate',
+  zIndex: 1000,
   userSelect: 'none',
   animationDuration: '300ms',
   animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
@@ -42,6 +29,25 @@ const TooltipContent = styled(Tooltip.Content, {
     '&[data-side="bottom"]': { animationName: slideUpAndFade },
     '&[data-side="left"]': { animationName: slideRightAndFade },
   },
+  variants: {
+    colorPalette: {
+      info: {
+        bc: 'white',
+      },
+      success: {
+        bc: '$background-default-success-plain',
+        color: 'white',
+      },
+      warning: {
+        bc: '$background-default-warning-plain',
+        color: 'white',
+      },
+      danger: {
+        bc: '$background-default-danger-plain',
+        color: 'white',
+      },
+    },
+  },
 });
 
 const TooltipArrow = styled(Tooltip.Arrow, {

diff --git a/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.tsx b/src/aimcore/web/ui/src/components/kit_v2/Tooltip/Tooltip.tsx
@@ -36,6 +36,7 @@ function Tooltip({
   skipDelayDuration = 300,
   hasArrow = false,
   contentProps = {},
+  color = 'info',
   children,
   ...props
 }: ITooltipProps): React.FunctionComponentElement<React.ReactNode> {
@@ -57,7 +58,7 @@ function Tooltip({
             ref={ref}
             data-testid='tooltip-content'
             sideOffset={5}
-            style={{ zIndex: 1000 }}
+            colorPalette={color}
             {...contentProps}
           >
             {content}

diff --git a/src/aimcore/web/ui/src/config/stitches/animations.ts b/src/aimcore/web/ui/src/config/stitches/animations.ts
@@ -30,4 +30,36 @@ const slideOut = keyframes({
   '100%': { transform: 'translateY(100%)' },
 });
 
-export { fadeIn, fadeOut, toastSlideIn, toastSwipeOut, slideIn, slideOut };
+// Tooltip and Popover animations
+const slideUpAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const slideRightAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateX(-2px)' },
+  '100%': { opacity: 1, transform: 'translateX(0)' },
+});
+
+const slideDownAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateY(-2px)' },
+  '100%': { opacity: 1, transform: 'translateY(0)' },
+});
+
+const slideLeftAndFade = keyframes({
+  '0%': { opacity: 0, transform: 'translateX(2px)' },
+  '100%': { opacity: 1, transform: 'translateX(0)' },
+});
+
+export {
+  fadeIn,
+  fadeOut,
+  toastSlideIn,
+  toastSwipeOut,
+  slideIn,
+  slideOut,
+  slideUpAndFade,
+  slideRightAndFade,
+  slideDownAndFade,
+  slideLeftAndFade,
+};
diff --git a/src/aimcore/web/ui/src/config/stitches/theme.ts b/src/aimcore/web/ui/src/config/stitches/theme.ts
@@ -402,6 +402,7 @@ export const lightTheme: ConfigType.Theme = {
     'border-default-bgborder-soft': '#B4BFCA',
     'border-default-bgborder-light': '#D9DFE4',
     'border-default-bgborder-airly': '#E8EBEF',
+    'border-default-bgborder-airly-opacity': 'hsla(210, 17%, 75%, 0.3)',
     'border-default-bgborder-lumos': '#F7F8FA',
     'border-default-bgborder-pastel-opacity': 'hsla(210, 17%, 75%, 0.3)',
 

diff --git a/src/aimcore/web/ui/src/stories/Tooltip.stories.tsx b/src/aimcore/web/ui/src/stories/Tooltip.stories.tsx
@@ -6,7 +6,12 @@ import TooltipComponent from 'components/kit_v2/Tooltip';
 export default {
   title: 'Kit/Data Display',
   component: TooltipComponent,
-  argTypes: {},
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'danger'],
+    },
+  },
 } as ComponentMeta<typeof TooltipComponent>;
 
 const Template: ComponentStory<typeof TooltipComponent> = (args) => (