feat(pagination) - update pagination component to use new SHINE design system by ttaylor-stack · Pull Request #2035 · StackExchange/Stacks

ttaylor-stack · 2025-11-04T17:45:33Z

Story: https://stackoverflow.atlassian.net/browse/SPARK-73

Updated the pagination component in classic and svelte.

NOTE: I added a new assertion function in assertions.ts. The logic looks sound to me and the test is passing but could it be double checked to ensure its correct. cc @giamir

NOTE: Will need to update color of nav buttons to tonal once button changes are in

changeset-bot · 2025-11-04T17:45:37Z

🦋 Changeset detected

Latest commit: 02c6935

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-11-04T17:45:38Z

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	`02c6935`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/691cf89c93dceb0008854a3c
😎 Deploy Preview	https://deploy-preview-2035--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-04T17:45:39Z

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	`02c6935`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/691cf89c7429e2000826f58b
😎 Deploy Preview	https://deploy-preview-2035--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

….com/StackExchange/Stacks into spark-73/update-pagination-component

dancormier · 2025-11-06T21:48:19Z

+        --_pa-item-bg-hover: #F0EFED;
        --_pa-item-bc-hover: var(--bc-darker);
        --_pa-item-fc-hover: var(--fc-dark);
+        --_pa-item-bb: var(--su-static0); 


--su-static0 doesn't exist so 0 should be used instead. That said, I noticed a layout shift related to this border width that can be addressed with a few tweaks.

I suggest always having a bottom border on the pagination item where the color is set with one of these sort of custom properties. I'd suggest having the default color be transparent and and set to black* on the selected pagination item. with a consistent width around the pagination item to prevent layout shift.

* I'm not sure if this updated component is intended to get theme colors. I've asked a question on the figma here).

Layout shift related to the focus state as well (shifts the number horizontally a bit). I think the focused state width is larger than non-focused width. I'd suggest adding some margin to non-focused state so it matches the same width — like an invisible container/box for each numbered item that's always ~20px and we remove the gutter spacing in between the items (spacing attaching to individual item itself.

CGuindon · 2025-11-07T18:13:14Z

+1 to Dan's comments, will review again after those get resolved

giamir · 2025-11-12T15:45:14Z

    },
 };

+const WCAGBoxShadowContrast: AdditionalAssertion = {


I am working on the Navigation component which have a similar way to highlight selected state but in there we won't be able to use the box shadow directly to the element. Instead we will likely need a pseudo element. All of this to say that it might be sensible to remove the check all together from this PR and have this code you created in a branch and linked to a new ticket with context. The assertion we have at the moment is too specific and should probably be generalized. If we cannot do it in a sensible way maybe even accept that it is not worth testing.

In a nutshell my recommendation would be to extract this in a new branch and create a related ticket for the backlog. Thanks @ttaylor-stack for experimenting with this. ❤️

Thank you, I'll do that now

This ticket has been created in the backlog https://stackoverflow.atlassian.net/browse/SPARK-110

….com/StackExchange/Stacks into spark-73/update-pagination-component

CGuindon

The "Prev" should be replaced by an arrow button (like we do on the right side) but pointed left.
The arrows for Prev/Next should use a button component and be styled with .s-btn .s-btn__filled .s-btn__muted. It will have the grey circle on default (not just hover like the numbers). (only an issue in Svelte not Classic)

dancormier

Thanks for your work here @ttaylor-stack. I have a few suggestions mostly around documentation and the "next"/"previous" buttons. Let me know if anything needs clarification or if you want to pair up on my suggestions.

dancormier · 2025-11-14T16:59:56Z

+            background-color: var(--_pa-item-bg);
+        }
+        border-radius: var(--_pa-item-br);
+        box-shadow: var(--_pa-item-bs);


@giamir implemented a similar selected state for the navigation component that I think could be a more reliable approach.

Instead of using box-shadow, he's using a pseudo-element (:before) to achieve the bottom border. The implementation here would be slightly different. We'd want it to:

Be slightly outside the element (so top: 100% instead of bottom: 0)

Only apply when :not(:hover) and :not(focus-visible)

We shouldn't need any pseudo-private custom properties for this since the style shouldn't change with different variants/modifiers

Let me know if this needs clarification or if you want any feedback 🙂

dancormier · 2025-11-14T17:08:33Z

+            <a class="s-pagination--item s-pagination--item__nav" href="…">
+                {% icon "ArrowRight" %}


The descriptive text in span.v-visible-sr should be something like next page

dancormier · 2025-11-14T17:09:25Z

Since this new design includes custom styles for next/previous, I'd suggest including a "←" button in the example with a page between the first and last selected. Something like this:

dancormier · 2025-11-14T17:11:17Z

@CGuindon should we include an example with "15 / 30 / 50 items per page" like this?

dancormier · 2025-11-14T18:05:00Z

+            <Icon src={IconArrowLeft} title={i18nPrevText} />
+            <span class="v-visible-sr">{i18nPageText}</span>


Including both title on the icon and the screen reader span will result in some assistive tech reading out the contents of i18nPrevText twice. I'd recommend removing the span.

dancormier · 2025-11-14T18:05:18Z

+            <Icon src={IconArrowRight} title={i18nNextText} />
+            <span class="v-visible-sr">{i18nPageText}</span>


Same as the previous comment

Including both title on the icon and the screen reader span will result in some assistive tech reading out the contents of i18nPrevText twice. I'd recommend removing the span.

dancormier · 2025-11-14T18:09:56Z

+    // Only used for the button variant so we're making it generic for now
+    const getClasses = (selected: boolean, itemNav: boolean) => {
+        let classes = "s-pagination--item";
+        const base = classes;
+        if (selected) {
+            classes += ` is-selected`;
+        }
+        if (itemNav) {
+            classes += ` ${base}__nav`;
+        }
+        return classes;
+    };
+
+    const classes = $derived(getClasses(selected, itemNav));


If we remove the Button below, I think we could remove this function altogether and just rely on conditional classes on the anchor.

dancormier · 2025-11-14T18:10:49Z

-    <a
-        class="s-pagination--item"
-        class:is-selected={selected}
-        aria-current={selected ? "page" : undefined}
-        href={url}
-        {onclick}
-    >
-        {@render children?.()}
-    </a>
+    {#if itemNav}
+        <!-- Update variant from muted to tonal when button PR goes in-->
+        <Button
+            variant="muted"
+            weight="filled"
+            class={classes}
+            aria-current={selected ? "page" : undefined}
+            href={url}
+            {onclick}
+        >
+            {@render children?.()}
+        </Button>
+    {:else}
+        <a
+            class="s-pagination--item"
+            class:is-selected={selected}
+            aria-current={selected ? "page" : undefined}
+            href={url}
+            {onclick}
+        >
+            {@render children?.()}
+        </a>
+    {/if}


I don't think there's a need for the Button element here. We should be able to just use an anchor. We'd probably want to add class:s-pagination--item__nav={itemNav} to apply the nav class.

dancormier · 2025-11-14T18:19:06Z

-            --_pa-item-bg-hover: var(--_pa-item-bg);
-            --_pa-item-fc-hover: var(--_pa-item-fc);
+        &.s-pagination--item__nav {
+            --_pa-item-bg: unset;


I think this is because of #2035 (comment)

I'd set this as a psuedo private custom property with a value of unset at the top of the file and reset the value here to prevent cascade issues.

I was intending the base background color (line 11) to be set to unset and I now realize saying "reset the value here" is unclear. Sorry about that!

For the nav items, --_pa-item-bg should be set to --black-150.

Suggested change

--_pa-item-bg: unset;

--_pa-item-bg: var(--black-150);

Co-authored-by: Dan Cormier <dcormier@stackoverflow.com>

….com/StackExchange/Stacks into spark-73/update-pagination-component

dancormier

Great work @ttaylor-stack! I'm happy with where this landed 🙂

ttaylor-stack added 5 commits November 4, 2025 17:34

Update pagination component in classic and svelte

d983fa8

Update site-navigation.json

06b7b05

update html file

2c1d206

Update migration guide

50d035c

add changeset

99abdcf

ttaylor-stack requested review from CGuindon, dancormier, giamir and mukunku November 4, 2025 17:45

ttaylor-stack added 4 commits November 6, 2025 10:52

Update to fix accessibility issues

47cf2a4

Merge branch 'beta' into spark-73/update-pagination-component

b665f16

Update test

7734583

Merge branch 'spark-73/update-pagination-component' of https://github…

05f1236

….com/StackExchange/Stacks into spark-73/update-pagination-component

ttaylor-stack marked this pull request as ready for review November 6, 2025 12:50

Add description for pagination component in docs

57fc4af

dancormier reviewed Nov 6, 2025

View reviewed changes

Comment thread packages/stacks-classic/lib/components/pagination/pagination.less Outdated

dancormier reviewed Nov 6, 2025

View reviewed changes

Comment thread packages/stacks-classic/lib/components/pagination/pagination.less Outdated

dancormier reviewed Nov 6, 2025

View reviewed changes

Comment thread packages/stacks-classic/lib/components/pagination/pagination.less Outdated

Merge branch 'beta' into spark-73/update-pagination-component

333011c

dancormier and others added 6 commits November 10, 2025 12:22

Simplify pagination styles

9f7180d

Update assertions.ts

bc9b4c1

revert changes to assertions.ts

c328e9f

update a11y to test against box shadow instead of bg color

d8621ce

format

1730ff5

Merge branch 'beta' into spark-73/update-pagination-component

4f2a0be

giamir reviewed Nov 12, 2025

View reviewed changes

ttaylor-stack added 3 commits November 12, 2025 16:35

update visual tests

be25e6e

Merge branch 'spark-73/update-pagination-component' of https://github…

6f6844b

….com/StackExchange/Stacks into spark-73/update-pagination-component

remove new assertion function

69da13c

CGuindon requested changes Nov 12, 2025

View reviewed changes

ttaylor-stack added 4 commits November 13, 2025 12:27

Update based on comments

32d551a

update visual regression tests

d2b545e

Merge branch 'beta' into spark-73/update-pagination-component

c697266

Merge branch 'beta' into spark-73/update-pagination-component

517b541

dancormier requested changes Nov 14, 2025

View reviewed changes

ttaylor-stack and others added 10 commits November 17, 2025 15:40

Update MIGRATION_GUIDE.md

befbd3a

Co-authored-by: Dan Cormier <dcormier@stackoverflow.com>

Update packages/stacks-classic/lib/components/pagination/pagination.less

3687c0d

Co-authored-by: Dan Cormier <dcormier@stackoverflow.com>

update based on comments

93a3314

Merge branch 'spark-73/update-pagination-component' of https://github…

d1c9bd0

….com/StackExchange/Stacks into spark-73/update-pagination-component

Update based on comments

bc9e0c9

Merge branch 'beta' into spark-73/update-pagination-component

0c0e3ae

Update PaginationItem.svelte

c7947bd

fix tests

85f0d20

remove border shadow, use :before instead

fce8dd8

Minor docs fixes

02c6935

dancormier approved these changes Nov 18, 2025

View reviewed changes

ttaylor-stack merged commit 0b1841d into beta Nov 19, 2025
18 checks passed

ttaylor-stack deleted the spark-73/update-pagination-component branch November 19, 2025 09:40

stacks-tooling mentioned this pull request Nov 19, 2025

chore(new-release) (beta) #2056

Merged

dancormier mentioned this pull request Aug 17, 2026

chore(new-release) #2367

Open

		<a class="s-pagination--item s-pagination--item__nav" href="…">
		{% icon "ArrowRight" %}

		<Icon src={IconArrowLeft} title={i18nPrevText} />
		<span class="v-visible-sr">{i18nPageText}</span>

		<Icon src={IconArrowRight} title={i18nNextText} />
		<span class="v-visible-sr">{i18nPageText}</span>

Uh oh!

Conversation

ttaylor-stack commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify Bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks ready!

Uh oh!

netlify Bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks-svelte ready!

Uh oh!

Uh oh!

dancormier Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

CGuindon commented Nov 7, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CGuindon left a comment

Choose a reason for hiding this comment

Uh oh!

dancormier left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dancormier left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ttaylor-stack commented Nov 4, 2025 •

edited

Loading

changeset-bot Bot commented Nov 4, 2025 •

edited

Loading

netlify Bot commented Nov 4, 2025 •

edited

Loading

netlify Bot commented Nov 4, 2025 •

edited

Loading

dancormier Nov 6, 2025 •

edited

Loading