From c1e79452fd29903c2138e4d1f8cbb1bce58bcb51 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 18 Jun 2024 08:55:50 -0700 Subject: [PATCH 01/11] fix(pagination): add classes for better testing --- .../calcite-components/src/components.d.ts | 18 ++++++++++++++++++ .../src/components/pagination/pagination.scss | 5 ++++- .../src/components/pagination/pagination.tsx | 16 ++++++++++++---- .../src/components/pagination/resources.ts | 4 ++++ 4 files changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index af91005d058..4c163bdf1c3 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4562,6 +4562,10 @@ export namespace Components { * Accessible name for the dropdown menu. */ "dropdownLabel": string; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -4574,6 +4578,11 @@ export namespace Components { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning": OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement": MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ @@ -12509,6 +12518,10 @@ declare namespace LocalJSX { * Accessible name for the dropdown menu. */ "dropdownLabel"?: string; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -12529,6 +12542,11 @@ declare namespace LocalJSX { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement"?: MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss index 90163470d88..117a0d53bf6 100644 --- a/packages/calcite-components/src/components/pagination/pagination.scss +++ b/packages/calcite-components/src/components/pagination/pagination.scss @@ -139,7 +139,10 @@ --calcite-pagination-arrow-background-color, var(--calcite-pagination-item-background-color, transparent) ); - color: var(--calcite-pagination-item-text-color, var(--calcite-color-text-3)); + color: var( + --calcite-pagination-arrow-icon-color, + var(--calcite-pagination-item-text-color, var(--calcite-color-text-3)) + ); &:hover { background-color: var(--calcite-pagination-arrow-background-color-hover); color: var(--calcite-pagination-arrow-icon-color-hover, var(--calcite-color-brand)); diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx index 4c606191cfd..ecc9913503e 100644 --- a/packages/calcite-components/src/components/pagination/pagination.tsx +++ b/packages/calcite-components/src/components/pagination/pagination.tsx @@ -552,11 +552,19 @@ export class Pagination render(): VNode { return ( ); } diff --git a/packages/calcite-components/src/components/pagination/resources.ts b/packages/calcite-components/src/components/pagination/resources.ts index 3ba74cdb169..1c3a3af7e11 100644 --- a/packages/calcite-components/src/components/pagination/resources.ts +++ b/packages/calcite-components/src/components/pagination/resources.ts @@ -4,6 +4,10 @@ export const CSS = { page: "page", selected: "selected", chevron: "chevron", + chevronFirst: "chevron--first", + chevronPrevious: "chevron--previous", + chevronNext: "chevron--next", + chevronLast: "chevron--last", disabled: "disabled", ellipsis: "ellipsis", }; From 3a98a0b6668104682aa73e4375cdf446b81be98e Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 18 Jun 2024 09:00:16 -0700 Subject: [PATCH 02/11] fix(table-cell): add token fallbacks from table and table-row --- .../src/components/table-cell/table-cell.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 19030ca101a..6c8ba357f75 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -4,7 +4,7 @@ * These properties can be overridden using the component's tag as selector. * * @prop --calcite-table-cell-background: [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the background color of the component. - * @prop --calcite-table-cell-background-color: Specifies the background color of the component. + * @prop --calcite-table-cell-background-color: Specifies the background color of the component. Will fallback to `--calcite-table-row-background-color` if not set. * @prop --calcite-table-cell-border-color: Specifies the border color of the component. */ @@ -34,12 +34,15 @@ td { @apply text-start align-middle text-color-1 whitespace-normal; background-color: var( - --calcite-internal-table-cell-background-color, - var(--calcite-table-cell-background-color, transparent) + --calcite-table-cell-background-color, + var(--calcite-table-row-background-color, var(--calcite-internal-table-cell-background-color, transparent)) ); font-size: var(--calcite-internal-table-cell-font-size); border-inline-end: 1px solid - var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))); + var( + --calcite-table-cell-border-color, + var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) + ); padding: var(--calcite-internal-table-cell-padding); &:not(.static-cell) { From a75d013f683853efd230c127c58ec5e04831b063 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 18 Jun 2024 09:04:56 -0700 Subject: [PATCH 03/11] fix(table-row): update component tokens with fallbacks to table --- .../src/components/table-row/table-row.scss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss index 67ff5dcb474..d3cd9176a83 100644 --- a/packages/calcite-components/src/components/table-row/table-row.scss +++ b/packages/calcite-components/src/components/table-row/table-row.scss @@ -5,7 +5,7 @@ * * @prop --calcite-table-row-background: [Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component. * @prop --calcite-table-row-background-color: Specifies the background color of the component. - * @prop --calcite-table-row-background-color-striped: The background color of the component's `striped` rows, when specified. + * @prop --calcite-table-row-secondary-background-color: The background color of the component's `striped` rows, when specified. * @prop --calcite-table-row-background-color-selected: The background color of the component's `selected` rows, when specified. * @prop --calcite-table-row-border-color: Specifies the border color of the component. * @prop --calcite-table-row-selected-accent-color: Specifies the border color of the component. @@ -39,10 +39,23 @@ calcite-table-cell { } tr { - border-block-end: 1px solid var(--calcite-table-row-border-color, transparent); + border-block-end: 1px solid + var(--calcite-table-row-border-color, var(--calcite-internal-table-row-border-color, transparent)); background-color: var(--calcite-table-row-background-color, var(--calcite-color-foreground-1)); } tr.last-visible-row { border-block-end: 0; } + +:host(:nth-child(2n + 1)) { + tr { + background-color: var( + --calcite-table-row-secondary-background-color, + var( + --calcite-internal-table-secondary-background-color, + var(--calcite-table-row-background-color, var(--calcite-color-foreground-1)) + ) + ); + } +} From 95f150837edbbfaeeee8e2721eda02feaf092034 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 18 Jun 2024 09:05:45 -0700 Subject: [PATCH 04/11] fix(table): remove unused component tokens and fix stateful selection-chip tokens --- .../src/components/table/table.scss | 39 +++++++------------ 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index 6e723c0c1f2..c7be362ab4e 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -12,19 +12,10 @@ * @prop --calcite-table-selection-chip-corner-radius: The corner radius of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-chip-shadow: The shadow of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-chip-text-color: The text color of the component's `selectionMode` selection chip. - - * @prop --calcite-table-number-cell-background-color: The background color of the component's `numbered` cell. - * @prop --calcite-table-number-cell-text-color: The text color of the component's `numbered` cell. - * @prop --calcite-table-selection-cell-background-color: The background color of the component's `selectionMode` cell. - * @prop --calcite-table-selection-cell-background-color-selected: The background color of the component's `selectionMode` cell. - - * @prop --calcite-table-selection-cell-icon-color: The icon color of the component's `selectionMode` selection icon. - * @prop --calcite-table-selection-cell-icon-color-selected: The icon color of the component's `selectionMode` selection icon when selected. - - * @prop --calcite-table-selection-chip-selected-background-color: The background color of the component's `selectionMode` selection chip. - * @prop --calcite-table-selection-chip-selected-border-color: The border color of the component's `selectionMode` selection chip. - * @prop --calcite-table-selection-chip-selected-text-color: The text color of the component's `selectionMode` selection chip. + * @prop --calcite-table-selection-chip-background-color-selected: The background color of the component's `selectionMode` selection chip. + * @prop --calcite-table-selection-chip-border-color-selected: The border color of the component's `selectionMode` selection chip. + * @prop --calcite-table-selection-chip-text-color-selected: The text color of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-dismiss-button-background-color-active: The background color of the component's `selectionMode` selection dismiss chip when active. * @prop --calcite-table-selection-dismiss-button-background-color-hover: The background color of the component's `selectionMode` selection dismiss chip when hovered. @@ -83,15 +74,14 @@ .container { @apply flex flex-col w-full h-full; + inline-size: var(--calcite-container-size-content-fluid); block-size: var(--calcite-container-size-content-fluid); } .table-container { @apply overflow-auto whitespace-nowrap; -} -.table-container { border: 1px solid var(--calcite-table-border-color, var(--calcite-color-border-3)); border-radius: var(--calcite-table-corner-radius, var(--calcite-corner-radius-sharp)); box-shadow: var(--calcite-table-shadow, var(--calcite-shadow-none)); @@ -112,18 +102,11 @@ table { } .bordered { - ::slotted(calcite-table-row) { - --calcite-table-row-border-color: var(--calcite-table-border-color, var(--calcite-color-border-3)); - } + --calcite-internal-table-row-border-color: var(--calcite-table-border-color, var(--calcite-color-border-3)); } .striped { - ::slotted(calcite-table-row:nth-child(2n + 1)) { - --calcite-table-row-background-color: var( - --calcite-table-row-background-color-striped, - var(--calcite-color-foreground-2) - ); - } + --calcite-internal-table-secondary-background-color: var(--calcite-color-foreground-2); } .selection-actions { @@ -155,6 +138,7 @@ table { --calcite-chip-corner-radius: var(--calcite-table-selection-chip-corner-radius); --calcite-chip-shadow: var(--calcite-table-selection-chip-shadow); --calcite-chip-text-color: var(--calcite-table-selection-chip-text-color); + &.selection-chip-active { --calcite-chip-background-color: var(--calcite-table-selection-chip-background-color-selected); --calcite-chip-border-color: var(--calcite-table-selection-chip-border-color-selected); @@ -172,8 +156,6 @@ table { } calcite-pagination { - flex: 1; - justify-content: center; --calcite-pagination-item-text-color: var(--calcite-table-pagination-item-text-color); --calcite-pagination-item-text-color-hover: var(--calcite-table-pagination-item-text-color-hover); --calcite-pagination-item-text-color-selected: var(--calcite-table-pagination-item-text-color-selected); @@ -188,15 +170,20 @@ calcite-pagination { --calcite-pagination-arrow-background-color: var(--calcite-table-pagination-arrow-background-color); --calcite-pagination-arrow-background-color-hover: var(--calcite-table-pagination-arrow-background-color-hover); --calcite-pagination-arrow-background-color-active: var(--calcite-table-pagination-arrow-background-color-active); + + flex: 1; + justify-content: center; } .dismiss-button { - @apply me-4; --calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color); --calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color); --calcite-button-corner-radius: var(--calcite-table-selection-dismiss-button-corner-radius); --calcite-button-shadow: var(--calcite-table-selection-dismiss-button-shadow); --calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color); + + @apply me-4; + &:hover { --calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-hover); --calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-hover); From 6baa79d4358dc3efacb7bae51e2999b00c0eda61 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 18 Jun 2024 21:11:26 -0700 Subject: [PATCH 05/11] docs(table): alphabetize tokens --- .../src/components/table/table.scss | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.scss b/packages/calcite-components/src/components/table/table.scss index c7be362ab4e..2d528cf0f31 100644 --- a/packages/calcite-components/src/components/table/table.scss +++ b/packages/calcite-components/src/components/table/table.scss @@ -7,15 +7,29 @@ * @prop --calcite-table-corner-radius: The border color of the component. * @prop --calcite-table-shadow: The shadow of the component. + * @prop --calcite-table-pagination-arrow-background-color-active: Specifies the background color of the component's `pageSize` pagination arrow items while active. + * @prop --calcite-table-pagination-arrow-background-color-hover: Specifies the background color of the component's `pageSize` pagination arrow items while hovered. + * @prop --calcite-table-pagination-arrow-background-color: Specifies the background color of the component's `pageSize` pagination arrow items. + * @prop --calcite-table-pagination-arrow-icon-color-active: Specifies the icon color of the component's `pageSize` pagination arrow items while active. + * @prop --calcite-table-pagination-arrow-icon-color-hover: Specifies the icon color of the component's `pageSize` pagination arrow items while hovered. + * @prop --calcite-table-pagination-arrow-icon-color: Specifies the icon color of the component's `pageSize` pagination arrow items. + * @prop --calcite-table-pagination-item-background-color-active: Specifies the background color of the component's `pageSize` pagination items while active. + * @prop --calcite-table-pagination-item-background-color-hover: Specifies the background color of the component's `pageSize` pagination items while hovered. + * @prop --calcite-table-pagination-item-background-color: Specifies the background color of the component's `pageSize` pagination items. + * @prop --calcite-table-pagination-item-border-color-hover: Specifies the border color the pagination items while hovered. + * @prop --calcite-table-pagination-item-border-color-selected: Specifies the border color of the component's `pageSize` pagination items when selected. + * @prop --calcite-table-pagination-item-text-color-hover: Specifies the text color of the component's `pageSize` pagination items items while hovered. + * @prop --calcite-table-pagination-item-text-color-selected: Specifies the text color of the component's `pageSize` pagination items when selected. + * @prop --calcite-table-pagination-item-text-color: Specifies the text color of the component's `pageSize` pagination items. + + * @prop --calcite-table-selection-chip-background-color-selected: The background color of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-chip-background-color: The background color of the component's `selectionMode` selection chip. + * @prop --calcite-table-selection-chip-border-color-selected: The border color of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-chip-border-color: The border color of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-chip-corner-radius: The corner radius of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-chip-shadow: The shadow of the component's `selectionMode` selection chip. - * @prop --calcite-table-selection-chip-text-color: The text color of the component's `selectionMode` selection chip. - - * @prop --calcite-table-selection-chip-background-color-selected: The background color of the component's `selectionMode` selection chip. - * @prop --calcite-table-selection-chip-border-color-selected: The border color of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-chip-text-color-selected: The text color of the component's `selectionMode` selection chip. + * @prop --calcite-table-selection-chip-text-color: The text color of the component's `selectionMode` selection chip. * @prop --calcite-table-selection-dismiss-button-background-color-active: The background color of the component's `selectionMode` selection dismiss chip when active. * @prop --calcite-table-selection-dismiss-button-background-color-hover: The background color of the component's `selectionMode` selection dismiss chip when hovered. @@ -35,22 +49,7 @@ * @prop --calcite-table-selection-out-of-view-chip-icon-color: The icon color of the component's `selectionMode` selection out of view chip. * @prop --calcite-table-selection-out-of-view-chip-shadow: The shadow of the component's `selectionMode` selection out of view chip. * @prop --calcite-table-selection-out-of-view-chip-text-color: The text color of the component's `selectionMode` selection out of view chip. - - * @prop --calcite-table-pagination-arrow-background-color-active: Specifies the background color of the component's `pageSize` pagination arrow items while active. - * @prop --calcite-table-pagination-arrow-background-color-hover: Specifies the background color of the component's `pageSize` pagination arrow items while hovered. - * @prop --calcite-table-pagination-arrow-background-color: Specifies the background color of the component's `pageSize` pagination arrow items. - * @prop --calcite-table-pagination-arrow-icon-color-active: Specifies the icon color of the component's `pageSize` pagination arrow items while active. - * @prop --calcite-table-pagination-arrow-icon-color-hover: Specifies the icon color of the component's `pageSize` pagination arrow items while hovered. - * @prop --calcite-table-pagination-arrow-icon-color: Specifies the icon color of the component's `pageSize` pagination arrow items. - * @prop --calcite-table-pagination-item-background-color-active: Specifies the background color of the component's `pageSize` pagination items while active. - * @prop --calcite-table-pagination-item-background-color-hover: Specifies the background color of the component's `pageSize` pagination items while hovered. - * @prop --calcite-table-pagination-item-background-color: Specifies the background color of the component's `pageSize` pagination items. - * @prop --calcite-table-pagination-item-border-color-hover: Specifies the border color the pagination items while hovered. - * @prop --calcite-table-pagination-item-border-color-selected: Specifies the border color of the component's `pageSize` pagination items when selected. - * @prop --calcite-table-pagination-item-text-color-hover: Specifies the text color of the component's `pageSize` pagination items items while hovered. - * @prop --calcite-table-pagination-item-text-color-selected: Specifies the text color of the component's `pageSize` pagination items when selected. - * @prop --calcite-table-pagination-item-text-color: Specifies the text color of the component's `pageSize` pagination items. - */ +*/ :host([scale="s"]) { --calcite-internal-table-cell-padding: 0.25rem; From c4a3813741aa642a167e487f524162e262ea04d5 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 20 Jun 2024 09:40:57 -0700 Subject: [PATCH 06/11] fix(table-row, table-header, table-cell): refactor component tokens --- .../src/components/table-cell/table-cell.scss | 84 ++++++++++--------- .../components/table-header/table-header.scss | 8 +- .../src/components/table-row/table-row.scss | 44 ++++++---- 3 files changed, 75 insertions(+), 61 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 6c8ba357f75..0fca6156c28 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -6,6 +6,12 @@ * @prop --calcite-table-cell-background: [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the background color of the component. * @prop --calcite-table-cell-background-color: Specifies the background color of the component. Will fallback to `--calcite-table-row-background-color` if not set. * @prop --calcite-table-cell-border-color: Specifies the border color of the component. + * @prop --calcite-table-cell-text-color: Specifies the text color of the component. + * @prop --calcite-table-cell-number-background-color: Specifies the background color of the number cell. + * @prop --calcite-table-cell-footer-background-color: Specifies the background color of the footer cell. + * @prop --calcite-table-cell-text-color-selected: Specifies the text color of the selected cell. + * @prop --calcite-table-cell-shadow: Specifies the shadow of the component. + * @prop --calcite-table-cell-shadow-selected: Specifies the shadow of the selected cell. */ /** @@ -15,7 +21,16 @@ * --calcite-internal-table-cell-background-color */ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-table-cell-background: [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the background color of the component. + */ + :host { + --calcite-internal-table-cell-background: var(--calcite-table-cell-background, transparent); @apply contents; } @@ -32,11 +47,8 @@ } td { - @apply text-start align-middle text-color-1 whitespace-normal; - background-color: var( - --calcite-table-cell-background-color, - var(--calcite-table-row-background-color, var(--calcite-internal-table-cell-background-color, transparent)) - ); + @apply text-start align-middle whitespace-normal; + background-color: var(--calcite-internal-table-cell-background); font-size: var(--calcite-internal-table-cell-font-size); border-inline-end: 1px solid var( @@ -44,6 +56,7 @@ td { var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) ); padding: var(--calcite-internal-table-cell-padding); + color: var(--calcite-table-cell-text-color, var(--calcite-color-text-1)); &:not(.static-cell) { @apply focus-base; @@ -65,69 +78,58 @@ td.last-cell { border-inline-end: 0; } -.footer-cell { - @apply font-medium; - color: var(--calcite-color-text-1); +.number-cell { background-color: var( - --calcite-table-cell-background-color, - var(--calcite-table-cell-background, var(--calcite-color-background)) + --calcite-table-cell-number-background-color, + var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)) ); +} +.footer-cell { + @apply font-medium text-color-1; border-block-start: 1px solid - var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))); + var( + --calcite-table-cell-border-color, + var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) + ); + background-color: var(--calcite-table-cell-footer-background-color, var(--calcite-color-background)); } .number-cell, .selection-cell { @apply text-center; border-inline-end: 1px solid - var(--calcite-table-cell-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))); + var( + --calcite-table-cell-border-color, + var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) + ); inline-size: 2rem; min-inline-size: 2rem; } -.number-cell { - color: var(--calcite-table-number-cell-text-color, var(--calcite-color-text-1)); - background-color: var(--calcite-table-number-cell-background-color, var(--calcite-color-foreground-2)); - &.footer-cell { - background-color: var( - --calcite-table-number-cell-background-color, - var(--calcite-table-cell-background-color, var(--calcite-color-background)) - ); - } -} - .selection-cell { - color: var(--calcite-table-selection-cell-icon-color, var(--calcite-color-text-3)); + inset-inline-start: 2rem; + color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-text-3)); + &:not(.footer-cell) { @apply cursor-pointer; - background-color: var( - --calcite-table-selection-cell-background-color, - var(--calcite-table-cell-background-color, transparent) - ); - } - &.footer-cell { - background-color: var( - --calcite-table-selection-cell-background-color, - var(--calcite-table-cell-background-color, var(--calcite-color-background)) - ); } } .selected-cell:not(.number-cell):not(.footer-cell) { - background-color: var( - --calcite-table-cell-background-color-selected, - var(--calcite-table-row-background-color-selected, var(--calcite-color-foreground-current)) - ); + --calcite-internal-table-cell-background: var(--calcite-color-foreground-current); } .selection-cell.selected-cell { - box-shadow: inset 0.25rem 0 0 0 var(--calcite-table-row-selected-accent-color, var(--calcite-color-brand)); - color: var(--calcite-table-selection-cell-icon-color-selected, var(--calcite-color-brand)); + box-shadow: var(--calcite-table-cell-shadow, inset 0.25rem 0 0 0 var(--calcite-color-brand)); + color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand)); + & calcite-icon { + --calcite-icon-color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand)); + } } .calcite--rtl.selection-cell.selected-cell { - box-shadow: inset -0.25rem 0 0 0 var(--calcite-table-row-selected-accent-color, var(--calcite-color-brand)); + box-shadow: var(--calcite-table-cell-shadow-selected, inset -0.25rem 0 0 0 var(--calcite-color-brand)); } .selection-cell { diff --git a/packages/calcite-components/src/components/table-header/table-header.scss b/packages/calcite-components/src/components/table-header/table-header.scss index 6ac1e2c536a..78c43d09613 100644 --- a/packages/calcite-components/src/components/table-header/table-header.scss +++ b/packages/calcite-components/src/components/table-header/table-header.scss @@ -6,8 +6,8 @@ * @prop --calcite-table-header-background: [Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the background color of the component. * @prop --calcite-table-header-background-color: Specifies the background color of the component. * @prop --calcite-table-header-border-color: Specifies the border color of the component. - * @prop --calcite-table-header-heading-color: Specifies the heading color of the component. - * @prop --calcite-table-header-description-color: Specifies the description color of the component. + * @prop --calcite-table-header-heading-text-color: Specifies the heading color of the component. + * @prop --calcite-table-header-description-text-color: Specifies the description color of the component. */ @@ -113,10 +113,10 @@ th.last-cell { } .heading { - color: var(--calcite-table-header-heading-color, var(--calcite-color-text-1)); + color: var(--calcite-table-header-heading-text-color, var(--calcite-color-text-1)); } .description { - color: var(--calcite-table-header-description-color, var(--calcite-color-text-3)); + color: var(--calcite-table-header-description-text-color, var(--calcite-color-text-3)); font-size: var(--calcite-internal-table-cell-font-size-secondary); } diff --git a/packages/calcite-components/src/components/table-row/table-row.scss b/packages/calcite-components/src/components/table-row/table-row.scss index d3cd9176a83..0f4c1be46f1 100644 --- a/packages/calcite-components/src/components/table-row/table-row.scss +++ b/packages/calcite-components/src/components/table-row/table-row.scss @@ -8,8 +8,6 @@ * @prop --calcite-table-row-secondary-background-color: The background color of the component's `striped` rows, when specified. * @prop --calcite-table-row-background-color-selected: The background color of the component's `selected` rows, when specified. * @prop --calcite-table-row-border-color: Specifies the border color of the component. - * @prop --calcite-table-row-selected-accent-color: Specifies the border color of the component. - */ :host { @@ -24,37 +22,51 @@ } } -calcite-table-cell { - --calcite-internal-table-cell-background-color: var( - --calcite-table-row-background-color, - var(--calcite-color-foreground-1) - ); -} - -:host([selected]) calcite-table-cell { - --calcite-internal-table-cell-background-color: var( - --calcite-table-row-background-color-selected, +tr { + --calcite-internal-table-row-default-background-color: var( + --calcite-table-row-background, var(--calcite-color-foreground-1) ); -} -tr { border-block-end: 1px solid var(--calcite-table-row-border-color, var(--calcite-internal-table-row-border-color, transparent)); - background-color: var(--calcite-table-row-background-color, var(--calcite-color-foreground-1)); + background-color: var( + --calcite-table-row-background-color, + var(--calcite-internal-table-row-default-background-color) + ); } tr.last-visible-row { border-block-end: 0; } +:host([selected]) tr { + background-color: var( + --calcite-table-row-background-color-selected, + var(--calcite-table-row-background-color, var(--calcite-internal-table-row-default-background-color)) + ); +} + :host(:nth-child(2n + 1)) { + &:host([selected]) tr { + background-color: var( + --calcite-table-row-background-color-selected, + var( + --calcite-table-row-secondary-background-color, + var( + --calcite-internal-table-secondary-background-color, + var(--calcite-table-row-background-color, var(--calcite-internal-table-row-default-background-color)) + ) + ) + ); + } + tr { background-color: var( --calcite-table-row-secondary-background-color, var( --calcite-internal-table-secondary-background-color, - var(--calcite-table-row-background-color, var(--calcite-color-foreground-1)) + var(--calcite-table-row-background-color, var(--calcite-internal-table-row-default-background-color)) ) ); } From a81686978ffbc00141948251630f10a8cff03c2a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 20 Jun 2024 09:41:47 -0700 Subject: [PATCH 07/11] test(table, table-row, table-header, table-cell): add themed e2e tests --- .../src/components/table/table.e2e.ts | 569 ++++++++++++++++-- 1 file changed, 519 insertions(+), 50 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index 096dc1f4567..aa28c93d18b 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -2,10 +2,12 @@ import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests"; import { createSelectedItemsAsserter, getFocusedElementProp } from "../../tests/utils"; -import { CSS } from "../table-header/resources"; +import { CSS as TABLECELL_CSS } from "../table-cell/resources"; +import { CSS as TABLEHEADER_CSS } from "../table-header/resources"; import { CSS as PAGINATION_CSS } from "../pagination/resources"; import { CSS as CELL_CSS } from "../table-cell/resources"; -import { SLOTS } from "../table/resources"; +import { CSS, SLOTS } from "../table/resources"; +import { ComponentTestTokens, themed } from "../../tests/commonTests/themed"; describe("calcite-table", () => { describe("renders", () => { @@ -1968,7 +1970,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -1985,7 +1987,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); await page.keyboard.press("PageDown"); await page.waitForChanges(); @@ -1994,13 +1996,13 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2019,7 +2021,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); }); it("navigates correctly when number column present", async () => { @@ -2061,7 +2063,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2078,7 +2080,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("PageDown"); await page.waitForChanges(); @@ -2087,13 +2089,13 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2112,7 +2114,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); }); it("navigates correctly when number and selection column present numbered", async () => { @@ -2154,7 +2156,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2164,7 +2166,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2177,7 +2179,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("PageDown"); await page.waitForChanges(); @@ -2186,19 +2188,19 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowLeft"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2214,7 +2216,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); }); it("navigates correctly when pagination present and selection and number and first page displayed", async () => { @@ -2260,7 +2262,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2270,7 +2272,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2283,7 +2285,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); await page.keyboard.press("PageDown"); await page.waitForChanges(); @@ -2292,13 +2294,13 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); expect( await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2316,7 +2318,7 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.numberCell }); page.keyboard.press("ControlLeft"); await page.keyboard.press("Home"); @@ -2326,7 +2328,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); }); it("navigates correctly when pagination present, and selection and number and navigation to two other pages occurs", async () => { @@ -2375,7 +2377,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2385,7 +2387,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2398,19 +2400,19 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); expect( await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowLeft"); await page.waitForChanges(); expect( await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("PageDown"); await page.waitForChanges(); @@ -2419,19 +2421,19 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); expect( await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); expect( await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); @@ -2445,7 +2447,7 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.numberCell }); page.keyboard.press("ControlRight"); @@ -2456,7 +2458,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.$eval( "calcite-table", @@ -2484,19 +2486,19 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowDown"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("PageDown"); await page.waitForChanges(); @@ -2505,19 +2507,19 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); expect( await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowLeft"); await page.waitForChanges(); expect( await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.numberCell }); + ).toEqual({ "0": TABLEHEADER_CSS.numberCell }); page.keyboard.press("ControlRight"); await page.keyboard.press("End"); @@ -2531,7 +2533,7 @@ describe("keyboard navigation", () => { `#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList, ), - ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell }); + ).toEqual({ "0": CELL_CSS.footerCell, "1": TABLEHEADER_CSS.numberCell }); }); it("navigates correctly when number and selection column present numbered and interaction-mode static - only focusing selection cells", async () => { @@ -2574,7 +2576,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2586,7 +2588,7 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); await page.keyboard.press("ArrowRight"); await page.waitForChanges(); @@ -2596,30 +2598,497 @@ describe("keyboard navigation", () => { `#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList, ), - ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell, "1": TABLEHEADER_CSS.multipleSelectionCell }); await page.keyboard.press("Tab"); await page.waitForChanges(); expect( await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("Tab"); await page.waitForChanges(); expect( await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("Tab"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); await page.keyboard.press("ArrowUp"); await page.waitForChanges(); expect( await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList), - ).toEqual({ "0": CSS.selectionCell }); + ).toEqual({ "0": TABLEHEADER_CSS.selectionCell }); + }); + + describe("theme", () => { + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-table-border-color": { + shadowSelector: `.${CSS.tableContainer}`, + targetProp: "borderColor", + }, + "--calcite-table-corner-radius": { + shadowSelector: `.${CSS.tableContainer}`, + targetProp: "borderRadius", + }, + "--calcite-table-shadow": { + shadowSelector: `.${CSS.tableContainer}`, + targetProp: "boxShadow", + }, + }; + themed(`calcite-table`, tokens); + }); + describe("bordered", () => { + const tokens: ComponentTestTokens = { + "--calcite-table-border-color": { + shadowSelector: `.${CSS.bordered}`, + targetProp: "--calcite-internal-table-row-border-color", + }, + }; + themed( + html` + + cell + cell + + `, + tokens, + ); + }); + describe("selection", () => { + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-table-selection-chip-background-color": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-background-color", + }, + "--calcite-table-selection-chip-border-color": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-border-color", + }, + "--calcite-table-selection-chip-corner-radius": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-corner-radius", + }, + "--calcite-table-selection-chip-shadow": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-shadow", + }, + "--calcite-table-selection-chip-text-color": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-text-color", + }, + }; + themed( + html` + + cell + cell + + `, + tokens, + ); + }); + describe("selected", () => { + const tokens: ComponentTestTokens = { + "--calcite-table-selection-chip-background-color-selected": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-background-color", + }, + "--calcite-table-selection-chip-border-color-selected": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-border-color", + }, + "--calcite-table-selection-chip-text-color-selected": { + shadowSelector: `.${CSS.selectionCountChip}`, + targetProp: "--calcite-chip-text-color", + }, + + "--calcite-table-selection-dismiss-button-background-color-active": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-background-color", + state: { press: { attribute: "class", value: CSS.dismissButton } }, + }, + "--calcite-table-selection-dismiss-button-background-color-hover": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-background-color", + state: "hover", + }, + "--calcite-table-selection-dismiss-button-background-color": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-background-color", + }, + "--calcite-table-selection-dismiss-button-border-color-active": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-border-color", + state: { press: { attribute: "class", value: CSS.dismissButton } }, + }, + "--calcite-table-selection-dismiss-button-border-color-hover": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-border-color", + state: "hover", + }, + "--calcite-table-selection-dismiss-button-border-color": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-border-color", + }, + "--calcite-table-selection-dismiss-button-corner-radius": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-corner-radius", + }, + "--calcite-table-selection-dismiss-button-shadow": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-shadow", + }, + "--calcite-table-selection-dismiss-button-text-color-active": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-text-color", + state: { press: { attribute: "class", value: CSS.dismissButton } }, + }, + "--calcite-table-selection-dismiss-button-text-color-hover": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-text-color", + state: "hover", + }, + "--calcite-table-selection-dismiss-button-text-color": { + shadowSelector: `.${CSS.dismissButton}`, + targetProp: "--calcite-button-text-color", + }, + "--calcite-table-selection-out-of-view-chip-background-color": { + shadowSelector: `.${CSS.selectionOutOfViewChip}`, + targetProp: "--calcite-chip-background-color", + }, + "--calcite-table-selection-out-of-view-chip-border-color": { + shadowSelector: `.${CSS.selectionOutOfViewChip}`, + targetProp: "--calcite-chip-border-color", + }, + "--calcite-table-selection-out-of-view-chip-corner-radius": { + shadowSelector: `.${CSS.selectionOutOfViewChip}`, + targetProp: "--calcite-chip-corner-radius", + }, + "--calcite-table-selection-out-of-view-chip-shadow": { + shadowSelector: `.${CSS.selectionOutOfViewChip}`, + targetProp: "--calcite-chip-shadow", + }, + "--calcite-table-selection-out-of-view-chip-text-color": { + shadowSelector: `.${CSS.selectionOutOfViewChip}`, + targetProp: "--calcite-chip-text-color", + }, + "--calcite-table-selection-out-of-view-chip-icon-color": { + shadowSelector: `.${CSS.selectionOutOfViewChip}`, + targetProp: "--calcite-chip-icon-color", + }, + "--calcite-table-pagination-item-text-color": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + }, + "--calcite-table-pagination-item-text-color-hover": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + state: { hover: { attribute: "class", value: "page" } }, + }, + "--calcite-table-pagination-item-text-color-selected": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + }, + "--calcite-table-pagination-item-background-color": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + }, + "--calcite-table-pagination-item-background-color-hover": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + state: { hover: { attribute: "class", value: "page" } }, + }, + "--calcite-table-pagination-item-background-color-active": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + state: { press: { attribute: "class", value: "page" } }, + }, + "--calcite-table-pagination-item-border-color-selected": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + }, + "--calcite-table-pagination-item-border-color-hover": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-pagination-item-text-color", + state: { hover: { attribute: "class", value: "page" } }, + }, + "--calcite-table-pagination-arrow-icon-color": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-table-pagination-arrow-icon-color", + }, + "--calcite-table-pagination-arrow-icon-color-hover": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-table-pagination-arrow-icon-color", + state: { hover: { attribute: "class", value: "chevron--next" } }, + }, + "--calcite-table-pagination-arrow-icon-color-active": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-table-pagination-arrow-icon-color", + state: { press: { attribute: "class", value: "chevron--next" } }, + }, + "--calcite-table-pagination-arrow-background-color": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-table-pagination-arrow-background-color", + }, + "--calcite-table-pagination-arrow-background-color-hover": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-table-pagination-arrow-background-color", + state: { hover: { attribute: "class", value: "chevron--next" } }, + }, + "--calcite-table-pagination-arrow-background-color-active": { + shadowSelector: `calcite-pagination`, + targetProp: "--calcite-table-pagination-arrow-background-color", + state: { press: { attribute: "class", value: "chevron--next" } }, + }, + }; + themed( + html` + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + cell + cell + + + + + `, + tokens, + ); + }); + }); + describe("table row", () => { + describe("default", () => { + themed( + html` + + cell + cell + + + cell + cell + + + cell + cell + + `, + { + "--calcite-table-row-background-color": { + selector: `calcite-table-row[data-test='two']`, + shadowSelector: "tr", + targetProp: "backgroundColor", + }, + "--calcite-table-row-secondary-background-color": { + selector: `calcite-table-row[data-test='one']`, + shadowSelector: "tr", + targetProp: "backgroundColor", + }, + "--calcite-table-row-background-color-selected": { + selector: `calcite-table-row[selected]`, + shadowSelector: "tr", + targetProp: "backgroundColor", + }, + "--calcite-table-row-border-color": { + selector: `calcite-table-row`, + shadowSelector: "tr", + targetProp: "borderBlockEndColor", + }, + }, + ); + }); + describe("deprecated", () => { + themed( + html` + + cell + cell + + + cell + cell + + + cell + cell + + `, + { + "--calcite-table-row-background": { + selector: `calcite-table-row`, + shadowSelector: "tr", + targetProp: "backgroundColor", + }, + }, + ); + }); + }); + describe("table header", () => { + describe("default", () => { + themed( + html` + + + + + + cell + cell + + `, + { + "--calcite-table-header-background-color": { + selector: `calcite-table-header`, + shadowSelector: "th", + targetProp: "backgroundColor", + }, + "--calcite-table-header-border-color": { + selector: `calcite-table-header`, + shadowSelector: "th", + targetProp: "borderBlockEndColor", + }, + "--calcite-table-header-heading-text-color": { + selector: `calcite-table-header`, + shadowSelector: `.${TABLEHEADER_CSS.heading}`, + targetProp: "color", + }, + "--calcite-table-header-description-text-color": { + selector: `calcite-table-header`, + shadowSelector: `.${TABLEHEADER_CSS.description}`, + targetProp: "color", + }, + }, + ); + }); + describe("deprecated", () => { + themed( + html` + + + + + + cell + cell + + `, + { + "--calcite-table-header-background": { + selector: `calcite-table-header`, + shadowSelector: "th", + targetProp: "backgroundColor", + }, + }, + ); + }); + }); + describe("table cell", () => { + describe("default", () => { + themed( + html` + + cell + cell + + + foot + foot + foot + foot + + `, + { + "--calcite-table-cell-background-color": { + selector: `calcite-table-cell`, + shadowSelector: "td", + targetProp: "backgroundColor", + }, + "--calcite-table-cell-border-color": { + selector: `calcite-table-cell`, + shadowSelector: "td", + targetProp: "borderColor", + }, + "--calcite-table-cell-text-color": { + selector: `calcite-table-cell`, + shadowSelector: "td", + targetProp: "color", + }, + // "--calcite-table-cell-number-background-color": { + // selector: `calcite-table`, + // targetProp: "backgroundColor", + // }, + "--calcite-table-cell-footer-background-color": { + selector: `calcite-table-cell`, + shadowSelector: `.${TABLECELL_CSS.footerCell}`, + targetProp: "backgroundColor", + }, + // "--calcite-table-cell-text-color-selected": { + // selector: `calcite-table-cell`, + // shadowSelector: `.${TABLECELL_CSS.selectionCell}`, + // targetProp: "backgroundColor", + // }, + // "--calcite-table-cell-shadow": { + // selector: `calcite-table-cell`, + // shadowSelector: `.${TABLECELL_CSS.selectedCell}`, + // targetProp: "boxShadow", + // }, + // "--calcite-table-cell-shadow-selected": { + // selector: `calcite-table-cell`, + // shadowSelector: `.${TABLECELL_CSS.selectedCell}`, + // targetProp: "boxShadow", + // }, + }, + ); + }); + describe("deprecated", () => { + themed( + html`] + + cell + 1 + + `, + { + "--calcite-table-cell-background": { + selector: `calcite-table-cell`, + shadowSelector: "td", + targetProp: "backgroundColor", + }, + }, + ); + }); + }); }); }); From 3053343bdf388f4fb986b248d50f2b5f8fed6e3c Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 20 Jun 2024 09:41:47 -0700 Subject: [PATCH 08/11] test(table, table-row, table-header, table-cell): add themed e2e tests --- .../src/components/table/table.e2e.ts | 53 ++++++++++--------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts index aa28c93d18b..9a962826be6 100644 --- a/packages/calcite-components/src/components/table/table.e2e.ts +++ b/packages/calcite-components/src/components/table/table.e2e.ts @@ -4,6 +4,8 @@ import { accessible, renders, hidden, defaults, reflects } from "../../tests/com import { createSelectedItemsAsserter, getFocusedElementProp } from "../../tests/utils"; import { CSS as TABLECELL_CSS } from "../table-cell/resources"; import { CSS as TABLEHEADER_CSS } from "../table-header/resources"; +import { CSS as TABLECELL_CSS } from "../table-cell/resources"; +import { CSS as TABLEHEADER_CSS } from "../table-header/resources"; import { CSS as PAGINATION_CSS } from "../pagination/resources"; import { CSS as CELL_CSS } from "../table-cell/resources"; import { CSS, SLOTS } from "../table/resources"; @@ -3016,22 +3018,29 @@ describe("keyboard navigation", () => { describe("table cell", () => { describe("default", () => { themed( - html` + html` cell cell + + cell + cell + foot foot - foot - foot `, { "--calcite-table-cell-background-color": { selector: `calcite-table-cell`, - shadowSelector: "td", + shadowSelector: `.${TABLECELL_CSS.contentCell}`, + targetProp: "backgroundColor", + }, + "--calcite-table-cell-background-color-selected": { + selector: `calcite-table-row[selected] calcite-table-cell`, + shadowSelector: `.${TABLECELL_CSS.selectedCell}`, targetProp: "backgroundColor", }, "--calcite-table-cell-border-color": { @@ -3044,30 +3053,26 @@ describe("keyboard navigation", () => { shadowSelector: "td", targetProp: "color", }, - // "--calcite-table-cell-number-background-color": { - // selector: `calcite-table`, - // targetProp: "backgroundColor", - // }, + "--calcite-table-cell-number-background-color": { + selector: `calcite-table-row`, + shadowSelector: `calcite-table-cell >>> .${TABLECELL_CSS.numberCell}`, + targetProp: "backgroundColor", + }, "--calcite-table-cell-footer-background-color": { - selector: `calcite-table-cell`, + selector: `calcite-table-row[slot="table-footer"] calcite-table-cell`, shadowSelector: `.${TABLECELL_CSS.footerCell}`, targetProp: "backgroundColor", }, - // "--calcite-table-cell-text-color-selected": { - // selector: `calcite-table-cell`, - // shadowSelector: `.${TABLECELL_CSS.selectionCell}`, - // targetProp: "backgroundColor", - // }, - // "--calcite-table-cell-shadow": { - // selector: `calcite-table-cell`, - // shadowSelector: `.${TABLECELL_CSS.selectedCell}`, - // targetProp: "boxShadow", - // }, - // "--calcite-table-cell-shadow-selected": { - // selector: `calcite-table-cell`, - // shadowSelector: `.${TABLECELL_CSS.selectedCell}`, - // targetProp: "boxShadow", - // }, + "--calcite-table-cell-shadow-selected": { + selector: `calcite-table-row[selected]`, + shadowSelector: `calcite-table-cell:nth-child(2) >>> .${TABLECELL_CSS.selectionCell}`, + targetProp: "boxShadow", + }, + "--calcite-table-cell-text-color-selected": { + selector: `calcite-table-row[selected]`, + shadowSelector: `calcite-table-cell:nth-child(2) >>> .${TABLECELL_CSS.selectionCell}`, + targetProp: "color", + }, }, ); }); From 2300f1420364641daae1e88fb9f85f0455470a45 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 20 Jun 2024 17:18:42 -0700 Subject: [PATCH 09/11] fix(table-cell): update tokens --- .../src/components/table-cell/table-cell.scss | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 0fca6156c28..9ce95889af5 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -4,13 +4,13 @@ * These properties can be overridden using the component's tag as selector. * * @prop --calcite-table-cell-background: [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the background color of the component. - * @prop --calcite-table-cell-background-color: Specifies the background color of the component. Will fallback to `--calcite-table-row-background-color` if not set. + * @prop --calcite-table-cell-background-color: Specifies the background color of the component. + * @prop --calcite-table-cell-background-color-selected: Specifies the background color of the selected cell. * @prop --calcite-table-cell-border-color: Specifies the border color of the component. * @prop --calcite-table-cell-text-color: Specifies the text color of the component. * @prop --calcite-table-cell-number-background-color: Specifies the background color of the number cell. * @prop --calcite-table-cell-footer-background-color: Specifies the background color of the footer cell. * @prop --calcite-table-cell-text-color-selected: Specifies the text color of the selected cell. - * @prop --calcite-table-cell-shadow: Specifies the shadow of the component. * @prop --calcite-table-cell-shadow-selected: Specifies the shadow of the selected cell. */ @@ -30,7 +30,6 @@ */ :host { - --calcite-internal-table-cell-background: var(--calcite-table-cell-background, transparent); @apply contents; } @@ -47,8 +46,13 @@ } td { + --calcite-internal-table-cell-background-color: var( + --calcite-table-cell-background-color, + var(--calcite-table-cell-background, transparent) + ); + @apply text-start align-middle whitespace-normal; - background-color: var(--calcite-internal-table-cell-background); + background-color: var(--calcite-internal-table-cell-background-color); font-size: var(--calcite-internal-table-cell-font-size); border-inline-end: 1px solid var( @@ -117,11 +121,14 @@ td.last-cell { } .selected-cell:not(.number-cell):not(.footer-cell) { - --calcite-internal-table-cell-background: var(--calcite-color-foreground-current); + --calcite-internal-table-cell-background-color: var( + --calcite-table-cell-background-color-selected, + var(--calcite-color-foreground-current) + ); } .selection-cell.selected-cell { - box-shadow: var(--calcite-table-cell-shadow, inset 0.25rem 0 0 0 var(--calcite-color-brand)); + box-shadow: var(--calcite-table-cell-shadow-selected, inset 0.25rem 0 0 0 var(--calcite-color-brand)); color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand)); & calcite-icon { --calcite-icon-color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand)); From 787a552a946ad1a15953bba38ba1b74dbb648e89 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Thu, 20 Jun 2024 18:12:12 -0700 Subject: [PATCH 10/11] chore(pagination): revert pagination changes This reverts commit c1e79452fd29903c2138e4d1f8cbb1bce58bcb51. --- .../calcite-components/src/components.d.ts | 18 ------------------ .../src/components/pagination/pagination.scss | 5 +---- .../src/components/pagination/pagination.tsx | 16 ++++------------ .../src/components/pagination/resources.ts | 4 ---- 4 files changed, 5 insertions(+), 38 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 4c163bdf1c3..af91005d058 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4562,10 +4562,6 @@ export namespace Components { * Accessible name for the dropdown menu. */ "dropdownLabel": string; - /** - * Defines the available placements that can be used when a flip occurs. - */ - "flipPlacements": FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -4578,11 +4574,6 @@ export namespace Components { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning": OverlayPositioning; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-end" - */ - "placement": MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ @@ -12518,10 +12509,6 @@ declare namespace LocalJSX { * Accessible name for the dropdown menu. */ "dropdownLabel"?: string; - /** - * Defines the available placements that can be used when a flip occurs. - */ - "flipPlacements"?: FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -12542,11 +12529,6 @@ declare namespace LocalJSX { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning"?: OverlayPositioning; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-end" - */ - "placement"?: MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss index 117a0d53bf6..90163470d88 100644 --- a/packages/calcite-components/src/components/pagination/pagination.scss +++ b/packages/calcite-components/src/components/pagination/pagination.scss @@ -139,10 +139,7 @@ --calcite-pagination-arrow-background-color, var(--calcite-pagination-item-background-color, transparent) ); - color: var( - --calcite-pagination-arrow-icon-color, - var(--calcite-pagination-item-text-color, var(--calcite-color-text-3)) - ); + color: var(--calcite-pagination-item-text-color, var(--calcite-color-text-3)); &:hover { background-color: var(--calcite-pagination-arrow-background-color-hover); color: var(--calcite-pagination-arrow-icon-color-hover, var(--calcite-color-brand)); diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx index ecc9913503e..4c606191cfd 100644 --- a/packages/calcite-components/src/components/pagination/pagination.tsx +++ b/packages/calcite-components/src/components/pagination/pagination.tsx @@ -552,19 +552,11 @@ export class Pagination render(): VNode { return (
    -
  • - {this.renderFirstChevron()} -
    • -
  • - {this.renderPreviousChevron()} -
    • +
  • {this.renderFirstChevron()}
    • +
  • {this.renderPreviousChevron()}
    • {this.renderItems()} -
  • - {this.renderNextChevron()} -
    • -
  • - {this.renderLastChevron()} -
    • +
  • {this.renderNextChevron()}
    • +
  • {this.renderLastChevron()}
); } diff --git a/packages/calcite-components/src/components/pagination/resources.ts b/packages/calcite-components/src/components/pagination/resources.ts index 1c3a3af7e11..3ba74cdb169 100644 --- a/packages/calcite-components/src/components/pagination/resources.ts +++ b/packages/calcite-components/src/components/pagination/resources.ts @@ -4,10 +4,6 @@ export const CSS = { page: "page", selected: "selected", chevron: "chevron", - chevronFirst: "chevron--first", - chevronPrevious: "chevron--previous", - chevronNext: "chevron--next", - chevronLast: "chevron--last", disabled: "disabled", ellipsis: "ellipsis", }; From 9341dff54d5417a3756561164625c4543cb971b3 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 21 Jun 2024 13:09:35 -0700 Subject: [PATCH 11/11] fix(table-cell): cleanup indicator colors --- .../calcite-components/src/components.d.ts | 18 +++++ .../src/components/table-cell/table-cell.scss | 75 ++++++++++--------- 2 files changed, 56 insertions(+), 37 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index af91005d058..4c163bdf1c3 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4562,6 +4562,10 @@ export namespace Components { * Accessible name for the dropdown menu. */ "dropdownLabel": string; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements": FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -4574,6 +4578,11 @@ export namespace Components { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning": OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement": MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ @@ -12509,6 +12518,10 @@ declare namespace LocalJSX { * Accessible name for the dropdown menu. */ "dropdownLabel"?: string; + /** + * Defines the available placements that can be used when a flip occurs. + */ + "flipPlacements"?: FlipPlacement[]; /** * Specifies the kind of the component, which will apply to border and background, if applicable. */ @@ -12529,6 +12542,11 @@ declare namespace LocalJSX { * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. */ "overlayPositioning"?: OverlayPositioning; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-end" + */ + "placement"?: MenuPlacement; /** * Specifies an icon to display at the end of the primary button. */ diff --git a/packages/calcite-components/src/components/table-cell/table-cell.scss b/packages/calcite-components/src/components/table-cell/table-cell.scss index 9ce95889af5..4a51582c69f 100644 --- a/packages/calcite-components/src/components/table-cell/table-cell.scss +++ b/packages/calcite-components/src/components/table-cell/table-cell.scss @@ -5,13 +5,14 @@ * * @prop --calcite-table-cell-background: [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the background color of the component. * @prop --calcite-table-cell-background-color: Specifies the background color of the component. - * @prop --calcite-table-cell-background-color-selected: Specifies the background color of the selected cell. + * @prop --calcite-table-cell-background-color-selected: Specifies the background color of the component in a selected row. * @prop --calcite-table-cell-border-color: Specifies the border color of the component. * @prop --calcite-table-cell-text-color: Specifies the text color of the component. - * @prop --calcite-table-cell-number-background-color: Specifies the background color of the number cell. + * @prop --calcite-table-cell-number-background-color: Specifies the background color of the number cell when "numbered" is set on the parent table. * @prop --calcite-table-cell-footer-background-color: Specifies the background color of the footer cell. - * @prop --calcite-table-cell-text-color-selected: Specifies the text color of the selected cell. - * @prop --calcite-table-cell-shadow-selected: Specifies the shadow of the selected cell. + * @prop --calcite-table-cell-text-color-selected: Specifies the text color of the component in a selected row. + * @prop --calcite-table-cell-indicator-color-highlight: Specifies the selection indicator color when selection-mode is set on the parent table. + * @prop --calcite-table-cell-indicator-color-selected: Specifies the selection indicator color of the component in a selected row. */ /** @@ -50,17 +51,19 @@ td { --calcite-table-cell-background-color, var(--calcite-table-cell-background, transparent) ); + --calcite-internal-table-cell-text-color: var(--calcite-table-cell-text-color, var(--calcite-color-text-1)); @apply text-start align-middle whitespace-normal; background-color: var(--calcite-internal-table-cell-background-color); font-size: var(--calcite-internal-table-cell-font-size); - border-inline-end: 1px solid - var( - --calcite-table-cell-border-color, - var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) - ); + border-color: var( + --calcite-table-cell-border-color, + var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) + ); + border-style: solid; + border-inline-end-width: var(--calcite-border-width-sm); padding: var(--calcite-internal-table-cell-padding); - color: var(--calcite-table-cell-text-color, var(--calcite-color-text-1)); + color: var(--calcite-internal-table-cell-text-color); &:not(.static-cell) { @apply focus-base; @@ -83,41 +86,46 @@ td.last-cell { } .number-cell { - background-color: var( + --calcite-internal-table-cell-background-color: var( --calcite-table-cell-number-background-color, - var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2)) + var(--calcite-color-foreground-2) ); } .footer-cell { - @apply font-medium text-color-1; - border-block-start: 1px solid - var( - --calcite-table-cell-border-color, - var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) - ); - background-color: var(--calcite-table-cell-footer-background-color, var(--calcite-color-background)); + --calcite-internal-table-cell-background-color: var( + --calcite-table-cell-footer-background-color, + var(--calcite-color-background) + ); + + @apply font-medium; + border-block-start-width: var(--calcite-border-width-sm); } .number-cell, .selection-cell { @apply text-center; - border-inline-end: 1px solid - var( - --calcite-table-cell-border-color, - var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3))) - ); + inline-size: 2rem; min-inline-size: 2rem; } .selection-cell { + @apply align-middle; inset-inline-start: 2rem; - color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-text-3)); &:not(.footer-cell) { @apply cursor-pointer; } + + calcite-icon, + ::slotted(calcite-icon) { + --calcite-icon-color: var(--calcite-table-cell-indicator-color-highlight, var(--calcite-color-text-3)); + } + + ::slotted(calcite-icon) { + @apply pointer-events-none mt-1; + } } .selected-cell:not(.number-cell):not(.footer-cell) { @@ -128,22 +136,15 @@ td.last-cell { } .selection-cell.selected-cell { - box-shadow: var(--calcite-table-cell-shadow-selected, inset 0.25rem 0 0 0 var(--calcite-color-brand)); - color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand)); - & calcite-icon { - --calcite-icon-color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand)); + box-shadow: inset 0.25rem 0 0 0 var(--calcite-table-cell-indicator-color-selected, var(--calcite-color-brand)); + + calcite-icon { + --calcite-icon-color: var(--calcite-table-cell-indicator-color-selected, var(--calcite-color-brand)); } } .calcite--rtl.selection-cell.selected-cell { - box-shadow: var(--calcite-table-cell-shadow-selected, inset -0.25rem 0 0 0 var(--calcite-color-brand)); -} - -.selection-cell { - @apply align-middle; - & ::slotted(calcite-icon) { - @apply pointer-events-none mt-1; - } + box-shadow: inset -0.25rem 0 0 0 var(--calcite-table-cell-indicator-color-selected, var(--calcite-color-brand)); } @include disabled();