Merge branch 'tooltip' into tooltip-showOnDialogEnter-6717263394

mondaycom · Jun 4, 2024 · 5a77649 · 5a77649
2 parents 01540ec + f617ecd
commit 5a77649
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 112 deletions.
diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
@@ -1 +1,5 @@
 # Vibe 3 Changelog
+
+## Tooltip
+- Remove paddingSize prop
+- Remove all themes besides for dark & primary, and changed theme to accept string instead of static prop. theme="primary" instead of theme={Tooltip.themes.Primary} 
diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.js.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.js.snap
@@ -57,12 +57,12 @@ Snapshot Diff:
 +           class="contentComponent top edgeCenter hasTooltip"
 +         >
 +           <div
-+             class="tooltip dark paddingSizeUndefined"
++             class="tooltip dark"
 +           >
 +             20%
 +           </div>
 +           <div
-+             class="arrow arrow dark paddingSizeUndefined"
++             class="arrow arrow dark"
 +             data-placement="top"
 +             style="position: absolute;"
 +           />
@@ -92,12 +92,12 @@ Snapshot Diff:
 -           class="contentComponent top edgeCenter hasTooltip"
 -         >
 -           <div
--             class="tooltip dark paddingSizeUndefined"
+-             class="tooltip dark"
 -           >
 -             20%
 -           </div>
 -           <div
--             class="arrow arrow dark paddingSizeUndefined"
+-             class="arrow arrow dark"
 -             data-placement="top"
 -             style="position: absolute;"
 -           />
@@ -127,12 +127,12 @@ Snapshot Diff:
 +           class="contentComponent top edgeCenter hasTooltip"
 +         >
 +           <div
-+             class="tooltip dark paddingSizeUndefined"
++             class="tooltip dark"
 +           >
 +             20%
 +           </div>
 +           <div
-+             class="arrow arrow dark paddingSizeUndefined"
++             class="arrow arrow dark"
 +             data-placement="top"
 +             style="position: absolute;"
 +           />
@@ -162,12 +162,12 @@ Snapshot Diff:
 -           class="contentComponent top edgeCenter hasTooltip expandAppear expandAppearActive"
 -         >
 -           <div
--             class="tooltip dark paddingSizeUndefined"
+-             class="tooltip dark"
 -           >
 -             20%
 -           </div>
 -           <div
--             class="arrow arrow dark paddingSizeUndefined"
+-             class="arrow arrow dark"
 -             data-placement="top"
 -             style="position: absolute;"
 -           />

diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.js.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.js.snap
@@ -68,12 +68,12 @@ Snapshot Diff:
 +           class="contentComponent top edgeCenter hasTooltip"
 +         >
 +           <div
-+             class="tooltip dark paddingSizeUndefined"
++             class="tooltip dark"
 +           >
 +             25%
 +           </div>
 +           <div
-+             class="arrow arrow dark paddingSizeUndefined"
++             class="arrow arrow dark"
 +             data-placement="top"
 +             style="position: absolute;"
 +           />
@@ -103,12 +103,12 @@ Snapshot Diff:
 +           class="contentComponent top edgeCenter hasTooltip"
 +         >
 +           <div
-+             class="tooltip dark paddingSizeUndefined"
++             class="tooltip dark"
 +           >
 +             65%
 +           </div>
 +           <div
-+             class="arrow arrow dark paddingSizeUndefined"
++             class="arrow arrow dark"
 +             data-placement="top"
 +             style="position: absolute;"
 +           />
@@ -138,12 +138,12 @@ Snapshot Diff:
 -           class="contentComponent top edgeCenter hasTooltip"
 -         >
 -           <div
--             class="tooltip dark paddingSizeUndefined"
+-             class="tooltip dark"
 -           >
 -             25%
 -           </div>
 -           <div
--             class="arrow arrow dark paddingSizeUndefined"
+-             class="arrow arrow dark"
 -             data-placement="top"
 -             style="position: absolute;"
 -           />
@@ -173,12 +173,12 @@ Snapshot Diff:
 +           class="contentComponent top edgeCenter hasTooltip"
 +         >
 +           <div
-+             class="tooltip dark paddingSizeUndefined"
++             class="tooltip dark"
 +           >
 +             25%
 +           </div>
 +           <div
-+             class="arrow arrow dark paddingSizeUndefined"
++             class="arrow arrow dark"
 +             data-placement="top"
 +             style="position: absolute;"
 +           />
@@ -220,13 +220,13 @@ Snapshot Diff:
         <span
 @@ --- --- @@
             <div
-              class="tooltip dark paddingSizeUndefined"
+              class="tooltip dark"
             >
 -             25%
 +             65%
             </div>
             <div
-              class="arrow arrow dark paddingSizeUndefined"
+              class="arrow arrow dark"
 @@ --- --- @@
             />
           </div>
@@ -283,12 +283,12 @@ Snapshot Diff:
 -           class="contentComponent top edgeCenter hasTooltip expandAppear expandAppearActive"
 -         >
 -           <div
--             class="tooltip dark paddingSizeUndefined"
+-             class="tooltip dark"
 -           >
 -             65%
 -           </div>
 -           <div
--             class="arrow arrow dark paddingSizeUndefined"
+-             class="arrow arrow dark"
 -             data-placement="top"
 -             style="position: absolute;"
 -           />

diff --git a/packages/core/src/components/Tipseen/Tipseen.tsx b/packages/core/src/components/Tipseen/Tipseen.tsx
@@ -16,7 +16,6 @@ import { ComponentDefaultTestId } from "../../tests/constants";
 import { getTestId } from "../../tests/test-ids-utils";
 import Text from "../Text/Text";
 import styles from "./Tipseen.module.scss";
-import { TooltipTheme } from "../Tooltip/TooltipConstants";
 import { ButtonColor } from "../Button/ButtonConstants";
 import { TypographyColor } from "../Typography/TypographyConstants";
 import React from "react";
@@ -190,7 +189,7 @@ const Tipseen: VibeComponent<TipseenProps> & {
           hideTrigger={hideTrigger}
           showTrigger={showTrigger}
           content={tooltipContent}
-          theme={color === TipseenColor.INVERTED ? TooltipTheme.Dark : TooltipTheme.Primary}
+          theme={color === TipseenColor.INVERTED ? "dark" : "primary"}
           justify={justify}
           containerSelector={containerSelector}
           disableDialogSlide={false}

diff --git a/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.js.snap b/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.js.snap
@@ -158,7 +158,7 @@ exports[`Snapshot tests Tipseen tests renders correctly with dark close button t
       className="contentComponent bottom edgeCenter hasTooltip"
     >
       <div
-        className="tooltip primary paddingSizeUndefined tipseenWrapper tipseenWrapperWithoutCustomWidth"
+        className="tooltip primary tipseenWrapper tipseenWrapperWithoutCustomWidth"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
@@ -214,7 +214,7 @@ exports[`Snapshot tests Tipseen tests renders correctly with dark close button t
         </div>
       </div>
       <div
-        className="arrow arrow primary paddingSizeUndefined"
+        className="arrow arrow primary"
         data-placement="bottom"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -247,7 +247,7 @@ exports[`Snapshot tests Tipseen tests renders correctly with floating variation
     className="contentComponent bottom edgeCenter"
   >
     <div
-      className="tooltip primary paddingSizeUndefined tipseenWrapper tipseenWrapperWithoutCustomWidth floating"
+      className="tooltip primary tipseenWrapper tipseenWrapperWithoutCustomWidth floating"
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
     >
@@ -336,7 +336,7 @@ exports[`Snapshot tests Tipseen tests renders correctly without close - deprecat
       className="contentComponent bottom edgeCenter hasTooltip"
     >
       <div
-        className="tooltip primary paddingSizeUndefined tipseenWrapper tipseenWrapperWithoutCustomWidth"
+        className="tooltip primary tipseenWrapper tipseenWrapperWithoutCustomWidth"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
@@ -351,7 +351,7 @@ exports[`Snapshot tests Tipseen tests renders correctly without close - deprecat
         </div>
       </div>
       <div
-        className="arrow arrow primary paddingSizeUndefined"
+        className="arrow arrow primary"
         data-placement="bottom"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -396,7 +396,7 @@ exports[`Snapshot tests Tipseen tests renders correctly without close 1`] = `
       className="contentComponent bottom edgeCenter hasTooltip"
     >
       <div
-        className="tooltip primary paddingSizeUndefined tipseenWrapper tipseenWrapperWithoutCustomWidth"
+        className="tooltip primary tipseenWrapper tipseenWrapperWithoutCustomWidth"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
@@ -411,7 +411,7 @@ exports[`Snapshot tests Tipseen tests renders correctly without close 1`] = `
         </div>
       </div>
       <div
-        className="arrow arrow primary paddingSizeUndefined"
+        className="arrow arrow primary"
         data-placement="bottom"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -456,7 +456,7 @@ exports[`Snapshot tests Tipseen tests renders correctly without props 1`] = `
       className="contentComponent bottom edgeCenter hasTooltip"
     >
       <div
-        className="tooltip primary paddingSizeUndefined tipseenWrapper tipseenWrapperWithoutCustomWidth"
+        className="tooltip primary tipseenWrapper tipseenWrapperWithoutCustomWidth"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
       >
@@ -512,7 +512,7 @@ exports[`Snapshot tests Tipseen tests renders correctly without props 1`] = `
         </div>
       </div>
       <div
-        className="arrow arrow primary paddingSizeUndefined"
+        className="arrow arrow primary"
         data-placement="bottom"
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}

diff --git a/packages/core/src/components/Tooltip/Tooltip.module.scss b/packages/core/src/components/Tooltip/Tooltip.module.scss
@@ -11,6 +11,8 @@ $tooltip-z-index: 9999999999999999;
   @include font-input();
   max-width: var(--tooltip-max-width, 50vw);
   word-break: break-word;
+  background-color: var(--inverted-color-background);
+  color: var(--text-color-on-inverted);
 
   &.tooltipWithContent {
     padding: unset;
@@ -54,51 +56,15 @@ $tooltip-z-index: 9999999999999999;
   color: #fff;
 }
 
+.arrow,
 .dark,
 .arrow.dark {
   background-color: var(--inverted-color-background);
   color: var(--text-color-on-inverted);
 }
 
-.white,
-.arrow.white {
-  background-color: var(--color-snow_white);
-  color: var(--color-blackish);
-  box-shadow: var(--box-shadow-medium);
-}
-
 .primary,
 .arrow.primary {
   background-color: var(--primary-color);
   color: var(--text-color-on-primary);
 }
-
-.success,
-.arrow.success {
-  background-color: var(--positive-color);
-  color: var(--text-color-on-primary);
-}
-
-.surface,
-.arrow.surface {
-  background-color: #5b607a;
-  color: var(--color-snow_white);
-}
-
-.private,
-.arrow.private {
-  background-color: var(--private-color);
-  color: var(--text-color-on-primary);
-}
-
-.share,
-.arrow.share {
-  background-color: var(--shareable-color);
-  color: var(--text-color-on-primary);
-}
-
-.error,
-.arrow.error {
-  background-color: var(--negative-color);
-  color: var(--text-color-on-primary);
-}
diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx
@@ -4,7 +4,7 @@ import cx from "classnames";
 import React, { CSSProperties, isValidElement, PureComponent, ReactElement } from "react";
 import { Modifier } from "react-popper";
 import Dialog from "../Dialog/Dialog";
-import { AnimationType, BASE_SIZES_WITH_NONE, HideShowEvent, JustifyType } from "../../constants";
+import { AnimationType, HideShowEvent, JustifyType } from "../../constants";
 import { DialogPosition } from "../../constants/positions";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { TooltipArrowPosition, TooltipTheme } from "./TooltipConstants";
@@ -40,7 +40,6 @@ interface TooltipBaseProps extends VibeComponentProps {
   arrowPosition?: TooltipArrowPosition;
   /** Class name for a tooltip's arrow */
   arrowClassName?: string;
-  paddingSize?: keyof typeof BASE_SIZES_WITH_NONE;
   /**
    * How much to move the dialog in relative to children
    * main is the axis in which the position is aligned to
@@ -149,14 +148,13 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   wasShown: boolean;
   static positions = DialogPosition;
   static hideShowTriggers = HideShowEvent;
-  static themes = TooltipTheme;
   static animationTypes = AnimationType;
   static justifyTypes = JustifyType;
   static arrowPositions = TooltipArrowPosition;
   static defaultProps = {
     arrowPosition: TooltipArrowPosition.CENTER,
     moveBy: { main: 4, secondary: 0 },
-    theme: TooltipTheme.Dark,
+    theme: "dark",
     position: Tooltip.positions.TOP,
     justify: Tooltip.justifyTypes.CENTER,
     hideDelay: 100,
@@ -190,7 +188,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   }
 
   renderTooltipContent() {
-    const { theme, content, paddingSize, className, style, withMaxWidth, title, image, icon } = this.props;
+    const { theme, content, className, style, withMaxWidth, title, image, icon } = this.props;
     if (!content) {
       // don't render empty tooltip
       return null;
@@ -221,7 +219,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
           )}
         >
           {image && <img className={styles.image} src={image} alt="" />}
-          <div className={cx(styles.content, getStyle(styles, camelCase("padding-size-" + paddingSize)))}>
+          <div className={cx(styles.content)}>
             {title && (
               <Flex gap={Flex.gaps.XS}>
                 {icon && <Icon iconSize="20" icon={icon} clickable={false} />}
@@ -241,7 +239,6 @@ export default class Tooltip extends PureComponent<TooltipProps> {
         className={cx(
           styles.tooltip,
           getStyle(styles, camelCase(theme)),
-          getStyle(styles, camelCase("padding-size-" + paddingSize)),
           { [styles.withMaxWidth]: withMaxWidth },
           className
         )}
@@ -301,7 +298,6 @@ export default class Tooltip extends PureComponent<TooltipProps> {
       forceRenderWithoutChildren,
       getContainer,
       theme,
-      paddingSize,
       tip,
       arrowClassName,
       id,
@@ -324,12 +320,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
       tooltip: tip,
       content,
       getContainer: getContainer || this.getContainer,
-      tooltipClassName: cx(
-        styles.arrow,
-        getStyle(styles, theme),
-        getStyle(styles, camelCase("padding-size-" + paddingSize)),
-        arrowClassName
-      ),
+      tooltipClassName: cx(styles.arrow, getStyle(styles, theme), arrowClassName),
       animationType: AnimationType.EXPAND,
       onDialogDidHide: this.onTooltipHide,
       onDialogDidShow: this.onTooltipShow,