Skip to content

docs(pagination): add developer implementation guidelines #2481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bennypowers merged 3 commits into from
Jul 20, 2025
Merged

docs(pagination): add developer implementation guidelines #2481

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb57966
docs(pagination): add implementation guidelines
adamjohnson Jul 17, 2025
20ba709
Merge branch 'main' into docs/pagination/developer-docs
bennypowers Jul 20, 2025
2938022
Merge branch 'main' into docs/pagination/developer-docs
bennypowers Jul 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions elements/rh-pagination/docs/30-code.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
## Implementation guidelines

* `<rh-pagination>` must have a nested `<ol>` element with at least one nested `<li>` and `<a>` element.
* Pagination URLs must start with a hash, eg `#2`.
* We recommend structuring your pagination URL as follows:
* `example.redhat.com/search/#2`
* If your URL contains query parameters (eg: `?search=test`), ensure the hash comes after the query parameter.
* Ensure the hash for the `href` in the first page of the pagination is `#` and not `#1`.
* The active page is set in this order:
1. Looking for an `aria-current="page"` attribute on a `<a>` tag
1. Looking in the URL for a hash, eg `/search/#2`
1. If neither of these are set and no hashes exist in the URL, `<rh-pagination>` sets the current page to the first `<a>` in the list
1. If `<rh-pagination>` cannot determine the current link from these conditions, it will log a message to the console saying, "Could not determine current link."