@citizenplane/pimp 18.10.1 → 18.10.3

package/package.json

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

package/src/components/CpBadge.vue

@@ -63,6 +63,7 @@ const componentDynamicClasses = computed(() => [
   $font-size,
   $line-height,
   $padding,
+  $label-padding,
   $square-radius,
   $no-label-padding,
   $icon-width,
@@ -78,6 +79,10 @@ const componentDynamicClasses = computed(() => [
       border-radius: $square-radius;
     }
 
+    .cpBadge__label {
+      padding-inline: $label-padding;
+    }
+
     &:not(:has(.cpBadge__label)) {
       padding: $no-label-padding;
     }
@@ -122,7 +127,7 @@ const componentDynamicClasses = computed(() => [
   justify-content: center;
   border-radius: var(--cp-radius-full);
   background-color: var(--cp-background-tertiary);
-  gap: var(--cp-spacing-sm-md);
+  gap: var(--cp-spacing-xs);
 
   &__label {
     white-space: nowrap;
@@ -133,6 +138,7 @@ const componentDynamicClasses = computed(() => [
     var(--cp-text-size-md),
     var(--cp-line-height-md),
     var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-spacing-sm),
     var(--cp-radius-md),
     var(--cp-spacing-sm-md),
     var(--cp-dimensions-5),
@@ -143,6 +149,7 @@ const componentDynamicClasses = computed(() => [
     var(--cp-text-size-sm),
     var(--cp-line-height-sm),
     var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-spacing-sm),
     var(--cp-radius-md),
     var(--cp-spacing-sm-md),
     var(--cp-dimensions-4),
@@ -153,6 +160,7 @@ const componentDynamicClasses = computed(() => [
     var(--cp-text-size-xs),
     var(--cp-line-height-xs),
     var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-spacing-xs),
     var(--cp-radius-sm-md),
     var(--cp-spacing-sm),
     var(--cp-dimensions-4),
@@ -163,6 +171,7 @@ const componentDynamicClasses = computed(() => [
     var(--cp-text-size-xs),
     var(--cp-line-height-xs),
     var(--cp-spacing-xs) var(--cp-spacing-sm-md),
+    var(--cp-spacing-xs),
     var(--cp-radius-sm),
     var(--cp-spacing-sm),
     var(--cp-dimensions-3),
@@ -173,6 +182,7 @@ const componentDynamicClasses = computed(() => [
     var(--cp-text-size-xs),
     var(--cp-line-height-xs),
     var(--cp-spacing-none) var(--cp-spacing-sm),
+    var(--cp-spacing-xs),
     var(--cp-radius-sm),
     var(--cp-spacing-xs),
     var(--cp-dimensions-3),

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;
     }
   }