diff --git a/.changeset/sharp-heads-call.md b/.changeset/sharp-heads-call.md new file mode 100644 index 0000000000..c15cc1b3da --- /dev/null +++ b/.changeset/sharp-heads-call.md @@ -0,0 +1,9 @@ +--- +"@stackoverflow/stacks": minor +"@stackoverflow/stacks-svelte": minor +--- + +Update pagination component to match new SHINE design system + +BREAKING CHANGES +The next button now uses an ArrowRight and ArrowLeft icon instead of text. To apply the new styling, add the `item__nav` class to pagination items that represent the "Next" button. \ No newline at end of file diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md index 13671c3cfd..1d1c6e5c65 100755 --- a/MIGRATION_GUIDE.md +++ b/MIGRATION_GUIDE.md @@ -28,6 +28,9 @@ - The Award Bling component has been renamed to Bling. - Bling no longer accepts children elements besides those for screen readers. Please include any visually represented strings (such as counts) as siblings to the bling component. +#### Pagination +- The next and previous button now uses an `ArrowRight` and `ArrowLeft` icon instead of text. To apply the new styling, use the class `.s-pagination--item__nav`. Since these buttons use icons to represent their behavior, make sure to include descriptive text for screen readers. + #### Popover - The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `
`) should be deleted from the codebases as part of the migration. diff --git a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts index 4009191c87..4736e0bbe3 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts +++ b/packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts @@ -1,5 +1,4 @@ import { runA11yTests } from "../../test/a11y-test-utils"; -import { WCAGNonTextContrast } from "../../test/assertions"; import "../../index"; describe("pagination", () => { @@ -33,6 +32,5 @@ describe("pagination", () => { `, }, tag: "nav", - additionalAssertions: [WCAGNonTextContrast], }); }); diff --git a/packages/stacks-classic/lib/components/pagination/pagination.less b/packages/stacks-classic/lib/components/pagination/pagination.less index 33d69039c7..1c22a9fac8 100644 --- a/packages/stacks-classic/lib/components/pagination/pagination.less +++ b/packages/stacks-classic/lib/components/pagination/pagination.less @@ -8,70 +8,71 @@ } & &--item { - --_pa-item-bg: transparent; - --_pa-item-bc: var(--bc-darker); - --_pa-item-fc: var(--fc-medium); - --_pa-item-bg-focus: var(--black-400); - --_pa-item-fc-focus: var(--white); - --_pa-item-bg-hover: var(--black-225); - --_pa-item-bc-hover: var(--bc-darker); - --_pa-item-fc-hover: var(--fc-dark); - - // CONTEXTUAL STYLES - .highcontrast-mode({ text-decoration: none; }); + --_pa-item-bg: unset; + --_pa-item-br: unset; + --_pa-item-fc: var(--black-400); + --_pa-item-p: var(--su-static4); // MODIFIERS &.is-selected { - --_pa-item-bg: var(--theme-primary); - --_pa-item-bc: transparent; - --_pa-item-fc: var(--white); - --_pa-item-bg-focus: var(--theme-primary-400); - } - &.s-pagination--item__clear { - --_pa-item-bg: transparent; - --_pa-item-bc: transparent; - --_pa-item-fc: inherit; + --_pa-item-fc: var(--black-600); + + &:not(:hover):not(:focus-visible):before { + background-color: var(--black-600); + content: ""; + height: var(--su-static2); + left: 0; + position: absolute; + right: 0; + top: 100%; + } } - // override hover styles to match base styles - &.is-selected, - &.s-pagination--item__clear { - --_pa-item-bc-hover: var(--_pa-item-bc); - --_pa-item-bg-hover: var(--_pa-item-bg); - --_pa-item-fc-hover: var(--_pa-item-fc); + &.s-pagination--item__nav { + --_pa-item-bg: var(--black-150); + --_pa-item-br: var(--br-circle); + --_pa-item-fc: var(--black-600); + --_pa-item-p: var(--su-static6); + + aspect-ratio: 1 / 1; + + &:hover { + --_pa-item-bg: var(--black-200); + } } // INTERACTION - &:hover { - background-color: var(--_pa-item-bg-hover); - border-color: var(--_pa-item-bc-hover); - color: var(--_pa-item-fc-hover); + &[href]:hover:not(&__nav) { + --_pa-item-bg: var(--black-150); + --_pa-item-br: var(--br-pill); + --_pa-item-fc: var(--black-600); } - &:focus-visible { - .focus-styles(true, true); + --_pa-item-bg: var(--black-150); + --_pa-item-fc: var(--black-600); + .focus-styles(false, true); } - - &:focus-visible, + &:focus-visible:not(&__nav), &.focus-inset-bordered { - background-color: var(--_pa-item-bg-focus); - color: var(--_pa-item-fc-focus); + --_pa-item-br: var(--br-md); } background-color: var(--_pa-item-bg); - border: 1px solid var(--_pa-item-bc); + border-radius: var(--_pa-item-br); color: var(--_pa-item-fc); + padding: var(--_pa-item-p); - border-radius: var(--br-md); - display: inline-block; - font-size: var(--fs-body1); - line-height: var(--lh-xl); - padding: 0 var(--su8); + display: inline-flex; + align-items: center; + justify-content: center; + margin: var(--su-static1); + position: relative; } &, ul { display: flex; + align-items: center; flex-wrap: wrap; - gap: var(--su4); + gap: var(--su2); } } diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico index 7e1606a61d..204aabb866 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:beec93adf979c63f2cd74bca73819aae5f0a05e2a3d7f152930abd407b8dca74 -size 867 +oid sha256:53364e2952b9aa8273ffc1a0781252dd0b67bb89a3542deaac862e9a7070394b +size 870 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico index 5722927113..1a8cfc0770 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:b59acc26dd1478ec9ba51e75422adabdf87498f7fc3f9333e45a2e30b1e03196 -size 3089 +oid sha256:acb37635d67ada92d769c443cd7049a87f66d90546e11965fb3fdf614c20e351 +size 2984 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico index ee682cf1c1..bdf83e943a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:696fa4e1f4f5b754f54a14bfb9cd7e66552a7d3e85d73811f86848d6ecdc2fb3 -size 3630 +oid sha256:c4067f865420887eb7483c850c43de022c9a3a331012c361d66ca9612b3b35c5 +size 3649 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico index 636153a241..bdf83e943a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:8fbd1501cf855ec8e0095e9aa07f519e41ae6eb1bed0f794243c3c15b77f9eea -size 3658 +oid sha256:c4067f865420887eb7483c850c43de022c9a3a331012c361d66ca9612b3b35c5 +size 3649 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico index bda81fd057..a34c39f76e 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:cd038a9f84da950128862ecb8b48d9e563a99eda0712517ea4f20860e5e77734 -size 10599 +oid sha256:b5b8aec3ee47957bfb3258c09c7d837479815fcc2636b1a510b82d6891e8fd6b +size 10141 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico index 9eff77c0da..4320fe2550 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:f24785a5b187160190ad38570929591be78db948750bc440afc44b1f39057c2d -size 4608 +oid sha256:913cb77790c8eadb99f0b0b97f59aaf14623f41e7bab420e623864d67f43a880 +size 3907 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico index 7c3f060060..533ac6f5de 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-fill-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d1eb0df586951676f00d220e6b53d3a0404547cb1766ac82fb8fa28c44c6147f -size 856 +oid sha256:3b3a3bcc31458a4ea80e056e3e716541a495e5639072985de5f7dc5db27e4ad0 +size 846 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico index 9e563d335c..8ee2538949 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-input-icon-dark-parent-has-error-error.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:8bf176cc15afd8fc12f538eb0d5607ce615a296d55e0d496905a27a1d207caf3 -size 2162 +oid sha256:f39b3bf636db78d33ff12ba00a00e1155ea51768ccf7e9a19756a7b41c2f7da1 +size 2068 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico index 756ee8251b..befbc14b2c 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c7cd88e1d0998474de3da1b2f49fbee9827511272572e404961bde939f63f076 -size 3353 +oid sha256:fd10c55ecd58bbcf9fa0a79c4191f0a8fc7b4dda79bc3bd177aa66f3c245ea2b +size 2192 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico index 756ee8251b..befbc14b2c 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:c7cd88e1d0998474de3da1b2f49fbee9827511272572e404961bde939f63f076 -size 3353 +oid sha256:fd10c55ecd58bbcf9fa0a79c4191f0a8fc7b4dda79bc3bd177aa66f3c245ea2b +size 2192 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico index db973d637b..2ff049056a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:f1d59dbd60ac6f2aada1cd16abc43267e272d2ac9d3a5cfedf5ee2e697b094c0 -size 3433 +oid sha256:8da67451848b37c93a93f6e3e4ae24f9db12b71bf9f0af37d07f63708e7615d2 +size 2266 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico index dfd91c3971..2ff049056a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:f99bcf343b4eff72103a8264461ce64e57bb2c880eb83f4b706f4a83238a03d7 -size 3390 +oid sha256:8da67451848b37c93a93f6e3e4ae24f9db12b71bf9f0af37d07f63708e7615d2 +size 2266 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico index bf4b04f309..acf9a795c7 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:615c6b30885d80cf6d41a765f56561eff6d0c8724cb412072373ae0dd5012095 -size 3398 +oid sha256:f53f67d88e56b4b223d6cffb02147176cf866f720de40bb0da87216d3e7691ad +size 2301 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico index bf4b04f309..acf9a795c7 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:615c6b30885d80cf6d41a765f56561eff6d0c8724cb412072373ae0dd5012095 -size 3398 +oid sha256:f53f67d88e56b4b223d6cffb02147176cf866f720de40bb0da87216d3e7691ad +size 2301 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico index 093d7f86bf..84581c2f9a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bd6e04cae7dacbd55de42d90894669410e70d7789b88ba2aaadb779f15e0366c -size 3381 +oid sha256:d878554f44c584821bcf3df88be7cb2bdedb85f13f3f25a2f10ab05345e210e7 +size 2245 diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico index 093d7f86bf..84581c2f9a 100644 --- a/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bd6e04cae7dacbd55de42d90894669410e70d7789b88ba2aaadb779f15e0366c -size 3381 +oid sha256:d878554f44c584821bcf3df88be7cb2bdedb85f13f3f25a2f10ab05345e210e7 +size 2245 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico index cf6f15cf61..133708e9fc 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-check-group-dark-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:b952536a5671e608be91c102659e92ae906b1838aedae5c4b55536892fbef534 -size 12553 +oid sha256:8a3dacddf4c25b092a023dabdb2195158a5193572ae6f56fc4a5a6e3a2adc9e3 +size 12186 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico index 2f0df95577..02fc1ced93 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:428e671a98215139a64057ae3a189cf74dd771a281284df6f16ba9c9e49c2c92 -size 4491 +oid sha256:628f3dcae94d3840ded7dcacc6d80b5dde4fa4fafe6747f688035d1d030384ff +size 2814 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico index 2f0df95577..02fc1ced93 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:428e671a98215139a64057ae3a189cf74dd771a281284df6f16ba9c9e49c2c92 -size 4491 +oid sha256:628f3dcae94d3840ded7dcacc6d80b5dde4fa4fafe6747f688035d1d030384ff +size 2814 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico index 96c18d2654..596cf304a9 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6b32d55d495971aaf5e1c06828bb7a9ef643c6527f13ba2b06c516989757f432 -size 4585 +oid sha256:4ae5026fef62e8879632963b2fb06a423f79bc07a6895ffcad961387770a964a +size 2868 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico index 96c18d2654..596cf304a9 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6b32d55d495971aaf5e1c06828bb7a9ef643c6527f13ba2b06c516989757f432 -size 4585 +oid sha256:4ae5026fef62e8879632963b2fb06a423f79bc07a6895ffcad961387770a964a +size 2868 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico index 45fa8ff9e6..33b11c40f7 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:7ba9423b5a2b8523d20fbc15ceb0f1907746ba4107860236cb05e004868050c4 -size 4563 +oid sha256:c5a14129ae6207de5f7e694f726ba097f2eb35f004eabe6c320b49d933e9b54d +size 2856 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico index 45fa8ff9e6..33b11c40f7 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:7ba9423b5a2b8523d20fbc15ceb0f1907746ba4107860236cb05e004868050c4 -size 4563 +oid sha256:c5a14129ae6207de5f7e694f726ba097f2eb35f004eabe6c320b49d933e9b54d +size 2856 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico index 0fd22beae0..ec30dad737 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:12f0d4ac895977c3d7d1d22bb04f6be562085ecd60aec3c2a6330bc031a7554b -size 4525 +oid sha256:680c89e73ca24f8f9abfcc903e59d54748ed037cf7d3151dfd79e1c3b8dab9a2 +size 2757 diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico index 0fd22beae0..ec30dad737 100644 --- a/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:12f0d4ac895977c3d7d1d22bb04f6be562085ecd60aec3c2a6330bc031a7554b -size 4525 +oid sha256:680c89e73ca24f8f9abfcc903e59d54748ed037cf7d3151dfd79e1c3b8dab9a2 +size 2757 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico index 1f9d7c793d..839399b797 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-check-control-light-checked-checkbox.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:3ce71143f237a83b6d804355d17e576defa905b04517e27a7c4ea5b6218d8d22 -size 4349 +oid sha256:5730098824ae140db544f1735b31e00c8cca6161fcfa6d2480ba2cd9c7a9d372 +size 4279 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico index b9906bfb51..39a0d2aa3d 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-dark-search.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:cc76a0caa2a1eefe9e7fab824b7865e501506959ab05cd7da6883eaeb473ec5c -size 2716 +oid sha256:bae0630c8c686224cb9c5c95ec10dfd4e1694b44d128e814c0b7a944ba81ea8c +size 2610 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico index fc3f69c563..b9be518eb0 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-fill-light-order-first.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:1680da14a39b9a41ab3a42aee0cca65d66b9fcd458381a9fb219b0fd1ae193a8 -size 1260 +oid sha256:1f81932e6fbf1f79eed976a3997e44964d9e00d3b83a511965c5c06c85e1e5e5 +size 1258 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico index 2096637e37..6e6d7b58ae 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-icon-highcontrast-light-parent-has-warning-warning.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:e15aa92915dd150e824efeac352e9495a742fd8287fe7e221cecf8fbfd6b547c -size 2974 +oid sha256:2d5227bdb423c4a778bcf5eb7caf7ecdbd61c5b53882d2cb8450adc225773d6e +size 2999 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico index 960d44f61b..593de095ae 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-message-state-has-error-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:a065ecf5c1dac0c87a18492fb6173283df248a300a6e7cbebb3b9212b9e78ae9 -size 3617 +oid sha256:827821def52c63e052a9365b4b1f4f6de7855f95c5ad8081ac30edb0a074bcc4 +size 3499 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico index b8f20b5094..e6e47f13b4 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-input-readonly-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:6c5a5eedef1bb339b4e57d4688c2e6e85a594ee708c3e4dd52b6cb6fe520cdf9 -size 2752 +oid sha256:9830e1d9ed6b029424bd43c0abc53f8408419198c793cfdf432c579f07c1fdcc +size 2764 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico index e8a1cc68bb..7a37285e68 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-disabled-status-beta.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:55ba31ab520d3e2032c7a2730f54e6b58ac3bc3eab885582807e560291e40b20 -size 3205 +oid sha256:a281c5a7fb1daba2da7927ba5cb5e4efc9fabfa3c5118ab4f8a26cb79a093be5 +size 3270 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico index e08ff89528..31a1cc89fc 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-label-dark-xl-disabled-status-new.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:fc52b9e566095e83a1cf5697c00251027a5984771357a88c44a298d477e57e63 -size 4627 +oid sha256:20fbf4c489425f56eca58da79631f1517ac94a344b41383f6cf4df6c28643cb3 +size 4698 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico index 5b1e3eb3b4..0937a9d4e6 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-link-highcontrast-dark-muted-dropdown.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:4d2a601451f97d69565df0ee41b6c2fd46ba1a912c75641cae6794470ba714ef -size 798 +oid sha256:7b90f3a7605913a824e7eedf86dc87c43e87d12da983672714e56dfba166f95b +size 806 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico index 59a8a22b09..af99e5527d 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bcaa573dfb810fe0d397b203057f345fe0122f5c3ae51799e05ce97cb3cc703c -size 5184 +oid sha256:2618215373829c1a3e18bc96308b77af40f39f4d661dcd93126c3f1d0006ab26 +size 2663 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico index 59a8a22b09..af99e5527d 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:bcaa573dfb810fe0d397b203057f345fe0122f5c3ae51799e05ce97cb3cc703c -size 5184 +oid sha256:2618215373829c1a3e18bc96308b77af40f39f4d661dcd93126c3f1d0006ab26 +size 2663 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico index aa0b845401..d70db08d50 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d245e8dee83c4eb00bb2c39a57a2ada1a18b1999f6d861ceaccee6ca7c26d282 -size 5409 +oid sha256:ca28ca9c0cadff3fd533913949dd2f76be04e47b754307040e90e347dc123921 +size 2637 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico index aa0b845401..d70db08d50 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-dark.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:d245e8dee83c4eb00bb2c39a57a2ada1a18b1999f6d861ceaccee6ca7c26d282 -size 5409 +oid sha256:ca28ca9c0cadff3fd533913949dd2f76be04e47b754307040e90e347dc123921 +size 2637 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico index 8b4d7296de..83a1a12774 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:baf9d0ccc2ba003baccbd579e490dc8325addd11f5d4f84ef87dd50a052cbc43 -size 5351 +oid sha256:f0d1a0777a299fa368e7555d2e1d0f3b06cc8e6d629c17a10c895d0e4e7a4a86 +size 2683 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico index 8b4d7296de..83a1a12774 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-highcontrast-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:baf9d0ccc2ba003baccbd579e490dc8325addd11f5d4f84ef87dd50a052cbc43 -size 5351 +oid sha256:f0d1a0777a299fa368e7555d2e1d0f3b06cc8e6d629c17a10c895d0e4e7a4a86 +size 2683 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico index a51ca967df..ec1c6a3e31 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light-legacy.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:511fe32b4f643b6e05cc7c19a373b4da4002a7836521153e628519512dd34f8e -size 5053 +oid sha256:0fabe70e6b378b1fe394520d5e03a035bb6e57ceb87b802b0b1c54e44f064353 +size 2636 diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico index a51ca967df..ec1c6a3e31 100644 --- a/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico +++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-pagination-light.ico @@ -1,3 +1,3 @@ version https://git-lfs-github-com-gh.2025025.xyz/spec/v1 -oid sha256:511fe32b4f643b6e05cc7c19a373b4da4002a7836521153e628519512dd34f8e -size 5053 +oid sha256:0fabe70e6b378b1fe394520d5e03a035bb6e57ceb87b802b0b1c54e44f064353 +size 2636 diff --git a/packages/stacks-docs/_data/pagination-component.json b/packages/stacks-docs/_data/pagination-component.json index 2bff3a5165..b9785252ee 100644 --- a/packages/stacks-docs/_data/pagination-component.json +++ b/packages/stacks-docs/_data/pagination-component.json @@ -15,6 +15,11 @@ "applies": ".s-pagination--item", "description": "Active state that’s applied to the current page." }, + { + "class": ".s-pagination--item__nav", + "applies": ".s-pagination--item", + "description": "Styles the Next or Previous button with a circular background and fixed dimensions. Typically used with an icon to indicate navigation to the next page." + }, { "class": ".s-pagination--item__clear", "applies": ".s-pagination--item", diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index f3871e2a25..ef2d30a415 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -285,7 +285,8 @@ }, { "title": "Pagination", - "url": "/product/components/pagination/" + "url": "/product/components/pagination/", + "new": true }, { "title": "Popovers", diff --git a/packages/stacks-docs/product/components/pagination.html b/packages/stacks-docs/product/components/pagination.html index 3a2cf9b932..4b24730331 100644 --- a/packages/stacks-docs/product/components/pagination.html +++ b/packages/stacks-docs/product/components/pagination.html @@ -2,6 +2,7 @@ layout: page title: Pagination svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-paginationcontroller--docs +figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=1189-2035&t=JFrmhokx3ZOeRP9b-0 description: Pagination splits content into pages, as seen on questions, tags, users, and jobs listings. tags: components --- @@ -74,9 +75,9 @@
  • - - Next - page + + {% icon "ArrowRight" %} + next page
    • @@ -85,6 +86,12 @@
    - -
    - {% header "h2", "Legacy example" %} - - {% tip, "warning", "mb24" %} - Note:The below markup has been deprecated due to insufficient accessibility. Please use the new markup above. - {% endtip %} - -
    -{% highlight html %} -
    - - page - 1 - - - page - 2 - - - page - 3 - - - page - 4 - - - page - 5 - - … - - page - 122386 - - - Next - page - -
    -{% endhighlight %} -
    - -
    -
    -
    diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte index 986cd78fce..f90bfbaaaa 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.svelte @@ -3,6 +3,11 @@ import PaginationItem from "./PaginationItem.svelte"; import PaginationItemClear from "./PaginationItemClear.svelte"; import { generatePagination } from "./pagination-generator"; + import Icon from "../Icon/Icon.svelte"; + import { + IconArrowRight, + IconArrowLeft, + } from "@stackoverflow/stacks-icons/icons"; interface Props { /** @@ -73,8 +78,9 @@ - {i18nPrevText} {i18nPageText} + {/if} {#each generatePagination(page, totalPages) as p, i (p.toString() + i)} @@ -95,8 +101,9 @@ - {i18nNextText} {i18nPageText} + {/if} diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts index cd07a8b087..3bebc7b0a1 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts +++ b/packages/stacks-svelte/src/components/Pagination/PaginationController.test.ts @@ -142,6 +142,47 @@ describe("PaginationController", () => { expect(screen.queryByText("Next")).not.to.exist; }); + it("applies nav class to navigation buttons", () => { + render(Pagination, { + props: { + page: 2, + totalPages: 5, + urlGenerator, + }, + }); + + // Find the Next button by its role and accessible name + const nextLink = screen.getByRole("link", { name: /Next/i }); + expect(nextLink).to.have.class("s-pagination--item__nav"); + + // Verify the correct icon is rendered with the correct title + const nextTitleElement = screen.getByTitle("Next"); + expect(nextTitleElement).to.exist; + const nextIcon = nextTitleElement.closest("svg"); + expect(nextIcon).to.exist; + expect(nextIcon?.tagName).to.equal("svg"); + expect(nextLink).to.contain(nextIcon); + + // Verify Prev button also has nav class + const prevLink = screen.getByRole("link", { name: /Prev/i }); + expect(prevLink).to.have.class("s-pagination--item__nav"); + + // Verify the correct icon is rendered with the correct title + const prevTitleElement = screen.getByTitle("Prev"); + expect(prevTitleElement).to.exist; + const prevIcon = prevTitleElement.closest("svg"); + expect(prevIcon).to.exist; + expect(prevIcon?.tagName).to.equal("svg"); + expect(prevLink).to.contain(prevIcon); + + // Verify regular page number items do NOT have nav class + const page1Link = screen.getByRole("link", { name: "page 1" }); + expect(page1Link).not.to.have.class("s-pagination--item__nav"); + + const page2Link = screen.getByRole("link", { name: "page 2" }); + expect(page2Link).not.to.have.class("s-pagination--item__nav"); + }); + it("highlights the correct selected page", () => { render(Pagination, { props: { @@ -168,16 +209,23 @@ describe("PaginationController", () => { }, }); - expect(screen.getByRole("link", { name: "Anterior página" })).to.exist; + expect(screen.getByRole("link", { name: "Anterior" })).to.exist; expect(screen.getByRole("link", { name: "página 1" })).to.exist; expect(screen.getByRole("link", { name: "página 2" })).to.exist; expect(screen.getByRole("link", { name: "página 3" })).to.exist; expect(screen.getByRole("link", { name: "página 4" })).to.exist; expect(screen.getByRole("link", { name: "página 5" })).to.exist; - expect(screen.getByRole("link", { name: "Siguiente página" })).to.exist; + expect(screen.getByRole("link", { name: "Siguiente" })).to.exist; expect(screen.getByRole("navigation")).to.have.attribute( "aria-label", "Paginación" ); + + // Verify the icon uses the localized title + const titleElement = screen.getByTitle("Siguiente"); + expect(titleElement).to.exist; + const icon = titleElement.closest("svg"); + expect(icon).to.exist; + expect(icon?.tagName).to.equal("svg"); }); }); diff --git a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte index 8f33bb095d..40d945f90c 100644 --- a/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte +++ b/packages/stacks-svelte/src/components/Pagination/PaginationItem.svelte @@ -10,6 +10,10 @@ * Whether this pagination item is currently selected */ selected?: boolean; + /** + * Whether this pagination item is the next page + */ + itemNav?: boolean; /** * Callback fired when the pagination item is clicked */ @@ -20,13 +24,20 @@ children?: Snippet; } - let { url, selected = false, onclick, children }: Props = $props(); + let { + url, + selected = false, + itemNav = false, + onclick, + children, + }: Props = $props();