fix: tighten toast typing and restore focus visibility

[lyzno1]

Summary

• export the toast tone and option types as part of the public primitive contract
• replace string-based tone branching with exhaustive typed maps for icon and gradient rendering
• remove the unsafe toast.promise cast by normalizing the promise lifecycle options before delegating to Base UI
• restore focus visibility for the toast root and add a regression test around the accessible host rendering

Fixes #32811

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I ran pnpm --dir web exec eslint app/components/base/ui/toast/index.tsx app/components/base/ui/toast/__tests__/index.spec.tsx, pnpm --dir web type-check, pnpm --dir web type-check:tsgo, and pnpm --dir web test --run app/components/base/ui/toast/__tests__/index.spec.tsx.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the toast component by improving its type safety and accessibility. It exports essential toast types for broader use, refactors internal logic to leverage type-safe mappings for visual elements, and addresses a critical accessibility concern by restoring keyboard focus visibility. These changes make the toast component more robust, easier to maintain, and more compliant with accessibility standards.

Highlights

• Improved Type Safety: Exported key toast-related types (ToastType, ToastAddOptions, ToastUpdateOptions, ToastPromiseOptions) to enhance the public primitive contract and ensure better type checking across the application.
• Refactored Tone Branching: Replaced string-based conditional logic for rendering toast icons and gradient classes with exhaustive, type-safe mapped objects (TOAST_ICON_CLASSNAMES, TOAST_TONE_GRADIENT_CLASSNAMES), improving maintainability and reducing potential errors.
• Safer Promise Handling: Removed an unsafe type assertion in toast.promise by introducing a createToastPromiseResultOption helper, which normalizes promise lifecycle options before delegation to Base UI, leading to more robust error handling.
• Restored Focus Visibility: Ensured keyboard focus visibility for the toast root by removing the outline-none class and added a regression test to prevent future accessibility issues related to focus management.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• web/app/components/base/ui/toast/tests/index.spec.tsx
  • Added a regression test to verify that toast dialogs do not have the 'outline-none' class, ensuring proper focus visibility.
• web/app/components/base/ui/toast/index.tsx
  • Exported ToastType, ToastAddOptions, ToastUpdateOptions, and ToastPromiseOptions for external use.
  • Introduced TOAST_ICON_CLASSNAMES and TOAST_TONE_GRADIENT_CLASSNAMES to provide type-safe mappings for toast icons and gradient styles.
  • Implemented createToastPromiseResultOption to normalize promise options for toast.promise, removing an unsafe type cast.
  • Refactored ToastIcon and getToneGradientClasses to utilize the new type-safe class maps.
  • Removed the outline-none class from the BaseToast.Root component to restore default focus outlines.
  • Added a getToastType helper function to safely determine the toast type.

Activity

• No specific activity has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request refactors the toast component to improve type safety and maintainability, and also fixes an accessibility issue with focus visibility. The changes include exporting types, replacing conditional logic with maps, removing an unsafe type cast, and adding a related regression test. I have one suggestion for a minor code simplification.

[Copilot]

Pull request overview

This PR improves the toast primitive’s public typing contract and restores keyboard focus visibility for toast roots, while adding a regression assertion in the toast host test suite.

Changes:

• Exports ToastType, ToastAddOptions, ToastUpdateOptions, and refines ToastPromiseOptions to be part of the public API.
• Replaces string-branching for tone rendering with typed maps for icons and gradients, and normalizes toast.promise options instead of using an unsafe cast.
• Restores focus outline visibility on the toast root and adds a regression assertion for it.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
web/app/components/base/ui/toast/index.tsx	Exports toast option types, adds typed tone maps, removes unsafe toast.promise cast, and removes outline-none from the toast root.
web/app/components/base/ui/toast/__tests__/index.spec.tsx	Adds an assertion that the toast dialog root is not rendered with outline-none.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

This PR strengthens the toast primitive’s public typing surface while improving runtime rendering safety and restoring visible keyboard focus on the toast root for accessibility.

Changes:

• Export ToastType, ToastAddOptions, ToastUpdateOptions, and ToastPromiseOptions as public types.
• Replace string-branching tone rendering with an exhaustive ToastType → style map and a safe runtime normalizer (getToastType).
• Restore focus visibility by removing outline-none from the toast root and add a regression assertion for it.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
web/app/components/base/ui/toast/index.tsx	Exports toast types/options, introduces typed tone style map + normalizer, removes unsafe toast.promise cast, and restores focus outline behavior on the toast root.
web/app/components/base/ui/toast/tests/index.spec.tsx	Adds a regression assertion ensuring the toast root is not rendered with outline-none.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

This PR improves the base/ui/toast primitive by making its public typings stricter, removing unsafe casts around promise toasts, and restoring keyboard focus visibility on the toast root.

Changes:

• Export ToastType and toast option types as part of the toast primitive’s public contract.
• Replace tone-based branching with an exhaustive typed map for icon + gradient class selection.
• Restore focus visibility on the toast root and add a regression assertion in the toast host test; configure the app-level host toast stack limit.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
web/app/layout.tsx	Configures the global ToastHost with a stack limit to cap visible toasts.
web/app/components/base/ui/toast/index.tsx	Exports public toast types, removes the unsafe promise cast, and refactors tone styling + focus behavior.
web/app/components/base/ui/toast/tests/index.spec.tsx	Adds a regression check that the toast root is no longer outline-none.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Updates the app’s toast system configuration and refactors toast tone styling to be more type-safe and centralized, while tightening toast stack behavior in the main layout.

Changes:

• Add a toast stack limit in the root app layout (limit={3}).
• Refactor toast tone handling (icon + gradient) into a single TOAST_TONE_STYLES map with exported public types.
• Adjust toast root styling and update the toast UI test assertions accordingly.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
web/app/layout.tsx	Configures the global ToastHost with a visible stack limit.
web/app/components/base/ui/toast/index.tsx	Centralizes tone styles, tightens toast type handling, and tweaks toast root styling.
web/app/components/base/ui/toast/__tests__/index.spec.tsx	Updates regression tests to match the toast root class change.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.