chore(Tooltip): remove paddingSize (#2159)

mondaycom · Jun 3, 2024 · 890103b · 890103b
1 parent fe80142
commit 890103b
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 59 deletions.
diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
@@ -1 +1,4 @@
 # Vibe 3 Changelog
+
+## Tooltip
+- Remove paddingSize prop
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/__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.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
@@ -190,7 +189,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 +220,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 +240,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 +299,6 @@ export default class Tooltip extends PureComponent<TooltipProps> {
       forceRenderWithoutChildren,
       getContainer,
       theme,
-      paddingSize,
       tip,
       arrowClassName,
       id,
@@ -324,12 +321,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,