From f3973c84751a308cca184fce3b353118073d4684 Mon Sep 17 00:00:00 2001 From: Abraham Preciado Morales Date: Mon, 13 Jan 2025 13:43:36 -0800 Subject: [PATCH] feat(pagination): add component tokens (#11157) **Related Issue:** [#7180](https://github.com/Esri/calcite-design-system/issues/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. --- .../components/pagination/pagination.e2e.ts | 91 ++++++++++++++++++- .../src/components/pagination/pagination.scss | 36 ++++++-- .../src/custom-theme.stories.ts | 3 +- .../src/custom-theme/pagination.ts | 9 ++ 4 files changed, 130 insertions(+), 9 deletions(-) diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts index 0acef34458b..efecff2112b 100644 --- a/packages/calcite-components/src/components/pagination/pagination.e2e.ts +++ b/packages/calcite-components/src/components/pagination/pagination.e2e.ts @@ -2,7 +2,7 @@ import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it, beforeEach } from "vitest"; import { html } from "../../../support/formatting"; -import { accessible, focusable, hidden, renders, t9n } from "../../tests/commonTests"; +import { accessible, focusable, hidden, renders, t9n, themed } from "../../tests/commonTests"; import { CSS } from "./resources"; describe("calcite-pagination", () => { @@ -366,4 +366,93 @@ describe("calcite-pagination", () => { expect(hiddenChevrons.length).toBe(0); }); }); + + describe("theme", () => { + describe("default", () => { + themed(html``, { + "--calcite-pagination-color": [ + { + shadowSelector: `.${CSS.chevron}`, + targetProp: "color", + }, + { + shadowSelector: `.${CSS.page}:not(.${CSS.selected})`, + targetProp: "color", + }, + { + shadowSelector: `.${CSS.ellipsis}`, + targetProp: "color", + }, + ], + }); + }); + describe("hover", () => { + themed(html``, { + "--calcite-pagination-color-hover": [ + { + shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`, + targetProp: "color", + state: "hover", + }, + { + shadowSelector: `.${CSS.page}`, + targetProp: "color", + state: "hover", + }, + ], + "--calcite-pagination-color-border-hover": { + shadowSelector: `.${CSS.page}:not(.${CSS.selected})`, + targetProp: "borderBlockEndColor", + state: "hover", + }, + "--calcite-pagination-icon-color-background-hover": { + shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`, + targetProp: "backgroundColor", + state: "hover", + }, + }); + }); + describe("active", () => { + themed(html``, { + "--calcite-pagination-color-hover": [ + { + shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`, + targetProp: "color", + state: { press: { attribute: "class", value: `${CSS.chevron}` } }, + }, + { + shadowSelector: `.${CSS.page}`, + targetProp: "color", + state: { press: { attribute: "class", value: `${CSS.page}` } }, + }, + ], + "--calcite-pagination-background-color": [ + { + shadowSelector: `.${CSS.page}:not(.${CSS.selected})`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: `${CSS.page}` } }, + }, + { + shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: `${CSS.chevron}` } }, + }, + ], + }); + }); + describe("selected", () => { + themed(html``, { + "--calcite-pagination-color-hover": { + shadowSelector: `.${CSS.page}`, + targetProp: "color", + state: "focus", + }, + "--calcite-pagination-color-border-active": { + shadowSelector: `.${CSS.page}`, + targetProp: "borderBlockEndColor", + state: "focus", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss index fbcc3f2abe1..a07990cf7ee 100644 --- a/packages/calcite-components/src/components/pagination/pagination.scss +++ b/packages/calcite-components/src/components/pagination/pagination.scss @@ -1,3 +1,16 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-pagination-color: Specifies the component's item color. + * @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-background-color: Specifies the component's item background color when active. + * @prop --calcite-pagination-icon-color-background-hover: Specifies the component's chevron item background color when hovered. + */ + :host { @apply flex; writing-mode: horizontal-tb; @@ -66,7 +79,6 @@ @apply p-0 m-0 text-0h - text-color-3 font-inherit box-border flex @@ -76,6 +88,8 @@ justify-center align-baseline bg-transparent; + + color: var(--calcite-pagination-color, var(--calcite-color-text-3)); } .chevron, @@ -84,19 +98,27 @@ border-block: 2px solid transparent; &:hover { - @apply text-color-1 transition-default; + @apply transition-default; + + color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1)); + } + &:active { + color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1)); } } .page { &:hover { - @apply border-b-color-2; + border-block-end-color: var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2)); } &:active { - @apply bg-foreground-3 text-color-1; + background-color: var(--calcite-pagination-background-color, var(--calcite-color-foreground-3)); } &.selected { - @apply text-color-1 border-b-color-brand font-medium; + @apply font-medium; + + color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1)); + border-block-end-color: var(--calcite-pagination-color-border-active, var(--calcite-color-brand)); &:focus { border-block-end-width: var(--calcite-spacing-xxs); @@ -107,10 +129,10 @@ .chevron { &:hover { - @apply bg-foreground-2 text-color-1; + background-color: var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2)); } &:active { - @apply bg-foreground-3 text-color-1; + background-color: var(--calcite-pagination-background-color, var(--calcite-color-foreground-3)); } &.disabled { @apply pointer-events-none bg-transparent; diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index f25502cfaa2..6e74361034c 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -34,7 +34,7 @@ import { link, linkTokens } from "./custom-theme/link"; import { list, listTokens } from "./custom-theme/list"; import { loader, loaderTokens } from "./custom-theme/loader"; import { notice, noticeTokens } from "./custom-theme/notice"; -import { pagination } from "./custom-theme/pagination"; +import { pagination, paginationTokens } from "./custom-theme/pagination"; import { popover, popoverTokens } from "./custom-theme/popover"; import { progress, progressTokens } from "./custom-theme/progress"; import { segmentedControl } from "./custom-theme/segmented-control"; @@ -171,6 +171,7 @@ const componentTokens = { ...navigationTokens, ...navigationUserTokens, ...noticeTokens, + ...paginationTokens, ...popoverTokens, ...progressTokens, ...ratingTokens, diff --git a/packages/calcite-components/src/custom-theme/pagination.ts b/packages/calcite-components/src/custom-theme/pagination.ts index 4b147c9e794..e87a29d6c53 100644 --- a/packages/calcite-components/src/custom-theme/pagination.ts +++ b/packages/calcite-components/src/custom-theme/pagination.ts @@ -1,5 +1,14 @@ import { html } from "../../support/formatting"; +export const paginationTokens = { + calcitePaginationColor: "", + calcitePaginationColorHover: "", + calcitePaginationColorBorderHover: "", + calcitePaginationColorBorderActive: "", + calcitePaginationBackgroundColor: "", + calcitePaginationIconColorBackgroundHover: "", +}; + export const pagination = html`