Refactor toast notifications into event-driven toast-alert component#6108
Open
JudahGabriel wants to merge 2 commits into
Open
Refactor toast notifications into event-driven toast-alert component#6108JudahGabriel wants to merge 2 commits into
JudahGabriel wants to merge 2 commits into
Conversation
Move the toast system from an imperative DOM-building service into a Lit <toast-alert> component driven by a window event. showToast now dispatches a "show-toast" event with a ToastEvent payload; app-index listens and renders the toast stack. Toast improvements: - Scrollable, padded body that caps long messages at 300px - details accepts string or Error (renders message + stack trace) - Close button; countdown visualized as a wa-progress-ring around the X - countdown is now a boolean (default duration) instead of rtl/ltr - Hovering pauses and resets the countdown; resumes on mouse leave - Neutral body with the variant color as a left accent border, matching header icon, and countdown ring - Extracted component styles into sibling .styles.ts files Also remove stale overflow:auto from platform form layouts and add padding-top to the publish pane form area. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Contributor
|
Thanks @JudahGabriel for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌 |
- Convert callback arrow-field methods to standard declarations, binding this at the call sites (event handlers, setTimeout, requestAnimationFrame). - Drive the progress ring via a reactive @State() countdown value instead of querySelector DOM manipulation, so it re-renders automatically. - Shrink the close button (via ::part(base)) so it and its hover background fit inside the ring's hole instead of covering the ring; make the X smaller. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Type
Describe the current behavior?
Toasts were created by an imperative service (
services/toasts.ts) that built and injected DOM directly. The variant color tinted the whole callout (makingdangerbodies hard to read), the auto-dismiss countdown was a thin bar at the bottom, long messages could overflow, anddetailsonly accepted a string. All styling lived inline.Describe the new behavior?
The toast system is now an event-driven Lit component.
showToast(toast: ToastEvent)dispatches ashow-toastwindow event;app-indexlistens and renders a stack of<toast-alert>components. The new<toast-alert>owns its own lifecycle (auto-dismiss timer, countdown animation, fade-out) and emitstoast-dismisswhen done. AToastEventmodel formalizes the payload.detailsnow accepts astringor anError(rendering the message and stack trace).wa-progress-ringwrapped around the close (X) button instead of a bottom bar.countdownis now a simpleboolean(uses the default duration) rather than anrtl/ltr/nonestring. Hovering the toast pauses and resets the ring; it resumes from full when the pointer leaves.*.styles.tsfiles (toast-alert.styles.ts,app-index.styles.ts) per repo convention.This PR also includes a few unrelated layout tweaks the author made in the same branch: removing stale
overflow: autofrom the Android/iOS/Windows/base platform form layouts and addingpadding-topto the publish pane form area.PR Checklist
npm run testand ensure that all tests passAdditional Information
tsc --noEmitpasses cleanly. The refactor changesdetailsto render as text (safer, auto-escaped by Lit) rather than HTML; all existing callers pass plain strings or Errors.