feat: Pagination web component#11811
Merged
cdrini merged 17 commits intointernetarchive:masterfrom Feb 13, 2026
Merged
Conversation
…e and package.json; update package-lock.json to include lit dependencies.
…; include script for lit-components in footer
…nation display and enhance design documentation with examples.
Resolved conflicts: - Makefile: use upstream's vite-lit.config.mjs naming - lit/index.js: keep both OlPagination and OLReadMore components - footer.html: use upstream's script attribute ordering - package.json: use upstream's vite-lit.config.mjs naming - page-design.less: combine index.less import with upstream's typography styles
…l; update styles in page-design.less for improved clarity and presentation. Added event handling for page selection and refined example structure for better user experience.
…ng for improved clarity and user experience. Updated pagination and colors sections with better organization and additional examples. Introduced new styles for design pattern headers and examples.
…eaning up HTML structure for improved maintainability and clarity.
…ing the build process and eliminating legacy support code.
…i18n support for button text and add a new example for height-based truncation.
…syntax, and update design.html examples to improve styling and consistency for the ol-read-more component.
for more information, see https://pre-commit.ci
lokesh
commented
Feb 4, 2026
| // Import components to register them as custom elements | ||
| import './OLReadMore.js'; | ||
| // Export components (importing also registers them as custom elements) | ||
| export { OLReadMore } from './OLReadMore.js'; |
Collaborator
Author
There was a problem hiding this comment.
This code change does not impact the existing implementation of ol-read-more, but switching to doing an export makes future testing, tree-shaking, and other programmatic tasks easier.
…unctions for the ol-colors, ol-pagination, and ol-read-more components. This improves localization capabilities and consistency across examples.
for more information, see https://pre-commit.ci
lokesh
added
the
Theme: Design
…ml to streamline content and improve clarity.
for more information, see https://pre-commit.ci
…er width, and focus outline, enhancing consistency and maintainability.
…ly, border width, and focus outline, enhancing consistency and maintainability." This reverts commit dec1d12.
cdrini
approved these changes
Feb 13, 2026
Comment on lines
+48
to
+52
| labelPreviousPage: { type: String, attribute: 'label-previous-page' }, | ||
| labelNextPage: { type: String, attribute: 'label-next-page' }, | ||
| labelGoToPage: { type: String, attribute: 'label-go-to-page' }, | ||
| labelCurrentPage: { type: String, attribute: 'label-current-page' }, | ||
| labelPagination: { type: String, attribute: 'label-pagination' }, |
Collaborator
There was a problem hiding this comment.
I wonder if we might want to come up with a lit-native i18n approach; this seems like it won't scale for most medium-complexity components. If there's a lit-way that would be great!
| * Handle keyboard navigation within the pagination | ||
| * @param {KeyboardEvent} e | ||
| */ | ||
| _handleKeyDown(e) { |
Collaborator
There was a problem hiding this comment.
Niiiice! Love the a11y improvements! This keyboard handling is very common, it would be to have a reusable thing for so that it can be easy for developers who aren't as familiar with a11y that's easy to toss in. Not a blocker.
bhardwajparth51
added a commit
to bhardwajparth51/openlibrary
that referenced
this pull request
Feb 17, 2026
* Enhance build process by adding support for lit-components in Makefile and package.json; update package-lock.json to include lit dependencies. * Add pagination component export and integrate it into the Pager macro; include script for lit-components in footer * Refactor design patterns in HTML and CSS; update Pager macro for pagination display and enhance design documentation with examples. * Enhance pagination component documentation and examples in design.html; update styles in page-design.less for improved clarity and presentation. Added event handling for page selection and refined example structure for better user experience. * Refactor design patterns in HTML and CSS; enhance structure and styling for improved clarity and user experience. Updated pagination and colors sections with better organization and additional examples. Introduced new styles for design pattern headers and examples. * Refactor Pager macro by removing redundant pagination examples and cleaning up HTML structure for improved maintainability and clarity. * Remove obsolete Vite configuration file for Lit components, streamlining the build process and eliminating legacy support code. * Update design.html to enhance 'ol-read-more' component examples with i18n support for button text and add a new example for height-based truncation. * Refactor OLReadMore component registration in index.js to use export syntax, and update design.html examples to improve styling and consistency for the ol-read-more component. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Enhance i18n support in design.html by wrapping text in translation functions for the ol-colors, ol-pagination, and ol-read-more components. This improves localization capabilities and consistency across examples. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Remove redundant description for the ol-colors component in design.html to streamline content and improve clarity. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Update OlPagination styles to use CSS variables for font family, border width, and focus outline, enhancing consistency and maintainability. * Revert "Update OlPagination styles to use CSS variables for font family, border width, and focus outline, enhancing consistency and maintainability." This reverts commit dec1d12. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
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.
<ol-pagination>web componentNote: This PR does not replace any usages of the existing pagination UI. That will be a follow-up.
Related issues:
Technical
Introduces new Lit web component with the following features:
Restructures design.html with interactive examples for component (event-based, URL-based, edge cases) and component (height-based, line-based, custom button text, background colors, small labels)
Testing
Visit URL /developers/design to see the new pagination component.
Screenshot
Existing pagination on the left, new on the right:
Old /developers/design on the left, and new on the right:
Stakeholders
@RayBB @mekarpeles @cdrini @jimchamp