Skip to content

Document the toast framework and mount the region in cmsui/publicui#118

Open
InteraktivPreuss wants to merge 2 commits into
mainfrom
document-toast-framework
Open

Document the toast framework and mount the region in cmsui/publicui#118
InteraktivPreuss wants to merge 2 commits into
mainfrom
document-toast-framework

Conversation

@InteraktivPreuss

@InteraktivPreuss InteraktivPreuss commented Jun 10, 2026

Copy link
Copy Markdown
  • Add docs/how-to-guides/show-toasts.md and link it from the toctree
  • Mount the global Toast region in the cmsui and publicui layouts so toasts triggered from editor and visitor-facing routes actually render
  • Include Toast.css in both CSS bundles via the new layout/styles/cmsui.css and the updated layout/styles/publicui.css
  • Add success/info/error variants in Toast.css using Quanta tokens
  • Add an auto-dismiss countdown bar with prefers-reduced-motion support and region-level pause on hover or focus-within
  • Expose showProgress on ToastItem and a dismiss utility; show() now returns the toast key and accepts per-call timeout/onClose
  • Lower DEFAULT_TOAST_TIMEOUT_MS from 25 s to 6 s and normalize timeout<=0
  • Add Storybook stories for the new variants and the showProgress flag
  • Add per-package news entries

Refs #32.

Caution

The Volto Team has suspended its review of new pull requests from first-time contributors until the release of Plone 7, which is preliminarily scheduled for the second quarter of 2026.
Read details.



If your pull request closes an open issue, include the exact text below, immediately followed by the issue number. When your pull request gets merged, then that issue will close automatically.

Closes #32


📚 Documentation preview 📚: https://plone-aurora--118.org.readthedocs.build/

- Add docs/how-to-guides/show-toasts.md and link it from the toctree
- Mount the global Toast region in the cmsui and publicui layouts so toasts
  triggered from editor and visitor-facing routes actually render
- Include Toast.css in both CSS bundles via the new layout/styles/cmsui.css
  and the updated layout/styles/publicui.css
- Add success/info/error variants in Toast.css using Quanta tokens
- Add an auto-dismiss countdown bar with prefers-reduced-motion support
  and region-level pause on hover or focus-within
- Expose showProgress on ToastItem and a dismiss utility; show() now returns
  the toast key and accepts per-call timeout/onClose
- Lower DEFAULT_TOAST_TIMEOUT_MS from 25 s to 6 s and normalize timeout<=0
- Add Storybook stories for the new variants and the showProgress flag
- Add per-package news entries

Refs #32.

@stevepiercy stevepiercy left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great start. Thank you!

I'd like to move the explanation sections into a separate file under conceptual-guides/toasts.md and cross-reference as needed. What do you think?

Comment thread docs/how-to-guides/show-toasts.md Outdated
Comment thread docs/how-to-guides/show-toasts.md Outdated
Comment thread docs/how-to-guides/show-toasts.md Outdated
Comment thread docs/how-to-guides/show-toasts.md Outdated
Comment thread docs/how-to-guides/show-toasts.md Outdated
Comment thread docs/how-to-guides/show-toasts.md Outdated
Comment thread packages/cmsui/news/+toast-region.feature Outdated
Comment thread packages/publicui/news/+toast-region.feature Outdated
Comment thread packages/layout/news/+toast-framework.feature Outdated
Comment thread docs/how-to-guides/show-toasts.md
InteraktivPreuss added a commit that referenced this pull request Jun 11, 2026
Following review feedback on #118, separate the explanation content
from task-oriented guidance per Diátaxis:

- Add docs/conceptual-guides/toasts.md covering the architecture
  (queue, registry utilities, region, and CSS), the countdown bar
  behavior, and where the region is mounted. Link it from the
  conceptual-guides toctree.
- Trim docs/how-to-guides/show-toasts.md to show, customize timeout,
  dismiss, surface route errors, and render your own region. Add a
  cross-reference to the new concept page at the top.

Apply the inline rewrites in their final files: {file} role for file
paths, definition lists for the registry utilities and mount points,
"React Aria" terminology, one-sentence-per-line phrasing, and the
Storybook demo link near the top of both pages.

Backtick cmsui and publicui in the three news entries.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Following review feedback on #118, separate the explanation content
from task-oriented guidance per Diátaxis:

- Add docs/conceptual-guides/toasts.md covering the architecture
  (queue, registry utilities, region, and CSS), the countdown bar
  behavior, and where the region is mounted. Link it from the
  conceptual-guides toctree.
- Trim docs/how-to-guides/show-toasts.md to show, customize timeout,
  dismiss, surface route errors, and render your own region. Add a
  cross-reference to the new concept page at the top.

Apply the inline rewrites in their final files: {file} role for file
paths, definition lists for the registry utilities and mount points,
"React Aria" terminology, one-sentence-per-line phrasing, and the
Storybook demo link near the top of both pages.

Backtick cmsui and publicui in the three news entries.
@InteraktivPreuss InteraktivPreuss force-pushed the document-toast-framework branch from 1c9a379 to f51f3e6 Compare June 11, 2026 08:48
@InteraktivPreuss

Copy link
Copy Markdown
Author

@stevepiercy
Thanks for the review. I split the page in two as you suggested:

docs/conceptual-guides/toasts.md covers the architecture, the countdown bar, and the mount points. docs/how-to-guides/show-toasts.md is task-only now and links to the concept page at the top.

All your inline suggestions are applied wherever they landed. The Storybook link passes linkcheck and the docs build is clean.

Two places I deviated from your literal text:

  1. Under "Render your own region" I kept "For a different layout" instead of "For different layout". Easy to drop the "a" if you want.
  2. I extended "React Aria" to both intros, so they read "primitives from React Aria Components" instead of react-aria-components. Let me know if you'd rather keep the package name.

I also added an "Architecture" heading with two subsections in the concept file to break up the longer page. Let me know if that feels heavy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[CMSUI] - Toasts framework

2 participants