refactor(components): dlt-3282 renamed show prop to open (#1190)

Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>

Author: iropolo

.claude/rules/vue-components.md

@@ -20,8 +20,7 @@ paths:
 ## Events
 
 - `update:modelValue` for v-model.
-- `update:open` for Popover, Collapsible, ImageViewer, FilterPill.
-- `update:show` for Modal, Tooltip, Toast (legacy — don't change existing, use `update:open` for new).
+- `update:open` for Modal, Tooltip, Toast, Popover, Collapsible, ImageViewer, FilterPill.
 
 ## Slots
 

.claude/skills/vue-conventions.md

@@ -15,8 +15,7 @@ Detailed rules are applied automatically via path-scoped rules when editing comp
 | Prop validation | `validator` (NEVER `validate` — Vue silently ignores it) |
 | Constants | Export from `*_constants.js`, import in component + tests |
 | v-model event | `update:modelValue` |
-| Open/close (new) | `update:open` (Popover, Collapsible, ImageViewer, FilterPill) |
-| Open/close (legacy) | `update:show` (Modal, Tooltip, Toast — don't change) |
+| Open/close | `update:open` (Modal, Tooltip, Toast, Popover, Collapsible, ImageViewer, FilterPill) |
 | Overlay slots | `headerContent` / `footerContent` |
 | Structural slots | `header` / `footer` |
 | Sizes (interactive) | `xs`, `sm`, `md`, `lg`, `xl` |

CLAUDE.md

@@ -89,7 +89,7 @@ chore: NO-JIRA update dependencies
 - **New components**: Composition API with `<script setup lang="ts">`
 - **Existing components**: Options API with `compatConfig: { MODE: 3 }` — do NOT convert unless explicitly asked
 - **Props**: Use `validator` (NOT `validate` — Vue silently ignores `validate`)
-- **Events**: `update:modelValue` for v-model; `update:open` for new overlays; `update:show` for legacy Modal/Tooltip/Toast
+- **Events**: `update:modelValue` for v-model; `update:open` for all overlay visibility (Modal, Tooltip, Toast, Popover, Dropdown, etc.)
 
 Detailed conventions are in path-scoped rules (`.claude/rules/vue-components.md`) that activate automatically when editing component files.
 

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleModal.vue

@@ -1,13 +1,13 @@
 <template>
   <dt-modal
     title="Example title"
-    :show="isOpen"
+    :open="isOpen"
     :banner-title="bannerTitle"
     :banner-kind="bannerKind"
     :fixed-header-footer="fixedHeaderFooter"
     :size="size"
     :copy="copy"
-    @update:show="isOpen = $event"
+    @update:open="isOpen = $event"
   >
     <template
       #footer

apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleToast.vue

@@ -2,12 +2,12 @@
   <aside :class="['d-toast-wrapper', { 'd-ps-fixed': fixed }]">
     <dt-toast
       :title="title"
-      :show="show"
+      :open="open"
       :important="important"
       :duration="duration"
       :kind="kind"
       @close="$emit('close')"
-      @update:show="$emit('update:show', $event)"
+      @update:open="$emit('update:open', $event)"
     >
       Message body with
       <dt-link
@@ -38,7 +38,7 @@ export default {
       default: '',
     },
 
-    show: {
+    open: {
       type: Boolean,
       default: false,
     },
@@ -64,7 +64,7 @@ export default {
     },
   },
 
-  emits: ['close', 'update:show'],
+  emits: ['close', 'update:open'],
   computed: {
     linkClass () {
       if (this.kind === 'warning' && this.important) return 'd-fc-neutral-black';

apps/dialtone-documentation/docs/.vuepress/views/IconCatalog.vue

@@ -101,10 +101,10 @@
   </dt-empty-state>
   <dt-modal
     v-if="selectedIcon"
-    :show="isModalOpen"
+    :open="isModalOpen"
     size="full"
     content-class="d-wmx100p d-pie-400"
-    @update:show="isModalOpen = false"
+    @update:open="isModalOpen = false"
   >
     <template #header>
       <span

apps/dialtone-documentation/docs/components/modal.md

@@ -72,8 +72,8 @@ Although highly versatile, this doesn't mean modal dialogs are fit for all purpo
 <!-- @code -->
 <dt-modal
   title="Example title"
-  :show="isOpen"
-  @update:show="updateShow"
+  :open="isOpen"
+  @update:open="updateOpen"
   copy="Lorem ipsum ..."
 >
   <template
@@ -110,8 +110,8 @@ This is the default behavior that adds the scroll automatically in the modal con
 <!-- @code -->
 <dt-modal
   title="Example title"
-  :show="isOpen"
-  @update:show="updateShow"
+  :open="isOpen"
+  @update:open="updateOpen"
   :showFooter="true"
   :fixed-header-footer="true"
   copy="Sed at orci quis nunc finibus gravida eget vitae est..."
@@ -150,10 +150,10 @@ A modal style for destructive or irreversible actions.
 <!-- @code -->
 <dt-modal
   title="Example title"
-  :show="isOpen"
+  :open="isOpen"
   kind="critical"
   copy="Sed at orci quis nunc finibus gravida eget vitae est..."
-  @update:show="updateShow"
+  @update:open="updateOpen"
 >
   <template
     #footer
@@ -190,10 +190,10 @@ To make this modal take up as much of the screen as possible.
 <!-- @code -->
 <dt-modal
   title="Example title"
-  :show="isOpen"
+  :open="isOpen"
   size="full"
   copy="Sed at orci quis nunc finibus gravida eget vitae est..."
-  @update:show="updateShow"
+  @update:open="updateOpen"
 >
   <template
     #footer
@@ -237,11 +237,11 @@ When there is a need of more context information regarding the content of the Mo
 <!-- @code -->
 <dt-modal
   title="Example title"
-  :show="isOpen"
+  :open="isOpen"
   banner-title="This banner can have different kinds."
   :bannerKind="selectedBannerKind"
   copy="Sed at orci quis nunc finibus gravida eget vitae est..."
-  @update:show="updateShow"
+  @update:open="updateOpen"
 >
   <template
     #footer
@@ -279,8 +279,8 @@ In addition to the footer, custom elements can be inserted into the header and b
 ```vue demo
 <div>
   <dt-modal
-    :show="isOpen"
-    @update:show="updateShow"
+    :open="isOpen"
+    @update:open="updateOpen"
   >
     <template #header>
       <dt-stack direction="row" align="center" justify="center" class="d-p-150 d-bgc-purple-100">
@@ -299,8 +299,8 @@ In addition to the footer, custom elements can be inserted into the header and b
 </div>
 <!-- @code -->
 <dt-modal
-  :show="isOpen"
-  @update:show="updateShow"
+  :open="isOpen"
+  @update:open="updateOpen"
 >
   <template #header>
     <dt-stack direction="row" align="center" justify="center" class="d-p-150 d-bgc-purple-100">
@@ -324,8 +324,8 @@ Modal content renders outside the DOM tree. Use the `contentMode` prop to apply
     content-mode="invert"
     title="Inverted Modal"
     copy="This modal's content is in the inverted mode."
-    :show="invertedModalOpen"
-    @update:show="invertedModalOpen = $event"
+    :open="invertedModalOpen"
+    @update:open="invertedModalOpen = $event"
   />
 </div>
 <!-- @code -->
@@ -361,7 +361,7 @@ At minimum, modals contain a title and one button. They could also contain body
     isOpen.value = true;
   };
 
-  const updateShow = (value) => {
+  const updateOpen = (value) => {
     if (!value) isOpen.value = false;
   };
 

apps/dialtone-documentation/docs/components/toast.md

@@ -24,7 +24,7 @@ keywords: ["notification", "snackbar", "alert", "message", "d-toast", "DtToast",
 <!-- @code -->
 <dt-toast
   title="Title"
-  :show="showToast"
+  :open="showToast"
   :important="important"
   :kind="selectedKind"
   @close="closeEvent"
@@ -47,7 +47,7 @@ keywords: ["notification", "snackbar", "alert", "message", "d-toast", "DtToast",
 
 <example-toast
   class="d-zi-notification"
-  :show="showToast"
+  :open="showToast"
   title="Title"
   :important="important"
   :kind="selectedKind"
@@ -63,16 +63,16 @@ If the duration is not provided the toast won't disappear automatically.
 <dt-button @click="toggleDurationToast(true)">Show Example</dt-button>
 <example-toast
   class="d-zi-notification"
-  :show="showDurationToast"
+  :open="showDurationToast"
   title="Title"
   @close="toggleDurationToast(false)"
-  @update:show="updateShow"
+  @update:open="updateOpen"
   :duration="6000"
 />
 <!-- @code -->
 <dt-toast
   title="Title"
-  :show="showDurationToast"
+  :open="showDurationToast"
   @close="closeEvent"
   :duration="7500"
 >
@@ -101,7 +101,7 @@ If you need to self-position the toast at the top center, use the `d-toast-wrapp
   <dt-toast
     :title="title"
     :message="message"
-    :show="isShown"
+    :open="isShown"
   ></dt-toast>
 </aside>
 ```
@@ -158,7 +158,7 @@ function toggleToast () {
 function toggleDurationToast (value) {
   showDurationToast.value = value;
 }
-const updateShow = (value) => {
+const updateOpen = (value) => {
   if (!value) showDurationToast.value = false;
 };
 

apps/dialtone-documentation/docs/scratch.md

@@ -1263,25 +1263,25 @@ Real-world patterns showing how `v-dt-focusgroup` composes with Dialtone compone
       <div class="d-d-grid d-g-400 d-g-cols2">
         <dt-stack gap="100">
           <dt-text as="h3" kind="headline" :size="300">Default</dt-text>
-          <dt-toast :show="true" kind="info" title="Info toast" message="Informational message." :duration="null" />
-          <dt-toast :show="true" kind="success" title="Success toast" message="Action completed." :duration="null" />
-          <dt-toast :show="true" kind="warning" title="Warning toast" message="Review before proceeding." :duration="null" />
-          <dt-toast :show="true" kind="critical" title="Critical toast" message="Something went wrong." :duration="null" />
-          <dt-toast :show="true" kind="base" title="Base toast" message="Neutral notification." :duration="null" />
+          <dt-toast :open="true" kind="info" title="Info toast" message="Informational message." :duration="null" />
+          <dt-toast :open="true" kind="success" title="Success toast" message="Action completed." :duration="null" />
+          <dt-toast :open="true" kind="warning" title="Warning toast" message="Review before proceeding." :duration="null" />
+          <dt-toast :open="true" kind="critical" title="Critical toast" message="Something went wrong." :duration="null" />
+          <dt-toast :open="true" kind="base" title="Base toast" message="Neutral notification." :duration="null" />
         </dt-stack>
         <dt-stack gap="100">
           <dt-text as="h3" kind="headline" :size="300">Important</dt-text>
-          <dt-toast :show="true" kind="info" title="Info toast" message="Informational message." :important="true" :duration="null" />
-          <dt-toast :show="true" kind="success" title="Success toast" message="Action completed." :important="true" :duration="null" />
-          <dt-toast :show="true" kind="warning" title="Warning toast" message="Review before proceeding." :important="true" :duration="null" />
-          <dt-toast :show="true" kind="critical" title="Critical toast" message="Something went wrong." :important="true" :duration="null" />
-          <dt-toast :show="true" kind="base" title="Base toast" message="Neutral notification." :important="true" :duration="null" />
+          <dt-toast :open="true" kind="info" title="Info toast" message="Informational message." :important="true" :duration="null" />
+          <dt-toast :open="true" kind="success" title="Success toast" message="Action completed." :important="true" :duration="null" />
+          <dt-toast :open="true" kind="warning" title="Warning toast" message="Review before proceeding." :important="true" :duration="null" />
+          <dt-toast :open="true" kind="critical" title="Critical toast" message="Something went wrong." :important="true" :duration="null" />
+          <dt-toast :open="true" kind="base" title="Base toast" message="Neutral notification." :important="true" :duration="null" />
         </dt-stack>
         <dt-stack gap="100">
           <dt-text as="h3" kind="headline" :size="300">Alignment per internal parts</dt-text>
-          <dt-toast :show="true" kind="info" title="Title only" :duration="null" />
-          <dt-toast :show="true" kind="info" message="Action completed." :duration="null" />
-          <dt-toast :show="true" kind="info" title="Title and message" message="Review before proceeding." :duration="null" />
+          <dt-toast :open="true" kind="info" title="Title only" :duration="null" />
+          <dt-toast :open="true" kind="info" message="Action completed." :duration="null" />
+          <dt-toast :open="true" kind="info" title="Title and message" message="Review before proceeding." :duration="null" />
         </dt-stack>
       </div>
     </dt-stack>

packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md

@@ -75,12 +75,15 @@ All form components implement Vue 3 v-model via `modelValue` prop + `update:mode
 | DtSelectMenu | `String \| Number` | |
 | DtToggle | `Boolean \| String` | Supports `'mixed'` for indeterminate state |
 
-Visibility-toggle components use `update:show` instead:
+Visibility-toggle components use `update:open`:
 
 | Component | Emit |
 |-----------|------|
-| DtModal | `update:show` |
-| DtTooltip | `update:show` |
+| DtModal | `update:open` |
+| DtTooltip | `update:open` |
+| DtToast | `update:open` |
+| DtPopover | `update:open` |
+| DtDropdown | `update:open` |
 
 ## Event Naming
 
@@ -90,7 +93,7 @@ Custom events use the `update:{prop}` convention to stay compatible with `v-mode
 
 ```
 update:modelValue   — value changed
-update:show         — visibility changed
+update:open         — visibility changed
 update:length       — input length changed (DtInput)
 update:invalid      — validation state changed (DtInput)
 ```