Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(pagination): add component tokens #11157

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,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", () => {
Expand Down Expand Up @@ -365,4 +365,37 @@ describe("calcite-pagination", () => {
expect(hiddenChevrons.length).toBe(0);
});
});

describe("theme", () => {
themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
/*"--calcite-pagination-spacing": {
shadowSelector: `.${CSS.list}`,
targetProp: "columnGap",
},*/
"--calcite-pagination-width": [
{
shadowSelector: `.${CSS.chevron}`,
targetProp: "minInlineSize",
},
{
shadowSelector: `.${CSS.page}`,
targetProp: "minInlineSize",
},
{
shadowSelector: `.${CSS.ellipsis}`,
targetProp: "minInlineSize",
},
],
"--calcite-pagination-color": [
{
shadowSelector: `.${CSS.chevron}`,
targetProp: "color",
},
{
shadowSelector: `.${CSS.ellipsis}`,
targetProp: "color",
},
],
});
});
});
Original file line number Diff line number Diff line change
@@ -1,11 +1,26 @@
/**
* CSS Custom Properties
*
* 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be pagination-size

* @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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

* @prop --calcite-pagination-hover-bottom-border-color: Specifies the component's item bottom border color when hovered.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

* @prop --calcite-pagination-selected-bottom-border-color: Specifies the component's item bottom border color when selected.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

* @prop --calcite-pagination-active-background-color: Specifies the component's item background color when active.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--calcite-pagination-color-background-color

* @prop --calcite-pagination-hover-chevron-background-color: Specifies the component's chevron item background color when hovered.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

*/

:host {
@apply flex;
writing-mode: horizontal-tb;
}

.list {
@apply flex list-none m-0 p-0;
column-gap: var(--calcite-spacing-base);
column-gap: var(--calcite-pagination-spacing, var(--calcite-spacing-base));
}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}
}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}
}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

}

& .chevron {
Expand All @@ -66,7 +81,6 @@
@apply p-0
m-0
text-0h
text-color-3
font-inherit
box-border
flex
Expand All @@ -76,6 +90,9 @@
justify-center
align-baseline
bg-transparent;

min-inline-size: var(--calcite-pagination-width, var(--width));
color: var(--calcite-pagination-color, var(--calcite-color-text-3));
}

.chevron,
Expand All @@ -84,19 +101,27 @@
border-block: 2px solid transparent;

&:hover {
@apply text-color-1 transition-default;
@apply transition-default;

color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1));
}
&:active {
color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1));
}
}

.page {
&:hover {
@apply border-b-color-2;
border-block-end-color: var(--calcite-pagination-hover-bottom-border-color, var(--calcite-color-border-2));
}
&:active {
@apply bg-foreground-3 text-color-1;
background-color: var(--calcite-pagination-active-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-selected-color-hover, var(--calcite-color-text-1));
border-block-end-color: var(--calcite-pagination-selected-bottom-border-color, var(--calcite-color-brand));

&:focus {
border-block-end-width: var(--calcite-spacing-xxs);
Expand All @@ -107,10 +132,10 @@

.chevron {
&:hover {
@apply bg-foreground-2 text-color-1;
background-color: var(--calcite-pagination-hover-chevron-background-color, var(--calcite-color-foreground-2));
}
&:active {
@apply bg-foreground-3 text-color-1;
background-color: var(--calcite-pagination-active-background-color, var(--calcite-color-foreground-3));
}
&.disabled {
@apply pointer-events-none bg-transparent;
Expand Down
3 changes: 2 additions & 1 deletion packages/calcite-components/src/custom-theme.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { link, linkTokens } from "./custom-theme/link";
import { list, listTokens } from "./custom-theme/list";
import { loader, loaderTokens } from "./custom-theme/loader";
import { notices } 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";
Expand Down Expand Up @@ -162,6 +162,7 @@ const componentTokens = {
...navigationLogoTokens,
...navigationTokens,
...navigationUserTokens,
...paginationTokens,
...popoverTokens,
...progressTokens,
...sliderTokens,
Expand Down
11 changes: 11 additions & 0 deletions packages/calcite-components/src/custom-theme/pagination.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import { html } from "../../support/formatting";

export const paginationTokens = {
calcitePaginationSpacing: "",
calcitePaginationWidth: "",
calcitePaginationColor: "",
calcitePaginationSelectedColorHover: "",
calcitePaginationHoverBottomBorderColor: "",
calcitePaginationSelectedBottomBorderColor: "",
calcitePaginationActiveBackgroundColor: "",
calcitePaginationHoverChevronBackgroundColor: "",
};

export const pagination = html`<calcite-pagination
total-items="1200"
page-size="100"
Expand Down
Loading