@citizenplane/pimp 18.9.31 → 18.9.33

package/package.json

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

package/src/components/CpMenu.vue

@@ -39,9 +39,12 @@
       @hide="onHide"
     >
       <div class="cpMenu__drawerToolbar">
+        <div class="cpMenu__drawerToolbarTitle">
+          <slot name="title" />
+        </div>
         <cp-button
           ref="closeButton"
-          appearance="tertiary"
+          appearance="secondary"
           aria-label="Close drawer"
           color="neutral"
           is-square
@@ -78,6 +81,7 @@ export type CpMenuPlacement = 'start' | 'end'
 
 export interface Props {
   class?: string
+  drawerClass?: string
   forcePopover?: boolean
   isFullHeightDrawer?: boolean
   items?: MenuItem[]
@@ -87,6 +91,7 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   class: undefined,
+  drawerClass: undefined,
   isFullHeightDrawer: false,
   items: undefined,
   keepOpenOnClick: false,
@@ -121,10 +126,23 @@ const drawerOverlayDynamicClass = computed(() => ({
 }))
 
 const drawerPt = {
-  root: { class: ['cpMenu__drawer', { 'cpMenu__drawer--isFullHeight': props.isFullHeightDrawer }] },
-  content: { class: 'cpMenu__drawerContent' },
-  header: { class: 'cpMenu__drawerHeader' },
-  transition: { name: 'drawer', duration: 300 },
+  root: {
+    class: [
+      'cpMenu__drawer',
+      { 'cpMenu__drawer--isFullHeight': props.isFullHeightDrawer },
+      props.drawerClass,
+    ],
+  },
+  content: {
+    class: 'cpMenu__drawerContent'
+   },
+  header: {
+    class: 'cpMenu__drawerHeader'
+   },
+  transition: {
+    name: 'drawer',
+    duration: 300
+   },
 }
 
 const isPopoverPlacementEnd = computed(() => props.placement === 'end')
@@ -275,8 +293,16 @@ defineExpose({ show, hide, toggle })
 
   &__drawerToolbar {
     display: flex;
-    justify-content: flex-end;
+    align-items: center;
+    justify-content: space-between;
     padding: var(--cp-spacing-md) var(--cp-spacing-xl);
   }
+
+  &__drawerToolbarTitle {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-lg);
+    font-weight: 500;
+    line-height: var(--cp-line-height-lg);
+  }
 }
 </style>

package/src/components/CpSelectableButton.vue

@@ -190,13 +190,15 @@ const dynamicClasses = computed(() => {
   }
 
   &--xs {
+    $radius: fn.px-to-rem(5);
+
     --cp-selectable-border-padding: var(--cp-spacing-xs);
     --cp-selectable-border-radius: var(--cp-radius-md);
     --cp-selectable-font-size: var(--cp-text-size-sm);
     --cp-selectable-line-height: var(--cp-line-height-sm);
     --cp-selectable-body-padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
     --cp-selectable-body-gap: var(--cp-spacing-sm);
-    --cp-selectable-body-border-radius: fn.px-to-rem(5);
+    --cp-selectable-body-border-radius: #{$radius};
     --cp-selectable-icon-size: var(--cp-dimensions-4);
   }
 
@@ -260,7 +262,7 @@ const dynamicClasses = computed(() => {
     --cp-selectable-border-color: var(--cp-border-soft);
     --cp-selectable-border-color-hover: var(--cp-border-soft-hover);
     --cp-selectable-text-color: var(--cp-foreground-primary);
-    --cp-selectable-text-color-hover: var(--cp-foreground-primary-hover);
+    --cp-selectable-text-color-hover: var(--cp-foreground-primary);
     --cp-selectable-background-color: var(--cp-background-primary);
     --cp-selectable-background-color-hover: var(--cp-background-primary-hover);
     --cp-selectable-body-background-color: transparent;

package/src/stories/CpMenu.stories.ts

@@ -166,6 +166,9 @@ export const FullHeightDrawer: Story = {
         <template #trigger>
           <CpButton size="xs" appearance="secondary">Open drawer</CpButton>
         </template>
+        <template #title>
+          <CpHeading heading-level="h4">Title</CpHeading>
+        </template>
       </CpMenu>
     `,
   }),