Open
Conversation
Contributor
Preview deploymentsHost Test Results 1 files ±0 1 suites ±0 1h 56m 53s ⏱️ - 1m 39s Results for commit 76f3ca3. ± Comparison against earlier commit 1aca5fb. Realm Server Test Results 1 files ± 0 1 suites ±0 18m 5s ⏱️ + 2m 6s Results for commit 76f3ca3. ± Comparison against earlier commit 1aca5fb. |
New PillFormatChooser component for the floating chrome bar: a single morphing capsule pill that follows the active format with drag-to-select across buttons, an outlined-gray hover preview that sits over the hovered button without committing, and compact mode (icon-only + tooltips) when the parent shrinks. Drag commits live on each crossing, so releasing on a different button keeps the dragged-to selection (the trailing synthetic click on the press-start button is suppressed). Format chooser wiring for "Form" (the auto-generated standard view): - 'form' is a synthetic chooser option inserted after 'edit' when the card has a custom edit template. It was reaching the renderer unrouted, so the preview rendered blank. - preview-panel and playground translate 'form' at the renderer boundary: format='edit' + codeRef=baseCardRef, the same mechanism interact mode's "Toggle Standard View" uses via stack-item's defaultCodeRef. The chooser highlight still sits on 'form'. Layout: card-renderer-format-chooser is now a full-width centering shell (left/right: 0; flex; justify-content: center; pointer-events: none on the shell, auto on the chooser) so the chooser's compact-mode detection has an honest "available width" signal. The dark capsule + border-radius now lives on the chooser itself.
The header's green bar + X-to-finish-editing is driven by @onFinishEditing being non-null. Previously only 'edit' triggered it; 'form' was treated as a non-editing format → grey header. Treat 'form' as edit-mode for the header in both preview-panel and playground-panel: onFinishEditing returns to isolated/default, and onEdit (the pencil) hides while in either editing format. This matches the visual treatment of interact mode's "Toggle Standard View".
burieberry
force-pushed
the
host-pill-format-chooser
branch
from
1aca5fb to
76f3ca3
Compare
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.
Demo
https://screen.studio/share/vCKDCvxI
Summary
New format selector for the code-mode preview + playground: a single morphing pill with drag-to-select, hover preview, and compact mode for narrow panels. Also wires the synthetic "Form" pill (auto-generated standard view) all the way through to the renderer.
Highlights
baseCardRefas the renderer's@codeRef). Previously the pill rendered blank.@onFinishEditingnow treats'form'like'edit', so the green CardHeader bar + X-to-finish-editing show up just like interact mode..card-renderer-format-chooseris now a full-width flex shell withpointer-events: none; the dark capsule + radius lives on the chooser itself. Required so compact-mode detection has an honest available-width signal (awidth: max-contentparent was creating a stuck-compact loop).Test plan
data-test-format-chooser="<fmt>"selectors).Known follow-ups