@citizenplane/pimp 18.0.2 → 18.0.4

package/package.json

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

package/src/components/CpMenuItem.vue

@@ -15,7 +15,7 @@
           <cp-icon :aria-label="ariaLabel" class="cpMenuItem__icon" size="16" :type="leadingIcon" />
         </slot>
       </transition>
-      <span v-if="!hideLabel" v-tooltip="tooltip" class="cpMenuItem__label">{{ label }}</span>
+      <span v-if="hasLabel" v-tooltip="tooltip" class="cpMenuItem__label">{{ label }}</span>
       <slot v-if="hasTrailingIcon" name="trailing-icon">
         <cp-icon :aria-label="ariaLabel" class="cpMenuItem__icon" size="16" :type="trailingIcon" />
       </slot>
@@ -29,6 +29,7 @@ import { computed, useSlots } from 'vue'
 import type { MenuItem } from 'primevue/menuitem'
 
 interface Props {
+  hideLabel?: boolean
   isAsync?: boolean
   isCritical?: boolean
   isLoading?: boolean
@@ -60,6 +61,7 @@ const dynamicClass = computed(() => ({
 const disabled = computed(() => props.isLoading || props.disabled)
 const hasLeadingIcon = computed(() => !!props.leadingIcon || !!slots['leading-icon'])
 const hasTrailingIcon = computed(() => !!props.trailingIcon || !!slots['trailing-icon'])
+const hasLabel = computed(() => (!!props.label || !!slots['label']) && !props.hideLabel)
 const ariaLabel = computed(() => (props.hideLabel ? props.label : undefined))
 
 const handleItemClick = async (event: Event) => {
@@ -140,5 +142,9 @@ const handleItemClick = async (event: Event) => {
     align-items: center;
     justify-content: center;
   }
+
+  &__icon {
+    padding: var(--cp-spacing-xs);
+  }
 }
 </style>

package/src/components/CpSelectableButton.vue

@@ -7,6 +7,7 @@
     :disabled="disabled"
     role="button"
     type="button"
+    @click="emit('click', $event)"
   >
     <div class="cpSelectableButton__body">
       <span v-if="showLeadingIcon" class="cpSelectableButton__icon cpSelectableButton__icon--isBefore">
@@ -50,6 +51,10 @@ const props = withDefaults(defineProps<Props>(), {
   isExpanded: false,
 })
 
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
 const slots = useSlots()
 
 const showLeadingIcon = computed(() => !!slots['leading-icon'])

package/src/stories/CpMenuItem.stories.ts

@@ -61,6 +61,10 @@ const meta = {
       control: 'boolean',
       description: 'Disable interactions and apply a muted style.',
     },
+    hideLabel: {
+      control: 'boolean',
+      description: 'Hide the label and only show the leading and trailing icons.',
+    },
   },
   decorators: [
     () => ({