Skip to content

Commit 0b1841d

Browse files
ttaylor-stackdancormier
ttaylor-stack
and
dancormier
authored
feat(pagination) - update pagination component to use new SHINE design system (#2035)
* Update pagination component in classic and svelte * Update site-navigation.json * update html file * Update migration guide * add changeset * Update to fix accessibility issues * Update test * Add description for pagination component in docs * Simplify pagination styles * Update assertions.ts * revert changes to assertions.ts * update a11y to test against box shadow instead of bg color * format * update visual tests * remove new assertion function * Update based on comments * update visual regression tests * Update MIGRATION_GUIDE.md Co-authored-by: Dan Cormier <[email protected]> * Update packages/stacks-classic/lib/components/pagination/pagination.less Co-authored-by: Dan Cormier <[email protected]> * update based on comments * Update based on comments * Update PaginationItem.svelte * fix tests * remove border shadow, use :before instead * Minor docs fixes --------- Co-authored-by: Dan Cormier <[email protected]> Co-authored-by: Dan Cormier <[email protected]>
1 parent 7ed7d32 commit 0b1841d

File tree

52 files changed

+231
-218
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+231
-218
lines changed

‎.changeset/sharp-heads-call.md‎

Lines changed: 9 additions & 0 deletions

‎MIGRATION_GUIDE.md‎

Lines changed: 3 additions & 0 deletions

‎packages/stacks-classic/lib/components/pagination/pagination.a11y.test.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { runA11yTests } from "../../test/a11y-test-utils";
2-
import { WCAGNonTextContrast } from "../../test/assertions";
32
import "../../index";
43

54
describe("pagination", () => {
@@ -33,6 +32,5 @@ describe("pagination", () => {
3332
`,
3433
},
3534
tag: "nav",
36-
additionalAssertions: [WCAGNonTextContrast],
3735
});
3836
});

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

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,70 +8,71 @@
88
}
99

1010
& &--item {
11-
--_pa-item-bg: transparent;
12-
--_pa-item-bc: var(--bc-darker);
13-
--_pa-item-fc: var(--fc-medium);
14-
--_pa-item-bg-focus: var(--black-400);
15-
--_pa-item-fc-focus: var(--white);
16-
--_pa-item-bg-hover: var(--black-225);
17-
--_pa-item-bc-hover: var(--bc-darker);
18-
--_pa-item-fc-hover: var(--fc-dark);
19-
20-
// CONTEXTUAL STYLES
21-
.highcontrast-mode({ text-decoration: none; });
11+
--_pa-item-bg: unset;
12+
--_pa-item-br: unset;
13+
--_pa-item-fc: var(--black-400);
14+
--_pa-item-p: var(--su-static4);
2215

2316
// MODIFIERS
2417
&.is-selected {
25-
--_pa-item-bg: var(--theme-primary);
26-
--_pa-item-bc: transparent;
27-
--_pa-item-fc: var(--white);
28-
--_pa-item-bg-focus: var(--theme-primary-400);
29-
}
30-
&.s-pagination--item__clear {
31-
--_pa-item-bg: transparent;
32-
--_pa-item-bc: transparent;
33-
--_pa-item-fc: inherit;
18+
--_pa-item-fc: var(--black-600);
19+
20+
&:not(:hover):not(:focus-visible):before {
21+
background-color: var(--black-600);
22+
content: "";
23+
height: var(--su-static2);
24+
left: 0;
25+
position: absolute;
26+
right: 0;
27+
top: 100%;
28+
}
3429
}
35-
// override hover styles to match base styles
36-
&.is-selected,
37-
&.s-pagination--item__clear {
38-
--_pa-item-bc-hover: var(--_pa-item-bc);
39-
--_pa-item-bg-hover: var(--_pa-item-bg);
40-
--_pa-item-fc-hover: var(--_pa-item-fc);
30+
&.s-pagination--item__nav {
31+
--_pa-item-bg: var(--black-150);
32+
--_pa-item-br: var(--br-circle);
33+
--_pa-item-fc: var(--black-600);
34+
--_pa-item-p: var(--su-static6);
35+
36+
aspect-ratio: 1 / 1;
37+
38+
&:hover {
39+
--_pa-item-bg: var(--black-200);
40+
}
4141
}
4242

4343
// INTERACTION
44-
&:hover {
45-
background-color: var(--_pa-item-bg-hover);
46-
border-color: var(--_pa-item-bc-hover);
47-
color: var(--_pa-item-fc-hover);
44+
&[href]:hover:not(&__nav) {
45+
--_pa-item-bg: var(--black-150);
46+
--_pa-item-br: var(--br-pill);
47+
--_pa-item-fc: var(--black-600);
4848
}
49-
5049
&:focus-visible {
51-
.focus-styles(true, true);
50+
--_pa-item-bg: var(--black-150);
51+
--_pa-item-fc: var(--black-600);
52+
.focus-styles(false, true);
5253
}
53-
54-
&:focus-visible,
54+
&:focus-visible:not(&__nav),
5555
&.focus-inset-bordered {
56-
background-color: var(--_pa-item-bg-focus);
57-
color: var(--_pa-item-fc-focus);
56+
--_pa-item-br: var(--br-md);
5857
}
5958

6059
background-color: var(--_pa-item-bg);
61-
border: 1px solid var(--_pa-item-bc);
60+
border-radius: var(--_pa-item-br);
6261
color: var(--_pa-item-fc);
62+
padding: var(--_pa-item-p);
6363

64-
border-radius: var(--br-md);
65-
display: inline-block;
66-
font-size: var(--fs-body1);
67-
line-height: var(--lh-xl);
68-
padding: 0 var(--su8);
64+
display: inline-flex;
65+
align-items: center;
66+
justify-content: center;
67+
margin: var(--su-static1);
68+
position: relative;
6969
}
7070

7171
&,
7272
ul {
7373
display: flex;
74+
align-items: center;
7475
flex-wrap: wrap;
75-
gap: var(--su4);
76+
gap: var(--su2);
7677
}
7778
}

‎packages/stacks-classic/screenshots/Chromium/baseline/s-avatar-highcontrast-light-indicator.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:beec93adf979c63f2cd74bca73819aae5f0a05e2a3d7f152930abd407b8dca74
3-
size 867
2+
oid sha256:53364e2952b9aa8273ffc1a0781252dd0b67bb89a3542deaac862e9a7070394b
3+
size 870

‎packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-dark-has-error-checked-radio.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:b59acc26dd1478ec9ba51e75422adabdf87498f7fc3f9333e45a2e30b1e03196
3-
size 3089
2+
oid sha256:acb37635d67ada92d769c443cd7049a87f66d90546e11965fb3fdf614c20e351
3+
size 2984

‎packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-error-unchecked-checkbox.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:696fa4e1f4f5b754f54a14bfb9cd7e66552a7d3e85d73811f86848d6ecdc2fb3
3-
size 3630
2+
oid sha256:c4067f865420887eb7483c850c43de022c9a3a331012c361d66ca9612b3b35c5
3+
size 3649

‎packages/stacks-classic/screenshots/Chromium/baseline/s-check-control-light-has-warning-unchecked-checkbox.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:8fbd1501cf855ec8e0095e9aa07f519e41ae6eb1bed0f794243c3c15b77f9eea
3-
size 3658
2+
oid sha256:c4067f865420887eb7483c850c43de022c9a3a331012c361d66ca9612b3b35c5
3+
size 3649

‎packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:cd038a9f84da950128862ecb8b48d9e563a99eda0712517ea4f20860e5e77734
3-
size 10599
2+
oid sha256:b5b8aec3ee47957bfb3258c09c7d837479815fcc2636b1a510b82d6891e8fd6b
3+
size 10141

‎packages/stacks-classic/screenshots/Chromium/baseline/s-expandable-dark.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:f24785a5b187160190ad38570929591be78db948750bc440afc44b1f39057c2d
3-
size 4608
2+
oid sha256:913cb77790c8eadb99f0b0b97f59aaf14623f41e7bab420e623864d67f43a880
3+
size 3907

0 commit comments

Comments
 (0)