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

[Ignacio Ropolo (iropolo)]

Renamed show prop to open

🛠️ Type Of Change

These types will increment the version number on release:

• Refactor

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-3282

📖 Description

We are fixing some inconsistencies in prop naming and this show vs open will be always open.

Components updated:

• Modal
• Tooltip
• Toast <-- doubts on this but still updated it.

Doubt:

• dt-lazy-show , this uses show, but it is semantically different from overlay open/close. I didn't update this.

---

Breaking changes

DtModal

Before	After	Impact
:show="value"	:open="value"	Prop binding
Update (@update):show="handler"	Update (@update):open="handler"	Event listener
v-model:show="value"	v-model:open="value"	Two-way binding

DtTooltip

:show="value"	:open="value"	Prop binding
Update (@update):show="handler"	Update (@update):open="handler"	Event listener
:show.sync="value" (Vue 2 compat)	:open.sync="value"	Legacy sync binding

DtToast

Before	After	Impact
:show="value"	:open="value"	Prop binding
v-model:show="value"	v-model:open="value"	Two-way binding
Update (@update):show="handler"	Update (@update):open="handler"	Event listener

Migration Examples:

<!-- Modal -->
- <dt-modal :show="isOpen" @update:show="onClose">
+ <dt-modal :open="isOpen" @update:open="onClose">
 
<!-- Tooltip (programmatic) -->
- <dt-tooltip :show="visible" @update:show="onToggle">
+ <dt-tooltip :open="visible" @update:open="onToggle">
 
<!-- Toast -->
- <dt-toast :show="isShown" @update:show="onDismiss">
+ <dt-toast :open="isShown" @update:open="onDismiss">
 
<!-- Toast with v-model -->
- <dt-toast v-model:show="isShown">
+ <dt-toast v-model:open="isShown">

Renames the show prop/event to open across DtModal, DtTooltip, and DtToast (implementations, tests, stories, and docs) for consistent overlay APIs; dt-lazy-show remains show. Breaking API changes: v-model/events renamed to open/update:open.

[coderabbitai]

Walkthrough

Unified the visibility v-model naming by replacing show/update:show with open/update:open across components, stories, tests, documentation, and internal guidance files for Modal, Tooltip, Toast, Popover, and related examples.

Changes

Cohort / File(s)	Summary
Conventions & Docs .claude/rules/vue-components.md, .claude/skills/vue-conventions.md, CLAUDE.md, packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md	Updated guidance and reference docs to require update:open as the unified visibility v-model event; removed legacy update:show guidance.
Modal packages/dialtone-vue/components/modal/modal.vue, packages/dialtone-vue/components/modal/modal.stories.js, packages/dialtone-vue/components/modal/modal.test.js, packages/dialtone-vue/components/modal/modal_default.story.vue, apps/dialtone-documentation/docs/components/modal.md, apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleModal.vue, apps/dialtone-documentation/docs/.vuepress/views/IconCatalog.vue	Renamed prop show → open and emitted event update:show → update:open in component, tests, stories, docs, and examples; updated bindings and handlers accordingly.
Tooltip packages/dialtone-vue/components/tooltip/tooltip.vue, packages/dialtone-vue/components/tooltip/*.story.vue, packages/dialtone-vue/components/tooltip/tooltip.stories.js, packages/dialtone-vue/components/tooltip/tooltip.test.js	Renamed controlled prop and emit (show → open, update:show → update:open) across implementation, tests, and all story variants; updated computed/watch usage and story bindings.
Toast packages/dialtone-vue/components/toast/toast.vue, packages/dialtone-vue/components/toast/toast.stories.js, packages/dialtone-vue/components/toast/toast.test.js, packages/dialtone-vue/components/toast/toast_default.story.vue, apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleToast.vue, apps/dialtone-documentation/docs/components/toast.md, apps/dialtone-documentation/docs/scratch.md	Renamed prop/emit pairs and story controls from show/update:show to open/update:open; adjusted docs and examples, plus test fixtures and story Percy args.
Popover & Recipes packages/dialtone-vue/components/popover/popover_variants.story.vue, packages/dialtone-vue/recipes/buttons/callbar_button/callbar_button.vue	Updated dt-tooltip and related usages to bind open instead of show where driven by parent $attrs.open.
Storybook / Examples Sweep apps/dialtone-documentation/**, packages/**/.../*.story.vue, *.stories.js (multiple files)	Consistent update of story controls/args, Percy args, and example templates to use open/update:open rather than show/update:show.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch DLT-3282

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

78-97: ⚠️ Potential issue | 🟡 Minor

Update the remaining Tooltip warning text to open for consistency.

This section correctly standardizes visibility to open, but the same page still says DtTooltip warns on enabled + show. Please rename that mention to enabled + open to avoid mixed guidance.

Suggested doc fix

-- DtTooltip: warns when both `enabled` and `show` props are set
+- DtTooltip: warns when both `enabled` and `open` props are set

Based on learnings: Component documentation must include Vue source, tests, Storybook stories, component docs JSON, VuePress documentation, and MCP server data — all must stay in sync.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md`
around lines 78 - 97, Locate the remaining tooltip warning that says "enabled +
show" and update it to "enabled + open" for consistency with the visibility prop
naming; specifically, search for the DtTooltip mention in the
reference-component-api-patterns content and replace the wording (and any
example or explanatory text) to use "open" instead of "show" so it matches the
`update:open` convention and the table/listing of emits.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In
`@packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md`:
- Around line 78-97: Locate the remaining tooltip warning that says "enabled +
show" and update it to "enabled + open" for consistency with the visibility prop
naming; specifically, search for the DtTooltip mention in the
reference-component-api-patterns content and replace the wording (and any
example or explanatory text) to use "open" instead of "show" so it matches the
`update:open` convention and the table/listing of emits.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Central YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: c2347579-2bd2-4b94-8aa2-4c63a9aeb099

📥 Commits

Reviewing files that changed from the base of the PR and between 2d00fe0 and 2422aef.

📒 Files selected for processing (27)

• .claude/rules/vue-components.md
• .claude/skills/vue-conventions.md
• CLAUDE.md
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleModal.vue
• apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleToast.vue
• apps/dialtone-documentation/docs/.vuepress/views/IconCatalog.vue
• apps/dialtone-documentation/docs/components/modal.md
• apps/dialtone-documentation/docs/components/toast.md
• apps/dialtone-documentation/docs/scratch.md
• packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md
• packages/dialtone-vue/components/modal/modal.stories.js
• packages/dialtone-vue/components/modal/modal.test.js
• packages/dialtone-vue/components/modal/modal.vue
• packages/dialtone-vue/components/modal/modal_default.story.vue
• packages/dialtone-vue/components/popover/popover_variants.story.vue
• packages/dialtone-vue/components/toast/toast.stories.js
• packages/dialtone-vue/components/toast/toast.test.js
• packages/dialtone-vue/components/toast/toast.vue
• packages/dialtone-vue/components/toast/toast_default.story.vue
• packages/dialtone-vue/components/tooltip/tooltip.stories.js
• packages/dialtone-vue/components/tooltip/tooltip.test.js
• packages/dialtone-vue/components/tooltip/tooltip.vue
• packages/dialtone-vue/components/tooltip/tooltip_change_on_click.story.vue
• packages/dialtone-vue/components/tooltip/tooltip_default.story.vue
• packages/dialtone-vue/components/tooltip/tooltip_flip.story.vue
• packages/dialtone-vue/components/tooltip/tooltip_variants.story.vue
• packages/dialtone-vue/recipes/buttons/callbar_button/callbar_button.vue

[Brad Paugh (braddialpad)]

We are fixing some inconsistencies in prop naming and this show vs open will be always open.

Components updated:

Modal
Tooltip
Toast <-- doubts on this but still updated it.
Doubt:

dt-lazy-show , this uses show, but it is semantically different from overlay open/close. I didn't update this.

lol hate to say this.. but does it make sense to use "show" instead of "open" for everything then? I think it kinda works for everything while open doesn't.

[Francis Rupert (francisrupert)]

lol hate to say this.. but does it make sense to use "show" instead of "open" for everything then? I think it kinda works for everything while open doesn't.

Heh. Did a little research...

---

The web platform strongly favors open:

• The native HTML <dialog> element uses the open attribute
• The HTML <details> element uses open
• The Popover API uses showPopover()/hidePopover() methods but the state is conceptually "open"

Top-tier Vue libraries:

• Radix Vue / Reka UI — uses open (and v-model:open)
• Headless UI — uses open
• Vuetify — historically used v-model (with value/modelValue), but their dialog/menu components conceptually track "open" state
• PrimeVue — uses visible for Dialog
• Quasar — uses v-model (no named prop)
• Element Plus — uses v-model / modelValue for Dialog
• Naive UI — uses show

Non-Vue design systems:

• Radix (React) — open / onOpenChange
• Chakra UI — isOpen / onOpen / onClose
• MUI — open
• Adobe Spectrum — isOpen
• Shoelace/Web Awesome — open (mirrors native <dialog>)
• Carbon (IBM) — open
• Ant Design — open (migrated away from visible in v5)

The trend is clearly toward open:

• Align with the HTML platform (<dialog open>, <details open>)
• The most respected headless/unstyled libraries (Radix, Headless UI) use it
• MUI, Carbon, Shoecase all use it
• Ant Design explicitly migrated from visible to open
• show is a minority choice (mainly Naive UI)

Bottom line

open is the right call. The strongest argument is platform alignment — native HTML uses open, and the most influential modern component libraries (Radix, Headless UI, MUI, Shoelace) all converge on it. The Ant Design migration from visible → open is particularly telling — a massive library chose to take a breaking change specifically to align with this convention.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/dialtone-vue/components/modal/modal.test.js (1)

247-252: ⚠️ Potential issue | 🟡 Minor

Replace stale show prop in this migrated test case.

Line 249 still sets show: true. This no longer validates the renamed API and can mask coverage gaps; use open: true here as well.

Patch

     it('Should apply critical banner kind', async () => {
       await wrapper.setProps({
-        show: true,
+        open: true,
         bannerKind: 'critical',
         bannerTitle: 'title',
       });

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/dialtone-vue/components/modal/modal.test.js` around lines 247 - 252,
In the test "Should apply critical banner kind" update the props passed to
wrapper.setProps to use the new API: replace the stale show: true with open:
true so the test exercises the renamed prop; ensure wrapper.setProps({ open:
true, bannerKind: 'critical', bannerTitle: 'title' }) is used instead of setting
show.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/dialtone-vue/components/modal/modal.test.js`:
- Around line 247-252: In the test "Should apply critical banner kind" update
the props passed to wrapper.setProps to use the new API: replace the stale show:
true with open: true so the test exercises the renamed prop; ensure
wrapper.setProps({ open: true, bannerKind: 'critical', bannerTitle: 'title' })
is used instead of setting show.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Central YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: a909a42c-4f5e-40be-ade7-aec63cf7e4d0

📥 Commits

Reviewing files that changed from the base of the PR and between 2422aef and fd61e6b.

📒 Files selected for processing (13)

• apps/dialtone-documentation/docs/components/modal.md
• apps/dialtone-documentation/docs/components/toast.md
• apps/dialtone-documentation/docs/scratch.md
• packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md
• packages/dialtone-vue/components/modal/modal.stories.js
• packages/dialtone-vue/components/modal/modal.test.js
• packages/dialtone-vue/components/modal/modal.vue
• packages/dialtone-vue/components/modal/modal_default.story.vue
• packages/dialtone-vue/components/toast/toast.stories.js
• packages/dialtone-vue/components/toast/toast.test.js
• packages/dialtone-vue/components/toast/toast.vue
• packages/dialtone-vue/components/toast/toast_default.story.vue
• packages/dialtone-vue/recipes/buttons/callbar_button/callbar_button.vue

✅ Files skipped from review due to trivial changes (2)

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

🚧 Files skipped from review as they are similar to previous changes (6)

• packages/dialtone-vue/components/toast/toast.test.js
• packages/dialtone-vue/recipes/buttons/callbar_button/callbar_button.vue
• packages/dialtone-vue/components/toast/toast_default.story.vue
• packages/dialtone-vue/components/toast/toast.stories.js
• packages/dialtone-vue/components/toast/toast.vue
• packages/dialtone-vue/components/modal/modal_default.story.vue

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1190/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1190/

[Ignacio Ropolo (iropolo)]

We will continue the update of this prop to open.