@citizenplane/pimp 14.1.4 → 15.0.0

package/package.json

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

package/src/components/CpBadge.vue

@@ -3,13 +3,13 @@
     <slot name="leading-icon">
       <cp-icon v-if="leadingIcon" class="cpBadge__icon" :type="leadingIcon" />
     </slot>
-    <span class="cpBadge__label">
+    <span v-if="label" class="cpBadge__label">
       <slot>{{ label }}</slot>
     </span>
-    <slot v-if="!isClearable" name="trailing-icon">
+    <slot v-if="!hasClose" name="trailing-icon">
       <cp-icon v-if="trailingIcon" class="cpBadge__icon" :type="trailingIcon" />
     </slot>
-    <button v-if="isClearable" class="cpBadge__clear" :disabled="isDisabled" type="button" @click="handleClear">
+    <button v-if="hasClose" class="cpBadge__clear" :disabled="disabled" type="button" @click="emit('onClear')">
       <cp-icon class="cpBadge__clearIcon" type="x" />
     </button>
   </div>
@@ -25,23 +25,25 @@ interface Emits {
   (e: 'onClear'): void
 }
 
+type BadgeSizes = Extract<Sizes, '2xs' | 'xs' | 'sm' | 'md'>
+type BadgeStyles = 'outline' | 'soft' | 'solid'
+
 interface Props {
   color?: Colors
-  isClearable?: boolean
-  isDashed?: boolean
-  isDisabled?: boolean
-  isSolid?: boolean
+  disabled?: boolean
+  hasClose?: boolean
   isSquare?: boolean
-  isStroked?: boolean
   label?: string
   leadingIcon?: string
-  size?: Sizes
+  size?: BadgeSizes
+  style?: BadgeStyles
   trailingIcon?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: 'gray',
+  color: 'neutral',
   size: 'md',
+  style: 'outline',
   label: '',
   leadingIcon: '',
   trailingIcon: '',
@@ -49,22 +51,52 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const componentDynamicClasses = computed(() => {
-  return [
-    `cpBadge--${props.size}`,
-    `cpBadge--is${capitalizeFirstLetter(props.color)}`,
-    { 'cpBadge--isStroked': props.isStroked },
-    { 'cpBadge--isSquare': props.isSquare },
-    { 'cpBadge--isDashed': props.isDashed },
-    { 'cpBadge--isDisabled': props.isDisabled },
-    { 'cpBadge--isSolid': props.isSolid },
-  ]
-})
-
-const handleClear = () => emit('onClear')
+const componentDynamicClasses = computed(() => [
+  `cpBadge--${props.size}`,
+  `cpBadge--is${capitalizeFirstLetter(props.color)}`,
+  `cpBadge--is${capitalizeFirstLetter(props.style)}`,
+  { 'cpBadge--isSquare': props.isSquare },
+  { 'cpBadge--isDisabled': props.disabled },
+])
 </script>
 
 <style lang="scss">
+@mixin cp-badge-sized(
+  $size,
+  $font-size,
+  $line-height,
+  $padding,
+  $square-radius,
+  $no-label-padding,
+  $icon-width,
+  $clear-icon-width
+) {
+  &--#{$size} {
+    font-size: $font-size;
+    line-height: $line-height;
+    font-weight: 400;
+    padding: $padding;
+
+    &.cpBadge--isSquare {
+      border-radius: $square-radius;
+    }
+
+    &:not(:has(.cpBadge__label)) {
+      padding: $no-label-padding;
+    }
+
+    & .cpBadge__icon {
+      width: $icon-width;
+      aspect-ratio: 1/1;
+    }
+
+    & .cpBadge__clearIcon {
+      width: $clear-icon-width;
+      aspect-ratio: 1/1;
+    }
+  }
+}
+
 @mixin cp-badge-themed($className, $color, $bg-color, $solid-color, $solid-bg-color, $outline-color) {
   &--is#{$className} {
     color: $color;
@@ -76,6 +108,10 @@ const handleClear = () => emit('onClear')
       background-color: $solid-bg-color;
     }
 
+    &.cpBadge--isOutline {
+      box-shadow: 0 0 0 1px $outline-color;
+    }
+
     .cpBadge__clear:not(:disabled):hover,
     .cpBadge__clear:not(:disabled):focus-visible {
       background-color: $color;
@@ -83,97 +119,58 @@ const handleClear = () => emit('onClear')
   }
 }
 
-@mixin cp-badge-dynamic-padding(
-  $horizontal-padding,
-  $vertical-padding,
-  $label-padding,
-  $label-font-size,
-  $label-line-height
-) {
-  &:has(.cpBadge__label:not(:empty)) {
-    padding: $vertical-padding $horizontal-padding;
-
-    .cpBadge__label {
-      line-height: $label-line-height;
-      font-size: $label-font-size;
-      padding: 0 $label-padding;
-    }
-  }
-}
-
 .cpBadge {
   display: inline-flex;
-  padding: var(--cp-spacing-sm-md);
+  text-wrap: wrap;
   align-items: center;
   justify-content: center;
   border-radius: var(--cp-radius-full);
   background-color: var(--cp-background-tertiary);
-  color: var(--cp-text-primary);
-
-  &--isStroked {
-    outline: 1px solid currentColor;
-  }
-
-  &--isDashed {
-    outline-style: dashed;
-  }
-
-  &--isSquare {
-    border-radius: var(--cp-radius-md);
-
-    &.cpBadge--2xs,
-    &.cpBadge--xs {
-      border-radius: var(--cp-radius-sm);
-    }
-
-    &.cpBadge--sm {
-      border-radius: var(--cp-radius-sm-md);
-    }
-  }
+  gap: var(--cp-spacing-sm-md);
 
-  @include cp-badge-dynamic-padding(
-    var(--cp-spacing-md),
-    var(--cp-spacing-sm),
-    var(--cp-spacing-sm),
+  @include cp-badge-sized(
+    'md',
     var(--cp-text-size-sm),
-    var(--cp-line-height-sm)
+    var(--cp-line-height-sm),
+    var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-radius-md),
+    var(--cp-spacing-sm-md),
+    var(--cp-dimensions-4),
+    var(--cp-dimensions-3_5)
   );
 
-  &--sm {
-    padding: var(--cp-spacing-sm);
-
-    @include cp-badge-dynamic-padding(
-      var(--cp-spacing-md),
-      var(--cp-spacing-sm),
-      var(--cp-spacing-xs),
-      var(--cp-text-size-xs),
-      var(--cp-line-height-xs)
-    );
-  }
-
-  &--xs {
-    padding: var(--cp-spacing-sm);
-
-    @include cp-badge-dynamic-padding(
-      var(--cp-spacing-sm-md),
-      var(--cp-spacing-xs),
-      var(--cp-spacing-xs),
-      var(--cp-text-size-xs),
-      var(--cp-line-height-xs)
-    );
-  }
+  @include cp-badge-sized(
+    'sm',
+    var(--cp-text-size-xs),
+    var(--cp-line-height-xs),
+    var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-radius-md-lg),
+    var(--cp-spacing-sm),
+    var(--cp-dimensions-4),
+    var(--cp-dimensions-3_5)
+  );
 
-  &--2xs {
-    padding: var(--cp-spacing-xs);
+  @include cp-badge-sized(
+    'xs',
+    var(--cp-text-size-xs),
+    var(--cp-line-height-xs),
+    var(--cp-spacing-xs) var(--cp-spacing-sm-md),
+    var(--cp-radius-sm-md),
+    var(--cp-spacing-sm),
+    var(--cp-dimensions-3),
+    var(--cp-dimensions-2_5)
+  );
 
-    @include cp-badge-dynamic-padding(
-      var(--cp-spacing-sm),
-      var(--cp-spacing-none),
-      var(--cp-spacing-xs),
-      var(--cp-text-size-xs),
-      var(--cp-line-height-xs)
-    );
-  }
+  @include cp-badge-sized(
+    '2xs',
+    var(--cp-text-size-xs),
+    var(--cp-line-height-xs),
+    var(--cp-spacing-none) var(--cp-spacing-sm),
+    var(--cp-radius-sm),
+    var(--cp-spacing-xs),
+    var(--cp-dimensions-3),
+    var(--cp-dimensions-2_5)
+  );
 
   @include cp-badge-themed(
     'Neutral',
@@ -274,69 +271,9 @@ const handleClear = () => emit('onClear')
     var(--cp-border-disabled)
   );
 
-  @include cp-badge-themed(
-    'Gray',
-    var(--cp-foreground-primary),
-    var(--cp-background-secondary),
-    var(--cp-foreground-primary),
-    var(--cp-background-secondary),
-    var(--cp-border-soft)
-  ); // TODO: Should be replace by NEUTRAL
-
-  @include cp-badge-themed(
-    'Green',
-    var(--cp-foreground-success-primary),
-    var(--cp-background-success-secondary),
-    var(--cp-foreground-success-primary),
-    var(--cp-background-success-secondary),
-    var(--cp-border-success-primary)
-  ); // TODO: Should be replace by SUCCESS
-
-  @include cp-badge-themed(
-    'Orange',
-    var(--cp-foreground-warning-primary),
-    var(--cp-background-warning-secondary),
-    var(--cp-foreground-warning-primary),
-    var(--cp-background-warning-secondary),
-    var(--cp-border-warning-primary)
-  ); // TODO: Should be replace by WARNING
-
-  @include cp-badge-themed(
-    'Purple',
-    var(--cp-foreground-accent-primary),
-    var(--cp-background-accent-secondary),
-    var(--cp-foreground-accent-primary),
-    var(--cp-background-accent-secondary),
-    var(--cp-border-accent-primary)
-  ); // TODO: Should be replace by ACCENT
-
-  @include cp-badge-themed(
-    'Red',
-    var(--cp-foreground-error-primary),
-    var(--cp-background-error-secondary),
-    var(--cp-foreground-error-primary),
-    var(--cp-background-error-secondary),
-    var(--cp-border-error-primary)
-  ); // TODO: Should be replace by ERROR
-
-  &--isDisabled {
-    background-color: var(--cp-background-disabled);
-    color: var(--cp-text-disabled);
-
-    &.cpBadge--isStroked,
-    &.cpBadge--isDashed {
-      outline-color: var(--cp-border-disabled);
-    }
-  }
-
-  &__icon {
-    width: var(--cp-dimensions-4);
-    aspect-ratio: 1/1;
-  }
-
-  &__clearIcon {
-    width: var(--cp-dimensions-3_5);
-    aspect-ratio: 1/1;
+  &--isDisabled,
+  &--isDisabled * {
+    cursor: not-allowed;
   }
 
   &__clear {

package/src/components/CpMenuItem.vue

@@ -56,9 +56,7 @@ const disabled = computed(() => props.isLoading || props.isDisabled)
 const displayLabel = computed(() => !props.hideLabel && props.label)
 
 const handleItemClick = async (event: Event) => {
-  if (!props.command) return
-
-  if (props.isAsync) {
+  if (props.isAsync && props.command) {
     // Stop the event from bubbling up to prevent menu auto close
     event.stopPropagation()
 

package/src/constants/colors/Colors.ts

@@ -9,8 +9,3 @@ export type Colors =
   | 'magenta'
   | 'yellow'
   | 'white'
-  | 'gray' // TODO: Should be replace by NEUTRAL
-  | 'green' // TODO: Should be replace by SUCCESS
-  | 'orange' // TODO: Should be replace by WARNING
-  | 'purple' // TODO: Should be replace by ACCENT
-  | 'red' // TODO: Should be replace by ERROR

package/src/constants/colors/ToggleColors.ts

@@ -1,4 +1 @@
-import { Colors } from './Colors'
-
-// TODO: purple should be replace by ACCENT
-export type ToggleColors = Extract<Colors, 'accent' | 'blue' | 'purple'>
+export type ToggleColors = 'accent' | 'blue' | 'purple'