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">

Refactors Modal, Tooltip, and Toast components by renaming the show prop/event to open for consistent prop naming across overlay components. Updates include component implementations, tests, stories, and documentation. Breaking API changes for all three components.

[coderabbitai]

Walkthrough

This pull request standardizes the visibility control API across Modal, Tooltip, Toast, Popover, and related components by renaming the show prop and update:show event to open and update:open respectively. Changes span component implementations, tests, Storybook stories, documentation, and AI guidance rules.

Changes

Cohort / File(s)	Summary
Documentation & Guidelines .claude/rules/vue-components.md, .claude/skills/vue-conventions.md, CLAUDE.md, packages/dialtone-docs/src/content/reference/reference-component-api-patterns.md	Updated AI rules and reference docs to specify update:open as the unified visibility event for Modal, Tooltip, Toast, Popover, and related components, removing legacy update:show guidance.
Modal Component packages/dialtone-vue/components/modal/modal.vue, modal.stories.js, modal.test.js, modal_default.story.vue	Renamed show prop to open and update:show event to update:open in component definition, tests, and Storybook configuration.
Tooltip Component packages/dialtone-vue/components/tooltip/tooltip.vue, tooltip.stories.js, tooltip.test.js, tooltip_default.story.vue, tooltip_change_on_click.story.vue, tooltip_flip.story.vue, tooltip_variants.story.vue	Renamed show prop to open and update:show event to update:open across component implementation, test suite, and all story variants.
Toast Component packages/dialtone-vue/components/toast/toast.vue, toast.stories.js, toast.test.js, toast_default.story.vue	Renamed show prop to open and update:show event to update:open in component, tests, and Storybook stories.
Documentation Examples & Recipes apps/dialtone-documentation/docs/components/modal.md, apps/dialtone-documentation/docs/components/toast.md, apps/dialtone-documentation/docs/scratch.md, apps/dialtone-documentation/docs/.vuepress/exampleComponents/ExampleModal.vue, ExampleToast.vue, IconCatalog.vue, packages/dialtone-vue/components/popover/popover_variants.story.vue, packages/dialtone-vue/recipes/buttons/callbar_button/callbar_button.vue	Updated all usage examples and component instances to bind and emit via open prop/update:open event instead of show/update:show.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~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. ‼️

[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/

[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.