transition from pills to badges - #166
Closed
simonpcouch wants to merge 10 commits into
Closed
Conversation
|
Preview deployed to Connect ( Deployed from commit 84ae179. |
|
Preview deployed to Connect ( Deployed from commit 84ae179. |
cpsievert
added a commit
that referenced
this pull request
Aug 27, 2026
Drops this branch's redrawn caution triangle in favor of the original yellow circle with the white exclamation glyph, matching what #166 proposes, so the two PRs differ only in mechanism, not artwork.
cpsievert
added a commit
that referenced
this pull request
Aug 27, 2026
An alternative to #166 built on shinychat's aside rendering; closes #148, closes #149. - Citations drop display="compact" and render as labeled identity asides: shinychat accumulates same-paragraph citations into one marker with a +N overflow and a carousel popover, instead of commons styling numbered markers itself. - Verified/Untrusted/citation markers render as bare icons (the label stays in the DOM for aria), with tone supplied only through shinychat's public --shiny-chat-aside-marker-* variables, so its own hover, focus, and expanded states keep working. Grouped markers get a stadium shape; bare icons stay circular. - Adopts #166's artwork: the warning icon's white glyph on a caution triangle (the familiar-signs idea from #149), and its quote-mark citation glyph (recolored slate, reframed for bare rendering). The aside's icon attribute carries the per-kind icon, so the popover title row shows it; the pill paints the uniform quote mark over it via CSS (a marked TRIAL block, deleted if shinychat gains a popover-icon attribute). - Provenance markers keep a one-shot pulse, disabled under prefers-reduced-motion.
cpsievert
added a commit
that referenced
this pull request
Aug 27, 2026
The bare slate quote glyph read as punctuation inline and broke the family's filled-sign-plus-white-glyph convention (shield, triangle). The citation marker is now Bootstrap Icons' quote glyph (MIT) in white on a mid-navy (#2e4a6b) rounded-square tile; the Untrusted triangle likewise adopts exclamation-triangle-fill, padded to a common viewBox. Plain paths throughout — no runtime font dependency, unlike #166's <text>-based citation mark. The Verified shield keeps its existing artwork. Pill tones move from slate to matching navy. Also drops the orphaned untrusted-icon.svg.
cpsievert
added a commit
that referenced
this pull request
Aug 27, 2026
Drops this branch's redrawn caution triangle in favor of the original yellow circle with the white exclamation glyph, matching what #166 proposes, so the two PRs differ only in mechanism, not artwork.
cpsievert
added a commit
that referenced
this pull request
Aug 27, 2026
An alternative to #166 built on shinychat's aside rendering; closes #148, closes #149. - Citations drop display="compact" and render as labeled identity asides: shinychat accumulates same-paragraph citations into one marker with a +N overflow and a carousel popover, instead of commons styling numbered markers itself. - Verified/Untrusted/citation markers render as bare icons (the label stays in the DOM for aria), with tone supplied only through shinychat's public --shiny-chat-aside-marker-* variables, so its own hover, focus, and expanded states keep working. Grouped markers get a stadium shape; bare icons stay circular. - Adopts #166's artwork: the warning icon's white glyph on a caution triangle (the familiar-signs idea from #149), and its quote-mark citation glyph (recolored slate, reframed for bare rendering). The aside's icon attribute carries the per-kind icon, so the popover title row shows it; the pill paints the uniform quote mark over it via CSS (a marked TRIAL block, deleted if shinychat gains a popover-icon attribute). - Provenance markers keep a one-shot pulse, disabled under prefers-reduced-motion.
cpsievert
added a commit
that referenced
this pull request
Aug 27, 2026
The bare slate quote glyph read as punctuation inline and broke the family's filled-sign-plus-white-glyph convention (shield, triangle). The citation marker is now Bootstrap Icons' quote glyph (MIT) in white on a mid-navy (#2e4a6b) rounded-square tile; the Untrusted triangle likewise adopts exclamation-triangle-fill, padded to a common viewBox. Plain paths throughout — no runtime font dependency, unlike #166's <text>-based citation mark. The Verified shield keeps its existing artwork. Pill tones move from slate to matching navy. Also drops the orphaned untrusted-icon.svg.
cpsievert
added a commit
that referenced
this pull request
Aug 27, 2026
Drops this branch's redrawn caution triangle in favor of the original yellow circle with the white exclamation glyph, matching what #166 proposes, so the two PRs differ only in mechanism, not artwork.
Collaborator
Author
|
Closing in favor of #180. |
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.
Closes #149 (and closes #148 as wontfix). Transitions from pills (and footnote syntax for cited responses) to a small badge. Green > Blue > Yellow, as a little icon rather than dot for accessibility. For the first second or so, the badge pulses.