facebook / facebook/astryx

Pagination: editable current-page input variant, first/last double-chevron buttons, and configurable page label

Open
#4,248 0 comments 0 reactions 0 assignees View on GitHub
component enhancement needs-scoping
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.