feat(prompt-field): add collapsed/expanded layout with animated transition - #6585
Draft
rubencarvalho wants to merge 5 commits into
Draft
feat(prompt-field): add collapsed/expanded layout with animated transition#6585rubencarvalho wants to merge 5 commits into
rubencarvalho wants to merge 5 commits into
Conversation
|
Contributor
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
rubencarvalho
force-pushed
the
ruben/feat-prompt-field-collapsed-expanded
branch
2 times, most recently
from
August 6, 2026 12:22
5a2bcb2 to
ca6c91f
Compare
…ition Adds an `expanded` boolean property to `swc-prompt-field`, matching the Figma design's collapsed/expanded variant naming. Defaults to the single-line collapsed pill (send button inline with the textarea); `expanded` renders the taller layout with a separate action bar (upload button + send/stop button on their own row). Also fixes a rendering bug uncovered while implementing this: the collapsed pill's border-radius used `corner-radius-full` (50%), which renders an ellipse on a non-square box instead of a stadium shape. Radius is now derived from half of the pill's own fixed block-size, mirroring the existing fix in linear-progress-base.css. The toggle between layouts is animated: box shape (border-radius, padding, gap) transitions directly, and the action bar's height animates via the calc-size() progressive-enhancement pattern already used in accordion-item.css. The send/stop button crossfades between its inline and action-bar positions; the inactive copy is marked inert + aria-hidden, following the same pattern as AccordionItem's collapsed content.
rubencarvalho
force-pushed
the
ruben/feat-prompt-field-collapsed-expanded
branch
from
August 6, 2026 13:28
ca6c91f to
f668f67
Compare
…duplicated+hidden Replaces the duplicate-button crossfade (one inline copy, one action-bar copy, inactive one marked inert/aria-hidden) with a single conditionally rendered button per layout. Simpler, and removes the class of bugs the duplication caused: ambiguous .swc-PromptField-send/-stop queries, inert-vs-focus interactions, and the compensating negative-margin hack needed to cancel the row's gap around the crossfading copy. The box shape and action bar height still animate on expand/collapse; only the button itself now appears/disappears instantly rather than fading, since there's no second instance to fade into.
…om property Adds --swc-prompt-field-max-block-size (default 40vh) to the textarea's max-block-size, combined with the existing max-rows cap via min() so whichever is smaller wins. Guards against max-rows worth of text overflowing the viewport on small/embedded surfaces; textareas already scroll internally once content exceeds this, so no extra overflow rule is needed.
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
1 participant
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
Adds an
expandedboolean property toswc-prompt-field, matching the collapsed/expanded variant naming used in the Figma AI Prompt Field spec.expanded: taller card with a separate action bar below the textarea (upload button + send/stop).expandedanimates smoothly: the box's padding/gap transition directly, and the action bar's height animates via thecalc-size()progressive-enhancement pattern already used inaccordion-item.css. The send/stop button itself is conditionally rendered in only one location at a time (not duplicated/hidden), so it has no separate fade of its own — it appears/disappears instantly as the surrounding box/action-bar reshapes around it, and.swc-PromptField-send/.swc-PromptField-stopstay unambiguous single-match selectors.corner-radius-800token in both layouts (no computed "pill" radius) — this originally computed a dynamic stadium radius from the collapsed row's height, which both risked theborder-radius: 50%-on-a-non-square-box ellipse bug (see below) and didn't match the reference implementation, which uses one constant radius regardless of layout.border-radius: token("corner-radius-full")resolves to50%, which renders an ellipse on a non-square box rather than a stadium shape (seelinear-progress-base.cssfor the same class of issue). Superseded by the constant-radius fix above.aria-labelledby) in the collapsed layout, matching the Figma mock, via the sharedswc-VisuallyHiddenutility.prompt-field.a11y.spec.ts), alongside the existing collapsed/default one.ThreeDotsIcon) — it reserves the spot for the pixel-loader idle/generating indicator, which is intentionally out of scope here.40vh(via--swc-prompt-field-max-block-size, overridable), combined with the existing max-rows cap viamin()— guards against max-rows worth of text overflowing small/embedded viewports.Branding colors (the
--brandOKLCH gradient system from the design spec's implementation) are intentionally out of scope for this PR.Motivation and context
Bringing the AI Prompt Field branding/behavior over to SWC; this PR is the first piece — the collapsed/expanded layout toggle — split out from the branding-colors work.
Related issue(s)
Screenshots (if appropriate)
Collapsed vs. expanded (see
Layoutstory under Options):Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Toggle expanded layout
expandedcontrol on and offCollapsed default has no upload button
+) button, no visible "Prompt" labelDevice review
Accessibility testing checklist
Keyboard (required — document steps below)
swc-prompt-field; confirm the textarea receives focus and Tab reaches exactly one send/stop button, matching the currently visible layoutexpandedand repeat; confirm Tab order updates immediately to the new layout's button, and (when expanded) also reaches the upload buttonScreen reader (required — document steps below)
expandedunset, navigate to the field with VoiceOver/NVDA; confirm the textarea's accessible name still resolves to "Prompt" (viaaria-labelledby) even though the label is visually hiddenexpandedand confirm the upload button ("Add attachment") becomes announced/reachable, and disappears again when collapsed