@citizenplane/pimp 18.10.2 → 18.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.10.2",
+  "version": "18.10.3",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpTabs.vue

@@ -184,17 +184,6 @@ const getUnderlineElement = () => {
   return underlineElement
 }
 
-// NOTE: fix mimatch width between active underline & focus outline of active tab
-const getUnderlineInset = () => {
-  if (props.variant !== 'underline') return 0
-
-  const rootStyle = getComputedStyle(document.documentElement)
-  const rootFontSize = Number.parseFloat(rootStyle.fontSize)
-  const insetRem = Number.parseFloat(rootStyle.getPropertyValue('--cp-dimensions-0_5'))
-
-  return rootFontSize * insetRem
-}
-
 const setUnderlineStyle = () => {
   const activeTabElement = getActiveTabElement()
   const underlineElement = getUnderlineElement()
@@ -202,10 +191,12 @@ const setUnderlineStyle = () => {
 
   if (!activeTabElement || !underlineElement || !containerElement) return
 
-  const inset = getUnderlineInset()
+  const containerRect = containerElement.getBoundingClientRect()
+  const tabRect = activeTabElement.getBoundingClientRect()
+  const left = tabRect.left - containerRect.left + containerElement.scrollLeft
 
-  underlineElement.style.width = `${activeTabElement.offsetWidth - inset * 2}px`
-  underlineElement.style.transform = `translate3d(${activeTabElement.offsetLeft + inset}px, 0, 0)`
+  underlineElement.style.width = `${tabRect.width}px`
+  underlineElement.style.transform = `translate3d(${left}px, 0, 0)`
 }
 
 const scrollToActiveElement = (behavior: ScrollBehavior = 'smooth') => {
@@ -298,7 +289,7 @@ watch(
       opacity 300ms ease;
 
     &:focus-visible {
-      outline-offset: calc(var(--cp-dimensions-0_5) * -1);
+      outline-offset: 0;
     }
 
     &--isLoading {
@@ -349,6 +340,25 @@ watch(
     .cpTabs__tab:focus-visible {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
+      outline: none;
+
+      &::before {
+        position: absolute;
+        border: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
+        border-radius: inherit;
+        border-bottom: none;
+        content: '';
+        inset: 0;
+        pointer-events: none;
+      }
+
+      &.cpTabs__tab--isActive::before {
+        border-bottom: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
+      }
+    }
+
+    .cpTabs__tab--isActive:focus-visible ~ .cpTabs__activeUnderline--isUnderline {
+      opacity: 0;
     }
   }