@eturnity/eturnity_reusable_components 9.28.3-EXP-11.0 → 9.28.3-EXP-11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.28.3-EXP-11.0",
+  "version": "9.28.3-EXP-11.1",
   "files": [
     "dist",
     "src"

package/src/components/infoText/index.vue

@@ -244,6 +244,18 @@
         default: '400px',
         type: String,
       },
+      // Floor for the measured popup width; lower it (e.g. '0') for short
+      // tooltip-style content.
+      minWidth: {
+        default: '230px',
+        type: String,
+      },
+      // Padding of the popup box; tighten (e.g. '6px 10px') for
+      // tooltip-style content.
+      contentPadding: {
+        default: '',
+        type: String,
+      },
       openTrigger: {
         type: String,
         default: 'onHover',
@@ -494,6 +506,7 @@
           width: '100%',
           maxWidth: props.maxWidth,
           overflowY: 'auto',
+          ...(props.contentPadding ? { padding: props.contentPadding } : {}),
           backgroundColor: props.contentBackgroundColor
             ? props.contentBackgroundColor
             : props.image
@@ -566,13 +579,21 @@
         clone.style.whiteSpace = 'nowrap' // Prevent text wrapping during measurement
         document.body.appendChild(clone)
 
-        // Get fresh content width from clone
-        const contentWidth = clone.offsetWidth
+        // Get fresh content width from clone. offsetWidth rounds to an
+        // integer, which can under-measure by <1px and wrap an exact-fit
+        // line — use the subpixel rect width, ceiled.
+        const contentWidth = Math.ceil(clone.getBoundingClientRect().width)
         document.body.removeChild(clone)
 
-        // Calculate new width
+        // Calculate new width. The measured clone is the bare text span, but
+        // TextOverlay wraps it with 10px horizontal padding each side under
+        // border-box sizing — compensate or exact-fit content wraps.
+        const TEXT_OVERLAY_HORIZONTAL_PADDING_PX = 20
         const calculatedWidth = Math.min(
-          Math.max(contentWidth, 230),
+          Math.max(
+            contentWidth + TEXT_OVERLAY_HORIZONTAL_PADDING_PX,
+            parseInt(props.minWidth, 10) || 0
+          ),
           parseInt(props.maxWidth, 10)
         )
 

package/src/components/infoText/infoText.spec.js

@@ -79,6 +79,49 @@ describe('InfoText Component', () => {
     expect(wrapper.find('[data-test-id="infoText_dot"]').exists()).toBe(true)
   })
 
+  describe("popup width floor (minWidth)", () => {
+    const showPopup = async (w) => {
+      w.vm.isMobile = false
+      await w.vm.$nextTick()
+      // the hover listener sits on the component root
+      await w.trigger("mouseenter")
+      // updatePosition awaits two ticks before measuring
+      await new Promise((resolve) => setTimeout(resolve))
+      await w.vm.$nextTick()
+    }
+
+    it("keeps the 230px width floor by default", async () => {
+      const roomy = mount(InfoText, {
+        props: { ...defaultProps, maxWidth: "400px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(roomy)
+      // jsdom measures content at 0px, so the floor is what remains
+      expect(roomy.vm.infoBoxWidth).toBe(230)
+    })
+
+    it("applies contentPadding to the popup box", async () => {
+      const padded = mount(InfoText, {
+        props: { ...defaultProps, contentPadding: "6px 10px" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(padded)
+      const box = padded.find('[data-test-id="info_text_wrapper"]')
+        .element.firstElementChild
+      expect(box.style.padding).toBe("6px 10px")
+    })
+
+    it("allows a lower minWidth for tooltip-style content", async () => {
+      const small = mount(InfoText, {
+        props: { ...defaultProps, minWidth: "0" },
+        global: { stubs: { teleport: true } },
+      })
+      await showPopup(small)
+      // jsdom content measures 0px; only the padding compensation remains
+      expect(small.vm.infoBoxWidth).toBe(20)
+    })
+  })
+
   test('iconTextContent slot is correctly rendered', async () => {
     // override
     const props = defaultProps.iconTextContent