chore(Tooltip): remove withMaxWidth

packages/core/docs/vibe-3-changelog.md

@@ -240,6 +240,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
 

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"

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"

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;

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

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;