From 2623634666da7be1a49c52ce6f793262cf4b5ca9 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 16 Aug 2024 16:37:28 -0700 Subject: [PATCH 01/10] fix(card): simplify tokens --- .../src/components/card/card.scss | 82 ++++++++++--------- 1 file changed, 43 insertions(+), 39 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index 8b6b3fdfb9a..a3154b28c01 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -3,35 +3,25 @@ * * These properties can be overridden using the component's tag as selector. * + * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`. * @prop --calcite-card-background-color: Specifies the background color of the component. * @prop --calcite-card-border-color: Specifies the border color of the component. - * @prop --calcite-card-shadow: Specifies the shadow of the component. + * @prop --calcite-card-check-color-hover: Specifies the color of the selection check icon when hovered. + * @prop --calcite-card-check-color: Specifies the color of the selection check icon. * @prop --calcite-card-corner-radius: Specifies the corner radius of the component. - * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`. - * @prop --calcite-card-selection-background-color: Specifies the background color of the component's selection element. - * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered. - * @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active. - * @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`. - * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element. - * @prop --calcite-card-selection-icon-color-hover: Specifies the icon color of the component's selection element when hovered. - * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`. + * @prop --calcite-card-selection-background-color-active: [Deprecated] Specifies the background color of the component's selection element when active. + * @prop --calcite-card-selection-background-color-hover: [Deprecated] Specifies the background color of the component's selection element when hovered. + * @prop --calcite-card-selection-background-color-selected: [Deprecated] Specifies the icon color of the component's selection element when `selected`. + * @prop --calcite-card-selection-background-color: [Deprecated] Specifies the background color of the component's selection element. + * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use --calcite-card-check-color-hover instead. Specifies the icon color of the component's selection element when hovered. + * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use --calcite-card-accent-color-selected instead. Specifies the icon color of the component's selection element when `selected`. + * @prop --calcite-card-selection-icon-color: [Deprecated] Use --calcite-card-check-color instead. Specifies the icon color of the component's selection element. + * @prop --calcite-card-shadow: Specifies the shadow of the component. * */ :host { @apply block max-w-full; - --calcite-card-corner-radius: var(--calcite-corner-radius-sharp); - --calcite-card-background-color: var(--calcite-color-foreground-1); - --calcite-card-border-color: var(--calcite-color-border-3); - --calcite-card-shadow: var(--calcite-shadow-none); - --calcite-card-accent-color-selected: var(--calcite-color-brand); - --calcite-card-selection-background-color: transparent; - --calcite-card-selection-background-color-hover: var(--calcite-color-transparent-hover); - --calcite-card-selection-background-color-active: var(--calcite-color-transparent-press); - --calcite-card-selection-background-color-selected: transparent; - --calcite-card-selection-icon-color: var(--calcite-color-text-3); - --calcite-card-selection-icon-color-hover: var(--calcite-color-text-2); - --calcite-card-selection-icon-color-selected: var(--calcite-color-brand); } .content-wrapper { @@ -41,10 +31,10 @@ flex-col justify-between overflow-hidden; - border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color); - border-radius: var(--calcite-card-corner-radius); - background-color: var(--calcite-card-background-color); - box-shadow: var(--calcite-card-shadow); + border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3)); + border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp)); + background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1)); + box-shadow: var(--calcite-card-shadow, var(--calcite-shadow-none)); pointer-events: none; } @@ -111,7 +101,7 @@ } :host([selected]) .content-wrapper { - box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected); + box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand)); } :host([selectable]) .header { @@ -169,17 +159,21 @@ .checkbox-wrapper { @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto; - background-color: var(--calcite-card-selection-background-color); + background-color: var(--calcite-color-transparent); display: flex; align-items: center; justify-items: center; - --calcite-ui-icon-color: var(--calcite-card-selection-icon-color); + color: var(--calcite-card-check-color, var(--calcite-card-selection-icon-color, var(--calcite-color-text-3))); + &:hover { - background-color: var(--calcite-card-selection-background-color-hover); - --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover); + background-color: var(--calcite-color-transparent-hover); + color: var( + --calcite-card-check-color-hover, + var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) + ); } &:active { - background-color: var(--calcite-card-selection-background-color-active); + background-color: var(--calcite-color-transparent-press); } & calcite-icon { pointer-events: none; @@ -187,24 +181,34 @@ } :host([selected]) .checkbox-wrapper { - --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected); - background-color: var(--calcite-card-selection-background-color-selected); + color: var( + --calcite-card-accent-color-selected, + var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) + ); + background-color: var(--calcite-color-transparent); + &:hover { - background-color: var(--calcite-card-selection-background-color-hover); + background-color: var(--calcite-color-transparent-hover); } &:active { - background-color: var(--calcite-card-selection-background-color-active); + background-color: var(--calcite-color-transparent-press); } } :host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { - background-color: var(--calcite-card-selection-background-color-hover); - --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover); + background-color: var(--calcite-color-transparent-hover); + color: var( + --calcite-card-check-color-hover, + var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) + ); } :host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { - background-color: var(--calcite-card-selection-background-color-active); - --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected); + background-color: var(--calcite-color-transparent-press); + color: var( + --calcite-card-accent-color-selected, + var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) + ); } .thumbnail-wrapper { From f91d2c38beb78790db160b2da993e2618c7bc433 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 20 Aug 2024 13:54:58 -0700 Subject: [PATCH 02/10] fix(card, card-group): add component tokens to card-group and remove tokens for deprecated feature - checkbox --- .../components/card-group/card-group.e2e.ts | 21 +++++++++++- .../src/components/card-group/card-group.scss | 10 +++--- .../src/components/card/card.e2e.ts | 19 ++++++++++- .../src/components/card/card.scss | 32 ++++++------------- 4 files changed, 53 insertions(+), 29 deletions(-) diff --git a/packages/calcite-components/src/components/card-group/card-group.e2e.ts b/packages/calcite-components/src/components/card-group/card-group.e2e.ts index 75d21dd2bdc..6fb2520a07d 100644 --- a/packages/calcite-components/src/components/card-group/card-group.e2e.ts +++ b/packages/calcite-components/src/components/card-group/card-group.e2e.ts @@ -1,6 +1,6 @@ import { newE2EPage } from "@stencil/core/testing"; import { html } from "../../../support/formatting"; -import { accessible, renders, hidden, disabled } from "../../tests/commonTests"; +import { accessible, renders, hidden, disabled, themed } from "../../tests/commonTests"; import { CSS } from "../card/resources"; import { createSelectedItemsAsserter } from "../../tests/utils"; @@ -441,4 +441,23 @@ describe("calcite-card-group", () => { expect(await element.getProperty("selectedItems")).toHaveLength(2); await selectedItemAsserter([card4.id, card5.id]); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-card-group", { + "--calcite-card-group-space": { + shadowSelector: `.${CSS.container}`, + targetProp: "gap", + }, + }); + }); + describe("deprecated", () => { + themed("calcite-card-group", { + "--calcite-card-group-gap": { + shadowSelector: `.${CSS.container}`, + targetProp: "gap", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/card-group/card-group.scss b/packages/calcite-components/src/components/card-group/card-group.scss index 24393cc1305..44f95abc855 100644 --- a/packages/calcite-components/src/components/card-group/card-group.scss +++ b/packages/calcite-components/src/components/card-group/card-group.scss @@ -3,19 +3,19 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-card-group-gap: Specifies the gap between slotted components. + * @prop --calcite-card-group-gap: [Deprecated] Use --calcite-card-group-space. Specifies the gap between slotted components. + * @prop --calcite-card-group-space: Specifies the space between slotted components. */ :host { - --calcite-card-group-gap: var(--calcite-size-md); - display: block; + @apply block; } .container { display: flex; flex-wrap: wrap; - gap: var(--calcite-card-group-gap); + gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md))); } -@include disabled(); @include base-component(); +@include disabled(); diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts index 52d736c0fef..87a676f76ac 100644 --- a/packages/calcite-components/src/components/card/card.e2e.ts +++ b/packages/calcite-components/src/components/card/card.e2e.ts @@ -1,5 +1,5 @@ import { newE2EPage } from "@stencil/core/testing"; -import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests"; +import { accessible, renders, slots, hidden, t9n, themed } from "../../tests/commonTests"; import { placeholderImage } from "../../../.storybook/placeholderImage"; import { html } from "../../../support/formatting"; import { CSS, SLOTS } from "./resources"; @@ -116,4 +116,21 @@ describe("calcite-card", () => { const loaderContainer = await page.find("calcite-card >>> .calcite-card-loader-container"); expect(loaderContainer.getAttribute("aria-live")).toBe("polite"); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-card", { + "--calcite-card-background-color": { + shadowSelector: `.${CSS.contentWrapper}`, + targetProp: "backgroundColor", + }, + "--calcite-card-border-color": { + shadowSelector: `.${CSS.contentWrapper}`, + targetProp: "borderColor", + }, + "--calcite-card-corner-radius": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "borderRadius" }, + "--calcite-card-shadow": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "boxShadow" }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index a3154b28c01..59afe094dc0 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -6,16 +6,14 @@ * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`. * @prop --calcite-card-background-color: Specifies the background color of the component. * @prop --calcite-card-border-color: Specifies the border color of the component. - * @prop --calcite-card-check-color-hover: Specifies the color of the selection check icon when hovered. - * @prop --calcite-card-check-color: Specifies the color of the selection check icon. * @prop --calcite-card-corner-radius: Specifies the corner radius of the component. * @prop --calcite-card-selection-background-color-active: [Deprecated] Specifies the background color of the component's selection element when active. * @prop --calcite-card-selection-background-color-hover: [Deprecated] Specifies the background color of the component's selection element when hovered. * @prop --calcite-card-selection-background-color-selected: [Deprecated] Specifies the icon color of the component's selection element when `selected`. * @prop --calcite-card-selection-background-color: [Deprecated] Specifies the background color of the component's selection element. - * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use --calcite-card-check-color-hover instead. Specifies the icon color of the component's selection element when hovered. - * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use --calcite-card-accent-color-selected instead. Specifies the icon color of the component's selection element when `selected`. - * @prop --calcite-card-selection-icon-color: [Deprecated] Use --calcite-card-check-color instead. Specifies the icon color of the component's selection element. + * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Specifies the icon color of the component's selection element when hovered. + * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Specifies the icon color of the component's selection element when `selected`. + * @prop --calcite-card-selection-icon-color: [Deprecated] Specifies the icon color of the component's selection element. * @prop --calcite-card-shadow: Specifies the shadow of the component. * */ @@ -149,6 +147,7 @@ @apply text-n2-wrap self-center; } +// deprecated .checkbox-wrapper-deprecated { @apply absolute pointer-events-auto; inset-block-start: var(--calcite-spacing-sm); @@ -163,14 +162,11 @@ display: flex; align-items: center; justify-items: center; - color: var(--calcite-card-check-color, var(--calcite-card-selection-icon-color, var(--calcite-color-text-3))); + color: var(--calcite-color-text-3); &:hover { background-color: var(--calcite-color-transparent-hover); - color: var( - --calcite-card-check-color-hover, - var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) - ); + color: var(--calcite-color-text-2); } &:active { background-color: var(--calcite-color-transparent-press); @@ -181,10 +177,7 @@ } :host([selected]) .checkbox-wrapper { - color: var( - --calcite-card-accent-color-selected, - var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) - ); + color: var(--calcite-color-brand); background-color: var(--calcite-color-transparent); &:hover { @@ -197,19 +190,14 @@ :host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { background-color: var(--calcite-color-transparent-hover); - color: var( - --calcite-card-check-color-hover, - var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) - ); + color: var(--calcite-color-text-2); } :host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { background-color: var(--calcite-color-transparent-press); - color: var( - --calcite-card-accent-color-selected, - var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) - ); + color: var(--calcite-color-brand); } +/* end deprecated */ .thumbnail-wrapper { @apply flex; From 8b87d4513d431d43877fa5509e441384d5809f34 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 26 Aug 2024 08:36:28 -0700 Subject: [PATCH 03/10] test(card): add storybook tests --- .../src/components/card/card.stories.ts | 32 ----------------- .../src/custom-theme.stories.ts | 3 +- .../src/custom-theme/card.ts | 35 +++++++++++++++++++ 3 files changed, 37 insertions(+), 33 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts index c929579db64..88369a675ee 100644 --- a/packages/calcite-components/src/components/card/card.stories.ts +++ b/packages/calcite-components/src/components/card/card.stories.ts @@ -144,38 +144,6 @@ export const thumbnail = (): string => html` `; -export const thumbnailRounded = (): string => html` -
- - - ${thumbnailHtml} -

Portland Businesses

- by - example_user - -
- Created: Apr 22, 2019 -
- Updated: Dec 9, 2019 -
- View Count: 0 -
- - -
-`; - export const headerDoesNotOverlapWithCheckboxDeprecated_TestOnly = (): string => html`

Pokem ipsum dolor sit amet Skitty Hoothoot

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 6c4cd630844..6e6adf7970f 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -12,7 +12,7 @@ import { } from "./custom-theme/action"; import { accordion } from "./custom-theme/accordion"; import { buttons } from "./custom-theme/button"; -import { card, cardTokens } from "./custom-theme/card"; +import { card, cardThumbnail, cardTokens } from "./custom-theme/card"; import { checkbox } from "./custom-theme/checkbox"; import { chips } from "./custom-theme/chips"; import { datePicker } from "./custom-theme/date-picker"; @@ -99,6 +99,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${card}
+ ${cardThumbnail}
${dropdown} ${buttons}
${checkbox}
${chips} ${pagination} ${slider} diff --git a/packages/calcite-components/src/custom-theme/card.ts b/packages/calcite-components/src/custom-theme/card.ts index 5f7b9fa0e99..478f0d2acfc 100644 --- a/packages/calcite-components/src/custom-theme/card.ts +++ b/packages/calcite-components/src/custom-theme/card.ts @@ -11,9 +11,44 @@ export const cardTokens = { calciteCardShadow: "", }; +const thumbnailHtml = html`thumbnail `; + export const card = html` thumbnail

Selectable card

Lead füt Trail füt `; + +export const cardThumbnail = html`
+ + ${thumbnailHtml} +

Portland Businesses

+ by + example_user + +
+ Created: Apr 22, 2019 +
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + +
`; From 32158f5919a49dc47804ef7f78934721e8c41304 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 26 Aug 2024 15:01:15 -0700 Subject: [PATCH 04/10] fix(card): update background color design pattern for hover and selected --- .../src/components/card/card.scss | 69 ++++++++++++------- 1 file changed, 44 insertions(+), 25 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index 59afe094dc0..1794fbc0603 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -5,15 +5,19 @@ * * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`. * @prop --calcite-card-background-color: Specifies the background color of the component. + * @prop --calcite-card-background-color-hover: Specifies the background color of elements in the component when hovered. + * @prop --calcite-card-background-color-press: Specifies the background color of elements in the component when pressed. * @prop --calcite-card-border-color: Specifies the border color of the component. * @prop --calcite-card-corner-radius: Specifies the corner radius of the component. - * @prop --calcite-card-selection-background-color-active: [Deprecated] Specifies the background color of the component's selection element when active. - * @prop --calcite-card-selection-background-color-hover: [Deprecated] Specifies the background color of the component's selection element when hovered. - * @prop --calcite-card-selection-background-color-selected: [Deprecated] Specifies the icon color of the component's selection element when `selected`. - * @prop --calcite-card-selection-background-color: [Deprecated] Specifies the background color of the component's selection element. - * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Specifies the icon color of the component's selection element when hovered. - * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Specifies the icon color of the component's selection element when `selected`. - * @prop --calcite-card-selection-icon-color: [Deprecated] Specifies the icon color of the component's selection element. + * @prop --calcite-card-selection-color: Specifies the color of the component's selection element. + * @prop --calcite-card-selection-color-hover: Specifies the color of the component's selection element when hovered or focused. + * @prop --calcite-card-selection-background-color-active: [Deprecated] Use --calcite-card-background-color-press. Specifies the background color of the component's selection element when active. + * @prop --calcite-card-selection-background-color-hover: [Deprecated] --calcite-card-background-color-hover. Specifies the background color of the component's selection element when hovered. + * @prop --calcite-card-selection-background-color-selected: [Deprecated] Use --calcite-card-background-color. Specifies the icon color of the component's selection element when `selected`. + * @prop --calcite-card-selection-background-color: [Deprecated] Use --calcite-card-background-color. Specifies the background color of the component's selection element. + * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use --calcite-card-selection-color-hover. Specifies the icon color of the component's selection element when hovered. + * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use --calcite-card-accent-color-selected. Specifies the icon color of the component's selection element when `selected`. + * @prop --calcite-card-selection-icon-color: [Deprecated] Use --calcite-card-selection-color. Specifies the icon color of the component's selection element. * @prop --calcite-card-shadow: Specifies the shadow of the component. * */ @@ -158,18 +162,26 @@ .checkbox-wrapper { @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto; - background-color: var(--calcite-color-transparent); display: flex; align-items: center; justify-items: center; - color: var(--calcite-color-text-3); + color: var(--calcite-card-selection-color, var(--calcite-color-text-3)); &:hover { - background-color: var(--calcite-color-transparent-hover); - color: var(--calcite-color-text-2); + background-color: var( + --calcite-card-background-color-hover, + var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) + ); + color: var( + --calcite-card-selection-color-hover, + var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) + ); } &:active { - background-color: var(--calcite-color-transparent-press); + background-color: var( + --calcite-card-background-color-press, + var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) + ); } & calcite-icon { pointer-events: none; @@ -177,25 +189,32 @@ } :host([selected]) .checkbox-wrapper { - color: var(--calcite-color-brand); - background-color: var(--calcite-color-transparent); - - &:hover { - background-color: var(--calcite-color-transparent-hover); - } - &:active { - background-color: var(--calcite-color-transparent-press); - } + color: var( + --calcite-card-accent-color-selected, + var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) + ); } :host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { - background-color: var(--calcite-color-transparent-hover); - color: var(--calcite-color-text-2); + background-color: var( + --calcite-card-background-color-hover, + var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) + ); + color: var( + --calcite-card-selection-color-hover, + var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) + ); } :host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { - background-color: var(--calcite-color-transparent-press); - color: var(--calcite-color-brand); + background-color: var( + --calcite-card-background-color-press, + var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) + ); + color: var( + --calcite-card-accent-color-selected, + var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) + ); } /* end deprecated */ From 2cbd1d8d329f75bd167494b206a808ad4d02923b Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 26 Aug 2024 15:01:27 -0700 Subject: [PATCH 05/10] test(card): add e2e token tests --- .../src/components/card/card.e2e.ts | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts index b568c59080a..2dc3342c19a 100644 --- a/packages/calcite-components/src/components/card/card.e2e.ts +++ b/packages/calcite-components/src/components/card/card.e2e.ts @@ -124,13 +124,114 @@ describe("calcite-card", () => { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "backgroundColor", }, + "--calcite-card-background-color-hover": [ + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "backgroundColor", + state: "hover", + }, + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "backgroundColor", + state: "focus", + }, + ], + "--calcite-card-background-color-press": { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.checkboxWrapper } }, + }, "--calcite-card-border-color": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "borderColor", }, "--calcite-card-corner-radius": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "borderRadius" }, + "--calcite-card-selection-color": { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "color", + }, + "--calcite-card-selection-color-hover": [ + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "color", + state: "hover", + }, + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "color", + state: "focus", + }, + ], "--calcite-card-shadow": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "boxShadow" }, }); }); + describe("selected", () => { + themed(html``, { + "--calcite-card-accent-color-selected": [ + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "color", + }, + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "color", + state: "focus", + }, + ], + "--calcite-card-background-color-press": { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "backgroundColor", + state: "focus", + }, + }); + }); + describe("deprecated", () => { + describe("default", () => { + themed("calcite-card", { + "--calcite-card-selection-icon-color-hover": [ + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "color", + state: "hover", + }, + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "color", + state: "focus", + }, + ], + "--calcite-card-selection-background-color-hover": [ + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "backgroundColor", + state: "hover", + }, + { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "backgroundColor", + state: "focus", + }, + ], + "--calcite-card-selection-background-color-active": { + shadowSelector: `.${CSS.checkboxWrapper}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.checkboxWrapper } }, + }, + }); + }); + describe("selected", () => { + themed(html``, { + "--calcite-card-selection-icon-color-selected": { + targetProp: "color", + shadowSelector: `.${CSS.checkboxWrapper}`, + }, + "--calcite-card-selection-background-color-active": { + targetProp: "backgroundColor", + shadowSelector: `.${CSS.checkboxWrapper}`, + state: "focus", + }, + }); + }); + }); }); }); From daec090186c24a0c38f982f17dbe0fa926da84cf Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 26 Aug 2024 16:05:33 -0700 Subject: [PATCH 06/10] fix(card): support checkbox-wrapper-deprecated --- .../src/components/card/card.scss | 66 +++++++++++-------- 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index 1794fbc0603..e9c08667144 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -160,7 +160,8 @@ padding: 0; } -.checkbox-wrapper { +.checkbox-wrapper, +.checkbox-wrapper-deprecated { @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto; display: flex; align-items: center; @@ -188,33 +189,42 @@ } } -:host([selected]) .checkbox-wrapper { - color: var( - --calcite-card-accent-color-selected, - var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) - ); -} - -:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { - background-color: var( - --calcite-card-background-color-hover, - var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) - ); - color: var( - --calcite-card-selection-color-hover, - var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) - ); -} - -:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper { - background-color: var( - --calcite-card-background-color-press, - var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) - ); - color: var( - --calcite-card-accent-color-selected, - var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) - ); +:host([selected]) { + .checkbox-wrapper-deprecated, + .checkbox-wrapper { + color: var( + --calcite-card-accent-color-selected, + var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) + ); + } +} + +:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus { + .checkbox-wrapper-deprecated, + .checkbox-wrapper { + background-color: var( + --calcite-card-background-color-hover, + var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) + ); + color: var( + --calcite-card-selection-color-hover, + var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) + ); + } +} + +:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus { + .checkbox-wrapper-deprecated, + .checkbox-wrapper { + background-color: var( + --calcite-card-background-color-press, + var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) + ); + color: var( + --calcite-card-accent-color-selected, + var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) + ); + } } /* end deprecated */ From 6e7b14c016c29917e3c370e6617bf0f7d36aa0f7 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Mon, 26 Aug 2024 16:05:49 -0700 Subject: [PATCH 07/10] test(card): clean up e2e for tokens --- .../src/components/card/card.e2e.ts | 124 +++++------------- 1 file changed, 36 insertions(+), 88 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts index 2dc3342c19a..f6fdac9e122 100644 --- a/packages/calcite-components/src/components/card/card.e2e.ts +++ b/packages/calcite-components/src/components/card/card.e2e.ts @@ -124,113 +124,61 @@ describe("calcite-card", () => { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "backgroundColor", }, - "--calcite-card-background-color-hover": [ - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "backgroundColor", - state: "hover", - }, - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "backgroundColor", - state: "focus", - }, - ], - "--calcite-card-background-color-press": { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "backgroundColor", - state: { press: { attribute: "class", value: CSS.checkboxWrapper } }, - }, "--calcite-card-border-color": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "borderColor", }, "--calcite-card-corner-radius": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "borderRadius" }, - "--calcite-card-selection-color": { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "color", - }, - "--calcite-card-selection-color-hover": [ - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "color", - state: "hover", - }, - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "color", - state: "focus", - }, - ], "--calcite-card-shadow": { shadowSelector: `.${CSS.contentWrapper}`, targetProp: "boxShadow" }, }); }); - describe("selected", () => { - themed(html``, { - "--calcite-card-accent-color-selected": [ - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "color", - }, - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "color", - state: "focus", - }, - ], - "--calcite-card-background-color-press": { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "backgroundColor", - state: "focus", - }, - }); - }); - describe("deprecated", () => { + describe("selectable", () => { describe("default", () => { - themed("calcite-card", { - "--calcite-card-selection-icon-color-hover": [ - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "color", + themed( + html` +

ArcGIS Online: Gallery and Organization pages

+ + A great example of a study description that might wrap to a line or two, but isn't overly verbose. + + `, + { + "--calcite-card-background-color-hover": { + shadowSelector: `.${CSS.checkboxWrapperDeprecated}`, + targetProp: "backgroundColor", state: "hover", }, - { - shadowSelector: `.${CSS.checkboxWrapper}`, + "--calcite-card-background-color-press": { + shadowSelector: `.${CSS.checkboxWrapperDeprecated}`, + targetProp: "backgroundColor", + state: { press: { attribute: "class", value: CSS.checkboxWrapperDeprecated } }, + }, + "--calcite-card-selection-color": { + shadowSelector: `.${CSS.checkboxWrapperDeprecated}`, targetProp: "color", - state: "focus", }, - ], - "--calcite-card-selection-background-color-hover": [ - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "backgroundColor", + "--calcite-card-selection-color-hover": { + shadowSelector: `.${CSS.checkboxWrapperDeprecated}`, + targetProp: "color", state: "hover", }, - { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "backgroundColor", - state: "focus", - }, - ], - "--calcite-card-selection-background-color-active": { - shadowSelector: `.${CSS.checkboxWrapper}`, - targetProp: "backgroundColor", - state: { press: { attribute: "class", value: CSS.checkboxWrapper } }, }, - }); + ); }); describe("selected", () => { - themed(html``, { - "--calcite-card-selection-icon-color-selected": { - targetProp: "color", - shadowSelector: `.${CSS.checkboxWrapper}`, - }, - "--calcite-card-selection-background-color-active": { - targetProp: "backgroundColor", - shadowSelector: `.${CSS.checkboxWrapper}`, - state: "focus", + themed( + html` +

ArcGIS Online: Gallery and Organization pages

+ + A great example of a study description that might wrap to a line or two, but isn't overly verbose. + + `, + { + "--calcite-card-accent-color-selected": { + shadowSelector: `.${CSS.checkboxWrapperDeprecated}`, + targetProp: "color", + }, }, - }); + ); }); }); }); From e3176db16fbf89f9788486fbcfd5c4fa8917a63a Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 27 Aug 2024 07:27:22 -0700 Subject: [PATCH 08/10] fix(card): positioning of deprecated checkbox --- .../src/components/card/card.scss | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index e9c08667144..8a011dccfae 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -158,10 +158,27 @@ inset-inline-end: var(--calcite-spacing-sm); margin: 0; padding: 0; + color: var(--calcite-card-selection-color, var(--calcite-color-text-3)); + + &:hover { + background-color: var( + --calcite-card-background-color-hover, + var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) + ); + color: var( + --calcite-card-selection-color-hover, + var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) + ); + } + &:active { + background-color: var( + --calcite-card-background-color-press, + var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) + ); + } } -.checkbox-wrapper, -.checkbox-wrapper-deprecated { +.checkbox-wrapper { @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto; display: flex; align-items: center; From 33f0aa3d4933a97a351fe66258dd339d4b5ef2ff Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 27 Aug 2024 09:19:25 -0700 Subject: [PATCH 09/10] fix(card): update tokens --- .../src/components/card/card.scss | 41 +++++-------------- 1 file changed, 11 insertions(+), 30 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss index 8a011dccfae..ae58ceedd19 100644 --- a/packages/calcite-components/src/components/card/card.scss +++ b/packages/calcite-components/src/components/card/card.scss @@ -5,16 +5,15 @@ * * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`. * @prop --calcite-card-background-color: Specifies the background color of the component. - * @prop --calcite-card-background-color-hover: Specifies the background color of elements in the component when hovered. - * @prop --calcite-card-background-color-press: Specifies the background color of elements in the component when pressed. * @prop --calcite-card-border-color: Specifies the border color of the component. * @prop --calcite-card-corner-radius: Specifies the corner radius of the component. - * @prop --calcite-card-selection-color: Specifies the color of the component's selection element. - * @prop --calcite-card-selection-color-hover: Specifies the color of the component's selection element when hovered or focused. - * @prop --calcite-card-selection-background-color-active: [Deprecated] Use --calcite-card-background-color-press. Specifies the background color of the component's selection element when active. - * @prop --calcite-card-selection-background-color-hover: [Deprecated] --calcite-card-background-color-hover. Specifies the background color of the component's selection element when hovered. + * @prop --calcite-card-selection-background-color-active: [Deprecated] Use --calcite-card-selection-background-color-press. Specifies the background color of the component's selection element when active. + * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered. + * @prop --calcite-card-selection-background-color-press: Specifies the background color of the component's selection element when active. * @prop --calcite-card-selection-background-color-selected: [Deprecated] Use --calcite-card-background-color. Specifies the icon color of the component's selection element when `selected`. * @prop --calcite-card-selection-background-color: [Deprecated] Use --calcite-card-background-color. Specifies the background color of the component's selection element. + * @prop --calcite-card-selection-color-hover: Specifies the color of the component's selection element when hovered or focused. + * @prop --calcite-card-selection-color: Specifies the color of the component's selection element. * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use --calcite-card-selection-color-hover. Specifies the icon color of the component's selection element when hovered. * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use --calcite-card-accent-color-selected. Specifies the icon color of the component's selection element when `selected`. * @prop --calcite-card-selection-icon-color: [Deprecated] Use --calcite-card-selection-color. Specifies the icon color of the component's selection element. @@ -161,20 +160,14 @@ color: var(--calcite-card-selection-color, var(--calcite-color-text-3)); &:hover { - background-color: var( - --calcite-card-background-color-hover, - var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) - ); + background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)); color: var( --calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) ); } &:active { - background-color: var( - --calcite-card-background-color-press, - var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) - ); + background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press)); } } @@ -186,20 +179,14 @@ color: var(--calcite-card-selection-color, var(--calcite-color-text-3)); &:hover { - background-color: var( - --calcite-card-background-color-hover, - var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) - ); + background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)); color: var( --calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) ); } &:active { - background-color: var( - --calcite-card-background-color-press, - var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) - ); + background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press)); } & calcite-icon { pointer-events: none; @@ -219,10 +206,7 @@ :host(:not([selectable])) .content-wrapper:not(.non-interactive):focus { .checkbox-wrapper-deprecated, .checkbox-wrapper { - background-color: var( - --calcite-card-background-color-hover, - var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)) - ); + background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2)); color: var( --calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)) @@ -233,10 +217,7 @@ :host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus { .checkbox-wrapper-deprecated, .checkbox-wrapper { - background-color: var( - --calcite-card-background-color-press, - var(--calcite-card-selection-background-color-active, var(--calcite-color-transparent-press)) - ); + background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press)); color: var( --calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)) From 615dae6a50c0527837d0b0ddf6a6b22454c58285 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Tue, 27 Aug 2024 09:58:43 -0700 Subject: [PATCH 10/10] test(card): fix component token e2e --- packages/calcite-components/src/components/card/card.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts index f6fdac9e122..0fd65751855 100644 --- a/packages/calcite-components/src/components/card/card.e2e.ts +++ b/packages/calcite-components/src/components/card/card.e2e.ts @@ -142,12 +142,12 @@ describe("calcite-card", () => { `, { - "--calcite-card-background-color-hover": { + "--calcite-card-selection-background-color-hover": { shadowSelector: `.${CSS.checkboxWrapperDeprecated}`, targetProp: "backgroundColor", state: "hover", }, - "--calcite-card-background-color-press": { + "--calcite-card-selection-background-color-press": { shadowSelector: `.${CSS.checkboxWrapperDeprecated}`, targetProp: "backgroundColor", state: { press: { attribute: "class", value: CSS.checkboxWrapperDeprecated } },