Pagination: editable current-page input variant, first/last double-chevron buttons, and configurable page label
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 1.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
## Summary
Three enhancements to `Pagination` for parity with common internal pagination patterns. Two are additive; one is a small labeling fix.
## Current state
`Pagination` today has `variant: 'pages' | 'count' | 'compact' | 'none'` (extensible via `PaginationVariantMap` module augmentation) plus prev/next buttons. `compact` renders **"Page X of Y"** as static text. The visible "Page" word comes from the i18n key `@astryx.pagination.pageOfTotal`; the `label` prop is the **accessible nav-landmark label** (aria), not the visible word.
## Requests
### 1. Editable current-page variant (compact + text input)
A variant like `compact` but where the current page is an **editable text input** — the user can type a page number and jump to it (Enter / blur commits), instead of only reading "Page X of Y". Effectively "Page [__] of Y" where `[__]` is a small number input bound to `page`/`onChange`.
- Should validate/clamp to `1..totalPages` and ignore invalid input (mirror the input-family pending-value handling, e.g. how NumberInput/DateInput handle pending + commit).
- Likely a new `variant` value (augment `PaginationVariantMap`, e.g. `input`) rather than a boolean, to stay consistent with the existing variant axis.
### 2. First / last page buttons (double-chevron) at the edges
An opt-in to render **first-page** and **last-page** buttons at the outer edges, using **double-chevron** icons (e.g. `chevronDoubleLeft` / `chevronDoubleRight` from the icon registry — verify exact names), jumping to page 1 and `totalPages`.
- Opt-in prop (e.g. `hasFirstLast?: boolean`, default `false` — non-breaking). Disabled state at the boundaries (first-page button disabled on page 1, last on the final page), matching the prev/next disabled behavior.
- Works across the relevant variants (at least `pages` and the new input variant); decide interaction with `none`.
### 3. Configurable "Page" label
Make the visible **"Page"** word (currently hardcoded via `@astryx.pagination.pageOfTotal`) configurable, so consumers can relabel it (e.g. "Step", "Slide", localized/custom wording) without overriding i18n globally.
- This is distinct from the existing `label` prop (that's the aria nav-landmark name). Add a separate prop for the visible page-word (or a small label-set), and keep the i18n default.
- Consider: does this also affect the `count`/`compact` text and the new input variant consistently?
## Considerations
- Prefer reusing the existing `variant` extensibility + the input-family pending/commit conventions (API/value reuse over bespoke logic).
- a11y: the editable page input needs an accessible name (reuse `@astryx.pagination.goToPage`), Enter-to-commit, and the announce region (`pageAnnounce`) should still fire on jump. First/last buttons need aria-labels + disabled-at-boundary.
- Non-breaking: new variant + `hasFirstLast` + label prop are all additive; defaults unchanged.
## Acceptance
- A `Pagination` variant with an editable current-page input that jumps on commit (validated/clamped).
- Opt-in first/last double-chevron buttons with correct disabled states + aria.
- A configurable visible "Page" label distinct from the aria landmark `label`.
- Non-breaking defaults; tests + stories + docs; API change → follows the spec protocol.
Contributor guide
Research direction
Start at the Pagination component and its existing pages, count, compact, and none variants. Compare NumberInput and DateInput for pending-value and commit behavior, then inspect the pageOfTotal, goToPage, pageAnnounce, and icon-registry entry points; done means the three additive options work with tests, stories, documentation, and unchanged defaults.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, design, frontend, internationalization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100