feat: popup: add more props to style and global css vars (#592)

* feat: popup: add more props to style and global css vars

* chore: popup: update storybook

* chore: popup: address pr feedback and update or remove css vars

src/components/Popup/Popup.stories.tsx

@@ -93,6 +93,9 @@ export const Popups = Popup_Story.bind({});
 Popups.args = {
   offset: 8,
   theme: PopupTheme.light,
+  animate: true,
+  bordered: false,
+  dropShadow: true,
   content: (
     <>
       <Stack

src/components/Popup/Popup.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { PopupProps, PopupRef, PopupSize, PopupTheme } from './Popup.types';
-import { Tooltip, TooltipSize, TooltipType } from '../Tooltip';
+import { Tooltip, TooltipSize, TooltipTheme, TooltipType } from '../Tooltip';
 import { useCanvasDirection } from '../../hooks/useCanvasDirection';
 import { mergeClasses, uniqueId } from '../../shared/utilities';
 
@@ -9,16 +9,20 @@ import styles from './popup.module.scss';
 export const Popup: FC<PopupProps> = React.forwardRef<PopupRef, PopupProps>(
   (
     {
+      animate = true,
+      bordered = false,
       classNames,
       closeOnPopupClick = false,
       closeOnReferenceClick = true,
+      dropShadow = true,
       id,
       popupOnKeydown,
       referenceOnClick,
       referenceOnKeydown,
       showPopup,
       size = PopupSize.Medium,
       tabIndex = 0,
+      theme = PopupTheme.light,
       trigger = 'click',
       popupStyle,
       ...rest
@@ -42,19 +46,28 @@ export const Popup: FC<PopupProps> = React.forwardRef<PopupRef, PopupProps>(
       [PopupSize.Small, TooltipSize.Small],
     ]);
 
+    const popupThemeToTooltipThemeMap = new Map<PopupTheme, TooltipTheme>([
+      [PopupTheme.dark, TooltipTheme.dark],
+      [PopupTheme.light, TooltipTheme.light],
+    ]);
+
     return (
       <Tooltip
         {...rest}
+        animate={animate}
+        bordered={bordered}
         classNames={popupClassNames}
         closeOnTooltipClick={closeOnPopupClick}
         closeOnReferenceClick={closeOnReferenceClick}
+        dropShadow={dropShadow}
         id={popupId}
         ref={ref}
         referenceOnClick={referenceOnClick}
         referenceOnKeydown={referenceOnKeydown}
         showTooltip={showPopup}
         size={popupSizeToTooltipSizeMap.get(size)}
         tabIndex={tabIndex}
+        theme={popupThemeToTooltipThemeMap.get(theme)}
         tooltipOnKeydown={popupOnKeydown}
         tooltipStyle={popupStyle}
         trigger={trigger}

src/components/Popup/Popup.types.ts

@@ -17,6 +17,7 @@ export interface PopupProps
     | 'closeOnTooltipClick'
     | 'showTooltip'
     | 'size'
+    | 'theme'
     | 'tooltipOnKeydown'
     | 'tooltipStyle'
     | 'type'
@@ -48,6 +49,11 @@ export interface PopupProps
    * @default PopupSize.Medium
    */
   size?: PopupSize;
+  /**
+   * Theme of the Popup.
+   * @default light
+   */
+  theme?: PopupTheme;
 }
 
 export type PopupRef = {

src/components/Tooltip/Tooltip.stories.tsx

@@ -134,6 +134,9 @@ Tooltips.args = {
   placement: 'bottom',
   disabled: false,
   visibleArrow: true,
+  animate: true,
+  bordered: false,
+  dropShadow: true,
   classNames: 'my-tooltip-class',
   openDelay: 0,
   hideAfter: 200,

src/components/Tooltip/Tooltip.test.tsx

@@ -79,6 +79,49 @@ describe('Tooltip', () => {
     );
   });
 
+  test('Tooltip is bordered with no drop shadow', async () => {
+    const { container } = render(
+      <Tooltip
+        bordered
+        content={<div data-testid="tooltipBordered">This is a tooltip.</div>}
+        dropShadow={false}
+      >
+        <div className="test-div">test</div>
+      </Tooltip>
+    );
+    fireEvent.mouseOver(container.querySelector('.test-div'));
+    await waitFor(() => screen.getByTestId('tooltipBordered'));
+    expect(container.querySelector('.bordered')).toBeTruthy();
+    expect(container.querySelector('.drop-shadow')).toBeFalsy();
+  });
+
+  test('Tooltip is animated by default', async () => {
+    const { container } = render(
+      <Tooltip
+        content={<div data-testid="tooltipAnimated">This is a tooltip.</div>}
+      >
+        <div className="test-div">test</div>
+      </Tooltip>
+    );
+    fireEvent.mouseOver(container.querySelector('.test-div'));
+    await waitFor(() => screen.getByTestId('tooltipAnimated'));
+    expect(container.querySelector('.animate')).toBeTruthy();
+  });
+
+  test('Tooltip not animated', async () => {
+    const { container } = render(
+      <Tooltip
+        animate={false}
+        content={<div data-testid="tooltipNotAnimated">This is a tooltip.</div>}
+      >
+        <div className="test-div">test</div>
+      </Tooltip>
+    );
+    fireEvent.mouseOver(container.querySelector('.test-div'));
+    await waitFor(() => screen.getByTestId('tooltipNotAnimated'));
+    expect(container.querySelector('.animate')).toBeFalsy();
+  });
+
   test('Tooltip is large', async () => {
     const { container } = render(
       <Tooltip

src/components/Tooltip/Tooltip.tsx

@@ -45,13 +45,16 @@ export const Tooltip: FC<TooltipProps> = React.memo(
   React.forwardRef<TooltipRef, TooltipProps>(
     (
       {
+        animate = true,
+        bordered = false,
         children,
         classNames,
         closeOnOutsideClick = true,
         closeOnReferenceClick = true,
         closeOnTooltipClick = false,
         content,
         disabled,
+        dropShadow = true,
         height,
         hideAfter = ANIMATION_DURATION,
         id,
@@ -256,6 +259,9 @@ export const Tooltip: FC<TooltipProps> = React.memo(
         styles.tooltip,
         { [styles.popup]: type === TooltipType.Popup },
         classNames,
+        { [styles.animate]: !!animate },
+        { [styles.bordered]: !!bordered },
+        { [styles.dropShadow]: !!dropShadow },
         { [styles.visibleArrow]: !!visibleArrow },
         { [styles.visible]: mergedVisible },
         { [styles.hiding]: hiding },

src/components/Tooltip/Tooltip.types.ts

@@ -35,6 +35,16 @@ export enum TooltipType {
 }
 
 export interface TooltipProps extends Omit<OcBaseProps<HTMLDivElement>, 'ref'> {
+  /**
+   * Should animate the Tooltip transitions.
+   * @default true
+   */
+  animate?: boolean;
+  /**
+   * Whether the Tooltip has a border.
+   * @default false
+   */
+  bordered?: boolean;
   /**
    * Should close Tooltip on click outside.
    * @default true
@@ -59,6 +69,11 @@ export interface TooltipProps extends Omit<OcBaseProps<HTMLDivElement>, 'ref'> {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Whether the Tooltip has a drop shadow.
+   * @default true
+   */
+  dropShadow?: boolean;
   /**
    * Timeout in milliseconds to hide the Tooltip.
    * @default 0

src/components/Tooltip/tooltip.module.scss

@@ -26,11 +26,10 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
 }
 
 .tooltip {
-  --bg: var(--background-color);
-  --text-color: var(--text-primary-color);
+  --bg: var(--tooltip-background-color-light);
+  --text-color: var(--tooltip-text-color-light);
   background: var(--bg);
-  border-radius: $border-radius-s;
-  box-shadow: $shadow-object-s;
+  border-radius: var(--tooltip-border-radius);
   color: var(--text-color);
   font-family: $octuple-font-family;
   font-size: $text-font-size-1;
@@ -39,6 +38,14 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
   text-align: center;
   z-index: $z-index-400;
 
+  &.bordered {
+    border: var(--tooltip-border-light);
+  }
+
+  &.drop-shadow {
+    box-shadow: $shadow-object-s;
+  }
+
   // When Popup, adds a pixel buffer equal to the width of the arrow to prevent
   // floating ui dismiss when hovering from reference to floating element.
   // Especially helpful when trigger is hover.
@@ -65,18 +72,34 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
   }
 
   &.dark {
-    --bg: var(--grey-color-80);
-    --text-color: var(--text-inverse-color);
+    --bg: var(--tooltip-background-color-dark);
+    --text-color: var(--tooltip-text-color-dark);
+
+    &.bordered {
+      border: var(--tooltip-border-dark);
+    }
   }
 
   .arrow {
     background: inherit;
-    box-shadow: $tooltip-arrow-shadow;
     height: $space-xs;
     width: $space-xs;
     z-index: -1;
   }
 
+  &.bordered {
+    .arrow {
+      border-bottom: var(--tooltip-border-light);
+      border-right: var(--tooltip-border-light);
+    }
+  }
+
+  &.drop-shadow {
+    .arrow {
+      box-shadow: $tooltip-arrow-shadow;
+    }
+  }
+
   &.bottom {
     transform-origin: top center;
 
@@ -175,14 +198,20 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
 
   &.visible {
     display: block;
-    animation: scaleTooltipIn $motion-duration-extra-fast
-      $motion-easing-easeinout 0s forwards;
+
+    &.animate {
+      animation: scaleTooltipIn $motion-duration-extra-fast
+        $motion-easing-easeinout 0s forwards;
+    }
   }
 
   &.hiding {
-    animation: scaleTooltipOut $motion-duration-extra-fast
-      $motion-easing-easeinout 0s forwards;
     pointer-events: none;
+
+    &.animate {
+      animation: scaleTooltipOut $motion-duration-extra-fast
+        $motion-easing-easeinout 0s forwards;
+    }
   }
 
   &.hidden {

src/styles/themes/_default-theme.scss

@@ -798,4 +798,19 @@
   --slider-track-error-border-color: var(--red-color-60);
   --slider-value-text-color: var(--text-secondary-color);
   // ------ Slider theme ------
+
+  // ------ Tooltip theme ------
+  --tooltip-background-color-dark: var(--grey-color-80);
+  --tooltip-background-color-light: var(--background-color);
+  --tooltip-border-color-dark: var(--grey-color-40);
+  --tooltip-border-color-light: var(--grey-color-60);
+  --tooltip-border-radius: var(--border-radius-s);
+  --tooltip-border-style: solid;
+  --tooltip-border-width: 1px;
+  --tooltip-text-color-dark: var(--text-inverse-color);
+  --tooltip-text-color-light: var(--text-primary-color);
+  --tooltip-border-dark: var(--tooltip-border-width) var(--tooltip-border-style)
+    var(--tooltip-border-color-dark);
+  --tooltip-border-light: var(--tooltip-border-width)
+    var(--tooltip-border-style) var(--tooltip-border-color-light);
 }