@pocketprep/ui-kit 3.3.1 → 3.4.0

package/lib/components/Forms/Checkbox.vue

@@ -71,7 +71,7 @@ export default class Checkbox extends Vue {
 .uikit-checkbox {
     background: $white;
     border: 1px solid $steel;
-    border-radius: 2px;
+    border-radius: 3px;
     width: 18px;
     height: 18px;
     display: flex;
@@ -150,7 +150,6 @@ export default class Checkbox extends Vue {
         color: $white;
         width: 12px;
         height: 11.5px;
-        margin-top: 2px;
 
         &--dark {
             color: $brand-black;

package/lib/components/Tooltips/OverflowTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="uikit-overflow-tooltip">
+    <div class="uikit-overflow-tooltip" ref="uikit-overflow-tooltip">
         <Tooltip
             v-if="textOverflows && showTooltip"
             class="uikit-overflow-tooltip__tooltip"
@@ -41,8 +41,33 @@ export default class OverflowTooltip extends Vue {
     textOverflows = false
     measurementComplete = false
     uid = Math.floor(Math.random() * 1e9)
+    intersectionObserver: IntersectionObserver | null = null
+    isVisible = false
 
     mounted () {
+        this.checkTextOverflows()
+
+        // Watch for changes in the element's visibility to recalculate whether the text overflows
+        const containerEl = this.$refs['uikit-overflow-tooltip'] as HTMLDivElement | undefined
+        if (containerEl) {
+            this.intersectionObserver = new IntersectionObserver((entries) => {
+                if (!this.isVisible && entries[0]?.isIntersecting) {
+                    this.measurementComplete = false
+                    this.$nextTick(() => {
+                        this.isVisible = true
+                        this.checkTextOverflows()
+                    })
+                }
+            })
+            this.intersectionObserver.observe(containerEl)
+        }
+    }
+
+    unmounted () {
+        this.intersectionObserver?.disconnect()
+    }
+
+    checkTextOverflows () {
         const content = this.$refs[`content_${this.uid}`] as HTMLElement
         const contentFullWidth = this.$refs[`content_fullwidth_${this.uid}`] as HTMLElement
 

package/lib/components/Tooltips/Tooltip.vue

@@ -46,22 +46,23 @@ export default class Tooltip extends Vue {
     mounted () {
         this.$nextTick(() => {
             const tooltipEl = document.querySelector(`.uikit-tooltip-popup#tooltip-${this.tooltipId}`) as HTMLElement
-            const tooltipWidth = tooltipEl.clientWidth
             const body = document.querySelector('body') as HTMLElement
-            const leftOffset = this.theme === 'rightalign' 
-                ? 20
-                : this.theme === 'leftalign'
-                    ? tooltipWidth - 20
-                    : Math.floor(tooltipWidth / 2)
-            const left = Math.round(tooltipEl.getBoundingClientRect().left + window.pageXOffset - leftOffset)
-            const top = Math.round(tooltipEl.getBoundingClientRect().top + window.pageYOffset)
 
+            // Get original positioning before adding element to body
+            const clientRectTop = tooltipEl.getBoundingClientRect().top
+            const clientRectLeft = tooltipEl.getBoundingClientRect().left
+            const computedStyle = getComputedStyle(tooltipEl)
+            const singleLineTooltipHeight = parseInt(computedStyle.lineHeight)
+                + parseInt(computedStyle.paddingTop)
+                + parseInt(computedStyle.paddingBottom)
+
+            // Move element to body
             tooltipEl.parentNode?.removeChild(tooltipEl)
             body.appendChild(tooltipEl)
-            tooltipEl.style.zIndex = '1002'
-            tooltipEl.style.top = `${top}px`
-            tooltipEl.style.left = `${left}px`
             tooltipEl.style.position = 'absolute'
+            tooltipEl.style.zIndex = '1002'
+
+            // Apply Prop styles
             const propStyle = this.styles
             if (propStyle) {
                 Object.keys(propStyle).forEach(styleProp => {
@@ -74,6 +75,22 @@ export default class Tooltip extends Vue {
                     triangleEl.style.borderColor = `${tooltipEl.style.backgroundColor} transparent transparent`
                 }
             }
+
+            // Apply horizontal positioning before vertical positioning (because the height depends on text wrap)
+            const tooltipWidth = tooltipEl.clientWidth
+            const leftOffset = this.theme === 'rightalign' 
+                ? 20
+                : this.theme === 'leftalign'
+                    ? tooltipWidth - 20
+                    : Math.floor(tooltipWidth / 2)
+            const left = Math.round(clientRectLeft + window.pageXOffset - leftOffset)
+            tooltipEl.style.left = `${left}px`
+
+            // Apply vertical positioning
+            const top = Math.round(clientRectTop + window.pageYOffset)
+                - tooltipEl.clientHeight
+                + singleLineTooltipHeight
+            tooltipEl.style.top = `${top}px`
         })
     }
 
@@ -102,7 +119,6 @@ export default class Tooltip extends Vue {
     display: inline-block;
     cursor: default;
     user-select: none;
-    word-wrap: none;
 
     &--dark {
         color: $brand-black;
@@ -112,7 +128,8 @@ export default class Tooltip extends Vue {
     span {
         position: relative;
         z-index: 1;
-        white-space: nowrap;
+        max-width: 400px;
+        display: block;
     }
 
     &__triangle {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {