Repository navigation
fix(webkit): render the paginator page buttons as one segmented strip - #975
Merged
Merged
Conversation
The page buttons were detached, individually-rounded chips with a gap between them. They now sit in a single bordered container at zero gap, rounding only the outer corners at the two ends, which is the strip the design calls for. - previous/next are icon-only and carry no surface of their own; number/more keep var(--bg-surface). Hover and active are mutually exclusive, so a pressed button reads one step below hover instead of stacking both layers. - The rows-per-page select drops to 28px to match the strip height, and the page-info text moves to .text-body-xs. - Disabled keeps the kind's own surface and only mutes the foreground, so a disabled control no longer punches a lighter hole in the strip.
…ed strip The paginator footer row is 30px instead of 32px (28px buttons plus the strip border, replacing the 32px page-size select that used to drive the height), so the three Paginator stories and the seven Table stories that render a footer paginator all shift by 2px. The four Table stories with no paginator (compact-header, compact-header-with-sticky-column, composition, empty) are untouched.
lucas-langeloh-azion
approved these changes
Sep 17, 2026
isaque-bock-azion
approved these changes
Sep 17, 2026
Merged
gabriel-lisboa-azion
added a commit
that referenced
this pull request
Sep 21, 2026
demo/vue-sample had drifted 540 ahead / 31 behind main while most of its webkit work was reviewed and landed upstream (#941 command-menu, #942 GlobalHeader placements, #943 NavigationMenu, #952 Menu, #960 sidebar collapse, #973 floating-panel placement, #975 paginator, #977 templates exports, #921 amount ladder), after which main swept comments (#951) and reworked the CLI onto a derived bundle (#968/#970). Main is the source for everything the two share. Of the 28 conflicted source files, 17 differed from main only in comments — their code was byte-identical — and 6 more were genuinely newer on main, so all 23 take main verbatim, including the use-placement TypeScript rewrite that replaces the old index.js. Three carve-outs keep demo work main does not have yet: - sidebar: main's CSS-driven collapse is the base; the `side` axis is re-applied on top of it as data-[side=end] variants rather than the JS edge map it used to be, and the drag sign moves into the rail composable. The one test that asserted the removed inline transform now asserts the panel's published edge, since the direction is CSS the unstyled test env cannot see. - theme: texts.data.js keeps demo's 13 extra text-wrap and 10 extra tracking declarations (PR #982, in flight). Both sides carry the same 34 entries, so an entry count would not have caught the loss. - doc-prose keeps its chrome-padding fix (PR #981, in flight). catalog.json, authoring-baseline.json, the theme dist and the lockfile are regenerated rather than hand-resolved; the 13 conflicted visual baselines take main's and are regenerated from CI next. Verified: every file main touched is byte-identical to main except the 22 accounted for above; 2364 browser tests, 179 toolkit tests, lint, vue-tsc, 99.98% type coverage, both ratchets, the Storybook build and the webkit-sample build all pass.
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
4 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.
Summary
previous/nextare icon-only and carry no surface of their own;number/morekeepvar(--bg-surface). Hover and active became mutually exclusive, so a pressed button reads one step below hover instead of stacking both layers. Disabled now keeps the kind's own surface and only mutes the foreground, so it no longer punches a lighter hole in the strip..text-body-xs. The spec and story were updated to match.How to test
pnpm --filter @aziontech/webkit test— the 37 assertions inpaginator.test.tspass (verified locally in Chromium).pnpm storybook:dev, open Components / Data / Paginator → Default. The page buttons read as one continuous bordered strip with no gaps; only the leftmost and rightmost corners are rounded. Previous/Next are chevrons with no text label.Paginatorroot, so the disabled row shows disabled controls that keep their surface and only mute their glyph.Notes
DefaultandButtonsstories change appearance, so the visual-regression job will fail until aregen-baselinespass lands on this branch. Happy to run it once CI reports.previous/nextalready rendered their default slot only forkind="number"onmain, so dropping the slot text from the examples matches existing behaviour — the accessible name comes fromaria-label, as the data-driven root already does.