chore(Tooltip): remove withMaxWidth (#2337)

mondaycom · Aug 11, 2024 · 779b06a · 779b06a
1 parent 3d0ad4d
commit 779b06a
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 167 deletions.
diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
@@ -245,6 +245,8 @@ codemod: `search-component-import-migration`
 - `position` changed to only accept "top, right, bottom, left"
 - `justify` removed
 - `arrowPosition` removed
+- `withMaxWidth` prop removed, max-width is now set to 240px [codemod]
+- Tooltip's content is now wrapped in another div, non-block layouts inside the tooltip may break
 
 ### ColorPicker
 

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
@@ -59,7 +59,11 @@ Snapshot Diff:
 +           <div
 +             class="tooltip dark"
 +           >
-+             20%
++             <div
++               class="content"
++             >
++               20%
++             </div>
 +           </div>
 +           <div
 +             class="arrow arrow dark"
@@ -94,7 +98,11 @@ Snapshot Diff:
 -           <div
 -             class="tooltip dark"
 -           >
--             20%
+-             <div
+-               class="content"
+-             >
+-               20%
+-             </div>
 -           </div>
 -           <div
 -             class="arrow arrow dark"
@@ -129,7 +137,11 @@ Snapshot Diff:
 +           <div
 +             class="tooltip dark"
 +           >
-+             20%
++             <div
++               class="content"
++             >
++               20%
++             </div>
 +           </div>
 +           <div
 +             class="arrow arrow dark"
@@ -164,7 +176,11 @@ Snapshot Diff:
 -           <div
 -             class="tooltip dark"
 -           >
--             20%
+-             <div
+-               class="content"
+-             >
+-               20%
+-             </div>
 -           </div>
 -           <div
 -             class="arrow arrow dark"

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
@@ -70,7 +70,11 @@ Snapshot Diff:
 +           <div
 +             class="tooltip dark"
 +           >
-+             25%
++             <div
++               class="content"
++             >
++               25%
++             </div>
 +           </div>
 +           <div
 +             class="arrow arrow dark"
@@ -105,7 +109,11 @@ Snapshot Diff:
 +           <div
 +             class="tooltip dark"
 +           >
-+             65%
++             <div
++               class="content"
++             >
++               65%
++             </div>
 +           </div>
 +           <div
 +             class="arrow arrow dark"
@@ -140,7 +148,11 @@ Snapshot Diff:
 -           <div
 -             class="tooltip dark"
 -           >
--             25%
+-             <div
+-               class="content"
+-             >
+-               25%
+-             </div>
 -           </div>
 -           <div
 -             class="arrow arrow dark"
@@ -175,7 +187,11 @@ Snapshot Diff:
 +           <div
 +             class="tooltip dark"
 +           >
-+             25%
++             <div
++               class="content"
++             >
++               25%
++             </div>
 +           </div>
 +           <div
 +             class="arrow arrow dark"
@@ -219,14 +235,14 @@ Snapshot Diff:
         />
         <span
 @@ --- --- @@
-            <div
-              class="tooltip dark"
-            >
--             25%
-+             65%
+              <div
+                class="content"
+              >
+-               25%
++               65%
+              </div>
             </div>
             <div
-              class="arrow arrow dark"
 @@ --- --- @@
             />
           </div>
@@ -285,7 +301,11 @@ Snapshot Diff:
 -           <div
 -             class="tooltip dark"
 -           >
--             65%
+-             <div
+-               class="content"
+-             >
+-               65%
+-             </div>
 -           </div>
 -           <div
 -             class="arrow arrow dark"

diff --git a/packages/core/src/components/Tipseen/Tipseen.module.scss b/packages/core/src/components/Tipseen/Tipseen.module.scss
@@ -5,6 +5,7 @@
   min-height: 40px;
   --tooltip-padding: 0;
   --tooltip-border-radius: var(--border-radius-medium);
+  --tooltip-max-width: initial;
 
   &WithoutCustomWidth {
     --tooltip-max-width: 320px;

diff --git a/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.tsx.snap b/packages/core/src/components/Tipseen/__tests__/__snapshots__/Tipseen.test.tsx.snap
@@ -91,6 +91,76 @@ exports[`Snapshot tests Tipseen tests renders correctly with dark close button t
     >
       <div
         class="tooltip dark tipseenWrapper tipseenWrapperWithoutCustomWidth"
+      >
+        <div
+          class="content"
+        >
+          <div>
+            <div
+              class="tipseenHeader"
+            >
+              <button
+                aria-busy="false"
+                aria-disabled="false"
+                aria-label="Close"
+                class="tipseenCloseButton dark button sizeMedium kindTertiary colorDark noSidePadding"
+                data-testid="icon-button"
+                style="justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="icon noFocusStyle"
+                  data-testid="icon"
+                  fill="currentColor"
+                  height="16"
+                  viewBox="0 0 20 20"
+                  width="16"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L8.62562 9.68628L5.47045 12.8415C5.17756 13.1343 5.17756 13.6092 5.47045 13.9021C5.76334 14.195 6.23822 14.195 6.53111 13.9021L9.68628 10.7469L12.8415 13.9021C13.1343 14.195 13.6092 14.195 13.9021 13.9021C14.195 13.6092 14.195 13.1343 13.9021 12.8415L10.7469 9.68628L13.9029 6.53033C14.1958 6.23744 14.1958 5.76256 13.9029 5.46967C13.61 5.17678 13.1351 5.17678 12.8422 5.46967L9.68628 8.62562L6.53033 5.46967Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+            <p
+              class="typography onInverted start text text2Normal tipseenContent"
+              data-testid="text"
+              style="--text-clamp-lines: 1;"
+            >
+              content
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="arrow arrow dark"
+        data-placement="bottom"
+        style="position: absolute; left: 0px; transform: translate(0px, 0px) rotate(45deg);"
+      />
+    </div>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Snapshot tests Tipseen tests renders correctly with floating variation 1`] = `
+<span
+  class="monday-style-dialog-content-wrapper contentWrapper"
+  data-popper-reference-hidden="false"
+  data-testid="tooltip"
+  style="position: absolute; left: 0px; top: 0px;"
+>
+  <div
+    class="contentComponent bottom"
+  >
+    <div
+      class="tooltip dark tipseenWrapper tipseenWrapperWithoutCustomWidth floating"
+    >
+      <div
+        class="content"
       >
         <div>
           <div
@@ -100,7 +170,7 @@ exports[`Snapshot tests Tipseen tests renders correctly with dark close button t
               aria-busy="false"
               aria-disabled="false"
               aria-label="Close"
-              class="tipseenCloseButton dark button sizeMedium kindTertiary colorDark noSidePadding"
+              class="tipseenCloseButton button sizeMedium kindTertiary colorOnInvertedBackground noSidePadding"
               data-testid="icon-button"
               style="justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;"
               type="button"
@@ -132,68 +202,6 @@ exports[`Snapshot tests Tipseen tests renders correctly with dark close button t
           </p>
         </div>
       </div>
-      <div
-        class="arrow arrow dark"
-        data-placement="bottom"
-        style="position: absolute; left: 0px; transform: translate(0px, 0px) rotate(45deg);"
-      />
-    </div>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Snapshot tests Tipseen tests renders correctly with floating variation 1`] = `
-<span
-  class="monday-style-dialog-content-wrapper contentWrapper"
-  data-popper-reference-hidden="false"
-  data-testid="tooltip"
-  style="position: absolute; left: 0px; top: 0px;"
->
-  <div
-    class="contentComponent bottom"
-  >
-    <div
-      class="tooltip dark tipseenWrapper tipseenWrapperWithoutCustomWidth floating"
-    >
-      <div>
-        <div
-          class="tipseenHeader"
-        >
-          <button
-            aria-busy="false"
-            aria-disabled="false"
-            aria-label="Close"
-            class="tipseenCloseButton button sizeMedium kindTertiary colorOnInvertedBackground noSidePadding"
-            data-testid="icon-button"
-            style="justify-content: center; align-items: center; padding: 0px; width: 24px; height: 24px;"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="icon noFocusStyle"
-              data-testid="icon"
-              fill="currentColor"
-              height="16"
-              viewBox="0 0 20 20"
-              width="16"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L8.62562 9.68628L5.47045 12.8415C5.17756 13.1343 5.17756 13.6092 5.47045 13.9021C5.76334 14.195 6.23822 14.195 6.53111 13.9021L9.68628 10.7469L12.8415 13.9021C13.1343 14.195 13.6092 14.195 13.9021 13.9021C14.195 13.6092 14.195 13.1343 13.9021 12.8415L10.7469 9.68628L13.9029 6.53033C14.1958 6.23744 14.1958 5.76256 13.9029 5.46967C13.61 5.17678 13.1351 5.17678 12.8422 5.46967L9.68628 8.62562L6.53033 5.46967Z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </button>
-        </div>
-        <p
-          class="typography onInverted start text text2Normal tipseenContent"
-          data-testid="text"
-          style="--text-clamp-lines: 1;"
-        >
-          content
-        </p>
-      </div>
     </div>
   </div>
 </span>
@@ -216,17 +224,21 @@ exports[`Snapshot tests Tipseen tests renders correctly without close 1`] = `
       <div
         class="tooltip dark tipseenWrapper tipseenWrapperWithoutCustomWidth"
       >
-        <div>
-          <div
-            class="tipseenHeader"
-          />
-          <p
-            class="typography onInverted start text text2Normal tipseenContent"
-            data-testid="text"
-            style="--text-clamp-lines: 1;"
-          >
-            content
-          </p>
+        <div
+          class="content"
+        >
+          <div>
+            <div
+              class="tipseenHeader"
+            />
+            <p
+              class="typography onInverted start text text2Normal tipseenContent"
+              data-testid="text"
+              style="--text-clamp-lines: 1;"
+            >
+              content
+            </p>
+          </div>
         </div>
       </div>
       <div

diff --git a/packages/core/src/components/Tooltip/Tooltip.module.scss b/packages/core/src/components/Tooltip/Tooltip.module.scss
@@ -6,21 +6,13 @@ $tooltip-z-index: 9999999999999999;
   position: relative;
   display: inline-block;
   border-radius: var(--tooltip-border-radius, var(--border-radius-small));
-  padding: var(--tooltip-padding, #{var(--spacing-small) var(--spacing-medium)});
   box-shadow: var(--box-shadow-medium);
   @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;
-  }
-
-  &.withMaxWidth {
-    --tooltip-max-width: 240px;
-  }
+  --tooltip-max-width: 240px;
 
   .image {
     display: block;