Repository navigation
feat(remix): add toast action placement and stack a narrow toast's action - #318
Open
leoafarias wants to merge 3 commits into
Open
leoafarias wants to merge 3 commits into
leoafarias wants to merge 3 commits into
Conversation
RemixToast laid the message, action, and close button in one row, so a narrow toast or large text squeezed the message into a sliver. Measure the width the toast gets (parent constraints enforced by its style constraints, scaled by the text scale) and, below the breakpoint, move the action and close button to their own row under the message. Wider toasts keep the single row.
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Add RemixToastActionPlacement (inline, below) as ToastSpec.actionPlacement and the generated ToastStyler.actionPlacement. Being a spec field, a style can switch it with a Mix variant such as onBreakpoint. `below` puts the action under the title and description, aligned with their start, and top-aligns the icon, message, and close button so the close button stays at the trailing top corner. An inline toast that is too narrow for one row at the current text scale uses the same arrangement; the fallback keeps the existing width measurement and no longer moves the close button, or a toast without an action, anywhere. The stacked arrangement groups the message and action into one semantics node and keeps widget-order focus traversal, so assistive technology and Tab still reach the title, description, action, then close button.
RemixToast is now a StatefulWidget with the same constructor. It keeps the action and close button under GlobalKeys, so their elements, and the keyboard focus on them, survive a switch between the inline and stacked arrangements. Before, a resize, rotation, or text-scale change that crossed the breakpoint or the narrow cutoff re-created both buttons; focus fell to the route, the scope's focus-within state never cleared, the countdown stayed paused, and Escape no longer reached the toast. The narrow fallback now subtracts the container margin from the parent constraints before applying the style constraints, so a toast whose box is below the cutoff stacks even when its parent is wide enough. Reword the placement docs to what holds: the close button stays on the first line after the message, `inline` keeps the action in the row only while the message has room, and a toast with an inline action measures its width and so does not support intrinsic sizing. The docs example uses Breakpoint.maxWidth(768).
leoafarias
changed the title
This branch has not been deployed
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.
Description
RemixToastkept its icon, message, action, and close button in one row, so a narrow toast or large text squeezed the message to a sliver. This adds a style-driven action placement and a width-based fallback, so presets can choose the layout per breakpoint and narrow toasts stay readable.ToastSpec.actionPlacement/ToastStyler.actionPlacementwithRemixToastActionPlacement { inline, below }(null meansinline).belowputs the action under the title and description, aligned with their start; the icon, message, and close button align to the top, so the close button stays on the first line, after the message.inlinekeeps the action in the row while the message has room and otherwise uses thebelowarrangement.ToastStyler().onBreakpoint(Breakpoint.maxWidth(768), ToastStyler().actionPlacement(.below)).RemixToastis now aStatefulWidget(same constructor) that keeps its buttons underGlobalKeys, so keyboard focus survives a layout flip and the toast scope's Escape and timeout keep working.IntrinsicWidthorIntrinsicHeight; usebelowthere. Documented in the docs page and the CHANGELOG.Validation
belowandinline; the fallback by width, style max width, container margin, and text scale; a breakpoint variant; LTR and RTL geometry; semantics and Tab order; tapping both buttons;IntrinsicWidthforbelowand action-less toasts; element identity across layout flips; focus, Escape, and timeout inside a realRemixToastScopeafter a flip.remixsuite (2869),registry_sourcetoast and Vanilla tests (439),dart analyze(no new issues), rootdart formatcheck,melos run ci:checkswithdocs:check,open-code:apps:check: passed.Related Issues
None.
Checklist
///).Breaking Change