@citizenplane/pimp 14.1.0 → 14.1.2

package/package.json

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

package/src/components/CpAccordion.vue

@@ -145,6 +145,11 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     &:hover {
       background-color: var(--cp-background-primary-hover);
     }
+
+    &:focus-visible {
+      outline-offset: calc(var(--cp-spacing-sm) * -1);
+      border-radius: var(--cp-radius-md);
+    }
   }
 
   &__title {

package/src/components/CpTable.vue

@@ -77,6 +77,7 @@
                       <cp-icon size="16" :type="option.icon" />
                     </button>
                     <button
+                      v-if="hasMoreQuickActionsThanLimit"
                       class="cpTable__action cpTable__action--isDefault"
                       type="button"
                       @click.stop="handleContextMenu({ rowData, rowIndex }, $event)"
@@ -209,7 +210,7 @@ const cpTableContainer = ref<HTMLElement | null>(null)
 const contextualMenu = ref<InstanceType<typeof CpContextualMenu>>()
 
 const hasRowOptions = computed(() => props.enableRowOptions && props.rowOptions.length)
-const hasMoreQuickActionsThanLimit = computed(() => props.rowOptions.length >= props.quickOptionsLimit)
+const hasMoreQuickActionsThanLimit = computed(() => props.rowOptions.length > props.quickOptionsLimit)
 
 const quickOptions = computed(() => {
   if (!props.enableRowOptions || !props.rowOptions.length || props.quickOptionsLimit === 0) return []

package/src/stories/CpTable.stories.ts

@@ -219,6 +219,54 @@ export const WithCustomRowOptions: Story = {
   }),
 }
 
+export const WithoutDefaultAction: Story = {
+  args: {
+    ...Default.args,
+    enableRowOptions: true,
+    quickOptionsLimit: 2,
+    enableColumnEdition: true,
+  },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      const isEditLoading = ref(false)
+
+      const rowOptions = computed(() => [
+        {
+          id: 'see',
+          label: 'See',
+          icon: 'eye',
+          action: () => console.log('See'),
+        },
+        {
+          id: 'delete',
+          label: 'Delete',
+          icon: 'trash',
+          isCritical: true,
+          action: () => console.log('Delete'),
+        },
+      ])
+
+      return { args, isEditLoading, rowOptions }
+    },
+    template: `
+        <CpTable v-bind="args" :row-options="rowOptions">
+          <template #status="{ cell }">
+            <span :style="{
+              padding: '4px 8px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              backgroundColor: cell === 'Active' ? '#10B981' : '#EF4444',
+              color: 'white'
+            }">
+              {{ cell }}
+            </span>
+          </template>
+        </CpTable>
+    `,
+  }),
+}
+
 export const WithOnlyDefaultAction: Story = {
   args: {
     ...Default.args,