Voice widget refinements: tooltips, search default, badge spacing, stop icon, page size alignment#407
Closed
fern-api[bot] wants to merge 27 commits into
Closed
Conversation
… badge, hide group tabs
- Search bar now defaults to hidden (opt-in via filters={{ search: true }})
- New requireProvider prop: shows placeholder until a provider is selected
- Reduced badge-to-title vertical gap (margin: -0.25rem -0.15rem -0.45rem 0)
- Group-by toggle hidden when provider is locked or requireProvider is set
- Other filters (language, gender, pageSize) hidden while awaiting provider
- TTS overview page updated with requireProvider full-catalog widget
Co-Authored-By: bot_apk <apk@cognition.ai>
Contributor
Author
|
Requested by: Devon White |
Contributor
…der widget Co-Authored-By: bot_apk <apk@cognition.ai>
Co-Authored-By: bot_apk <apk@cognition.ai>
Co-Authored-By: bot_apk <apk@cognition.ai>
Co-Authored-By: bot_apk <apk@cognition.ai>
Co-Authored-By: bot_apk <apk@cognition.ai>
Co-Authored-By: bot_apk <apk@cognition.ai>
fern-api
Bot
changed the title
…outside card Co-Authored-By: bot_apk <apk@cognition.ai>
Co-Authored-By: bot_apk <apk@cognition.ai>
…, dot meta, eq playing state)
…ored tooltip, focus access)
…, sticky comment)
… hover, single-page gaps)
…ugs name, matching count wording)
…radius, stale comments)
…eep Copy config single-line
…mes, friendly meta - Responsive minmax(300px,1fr) grid: equal-width cards at every density (fixes the unequal-width bug from bare 1fr); auto-fill keeps partial rows equal-size. - Display-time cleanup (commented as pipeline-bound): name split on space-bounded dash (0 false positives), Intl.DisplayNames language, normalized gender, per-provider model. - Footer: provider + real model as neutral inline-code (never --code-fg, which equals the accent in both themes); container-query copy switch (labeled <=2 cols, icon at 3+). - Filter out no-preview voices; delete the disabled-card state. - Loading skeleton mirrors the new card at matching height (zero shift) + fade/rise-in. - a11y: aria-labels, focusable aria-describedby tooltip, :focus-visible rings, AA contrast. - Light/dark verified against real CDN data; tsc clean.
…in fonts - Drop the card's hover/focus z-index. It made the whole card a stacking context above the sticky toolbar (z-index:2), so a card scrolled partly under the toolbar painted OVER it on hover. The card now stays below the toolbar; the sample-text popover (z-index:30) still escapes above it on its own via the .vw query-container stacking context. Verified: cardZ→auto, popover still shows. - Inherit the docs body font (Lexend + its fallback chain) instead of overriding with system-ui, whose Firefox fallback tofu'd non-Latin voice names (Arabic, Amharic/Ethiopic). Verified rendering.
…apping Remove MODEL_RULES/normalizeModel (and the cap/titleWords helpers used only by them) — the footer now renders r.model as-is instead of a title-cased/stripped variant. The raw value was always what copy/title carried anyway, so this just shows the real model string everywhere.
The ▶ (U+25B6) and ■ (U+25A0) characters are emoji-capable and render as an OS color emoji on some platforms (e.g. macOS Firefox) when no text font in the stack covers them. Replace them with inline SVG (IconPlay/IconStop, currentColor-filled) so the play/stop glyph is a crisp monochrome icon everywhere; the equalizer playing animation is unchanged.
Collaborator
|
Closing — the card-style design was not chosen. The Voice Widget ships in its rows layout via #414. |
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.
Summary
Voice widget refinements based on review feedback:
Search bar off by default —
showFilter("search")returnsfalseunless explicitly opted in viafilters={{ search: true }}.Sample text → tooltip — The card transcript is now behind a 💬 hover tooltip instead of inline text, making cards significantly more compact.
Tighter badge spacing —
.vw-badgemargin adjusted to reduce the vertical gap between badge and play button/title without overlapping.Stop icon instead of pause — Playing state now shows ■ (stop) instead of ❚❚ (pause), matching the actual stop-and-restart behavior.
Page sizes divisible by columns — Per-page options filtered to multiples of the column count (default 3), so the grid always fills completely.
Group-by tabs hidden when provider is locked — Suppressed when
providerprop is set, since grouping by provider is redundant.TTS overview simplified — Shows a single flat
<VoiceWidget groupBy="none" />with all providers and filters.Requested by: Fern Support