refactor(prompt-field): use swc-action-button for action buttons - #6615
refactor(prompt-field): use swc-action-button for action buttons#6615rubencarvalho wants to merge 4 commits into
Conversation
Replace the five bespoke native <button> elements (send, stop, upload, and the two artifact scroll chevrons) with <swc-action-button>, reproducing their looks through the component's custom properties: corner-radius-full for the round send/stop, corner-radius-800 for the scroll chevrons, plus background, content-color, and down-state-transform overrides. The scroll chevrons keep their fade mask: the ::before opaque panel stays on the host at z-index -1, behind the shadow-DOM button face, so no ::after repaint is needed. Accessible names move from aria-label to accessible-label (forwarded to the inner button). Scroll chevrons use swc-ui-icon; send, stop, and upload keep their existing SVG icons. The keyboard-nav handler now matches a focused chevron via a delegatesFocus -aware check (host or its shadow descendant) instead of strict identity, and the tests assert focus and accessible name accordingly.
|
📚 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 |
…m comment Replace the hand-rolled isChevron helper (getRootNode().host) with the existing deepContains() util already used elsewhere in this file for the same cross-shadow focus check. Drop the redundant scroll-chevron header comment; the ::before rule's own comment already explains the z-index/paint order.
1 participant
Description
Replaces the five bespoke native
<button>elements in the Prompt field pattern (send, stop, upload, and the two artifact scroll chevrons) with<swc-action-button>, reproducing their existing looks through the component's public custom properties. Net −65 lines.--swc-action-button-border-radius: corner-radius-fullplus background/content-color/down-state-transformoverrides.::beforeopaque panel stays on the host atz-index: -1, behind the shadow-DOM button face, so the old::afterrepaint is no longer needed (the face is a descendant that paints above the negative-z mask).aria-labeltoaccessible-label(the component forwards it to the inner<button>'saria-label).<swc-ui-icon icon="chevron">; send, stop, and upload keep their existing SVG icons.active === button), which breaks once the chevron is answc-action-buttonwithdelegatesFocus— focus lands on its inner shadow<button>, not the host. It now usesdeepContains(button, active), the util already used elsewhere in the file for the same cross-shadow check. The tests use the same idiom.Motivation and context
The Prompt field's action affordances were hand-rolled native buttons with ~180 lines of bespoke CSS, duplicating states (hover/focus/disabled/press) that
swc-action-buttonalready provides. Consolidating onto the shared component removes that surface and keeps the pattern consistent with the rest of the 2nd-gen set.Related issue(s)
Screenshots (if appropriate)
Send/stop circle geometry and the scroll-chevron mask compositing should be confirmed via Chromatic; expect a VRT re-baseline.
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Send and stop render as filled round buttons
generatingto see the stop buttonArtifact scroll chevrons page and mask correctly
Device review
Accessibility testing checklist
Keyboard (required — document steps below)
>) chevronaria-disabled, not thedisabledproperty) with no focus jumpScreen reader (required — document steps below)
aria-disabledat the strip ends