docs: add development research document for pagination#6270
Open
michaelmkraus wants to merge 10 commits into
Open
docs: add development research document for pagination#6270michaelmkraus wants to merge 10 commits into
michaelmkraus wants to merge 10 commits into
Conversation
github-project-automation
Bot
moved this to 🏗 In progress
in UX Engineering Team Backlog
|
michaelmkraus
moved this from 🏗 In progress
to 🎁 Ready for review
in UX Engineering Team Backlog
sarahbrng
moved this from 🎁 Ready for review
to 👀 Actively In Review
in UX Engineering Team Backlog
sarahbrng
previously approved these changes
Mar 10, 2026
github-project-automation
Bot
moved this from 👀 Actively In Review
to ⏰ready for release
in UX Engineering Team Backlog
sarahbrng
previously approved these changes
Mar 10, 2026
mfranzke
reviewed
Mar 10, 2026
mfranzke
reviewed
Mar 10, 2026
mfranzke
reviewed
Mar 10, 2026
mfranzke
reviewed
Mar 10, 2026
mfranzke
reviewed
Mar 10, 2026
Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
…ocs-research-pagination
|
|
||
| ## Overview 🔍 | ||
|
|
||
| The following overview consolidates the basic data of the 15 design systems. It specifies the exact naming of the pagination component in the respective system, documents the underlying technological basis, and list the most important architectural findings. |
| | **SNCF WCS** | `Pagination` | Web Components (StencilJS), Angular, React | ([https://wcs.dev.sncf/](https://wcs.dev.sncf/)) | Relies on standardized design tokens for consistent group styling across different frameworks. Separates visual representation from data state. | | ||
| | **Telefonica Mistica** | `Pagination` | React | [Mistica](https://github.com/Telefonica/mistica-web) | Deep theming support (e.g., Movistar Skin). As a purely presentational component, it relies on external state management in the parent container. | | ||
| | **Telekom Scale** | `scale-pagination` | Web Components (StencilJS) | ([https://telekom.github.io/scale/](https://telekom.github.io/scale/)) | Implements specific micro-interactions (1.05x hover scale) as well as detailed, integrated event tracking (`pagination.next_click`). | | ||
| | **Washington Post WPDS** | `Pagination` | React | ([https://build.washingtonpost.com/](https://www.google.com/search?q=https://build.washingtonpost.com/)) | Limits visual slots to a maximum of 7 elements. Designed for content-heavy environments (article archives, search results) to avoid visual overload with infinite search results. | |
|
|
||
| Several abstract architectural patterns can be derived and considered as practices for developing a scalable pagination component. | ||
| Beyond basic ARIA labels, semantic HTML plays a crucial role in pagination. It is an industry best practice to implement the `rel="next"` and `rel="prev"` HTML attributes on the respective pagination links. These attributes clarify the sequential relationship between pages for search engines, improve structural accessibility, and enable modern browsers to prefetch upcoming content, significantly improving the perceived performance of the application. | ||
| CSS functions like `sibling-index()` and `sibling-count()` can be utilized to dynamically style pagination items. However, because cross-browser support is still limited. |
|
|
||
| ## Conclusion 🏁 | ||
|
|
||
| Implementing pagination is more than visually rendering a numeric HTML list. It represents a critical interface between backend, frontend routing architecture, and cognitive ergonomics. The 15 examined design systems provide a consistent picture of standards, which can be summarized in three main point: |
| * **Reactive Responsive Design:** Automatic reduction of `siblingCount` to 0 on mobile viewports to prevent horizontal scrolling (collapsing the layout from `< 1... 4 5 6... 9 >` to `< 1... 5... 9 >`). | ||
| * **Truncation (Ellipsis):** Implementation of robust logic for omission marks (`...`). Introduction of flexible props `siblingCount` (pages next to the current page) and `boundaryCount` (pages at the outer edges). | ||
| * **Full Internationalization (i18n):** Architecture for seamless translatability of all screen reader texts and text nodes (e.g., "Next Page", "Page 4 of 10"). | ||
| * **Sequential Relationship:** include the `rel="next"` and `rel="prev"` attributes on the 'Next' and 'Previous' anchor tags to clarify the sequential relationship of the pages. |
|
|
||
| ## Overview 🔍 | ||
|
|
||
| The following overview consolidates the basic data of the 15 design systems. It specifies the exact naming of the pagination component in the respective system, documents the underlying technological basis, and list the most important architectural findings. |
| | **SNCF WCS** | `Pagination` | Web Components (StencilJS), Angular, React | ([https://wcs.dev.sncf/](https://wcs.dev.sncf/)) | Relies on standardized design tokens for consistent group styling across different frameworks. Separates visual representation from data state. | | ||
| | **Telefonica Mistica** | `Pagination` | React | [Mistica](https://github.com/Telefonica/mistica-web) | Deep theming support (e.g., Movistar Skin). As a purely presentational component, it relies on external state management in the parent container. | | ||
| | **Telekom Scale** | `scale-pagination` | Web Components (StencilJS) | ([https://telekom.github.io/scale/](https://telekom.github.io/scale/)) | Implements specific micro-interactions (1.05x hover scale) as well as detailed, integrated event tracking (`pagination.next_click`). | | ||
| | **Washington Post WPDS** | `Pagination` | React | ([https://build.washingtonpost.com/](https://www.google.com/search?q=https://build.washingtonpost.com/)) | Limits visual slots to a maximum of 7 elements. Designed for content-heavy environments (article archives, search results) to avoid visual overload with infinite search results. | |
|
|
||
| Several abstract architectural patterns can be derived and considered as practices for developing a scalable pagination component. | ||
| Beyond basic ARIA labels, semantic HTML plays a crucial role in pagination. It is an industry best practice to implement the `rel="next"` and `rel="prev"` HTML attributes on the respective pagination links. These attributes clarify the sequential relationship between pages for search engines, improve structural accessibility, and enable modern browsers to prefetch upcoming content, significantly improving the perceived performance of the application. | ||
| CSS functions like `sibling-index()` and `sibling-count()` can be utilized to dynamically style pagination items. However, because cross-browser support is still limited. |
|
|
||
| ## Conclusion 🏁 | ||
|
|
||
| Implementing pagination is more than visually rendering a numeric HTML list. It represents a critical interface between backend, frontend routing architecture, and cognitive ergonomics. The 15 examined design systems provide a consistent picture of standards, which can be summarized in three main point: |
| * **Reactive Responsive Design:** Automatic reduction of `siblingCount` to 0 on mobile viewports to prevent horizontal scrolling (collapsing the layout from `< 1... 4 5 6... 9 >` to `< 1... 5... 9 >`). | ||
| * **Truncation (Ellipsis):** Implementation of robust logic for omission marks (`...`). Introduction of flexible props `siblingCount` (pages next to the current page) and `boundaryCount` (pages at the outer edges). | ||
| * **Full Internationalization (i18n):** Architecture for seamless translatability of all screen reader texts and text nodes (e.g., "Next Page", "Page 4 of 10"). | ||
| * **Sequential Relationship:** include the `rel="next"` and `rel="prev"` attributes on the 'Next' and 'Previous' anchor tags to clarify the sequential relationship of the pages. |
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
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.
Proposed changes
resolves # (issue number)
Types of changes
🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/docs-research-pagination