feat(Toast): allow action without dismissing toast by yan-ad · Pull Request #2673 · unovue/reka-ui

yan-ad · 2026-06-03T07:26:38Z

🔗 Linked issue

Resolves #2626

❓ Type of change

📖 Documentation (updates to the documentation, readme or JSdoc annotations)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adds a closeOnClick prop to ToastAction so action buttons can run without always dismissing their toast. The default remains true, preserving the existing dismiss-on-click behavior.

This also documents the new prop and adds a regression test covering closeOnClick: false keeping the toast open after clicking the action.

📸 Screenshots (if appropriate)

N/A

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

Summary by CodeRabbit

New Features
- Added a closeOnClick prop for toast actions to control whether clicking an action dismisses the toast (default: true).
Changes
- Toast actions now render as buttons by default.
Documentation
- Updated Toast docs with a Vue example and clarified action dismissal and keyboard behavior.
Tests
- Added tests verifying clicks both dismiss and preserve the toast based on closeOnClick.

coderabbitai · 2026-06-03T07:26:51Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6b13d222-ad99-4ffc-8ce8-eee4d5247e89

📥 Commits

Reviewing files that changed from the base of the PR and between 78bb0fa and ca73c65.

📒 Files selected for processing (1)

packages/core/src/Toast/ToastAction.vue

📝 Walkthrough

Walkthrough

This PR adds a closeOnClick prop to ToastAction to optionally prevent toast dismissal when an action is clicked. By default (closeOnClick={true}), the existing behavior is preserved. When closeOnClick={false}, the action runs without closing the toast.

Changes

ToastAction closeOnClick feature

Layer / File(s)	Summary
ToastAction prop and conditional rendering `packages/core/src/Toast/ToastAction.vue`, `docs/content/meta/ToastAction.md`	`ToastAction` declares an optional `closeOnClick?: boolean` prop (default `true`). The template conditionally renders `ToastClose` when `closeOnClick` is enabled; otherwise it renders a `Primitive` directly with conditional `type="button"`. Component metadata documents the new prop and updates the default `as` element from `"div"` to `"button"`.
Test coverage and user guide `packages/core/src/Toast/Toast.test.ts`, `docs/content/docs/components/toast.md`	`ToastWithAction` test helper renders a toast with a configurable `closeOnClick`, and tests verify default clicks close the toast while `closeOnClick: false` keeps it open. Documentation adds a Vue example and updates keyboard interaction text to clarify `ToastAction` vs `ToastClose` dismissal behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A toast that won't dismiss,
When actions call upon the kiss,
Persist and dance, no longer shy—
Let handlers run and by they fly! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature: adding ability to execute toast actions without automatic dismissal via the closeOnClick prop.
Linked Issues check	✅ Passed	The PR fully addresses issue `#2626` by implementing closeOnClick prop to allow action handlers to execute without automatically dismissing the toast.
Out of Scope Changes check	✅ Passed	All changes directly support the closeOnClick feature: component implementation, props documentation, test coverage, and user-facing documentation are all in scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

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

pkg-pr-new · 2026-06-03T07:28:12Z

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2673

commit: ca73c65

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/content/docs/components/toast.md`:
- Around line 142-154: The keyboard-interaction docs incorrectly state that
ToastAction always closes on Space/Enter; update the keyboard table and any
related text to qualify that closing on Space/Enter is conditional on the prop
closeOnClick being true. Locate mentions of ToastAction and the keyboard table
in this doc (references: ToastAction, closeOnClick) and change the wording to
something like "closes on Space/Enter when closeOnClick === true" or equivalent
concise phrasing so the docs consistently reflect the conditional behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d67d0a50-1ec0-455c-a938-42671e607cc2

📥 Commits

Reviewing files that changed from the base of the PR and between 091d650 and 0446c76.

📒 Files selected for processing (4)

docs/content/docs/components/toast.md
docs/content/meta/ToastAction.md
packages/core/src/Toast/Toast.test.ts
packages/core/src/Toast/ToastAction.vue

zernonia · 2026-06-10T15:06:50Z

Thanks for the PR @yan-ad ! Two notes before merge:

Add a default-path test. The new test only covers closeOnClick: false. There's currently no test asserting that a ToastAction click closes the toast by default, and this PR forks the render into v-if/v-else — so the ToastClose branch is now untested. A sibling test (default closeOnClick → toast closes, open becomes false) would close that gap cheaply.

Optional — collapse the render fork. Instead of ToastClose vs Primitive, a single Primitive with a conditional click avoids duplicating the :type logic and the nested ToastAnnounceExclude:

<ToastAnnounceExclude v-if="altText" :alt-text="altText" as-child>
  <Primitive
    :ref="forwardRef"
    :as="as"
    :as-child="asChild"
    :type="as === 'button' ? 'button' : undefined"
    @click="closeOnClick ? rootContext.onClose() : undefined"
  >
    <slot />
  </Primitive>
</ToastAnnounceExclude>

This needs injectToastRootContext() in ToastAction (currently it leans on ToastClose for that). Trade-off is it stops reusing ToastClose, but removes the branch and the double-wrapping. Not blocking — your call on whether reuse or flatness reads better.

yan-ad · 2026-06-11T08:13:59Z

Resolved both notes — added the default-path ToastAction test and also collapsed the render fork into a single Primitive with conditional close handling.

yan-ad · 2026-06-11T08:19:33Z

Thanks for the notes! I added the default-path test for ToastAction, and also went ahead with the optional simplification so ToastAction now uses a single Primitive path with conditional close handling.

feat(Toast): allow action without dismissing toast

0446c76

coderabbitai Bot reviewed Jun 3, 2026

View reviewed changes

Comment thread docs/content/docs/components/toast.md

docs(Toast): clarify action keyboard dismissal

682efb7

test: cover default toast action close behavior

78bb0fa

refactor: simplify toast action render path

ca73c65

Navigation Menu

Uh oh!

Uh oh!

feat(Toast): allow action without dismissing toast - #2673

feat(Toast): allow action without dismissing toast#2673
yan-ad wants to merge 4 commits into
unovue:v2from
yan-ad:fix/toast-action-optional-close

yan-ad commented Jun 3, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 3, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

pkg-pr-new Bot commented Jun 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

zernonia commented Jun 10, 2026 •

edited

Loading

Uh oh!

yan-ad commented Jun 11, 2026 •

edited

Loading

Uh oh!

yan-ad commented Jun 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

yan-ad commented Jun 3, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

📸 Screenshots (if appropriate)

📝 Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

pkg-pr-new Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

zernonia commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yan-ad commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yan-ad commented Jun 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yan-ad commented Jun 3, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 3, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 3, 2026 •

edited

Loading

zernonia commented Jun 10, 2026 •

edited

Loading

yan-ad commented Jun 11, 2026 •

edited

Loading