@citizenplane/pimp 11.0.2 → 11.0.4

package/package.json

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

package/src/components/CpDialog.vue

@@ -11,8 +11,8 @@
       <div aria-hidden="true" class="cpDialog__overlay" />
       <main ref="dialogContainer" class="cpDialog__container" :style="dynamicStyle" @keydown.tab="trapFocus">
         <header class="cpDialog__header">
-          <div class="cpDialog__left">
-            <div class="cpDialog__title">
+          <div v-if="hasTitleOrSubtitle" class="cpDialog__headerTexts">
+            <div v-if="hasTitle" class="cpDialog__title">
               <slot name="title">
                 <h2 :id="titleId">{{ title }}</h2>
               </slot>
@@ -46,7 +46,7 @@ import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 interface Props {
   maxWidth?: number
   subtitle?: string
-  title: string
+  title?: string
 }
 
 interface Emits {
@@ -55,6 +55,7 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   maxWidth: 600,
+  title: '',
   subtitle: '',
 })
 
@@ -73,8 +74,12 @@ const dialogContainer = ref<HTMLElement | null>(null)
 
 const dynamicStyle = computed(() => ({ maxWidth: `${props.maxWidth}px` }))
 
+const hasTitleSlot = computed(() => !!slots.title)
+const hasTitle = computed(() => !!props.title || hasTitleSlot.value)
 const hasSubtitleSlot = computed(() => !!slots.subtitle)
 const hasSubtitle = computed(() => !!props.subtitle || hasSubtitleSlot.value)
+const hasTitleOrSubtitle = computed(() => hasTitle.value || hasSubtitle.value)
+
 const hasFooterSlot = computed(() => !!slots.footer)
 
 const handleClose = () => emit('close')
@@ -96,9 +101,7 @@ onMounted(() => {
   nextTick(() => focusOnFirstFocusableElement())
 })
 
-onBeforeUnmount(() => {
-  closeDialog()
-})
+onBeforeUnmount(() => closeDialog())
 </script>
 
 <style lang="scss">
@@ -184,10 +187,17 @@ $dialog-breakpoint: 550px;
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--cp-spacing-md);
-    border-bottom: 1px solid var(--cp-border-soft);
+
+    &:not(:has(.cpDialog__headerTexts)) {
+      padding-bottom: 0;
+    }
+
+    &:has(.cpDialog__headerTexts) {
+      border-bottom: 1px solid var(--cp-border-soft);
+    }
   }
 
-  &__left {
+  &__headerText {
     display: flex;
     flex-direction: column;
     min-width: 0;
@@ -214,6 +224,7 @@ $dialog-breakpoint: 550px;
 
   &__close {
     display: flex;
+    margin-left: auto;
     align-items: center;
     justify-content: center;
     padding: var(--cp-spacing-sm);

package/src/components/CpInput.vue

@@ -268,6 +268,10 @@ onMounted(async () => {
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
     }
 
+    .cpInput__icon {
+      color: var(--cp-foreground-disabled);
+    }
+
     .cpInput__icon:hover ~ .cpInput__inner {
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
     }

package/src/stories/CpDialog.stories.ts

@@ -51,6 +51,7 @@ export const TitleSubtitleWithProps: Story = {
   args: {
     maxWidth: 600,
     title: 'Dialog title',
+    subtitle: 'Dialog subtitle',
   },
   render: (args) => ({
     setup() {
@@ -72,11 +73,32 @@ export const TitleSubtitleWithProps: Story = {
   }),
 }
 
+export const ContentOnly: Story = {
+  args: {
+    maxWidth: 600,
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog (content only)</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
+          <p>This is the default slot content with no title or subtitle.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Close</CpButton>
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}
+
 export const TitleSubtitleWithSlots: Story = {
   args: {
     maxWidth: 560,
-    titleTag: 'div',
-    subtitleTag: 'div',
   },
   render: (args) => ({
     setup() {