@citizenplane/pimp 10.2.8 → 10.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.2.8",
+  "version": "10.4.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpButtonGroup.vue

@@ -7,24 +7,17 @@
 <style lang="scss">
 .cpButtonGroup {
   display: flex;
-  padding: fn.px-to-rem(1);
   align-items: flex-start;
-  border-radius: fn.px-to-rem(4);
+  border-radius: var(--cp-radius-sm);
   box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft);
-  gap: var(--cp-spacing-xs);
 
   > * {
     position: relative;
 
-    &:not(:last-child) {
-      margin-right: fn.px-to-rem(1);
-    }
-
     &:not(:first-child, :only-child)::before {
       content: '';
       position: absolute;
-      left: fn.px-to-rem(-3);
-      margin-inline: fn.px-to-rem(1);
+      left: fn.px-to-rem(-1);
       width: fn.px-to-rem(1);
       height: calc(100% + fn.px-to-rem(2));
       top: fn.px-to-rem(-1);

package/src/components/CpInput.vue

@@ -213,7 +213,7 @@ onMounted(async () => {
     box-shadow:
       var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur) -1px
         var(--cp-drop-shadow-3xs-color),
-      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-strong);
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     appearance: none;
     border-radius: var(--cp-radius-md);
     width: 100%;
@@ -330,7 +330,7 @@ onMounted(async () => {
 
   &--lg {
     .cpInput__inner {
-      border-radius: var(--cp-radius-md-lg);
+      border-radius: var(--cp-radius-lg);
       padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
       font-size: var(--cp-text-size-md);
     }
@@ -338,7 +338,6 @@ onMounted(async () => {
     .cpInput__icon {
       width: var(--cp-dimensions-5);
       height: var(--cp-dimensions-5);
-
       left: var(--cp-spacing-lg);
     }
 
@@ -363,6 +362,7 @@ onMounted(async () => {
 
   &--sm {
     .cpInput__inner {
+      border-radius: var(--cp-radius-md);
       padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
       font-size: var(--cp-text-size-sm);
     }

package/src/components/CpItemActions.vue

@@ -74,7 +74,21 @@ const slicedActions = computed(() => {
     background-color: var(--cp-background-primary);
   }
 
+  .cpMenuItem {
+    padding: 0;
+
+    &:first-child .cpMenuItem__button {
+      border-top-left-radius: var(--cp-radius-sm);
+      border-bottom-left-radius: var(--cp-radius-sm);
+    }
+    &:last-child .cpMenuItem__button {
+      border-top-right-radius: var(--cp-radius-sm);
+      border-bottom-right-radius: var(--cp-radius-sm);
+    }
+  }
+
   .cpMenuItem__button {
+    border-radius: 0;
     padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
   }
 }

package/src/components/CpMenuItem.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="cpMenuItem">
     <button
-      type="button"
       class="cpMenuItem__button"
       :class="dynamicClass"
       :disabled="disabled"
+      type="button"
       @click="handleItemClick"
     >
-      <transition name="fade" :duration="100" mode="out-in">
+      <transition :duration="100" mode="out-in" name="fade">
         <span v-if="isLoading" class="cpMenuItem__loaderWrapper">
-          <cp-loader color="#B2B2BD" class="cpMenuItem__loader" />
+          <cp-loader class="cpMenuItem__loader" color="#B2B2BD" />
         </span>
         <template v-else>
           <slot name="icon">
-            <cp-icon :type="icon" class="cpMenuItem__icon" />
+            <cp-icon class="cpMenuItem__icon" :type="icon" />
           </slot>
         </template>
       </transition>
@@ -42,12 +42,6 @@ const props = withDefaults(defineProps<Props & Omit<MenuItem, 'class' | 'disable
   tooltip: '',
   icon: '',
   command: undefined,
-  reverseLabel: false,
-  isLoading: false,
-  isDisabled: false,
-  isCritical: false,
-  isAsync: false,
-  hideLabel: false,
 })
 
 const emit = defineEmits(['onItemClick', 'onAsyncCommandComplete'])

package/src/components/CpMultiselect.vue

@@ -300,7 +300,7 @@ onMounted(() => overrideAlignOverlay())
     padding: var(--cp-spacing-md) var(--cp-spacing-xl);
     box-shadow:
       var(--cp-shadows-3xs),
-      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-strong);
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     border-radius: var(--cp-radius-md);
     gap: var(--cp-spacing-md);
 

package/src/components/CpTelInput.vue

@@ -176,29 +176,54 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
   }
 
   &__wrapper {
-    border: none;
+    --box-shadow: var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y)
+      var(--cp-drop-shadow-3xs-blur) -1px var(--cp-drop-shadow-3xs-color);
+
+    border: 0;
     box-shadow:
-      var(--cp-shadows-3xs),
+      var(--box-shadow),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     appearance: none;
     border-radius: var(--cp-radius-md-lg);
     width: 100%;
     color: inherit;
 
-    &:focus-within {
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
+    &:not(.cpTelInput__wrapper--isDisabled):focus-within {
+      box-shadow:
+        var(--box-shadow),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
+
+      &.cpTelInput__wrapper--isInvalid {
+        box-shadow:
+          var(--box-shadow),
+          0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
+      }
     }
 
     &:not(.cpTelInput__wrapper--isInvalid, .cpTelInput__wrapper--isDisabled):hover {
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
+      box-shadow:
+        var(--box-shadow),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
     }
 
     &--isInvalid {
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
+      box-shadow:
+        var(--box-shadow),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
     }
 
     &.disabled {
       overflow: hidden;
+      box-shadow:
+        var(--box-shadow),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+
+      .vti__dropdown {
+        &:focus,
+        &:focus-within {
+          border-right: var(--cp-dimensions-0_25) solid var(--cp-border-strong);
+        }
+      }
     }
   }
 
@@ -254,12 +279,13 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
   .vti__dropdown {
     z-index: 1;
     position: unset;
-    border-right: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-right: var(--cp-dimensions-0_25) solid var(--cp-border-strong);
 
     &:focus,
     &:focus-within {
       z-index: 2;
       outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
+      border-right: var(--cp-dimensions-0_25) solid transparent;
     }
   }