Skip to content

feat(pagination): Add component tokens #8777

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.

Sign up for GitHub

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

Merged
macandcheese merged 10 commits into from
Feb 21, 2024
Merged

feat(pagination): Add component tokens #8777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
123265b
feat(pagination): Add component tokens
macandcheese Feb 17, 2024
5b044d6
Clean up
macandcheese Feb 17, 2024
7ee706b
Clean up
macandcheese Feb 18, 2024
eff5a9b
Clean up
macandcheese Feb 18, 2024
242260f
Clean up
macandcheese Feb 18, 2024
13522c1
Clean up
macandcheese Feb 18, 2024
b931ad4
Clean up
macandcheese Feb 21, 2024
90a1c0e
Merge branch 'epic/7180-component-tokens' into macandcheese/token-upd…
macandcheese Feb 21, 2024
3b7800e
Clean up
macandcheese Feb 21, 2024
fd33c68
Clean up
macandcheese Feb 21, 2024
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
107 changes: 83 additions & 24 deletions packages/calcite-components/src/components/pagination/pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,88 @@
@import "~@esri/calcite-design-tokens/dist/scss/core";

/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*

* @prop --calcite-pagination-background-color-active: Specifies the background color of the pagination items while active.
* @prop --calcite-pagination-background-color-hover: Specifies the background color of the pagination items while hovered.
Comment thread
macandcheese marked this conversation as resolved.
* @prop --calcite-pagination-background-color: Specifies the background color of the pagination items.
* @prop --calcite-pagination-border-color-hover: Specifies the border color the pagination items while hovered.
* @prop --calcite-pagination-border-color-selected: Specifies the border color of the pagination items when selected.
* @prop --calcite-pagination-text-color-hover: Specifies the text color of the pagination items items while hovered.
* @prop --calcite-pagination-text-color-selected: Specifies the text color of the pagination items when selected.
* @prop --calcite-pagination-text-color: Specifies the text color of the pagination items.
* @prop --calcite-pagination-arrow-background-color-active: Specifies the background color of the arrow items while active.
* @prop --calcite-pagination-arrow-background-color-hover: Specifies the background color of the arrow items while hovered.
* @prop --calcite-pagination-arrow-background-color: Specifies the background color of the arrow items.
* @prop --calcite-pagination-arrow-icon-color-active: Specifies the icon color of the arrow items while active.
* @prop --calcite-pagination-arrow-icon-color-hover: Specifies the icon color of the arrow items while hovered.
* @prop --calcite-pagination-arrow-icon-color: Specifies the icon color of the arrow items.
Comment thread
macandcheese marked this conversation as resolved.
*
*/
/**
* Local props
* These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
*
* --calcite-internal-pagination-item-size
* --calcite-internal-pagination-item-space
*/
:host {
@apply flex;
writing-mode: horizontal-tb;
--calcite-pagination-background-color-active: transparent;
--calcite-pagination-background-color-hover: transparent;
--calcite-pagination-background-color: transparent;
--calcite-pagination-border-color-hover: var(--calcite-color-border-2);
--calcite-pagination-border-color-selected: var(--calcite-color-brand);
--calcite-pagination-text-color-hover: var(--calcite-color-text-1);
--calcite-pagination-text-color-selected: var(--calcite-color-text-1);
--calcite-pagination-text-color: var(--calcite-color-text-3);
--calcite-pagination-arrow-background-color-active: var(--calcite-color-foreground-3);
--calcite-pagination-arrow-background-color-hover: var(--calcite-color-foreground-2);
--calcite-pagination-arrow-background-color: var(--calcite-pagination-background-color);
--calcite-pagination-arrow-icon-color-active: var(--calcite-color-brand);
--calcite-pagination-arrow-icon-color-hover: var(--calcite-color-brand);
--calcite-pagination-arrow-icon-color: var(--calcite-pagination-text-color);
}

:host([scale="s"]) {
--calcite-internal-pagination-item-size: var(--calcite-size-xxl);
--calcite-internal-pagination-item-space: var(--calcite-size-xxs);

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

:host([scale="m"]) {
--calcite-internal-pagination-item-size: var(--calcite-size-xxxl);
--calcite-internal-pagination-item-space: var(--calcite-size-sm);

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

:host([scale="l"]) {
--calcite-internal-pagination-item-size: #{$calcite-size-44};
--calcite-internal-pagination-item-space: var(--calcite-size-md);

& .chevron,
& .page,
& .ellipsis {
@apply text-0h h-11;
min-inline-size: theme("width.11");
@apply text-0h;
}

& .chevron {
@apply px-2.5;
}

& .page,
& .ellipsis {
@apply px-3;
}
}

// focus styles
Expand All @@ -50,19 +96,22 @@
.chevron,
.page,
.ellipsis {
@apply p-0
m-0
text-0h
text-color-3
@apply text-0h
font-inherit
box-border
flex
items-center
border-none
border-opacity-0
justify-center
align-baseline
bg-transparent;
align-baseline;
padding: 0;
margin: 0;
min-inline-size: var(--calcite-internal-pagination-item-size);
block-size: var(--calcite-internal-pagination-item-size);
padding-inline: var(--calcite-internal-pagination-item-space);
color: var(--calcite-pagination-text-color);
background-color: var(--calcite-pagination-background-color);
}

.chevron,
Expand All @@ -71,29 +120,39 @@
border-block: 2px solid transparent;

&:hover {
@apply text-color-1 transition-default;
@apply transition-default;
color: var(--calcite-pagination-text-color-hover);
background-color: var(--calcite-pagination-background-color-hover);
}
&:active {
background-color: var(--calcite-pagination-background-color-active);
}
}

.page {
&:hover {
@apply border-b-color-2;
border-block-end-color: var(--calcite-pagination-border-color-hover);
}

&.selected {
@apply text-color-1 border-b-color-brand font-medium;
font-weight: var(--calcite-font-weight-medium);
color: var(--calcite-pagination-text-color-selected);
border-block-end-color: var(--calcite-pagination-border-color-selected);
}
}

.chevron {
background-color: var(--calcite-pagination-arrow-background-color);
&:hover {
@apply bg-foreground-2;
color: theme("backgroundColor.brand");
background-color: var(--calcite-pagination-arrow-background-color-hover);
color: var(--calcite-pagination-arrow-icon-color-hover);
}
&:active {
@apply bg-foreground-3;
background-color: var(--calcite-pagination-arrow-background-color-active);
color: var(--calcite-pagination-arrow-icon-color-active);
}
&.disabled {
@apply pointer-events-none bg-transparent;
@apply pointer-events-none;
& > calcite-icon {
@apply opacity-disabled;
}
Expand Down
71 changes: 51 additions & 20 deletions packages/calcite-components/src/components/pagination/pagination.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,31 +88,62 @@ export const responsiveTinyNumberLastPage_TestOnly = (): string =>
createBreakpointStories(getResponsiveTemplate({ totalItems: 12, pageSize: 1, type: "last" }));

export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): string => html`
<calcite-pagination
class="calcite-mode-dark"
start-item="1"
lang="fr"
group-separator
total-items="123456789"
page-size="10"
scale="l"
>
</calcite-pagination>
<div style="width:480px;">
<calcite-pagination
class="calcite-mode-dark"
start-item="1"
lang="fr"
group-separator
total-items="123456789"
page-size="10"
scale="l"
>
</calcite-pagination>
</div>
`;

darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly.parameters = { modes: modesDarkDefault };

export const arabicNumberingSystemAndRTL_TestOnly = (): string =>
html`<calcite-pagination
dir="rtl"
numbering-system="arab"
start-item="1"
lang="fr"
total-items="123456789"
page-size="10"
>
</calcite-pagination>`;
export const arabicNumberingSystemAndRTL_TestOnly = (): string => html`
<div style="width:480px;">
<calcite-pagination
dir="rtl"
numbering-system="arab"
start-item="1"
lang="fr"
total-items="123456789"
page-size="10"
>
</calcite-pagination>
</div>
`;

arabicNumberingSystemAndRTL_TestOnly.parameters = {
chromatic: { diffThreshold: 1 },
};

export const theming_TestOnly = (): string => html`
<div style="width:480px;">
<calcite-pagination
total-items="1200"
page-size="100"
start-item="1"
style="
--calcite-pagination-text-color: green;
--calcite-pagination-text-color-hover: darkgreen;
--calcite-pagination-text-color-selected: teal;
--calcite-pagination-background-color: lightyellow;
--calcite-pagination-background-color-hover: yellow;
--calcite-pagination-background-color-active: gold;
--calcite-pagination-border-color-selected: green;
--calcite-pagination-border-color-hover: orange;
--calcite-pagination-arrow-icon-color: blue;
--calcite-pagination-arrow-icon-color-hover: pink;
--calcite-pagination-arrow-icon-color-active: red;
--calcite-pagination-arrow-background-color: lightyellow;
--calcite-pagination-arrow-background-color-hover: orange;
--calcite-pagination-arrow-background-color-active: gold;
"
></calcite-pagination>
</div>
`;
Loading