Repository navigation
feat(studio): toasts show as a centred pill that rises in - #7714
Merged
Merged
Conversation
Contributor
Edit accuracy: accurate 267 (base branch 267), smooth 119 of thoseThe gate passes. Quarantined, measured but not gated (8)
Unstable (3)
|
![heygengenesis[bot]](https://avatars.githubusercontent.com/in/2913576?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Verdict: REQUEST CHANGES · 2 blocker · 1 important · 0 nits · head 863f18a9
- blocker — required
Studio and player capturesis red: "more than 12 capture links; attach fewer, longer clips". The body has 13 (5 Before, 6 After, 2 Reference). Drop one or merge two, for example the two Reference shots, then edit the body to re-run the check. - blocker —
Commentsratchet is red onStudioToast.tsx(2/39 = 5.1% against 1/51 at the base). ↓ inline
Scope
Read all 7 files at the head. The hf-toast-* keyframes are still used by StudioFeedbackCard, so the CSS relabel is right. --shadow-notice is in the @theme block, and theme.css is outside the hex ratchet. AppToast.tone was already required, so making the prop required is safe. Timer cleanup in useToast is intact now that the exit timer is gone. This is a feat PR, so no 'fails without the fix' line is needed. The CI workflow was still queued at review time.
Merged
1 of 2 tasks
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
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.
What
Studio's toasts become one centred pill that rises in: an inverted fill (dark pill on the light theme, light pill on the dark one), 14px medium text, a 24px radius, and a round Dismiss button on the toasts that stay. They stack at the bottom centre instead of the bottom-right corner.
Why
The old toast was a small bordered card in the corner with 12px text, easy to miss beside the timeline, and an error read only as red text on the same card. The pill is the notice style we want across HyperFrames: one shape for every message, readable at a glance, out of the way of the panels.
Related work
None.
How
StudioToast: the pill (bg-text-0/text-bg-0, so it inverts with the theme), max 680px wide, long messages wrap. A click anywhere on an info toast dismisses it. Error toasts persist until dismissed, so a click on one does nothing (its text stays selectable for copying); they get a 36px round Dismiss button, and Escape works while it has focus.toastPersists(tone)inuseToastowns the "errors persist" rule; the hook and the pill both read it.StudioOverlayscentres the toasts in the room the feedback card leaves, so the two never cover each other. Up to 3 toasts, newest at the bottom, as before.cubic-bezier(0.32, 0.72, 0, 1); it leaves at once, with no exit animation. Reduced motion: no animation.--shadow-noticetoken intheme.css(colour literals stay in the token file). The feedback card keeps its own look; its surface helper moved into its file, its only user.Behaviour changes: an info toast has no Dismiss button any more (a click on it dismisses it), and a dismissed toast goes at once instead of after a 160ms fade.
Test plan
StudioToast.test.tsx(info toast dismisses on click and has no button; a click on an error toast keeps it up; its Dismiss dismisses it once). Mutations: dropping the info click, showing the button for every tone, hiding it for errors, and letting a click dismiss an error each fail the test that guards it.src/stylessuite (token gate, hex ratchet, theme),useBlockHandlers.test.tsx,tsc --noEmit,oxlint,oxfmt: green.showToast, at 1440x900 (dark and light) and 900x600 (dark; light was shot too), plus enter frames and reduced motion.Before
Dark, 1440: an info toast, a long error and a short error.
Light, 1440 (crop):
Dark, 900x600:
Enter, frames at 0, 40, 80, 120, 160 and 200ms:
After
Dark, 1440: the same three toasts.
Light, 1440 (crop):
Dark, 900x600:
Enter, frames at 0, 40, 80, 120, 160 and 200ms:
Reduced motion, the first frame (fully shown, no rise):
The notice style it matches, light and dark: