@citizenplane/pimp 18.0.0 → 18.0.1

package/package.json

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

package/src/components/CpMenu.vue

@@ -14,6 +14,7 @@
     <primevue-drawer
       v-if="isDrawer"
       v-model:visible="isOpen"
+      :auto-z-index="false"
       block-scroll
       close-on-escape
       dismissable
@@ -30,11 +31,11 @@
           aria-label="Close drawer"
           color="neutral"
           is-square
-          size="sm"
+          size="md"
           @click="hide"
         >
           <template #leading-icon>
-            <cp-icon size="20" type="x" />
+            <cp-icon type="x" />
           </template>
         </cp-button>
       </div>
@@ -73,12 +74,14 @@ import { getKeyboardFocusableElements } from '@/helpers/dom'
 export interface Props {
   class?: string
   forcePopover?: boolean
+  fullHeightDrawer?: boolean
   items?: MenuItem[]
   keepOpenOnClick?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   class: undefined,
+  fullHeightDrawer: false,
   items: undefined,
   keepOpenOnClick: false,
 })
@@ -110,7 +113,7 @@ const popoverPt = {
 }
 
 const drawerPt = {
-  root: { class: 'cpMenu__drawer' },
+  root: { class: ['cpMenu__drawer', { 'cpMenu__drawer--fullHeight': props.fullHeightDrawer }] },
   content: { class: 'cpMenu__drawerContent' },
   mask: { class: 'cpMenu__drawerMask' },
   header: { class: 'cpMenu__drawerHeader' },
@@ -164,7 +167,6 @@ defineExpose({ show, hide, toggle })
 
   &__overlay {
     position: absolute;
-    z-index: 22;
     margin-top: var(--cp-spacing-lg);
     min-width: calc(var(--cp-dimensions-1) * 62.5);
     border-radius: var(--cp-radius-md);
@@ -181,7 +183,7 @@ defineExpose({ show, hide, toggle })
   &__drawerMask {
     position: fixed;
     inset: 0;
-    z-index: 21;
+    z-index: 2;
     display: flex;
     align-items: flex-end;
     justify-content: center;
@@ -190,7 +192,6 @@ defineExpose({ show, hide, toggle })
 
   &__drawer {
     position: relative;
-    z-index: 22;
     width: 100%;
     max-height: 85vh;
     display: flex;
@@ -201,6 +202,12 @@ defineExpose({ show, hide, toggle })
     padding-bottom: env(safe-area-inset-bottom);
   }
 
+  &__drawer--fullHeight {
+    height: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+
   &__drawerHeader {
     display: none;
   }
@@ -214,7 +221,7 @@ defineExpose({ show, hide, toggle })
   &__drawerToolbar {
     display: flex;
     justify-content: flex-end;
-    padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
+    padding: var(--cp-spacing-md) var(--cp-spacing-xl);
   }
 }
 

package/src/stories/CpMenu.stories.ts

@@ -30,6 +30,11 @@ const meta = {
       description: 'Disable the bottom-drawer behavior on mobile and keep the popover anchored to the trigger.',
       table: { defaultValue: { summary: 'false' } },
     },
+    fullHeightDrawer: {
+      control: 'boolean',
+      description: 'When enabled, the mobile drawer takes the full available height.',
+      table: { defaultValue: { summary: 'false' } },
+    },
     keepOpenOnClick: {
       control: 'boolean',
       description: 'Keep the menu open when clicking an item.',
@@ -122,6 +127,37 @@ export const ForcePopoverOnMobile: Story = {
   }),
 }
 
+/**
+ * In mobile viewports, enable `fullHeightDrawer` to make the bottom drawer
+ * fill all available height.
+ */
+export const FullHeightDrawer: Story = {
+  args: {
+    fullHeightDrawer: true,
+  },
+  render: (args) => ({
+    components: { CpButton, CpMenu },
+    setup() {
+      const items = [
+        { label: 'Edit', leadingIcon: 'edit', command: () => alert('Edit clicked') },
+        { label: 'Duplicate', leadingIcon: 'copy', command: () => alert('Duplicate clicked') },
+        { label: 'Move', leadingIcon: 'arrow-right-left', command: () => alert('Move clicked') },
+        { label: 'Archive', leadingIcon: 'archive', command: () => alert('Archive clicked') },
+        { separator: true },
+        { label: 'Delete', leadingIcon: 'trash-2', isCritical: true, command: () => alert('Delete clicked') },
+      ]
+      return { args, items }
+    },
+    template: `
+      <CpMenu v-bind="args" :items="items">
+        <template #trigger>
+          <CpButton>Open full-height drawer</CpButton>
+        </template>
+      </CpMenu>
+    `,
+  }),
+}
+
 /**
  * Use the default slot to render arbitrary content inside the popover —
  * useful for forms, share panels, filters, etc.