Web component segmented control#12931
Draft
lokesh wants to merge 32 commits into
Draft
Conversation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
for more information, see https://pre-commit.ci
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Change scale start/end from 0.88 to 0.8 to match Ant Design's tooltip - Remove blur effect on tooltip-content during morph and exit states - Simplify content-enter keyframe to opacity-only fade Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Keep _activeInstance reference during _hide() so the next tooltip's _show() can force-close the outgoing one instantly. Previously the reference was cleared too early, causing both tooltips to be visible simultaneously during warm transitions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
for more information, see https://pre-commit.ci
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…component-tooltip
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
for more information, see https://pre-commit.ci
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
for more information, see https://pre-commit.ci
…ltip # Conflicts: # openlibrary/components/lit/index.js # openlibrary/i18n/messages.pot # static/css/page-design.css
- Use semantic design tokens in OlTooltip shadow styles and drop fallbacks: --dark-grey, --white, --line-height-snug, and a new --border-radius-tooltip token (the prior --grey-darker / --border-radius-small references did not exist, so their hardcoded fallbacks were silently rendering). - Add --border-radius-tooltip semantic token in border-radius.css. - Clear the static _activeInstance pointer in disconnectedCallback. - Tokenize .demo-btn in page-design.css and remove unused .demo-btn--small. - Drop hardcoded hex color from the tooltip rich-content demo.
Replace the multi-phase animation state machine with a single _visible boolean. Tooltips now appear (after a configurable show-delay, default 150ms, set 0 for instant) and disappear with no scale/fade animation. - Remove warm-mode handoff: the static cross-instance tracking (_lastHideTime, _lastRect, _activeInstance, WARM_WINDOW), the morph slide between adjacent tooltips, and _onTransitionEnd. Each tooltip is now independent — the old one hides instantly and the new one shows. - Remove all transitions, scale transforms, the content crossfade, and the prefers-reduced-motion block (nothing left to reduce). - Keep positioning (placement/flip/alignment/arrow), slots, a11y, Escape, and focus/touch handling. Consumer-facing props unchanged. - Update the design page description to match the new behavior.
- Add a 'Book hovercard' example to the design page demonstrating rich slotted content (Option A): structured markup in the content slot styled by page CSS (.book-tip__* in page-design.css). Light-DOM slotted nodes inherit color/font from the tooltip but get structural styles from the consuming page. - Make the directional arrow opt-in: replace the 'without-arrow' attribute with an 'arrow' boolean (hidden by default). The placement demo opts in to show direction. - Reduce the default offset from 8px to 4px so the tooltip sits closer to its trigger. - Fix syntax highlighting on the tooltip code samples: wrap them in <pre><code class="language-html"> to match the Prism setup used by the other design-page demos.
- Reduce the .example__output padding on the tooltip demos (32px/48px down to 16px, placement to 24px 16px) so the buttons aren't lost in whitespace. - Book hovercard demo now uses a real cover image trigger (.book-tip__trigger).
- Switch design page syntax highlighting to prism-tomorrow - Position book hovercards at the bottom, align covers to bottom edge - Add tabbable covers with a hover/focus box-shadow ring
for more information, see https://pre-commit.ci
Add a code snippet to the placement section showing placement + arrow usage, and update the book hovercard snippet to include the placement="bottom" arrow attributes the live demo actually uses.
design.html auto-merged (tooltip section retained alongside master's new Toast/Banner/Chip Group sections). messages.pot regenerated via scripts/i18n-messages extract.
Resolve conflicts in design.html and messages.pot by dropping i18n from the tooltip design demo, matching upstream's decision to make the developer-facing design page English-only. Regenerated messages.pot (no new translatable strings).
Tooltips are a hover/focus affordance, but on touch devices a tap fires both the trigger's action and the tooltip (via emulated mouseenter or tap-focus). Gate the show paths on (hover: hover) and (pointer: fine) so a tap just performs the action — matching the convention used across the other Lit components. This makes the touch-outside dismissal dead code, so remove it. Also hide the tooltip on scroll: the panel is positioned once at show time (position: fixed), so any scroll would otherwise strand it away from the trigger. And clear the stale data-side attribute on hide.
Builds on the web-component-tooltip branch. Adds a single-select
segmented control (a styled radio group) that shares ol-button's visual
language so same-size controls line up at the same height.
- New OlSegmentedControl Lit component (shadow DOM). Options are declared
as light-DOM <ol-segment value="…"> children, harvested into accessible
radios with roving tabindex and arrow/Home/End keyboard navigation.
Fires ol-segmented-control-change.
- New --control-height-{small,medium,large} tokens as the single source
of truth for control outer height; controls set `height` (not vertical
padding) with box-sizing: border-box so they align regardless of font
size, border, or content. Refactor ol-button.css to consume them.
- Pre-hydration FOUC reserve rules + hide <ol-segment> in ol-components.css.
- Design page: new segmented-control demo template, registered in the nav,
plus a "Control alignment" section that lines button and segmented
control up in a single row per size to verify equal heights.
- Generated custom-elements.json entry so the API table renders.
- Fix a Python 2 `except OSError, ValueError:` syntax error in design.py
that would otherwise break the design page on load.
Move buttons, the segmented control, and the select-popover trigger onto one visual language and a tighter height scale. - ol-button: default to secondary; render as a raised white pill (subtle border, --box-shadow-raised + inset specular highlight). Add an automatic disclosure chevron shown when the button is a popover/menu trigger (keys off aria-haspopup/aria-expanded), opt out with no-chevron. - ol-segmented-control: selected segment is now a raised white pill inside a light inset track; support markup (e.g. SVG icon) segments with a `label` attribute for the accessible name. - ol-select-popover: inject an <ol-button> as the default trigger and drop the bespoke trigger styles + chevron, so there is one chevron/trigger implementation shared with consumer-supplied ol-buttons. - tokens: add --control-surface and --box-shadow-raised; tighten --control-height-* (small/medium/large -> 26/32/38px). - design page: add icon segmented-control example, move Control alignment into a separate "playground" nav group, and extend the alignment check with select-popover, native input, and pagination rows.
for more information, see https://pre-commit.ci
…mented-control # Conflicts: # openlibrary/components/lit/OlSelectPopover.js # openlibrary/components/lit/custom-elements.json # openlibrary/components/lit/index.js # openlibrary/templates/design.html # static/css/components/ol-button.css
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.
Closes #
Technical
Testing
Screenshot
Stakeholders