Add OlPopover Lit web component#12126
Open
lokesh wants to merge 11 commits intointernetarchive:masterfrom
Open
Add OlPopover Lit web component#12126lokesh wants to merge 11 commits intointernetarchive:masterfrom
lokesh wants to merge 11 commits intointernetarchive:masterfrom
Conversation
Add a reusable popover component (ol-popover) with fixed positioning, viewport-aware flipping/shifting, mobile bottom tray, focus trapping, and animated open/close with reduced-motion support. Includes demo section on the design pattern library page. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
for more information, see https://pre-commit.ci
Remove flex layout that was causing all design pattern sections to render side-by-side. Add max-width, overflow handling on code blocks, and drop the unused .design-pattern__header fixed-width column. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove z-index from #test-body-mobile so fixed-position overlays (popover backdrop, panels) can render above the sticky header on mobile. Add isolation:isolate to carousel and dropper components to contain their internal z-index layers. Adjust popover backdrop opacity to 0.3. 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>
Resolve conflicts in lit/index.js, design.html, and page-design.css: - Keep both popover and chip exports - Integrate popover demo into upstream's redesigned design page layout - Retain upstream's nav/layout CSS additions Also update design page: add Popover to side nav, rename to "Web Component Library", remove Components heading, adjust nav padding. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Applies a 2px backdrop-filter blur to the mobile tray overlay, transitioning alongside opacity for a polished feel. Includes -webkit-backdrop-filter for iOS Safari support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
lokesh
force-pushed
the
web-component-popover
branch
from
40d66c5 to
910fcf3
Compare
for more information, see https://pre-commit.ci
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
3 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.
Adds a reusable popover component.
This component will be utilized in our upcoming inline editing feature. In this PR it is demoed on the developers/design page.
Technical
ol-popover, a reusable Lit popover component with fixed positioning, viewport-aware flip/shift, mobile bottom tray w/drag to close support, focus trapping, and animated open/close/developers/design)Testing
/developers/designand verify the popover demos render and open/close correctlybottom-start,top-center) flip when near viewport edgesScreenshots
popover-desktop.mp4
popover-mobile.mp4
Stakeholders
@mekarpeles @cdrini @jimchamp