feat(pagination): add component tokens #11157

aPreciado88 · 2024-12-28T00:44:41Z

Related Issue: #7180

Summary

Add pagination component tokens.

--calcite-pagination-spacing: Specifies the amount of left and right margin spacing between each item.
--calcite-pagination-size: Specifies the width of each item.
--calcite-pagination-color: Specifies the component's item color.
--calcite-pagination-color-hover: Specifies the component's item color when hovered or selected.
--calcite-pagination-color-border-hover: Specifies the component's item bottom border color when hovered.
--calcite-pagination-color-border-active: Specifies the component's item bottom border color when selected.
--calcite-pagination-background-color: Specifies the component's item background color when active.
--calcite-pagination-icon-color-background-hover: Specifies the component's chevron item background color when hovered.

alisonailea

Please refer to the token naming documentation for naming component tokens

alisonailea · 2024-12-30T18:16:48Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-pagination-spacing: Specifies the amount of left and right margin spacing between each item.
+ * @prop --calcite-pagination-width: Specifies the width of each item.


This should be pagination-size

alisonailea · 2024-12-30T18:17:49Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * @prop --calcite-pagination-width: Specifies the width of each item.
+ * @prop --calcite-pagination-color: Specifies the component's item color.
+ * @prop --calcite-pagination-selected-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-pagination-hover-bottom-border-color: Specifies the component's item bottom border color when hovered.


This should be --calcite-pagination-color-border-hover

alisonailea · 2024-12-30T18:18:18Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * @prop --calcite-pagination-color: Specifies the component's item color.
+ * @prop --calcite-pagination-selected-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-pagination-hover-bottom-border-color: Specifies the component's item bottom border color when hovered.
+ * @prop --calcite-pagination-selected-bottom-border-color: Specifies the component's item bottom border color when selected.


this should be --calcite-pagination-color-border-active

alisonailea · 2024-12-30T18:18:36Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * @prop --calcite-pagination-selected-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-pagination-hover-bottom-border-color: Specifies the component's item bottom border color when hovered.
+ * @prop --calcite-pagination-selected-bottom-border-color: Specifies the component's item bottom border color when selected.
+ * @prop --calcite-pagination-active-background-color: Specifies the component's item background color when active.


--calcite-pagination-color-background-color

alisonailea · 2024-12-30T18:19:03Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * @prop --calcite-pagination-hover-bottom-border-color: Specifies the component's item bottom border color when hovered.
+ * @prop --calcite-pagination-selected-bottom-border-color: Specifies the component's item bottom border color when selected.
+ * @prop --calcite-pagination-active-background-color: Specifies the component's item background color when active.
+ * @prop --calcite-pagination-hover-chevron-background-color: Specifies the component's chevron item background color when hovered.


--calcite-pagination-chevron-color-background-hover

alisonailea · 2024-12-30T18:19:58Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * @prop --calcite-pagination-spacing: Specifies the amount of left and right margin spacing between each item.
+ * @prop --calcite-pagination-width: Specifies the width of each item.
+ * @prop --calcite-pagination-color: Specifies the component's item color.
+ * @prop --calcite-pagination-selected-color-hover: Specifies the component's item color when hovered or selected.


This can be simplified down to --calcite-pagination-color-hover

alisonailea · 2024-12-30T18:20:42Z

packages/calcite-components/src/components/pagination/pagination.scss

@@ -21,7 +36,7 @@
  & .page,
  & .ellipsis {
    @apply text-n2h h-6 px-1;
-    min-inline-size: theme("width.6");
+    --width: theme("width.6");


you should not assign tokens inside components unless they are -internal

alisonailea · 2024-12-30T18:20:46Z

packages/calcite-components/src/components/pagination/pagination.scss

@@ -30,7 +45,7 @@
  & .page,
  & .ellipsis {
    @apply text-n1h h-8 px-2;
-    min-inline-size: theme("width.8");
+    --width: theme("width.8");


you should not assign tokens inside components unless they are -internal

alisonailea · 2024-12-30T18:20:51Z

packages/calcite-components/src/components/pagination/pagination.scss

@@ -39,7 +54,7 @@
  & .page,
  & .ellipsis {
    @apply text-0h h-11;
-    min-inline-size: theme("width.11");
+    --width: theme("width.11");


you should not assign tokens inside components unless they are -internal

…ciado88/7180-add-pagination-design-tokens

aPreciado88 · 2025-01-04T00:50:51Z

@alisonailea I'm having issues with some token e2e tests, could you please take a look?

…ciado88/7180-add-pagination-design-tokens

macandcheese · 2025-01-10T22:42:18Z

packages/calcite-components/src/components/pagination/pagination.scss

+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-pagination-spacing: Specifies the amount of left and right margin spacing between each item.


cc @SkyeSeitz / @ashetland - What is the reason for allowing this gap to be customized? Seems like even for "low count" pagination, we'd want to maintain the spacing.

Similar q for "-size" - maybe not needed...

…ciado88/7180-add-pagination-design-tokens

macandcheese · 2025-01-13T17:43:08Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * @prop --calcite-pagination-color-border-hover: Specifies the component's item bottom border color when hovered.
+ * @prop --calcite-pagination-color-border-active: Specifies the component's item bottom border color when selected.
+ * @prop --calcite-pagination-color-background: Specifies the component's item background color when active.
+ * @prop --calcite-pagination-chevron-color-background-hover: Specifies the component's chevron item background color when hovered.


Mostly name questions here - cc @SkyeSeitz @alisonailea

Should this be icon-color or another name to follow a different pattern? Not sure if we have used "chevron" before.

macandcheese · 2025-01-13T17:43:32Z

packages/calcite-components/src/components/pagination/pagination.scss

+ * @prop --calcite-pagination-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-pagination-color-border-hover: Specifies the component's item bottom border color when hovered.
+ * @prop --calcite-pagination-color-border-active: Specifies the component's item bottom border color when selected.
+ * @prop --calcite-pagination-color-background: Specifies the component's item background color when active.


Should this be "background-color" to match other components?

yes I agree. Thanks for the catch Adam

aPreciado88 · 2025-01-13T21:18:10Z

@ashetland @SkyeSeitz It looks like these are the usual false positive screenshots. Can you please confirm?

ashetland · 2025-01-13T21:26:29Z

Yep, all false positives.

feat(pagination): add component tokens

fb989c7

github-actions bot assigned aPreciado88 Dec 28, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 28, 2024

feat(pagination): fix tokens description

3e9a05f

alisonailea requested changes Dec 30, 2024

View reviewed changes

aPreciado88 added 3 commits January 3, 2025 10:43

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

51156ff

…ciado88/7180-add-pagination-design-tokens

feat(pagination): update css token names and add e2e tests

019c5c5

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

757d588

…ciado88/7180-add-pagination-design-tokens

aPreciado88 requested a review from alisonailea January 4, 2025 00:50

aPreciado88 marked this pull request as ready for review January 4, 2025 00:50

aPreciado88 added 6 commits January 6, 2025 08:41

feat(pagination): fix merge conflicts

bbf4f2c

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

c0d32bd

…ciado88/7180-add-pagination-design-tokens

feat(pagination): update token e2e tests

4ef17e0

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

57de2f8

…ciado88/7180-add-pagination-design-tokens

feat(pagination): add e2e css tokent tests

c40ff4f

feat(pagination): remove .only from e2e test block

79d4a7f

macandcheese reviewed Jan 10, 2025

View reviewed changes

feat(pagination): remove unneeded css tokens

b32a5a8

aPreciado88 requested a review from macandcheese January 10, 2025 23:32

aPreciado88 added 2 commits January 10, 2025 16:03

feat(pagination): remove .only from e2e tests

a664652

Merge branch 'dev' of github.com:Esri/calcite-design-system into aPre…

766fe10

…ciado88/7180-add-pagination-design-tokens

alisonailea approved these changes Jan 13, 2025

View reviewed changes

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 13, 2025

macandcheese reviewed Jan 13, 2025

View reviewed changes

feat(pagination): update css token names

43e4bb7

aPreciado88 removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 13, 2025

feat(pagination): update css token names

a4b910e

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 13, 2025

aPreciado88 merged commit f3973c8 into dev Jan 13, 2025
16 checks passed

aPreciado88 deleted the aPreciado88/7180-add-pagination-design-tokens branch January 13, 2025 21:43

github-actions bot added this to the 2025-01-30 - 3.0.0 Jan Breaking Change Release milestone Jan 13, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(pagination): add component tokens #11157

feat(pagination): add component tokens #11157

aPreciado88 commented Dec 28, 2024 •

edited

Loading

alisonailea left a comment

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

alisonailea Dec 30, 2024

aPreciado88 commented Jan 4, 2025

macandcheese Jan 10, 2025

SkyeSeitz Jan 10, 2025

macandcheese Jan 13, 2025

macandcheese Jan 13, 2025

alisonailea Jan 13, 2025

aPreciado88 commented Jan 13, 2025

ashetland commented Jan 13, 2025

feat(pagination): add component tokens #11157

feat(pagination): add component tokens #11157

Conversation

aPreciado88 commented Dec 28, 2024 • edited Loading

Summary

alisonailea left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 commented Jan 4, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aPreciado88 commented Jan 13, 2025

ashetland commented Jan 13, 2025

aPreciado88 commented Dec 28, 2024 •

edited

Loading