@citizenplane/pimp 16.3.2 → 16.3.4

package/package.json

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

package/src/components/CpAlert.vue

@@ -211,7 +211,7 @@ const dynamicClasses = computed(() => [
   &__contentText {
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
-    font-weight: 500;
+    font-weight: 400;
     color: var(--cp-alert-text);
   }
 

package/src/components/CpSelectableButton.vue

@@ -13,7 +13,9 @@
         <slot name="leading-icon" />
       </span>
       <span v-if="showText" class="cpSelectableButton__label">
-        {{ label }}
+        <slot>
+          {{ label }}
+        </slot>
       </span>
       <span v-if="showTrailingIcon" class="cpSelectableButton__icon cpSelectableButton__icon--isAfter">
         <slot name="trailing-icon" />
@@ -51,8 +53,9 @@ const props = withDefaults(defineProps<Props>(), {
 const slots = useSlots()
 
 const showLeadingIcon = computed(() => !!slots['leading-icon'])
-const showText = computed(() => !!props.label)
+const showText = computed(() => !!props.label || !!slots.default)
 const showTrailingIcon = computed(() => !!slots['trailing-icon'])
+const isIconOnly = computed(() => !props.label)
 
 const dynamicClasses = computed(() => {
   return [
@@ -62,6 +65,7 @@ const dynamicClasses = computed(() => {
       'cpSelectableButton--isSelected': props.isSelected,
       'cpSelectableButton--isExpanded': props.isExpanded,
       'cpSelectableButton--isDisabled': props.disabled,
+      'cpSelectableButton--isIconOnly': isIconOnly.value,
     },
   ]
 })
@@ -149,6 +153,10 @@ const dynamicClasses = computed(() => {
   --cp-selectable-body-background-color-hover: var(--cp-background-accent-solid-hover);
   --cp-selectable-box-shadow: var(--cp-shadows-3xs-inset);
 
+  &.cpSelectableButton--isIconOnly {
+    --cp-selectable-body-padding: var(--cp-spacing-sm-md);
+  }
+
   &--sm {
     --cp-selectable-border-padding: var(--cp-spacing-sm);
     --cp-selectable-border-radius: var(--cp-radius-sm-md);
@@ -160,6 +168,10 @@ const dynamicClasses = computed(() => {
     --cp-selectable-icon-size: var(--cp-dimensions-4);
   }
 
+  &--sm.cpSelectableButton--isIconOnly {
+    --cp-selectable-body-padding: var(--cp-spacing-sm);
+  }
+
   &--xs {
     --cp-selectable-border-padding: var(--cp-spacing-xs);
     --cp-selectable-border-radius: var(--cp-radius-sm-md);
@@ -171,6 +183,10 @@ const dynamicClasses = computed(() => {
     --cp-selectable-icon-size: var(--cp-dimensions-4);
   }
 
+  &--xs.cpSelectableButton--isIconOnly {
+    --cp-selectable-body-padding: var(--cp-spacing-sm);
+  }
+
   &--2xs {
     --cp-selectable-border-padding: var(--cp-spacing-xs);
     --cp-selectable-border-radius: var(--cp-radius-sm-md);
@@ -182,6 +198,10 @@ const dynamicClasses = computed(() => {
     --cp-selectable-icon-size: var(--cp-dimensions-3_5);
   }
 
+  &--2xs.cpSelectableButton--isIconOnly {
+    --cp-selectable-body-padding: var(--cp-spacing-sm);
+  }
+
   &--3xs {
     --cp-selectable-border-padding: var(--cp-spacing-none);
     --cp-selectable-border-radius: var(--cp-radius-sm);
@@ -193,6 +213,10 @@ const dynamicClasses = computed(() => {
     --cp-selectable-icon-size: var(--cp-dimensions-3);
   }
 
+  &--3xs.cpSelectableButton--isIconOnly {
+    --cp-selectable-body-padding: var(--cp-spacing-sm);
+  }
+
   &--isSelected {
     --cp-selectable-border-color: transparent;
     --cp-selectable-border-color-hover: transparent;

package/src/stories/CpSelectableButton.stories.ts

@@ -174,7 +174,6 @@ export const WithIcons: Story = {
   args: {
     appearance: 'primary',
     size: 'md',
-    label: 'Label',
   },
   render: (args: Args) => ({
     components: { CpSelectableButton },
@@ -186,6 +185,7 @@ export const WithIcons: Story = {
         <template #leading-icon>
           <CpIcon type="circle" />
         </template>
+        Custom label
         <template #trailing-icon>
           <CpIcon type="circle" />
         </template>
@@ -224,6 +224,27 @@ export const FullWidth: Story = {
   }),
 }
 
+/* -------------------------------------------------------------------------- */
+/* Icon only                                                                  */
+/* -------------------------------------------------------------------------- */
+export const IconOnly: Story = {
+  args: {
+    appearance: 'primary',
+    size: 'md',
+  },
+  render: (args: Args) => ({
+    components: { CpSelectableButton },
+    setup() {
+      return { args }
+    },
+    template: `
+      <CpSelectableButton v-bind="args">
+        <template #leading-icon><CpIcon type="circle" /></template>
+      </CpSelectableButton>
+    `,
+  }),
+}
+
 /* -------------------------------------------------------------------------- */
 /* Matrix                                                                     */
 /* -------------------------------------------------------------------------- */