Open
Conversation
- Imported OLChip component in index.js. - Replaced span elements with ol-chip components in work_search_facets.html for better UI representation of facet entries. - Updated work_search_selected_facets.html to use ol-chip for selected facets, enhancing the display and interaction. - Modified CSS for facets to improve layout and styling, including flex properties for better responsiveness. - Added import for ol-chip styles in page-user.less to ensure proper styling is applied.
- Renamed event from 'chip-click' to 'ol-chip-select' for clarity. - Simplified CSS properties in OLChip for consistency and readability. - Adjusted padding and font sizes in ol-chip.less for better alignment. - Updated facet template links to use consistent capitalization for "More" and "Less".
Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # openlibrary/components/lit/index.js
- Introduced CSS variables for padding and icon sizes in OLChip for improved customization. - Updated styles for selected state and small size variations to enhance visual consistency. - Added comprehensive examples and documentation for the OLChip component in design.html, showcasing various use cases including default, selected, small size, and interactive toggle functionalities.
- Changed the color of the selected state in the OLChip component for better visibility. - Removed unused small size examples from design.html to streamline the documentation and improve clarity. - Added positioning and padding adjustments in legacy.less for better layout consistency.
…tion - Changed the event name from 'update:page' to 'ol-pagination-change' in the OlPagination component for better clarity and consistency. - Updated the event detail structure to include an object with the page number. - Revised design.html to reflect the new event name in examples, improving documentation accuracy. - Enhanced CSS styles in page-design.less for better layout and spacing in the design pattern library.
- Modified the condition for skipping empty facet counts to improve performance. - Introduced tooltips for facets in the selected facets template to enhance user experience. - Added a comment regarding the handling of the 'public_scan_b' facet for future consideration.
- Introduced the OLChipGroup component to enhance the grouping of chips in the UI. - Updated the RelatedSubjects macro to utilize OLChipGroup for better visual organization of subject links. - Imported the new OLChip component styles in the page-subject.less file for consistent styling.
- Port facet layout changes (flex, gap) from legacy.less to legacy.css - Port h4.facetHead styling (inline-flex, .facet-icon) from headings.less to headings.css - Convert page-design.css from LESS syntax to native CSS (flat selectors, CSS custom properties) - Create ol-chip.css from ol-chip.less and add imports to page-subject.css and page-user.css - Resolve all merge conflicts from LESS-to-CSS migration Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ight for better alignment
for more information, see https://pre-commit.ci
The facet tooltips (e.g. "Written in", "Published by") were set via the title attribute on the host element, which screen readers can't reach inside shadow DOM. Add a chip-label property that forwards as aria-label to the inner <a>/<button>, so assistive tech announces the full context like "Written in: English". Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Modify .stylelintrc.json to allow specific ol- types in selector-type-no-unknown rule. - Remove unused import for ol-chip.css in page-user.css to streamline styles. - Change color property in h4.facetHead from a hex value to a CSS variable for better maintainability.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
for more information, see https://pre-commit.ci
…pGroup for accessibility
…ct.css. Add pre-hydration styles for ol-chip and ol-read-more components in head.html to prevent layout shifts.
- Consolidate check and close icons into a single _renderIcons method. - Update CSS class names for icons to improve clarity and maintainability. - Implement hover effects to toggle icon visibility based on chip selection state.
…hover effects - Rename CSS classes for clarity, changing .icon to .icon-slot and introducing .icon-carousel. - Implement a carousel effect for icons on hover, enhancing user interaction. - Adjust icon visibility and transitions to create a smoother experience when selecting the chip.
- Add a new section on compound components in web-components.md to clarify usage and best practices. - Update README.md to include a link to the new design documentation. - Refine OLChip styles to improve hover effects and responsiveness, ensuring better user interaction across devices. - Update tooltip translations in work_search_selected_facets.html for improved accessibility.
for more information, see https://pre-commit.ci
These changes now live in dedicated branches for smaller PRs: - docs/ai/ updates → ai-design branch - OlPagination event rename → pagination-event branch Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
for more information, see https://pre-commit.ci
# Conflicts: # openlibrary/templates/design.html
for more information, see https://pre-commit.ci
- Modified the search form in work_search.html to include an additional class 'search-row'. - Added CSS rules for the 'search-row' class to provide a margin-bottom of 8px for better spacing.
…t and will-change, scope p rule Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
lokesh
commented
Mar 17, 2026
| href: { type: String }, | ||
| count: { type: String }, | ||
| chipLabel: { type: String, attribute: 'chip-label' }, | ||
| accessibleLabel: { type: String, attribute: 'accessible-label' }, |
Collaborator
Author
There was a problem hiding this comment.
Why accessible-label instead of aria-label?
Native HTML attributes should always behave predictably on custom elements — aria-label on a host element should apply to that element, not get silently forwarded to an inner child. Using a distinct prop name makes it clear this is custom behavior that targets the <a> or <button> inside the shadow DOM.
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.
tag.mp4
This makes progress on both the following tasks:
Adds an
ol-chipweb component and uses it to replace the plain text/link facets on search results pages and the related subjects section on subject pages.To limit scope, a follow-up PR will be used to replace other tags/chips and remove old code.
Changes
New components:
OLChip— A pill-shaped interactive chip that supports selected state (with checkmark icon), optional count badge, link mode (href), small/medium sizes, and accessible labels viachip-labelprop. Firesol-chip-selectevent on click.OLChipGroup— A flex-wrap container for consistent chip spacing.Template updates:
work_search_facets.html) — Facet entries now render as<ol-chip size="small">work_search_selected_facets.html) — Selected filters render as<ol-chip selected>with accessiblechip-labeltooltips (e.g. "Written in: English").RelatedSubjects.html) — Subject links wrapped in<ol-chip-group>with small chips.design.html) — Added chip examples (default, selected, small, with count, as link, interactive toggle). Restructured page with sidebar nav.Styling & layout:
head.htmlto prevent layout shift before Lit hydrates.page-design.csswith sidebar nav layout for the design pattern library.legacy.cssandheadings.css.Technical
chip-labelprop forwards asaria-labelto the inner<a>/<button>Screenshots
Testing
/search?q=dogs— facets in the sidebar should render as small chips/subjects/fiction— related subjects should render as chips/developers/design— chip examples section should be interactiveStakeholders
@mekarpeles @cdrini @jimchamp @RayBB