From afd23710c1a578d06a93cf547f4c8498c6801d3d Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 18 Jun 2024 16:02:01 -0700 Subject: [PATCH] test(combobox, combobox-item-group, combobox-item): add component token E2E tests (#9599) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related Issue:** #7180 ## Summary ✨🧪✨ --- .../combobox-item-group.e2e.ts | 19 ++++++ .../combobox-item/combobox-item.e2e.ts | 56 ++++++++++++++- .../combobox-item/combobox-item.scss | 19 +++--- .../src/components/combobox/combobox.e2e.ts | 68 +++++++++++++++++++ .../src/components/combobox/combobox.scss | 17 +++-- .../src/components/combobox/combobox.tsx | 4 +- .../src/components/combobox/resources.ts | 8 ++- .../input-time-zone/input-time-zone.e2e.ts | 4 +- .../input-time-zone/input-time-zone.scss | 4 +- 9 files changed, 173 insertions(+), 26 deletions(-) create mode 100644 packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts diff --git a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts new file mode 100644 index 00000000000..412fdca4ca7 --- /dev/null +++ b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts @@ -0,0 +1,19 @@ +import { themed } from "../../tests/commonTests"; +import { CSS } from "./resources"; + +describe("calcite-combobox-item-group", () => { + describe("theme", () => { + describe("default", () => { + themed("calcite-combobox-item-group", { + "--calcite-combobox-item-group-border-color": { + shadowSelector: `.${CSS.title}`, + targetProp: "borderColor", + }, + "--calcite-combobox-item-group-text-color": { + shadowSelector: `.${CSS.title}`, + targetProp: "color", + }, + }); + }); + }); +}); diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts index 6402ca27746..756b9ff6d39 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts @@ -1,4 +1,5 @@ -import { disabled, hidden, renders, slots } from "../../tests/commonTests"; +import { disabled, hidden, renders, slots, themed } from "../../tests/commonTests"; +import { CSS } from "./resources"; describe("calcite-combobox-item", () => { describe("renders", () => { @@ -16,4 +17,57 @@ describe("calcite-combobox-item", () => { describe("disabled", () => { disabled("calcite-combobox-item", { focusTarget: "none" }); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-combobox-item", { + "--calcite-combobox-item-background-color": { + shadowSelector: `.${CSS.label}`, + targetProp: "backgroundColor", + }, + "--calcite-combobox-item-indicator-color": { + shadowSelector: `.${CSS.icon}`, + targetProp: "color", + }, + "--calcite-combobox-item-shadow": { + shadowSelector: `.${CSS.label}`, + targetProp: "boxShadow", + }, + "--calcite-combobox-item-text-color": { + shadowSelector: `.${CSS.label}`, + targetProp: "color", + }, + }); + }); + + describe("custom icon", () => { + themed("test", { + "--calcite-combobox-item-icon-color": { + shadowSelector: `.${CSS.custom}`, + targetProp: "color", + }, + }); + }); + + describe("selected", () => { + themed("test", { + "--calcite-combobox-item-background-color-active": { + shadowSelector: `.${CSS.label}`, + targetProp: "color", + }, + "--calcite-combobox-item-text-color-active": { + shadowSelector: `.${CSS.label}`, + targetProp: "color", + }, + "--calcite-combobox-item-icon-color-active": { + shadowSelector: `.${CSS.icon}`, + targetProp: "color", + }, + "--calcite-combobox-item-indicator-color-active": { + shadowSelector: `.${CSS.iconActive}`, + targetProp: "color", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss index 0424771609e..6784c4fa5b0 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss @@ -5,13 +5,13 @@ * * @prop --calcite-combobox-item-background-color-active: defines the background color when the component is active or hovered. * @prop --calcite-combobox-item-background-color: defines the background color of the component - * @prop --calcite-combobox-item-indicator-icon-color-active: defines the color of an indicator icon when the component is active. - * @prop --calcite-combobox-item-indicator-icon-color: defines the indicator icon color. - * @prop --calcite-combobox-item-icon-color: defines the color of a custom icon in the component. + * @prop --calcite-combobox-item-icon-color-active: defines the color of a custom icon when the component is active. + * @prop --calcite-combobox-item-icon-color: defines the color of a custom icon in the component. + * @prop --calcite-combobox-item-indicator-color-active: defines the color of an indicator icon when the component is active. + * @prop --calcite-combobox-item-indicator-color: defines the indicator icon color. * @prop --calcite-combobox-item-shadow: defines the shadow of the component. * @prop --calcite-combobox-item-text-color-active: defines the text color when the component is selected, active, or hovered. * @prop --calcite-combobox-item-text-color: defines the text color of the component. - * */ /* @@ -79,6 +79,7 @@ ul:focus { duration-150 ease-in-out; @include word-break(); + background-color: var(--calcite-combobox-item-background-color, var(--calcite-color-transparent)); color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3)); padding-block: var(--calcite-internal-combobox-item-space-small); padding-inline: var(--calcite-internal-combobox-item-space-large); @@ -104,7 +105,7 @@ ul:focus { .label:hover, .label:active { @apply no-underline; - background-color: var(--calcite-combobox-item-background-color-active, --calcite-color-foreground-2); + background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-2)); color: var(--calcite-combobox-item-text-color-active, var(--calcite-color-text-1)); } @@ -118,7 +119,7 @@ ul:focus { duration-150 ease-in-out; opacity: 0; - color: var(--calcite-combobox-item-indicator-icon-color, theme("borderColor.color.1")); + color: var(--calcite-combobox-item-indicator-color, var(--calcite-color-border-1)); } .icon--indent { @@ -132,7 +133,7 @@ ul:focus { } .icon--active { - color: var(--calcite-combobox-item-indicator-icon-color-active, var(--calcite-color-text-1)); + color: var(--calcite-combobox-item-indicator-color-active, var(--calcite-color-text-1)); } .icon--dot { @@ -140,7 +141,7 @@ ul:focus { min-inline-size: var(--calcite-internal-combobox-item-selector-icon-size); } -.icon--dot:before { +.icon--dot::before { text-align: start; content: "\2022"; } @@ -151,7 +152,7 @@ ul:focus { .label--selected .icon { opacity: var(--calcite-opacity-full); - color: var(--calcite-combobox-item-icon-color-selected, theme("backgroundColor.brand")); + color: var(--calcite-combobox-item-icon-color-active, var(--calcite-color-brand)); } :host(:hover[disabled]) .icon { diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 552a8787e56..27e8ac1d9a5 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -11,6 +11,7 @@ import { reflects, renders, t9n, + themed, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { CSS as ComboboxItemCSS } from "../combobox-item/resources"; @@ -2003,6 +2004,73 @@ describe("calcite-combobox", () => { expect(chips.length).toBe(2); }); + describe("theme", () => { + describe("default", () => { + themed( + html` + + + + `, + { + "--calcite-combobox-border-color": { + shadowSelector: `.${CSS.wrapper}`, + targetProp: "borderColor", + }, + "--calcite-combobox-background-color": { + shadowSelector: `.${CSS.wrapper}`, + targetProp: "backgroundColor", + }, + "--calcite-combobox-text-color": { + shadowSelector: `.${CSS.wrapper}`, + targetProp: "color", + }, + }, + ); + }); + + describe("active chip", () => { + themed( + async () => { + const page = await newE2EPage(); + await page.setContent(`html + + + + `); + const combobox = await page.find("calcite-combobox"); + + await combobox.click(); + await combobox.press("ArrowLeft"); + await page.waitForChanges(); + + return { page, tag: "calcite-combobox" }; + }, + { + "--calcite-combobox-chip-background-color-active": { + shadowSelector: `.${CSS.chipActive}`, + targetProp: "--calcite-chip-background-color", + }, + }, + ); + }); + + describe("deprecated", () => { + themed("calcite-combobox", { + "--calcite-combobox-input-height": [ + { + shadowSelector: `.${CSS.input}`, + targetProp: "blockSize", + }, + { + shadowSelector: `.${CSS.input}`, + targetProp: "line-height", + }, + ], + }); + }); + }); + it("prevents opening a readonly combobox", async () => { const page = await newE2EPage(); await page.setContent(html` diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index 9a496d59956..9dae33c70dd 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -3,11 +3,11 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-combobox-input-height: [Deprecated] Specifies the height of the component's input. - * @prop --calcite-combobox-border-color: defines the border color of the component * @prop --calcite-combobox-background-color: defines the background color of the component - * @prop --calcite-combobox-text-color: defines the text color of the component + * @prop --calcite-combobox-border-color: defines the border color of the component * @prop --calcite-combobox-chip-background-color-active: defines the background color of a chip sub-component when active + * @prop --calcite-combobox-input-height: [Deprecated] Specifies the height of the component's input. + * @prop --calcite-combobox-text-color: defines the text color of the component */ /* @@ -29,7 +29,7 @@ @apply text-n2; --calcite-internal-combobox-space-large: theme("spacing.2"); --calcite-internal-combobox-space-small: theme("spacing.1"); - --calcite-internal-combobox-height: theme("spacing.4"); + --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.4")); --calcite-internal-combobox-space-y: calc(theme("spacing.1") - theme("borderWidth.DEFAULT")); } @@ -37,7 +37,7 @@ @apply text-n1; --calcite-internal-combobox-space-large: theme("spacing.3"); --calcite-internal-combobox-space-small: theme("spacing.2"); - --calcite-internal-combobox-height: theme("spacing.4"); + --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.4")); --calcite-internal-combobox-space-y: calc(theme("spacing.2") - theme("borderWidth.DEFAULT")); } @@ -45,7 +45,7 @@ @apply text-0; --calcite-internal-combobox-space-large: theme("spacing.4"); --calcite-internal-combobox-space-small: theme("spacing.3"); - --calcite-internal-combobox-height: theme("spacing.6"); + --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.6")); --calcite-internal-combobox-space-y: calc(theme("spacing[2.5]") - theme("borderWidth.DEFAULT")); } @@ -244,7 +244,10 @@ calcite-chip { } .chip--active { - background-color: var(--calcite-combobox-chip-background-color-active, var(--calcite-color-foreground-3)); + --calcite-chip-background-color: var( + --calcite-combobox-chip-background-color-active, + var(--calcite-color-foreground-3) + ); } .chip--invisible { diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 4e1a1213b38..bcf8dafa954 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1375,7 +1375,7 @@ export class Combobox return this.selectedItems.map((item, i) => { const chipClasses = { chip: true, - "chip--active": activeChipIndex === i, + [CSS.chipActive]: activeChipIndex === i, }; const ancestors = [...getItemAncestors(item)].reverse(); const pathLabel = [...ancestors, item].map((el) => el.textLabel); @@ -1696,7 +1696,7 @@ export class Combobox
{ }, "--calcite-input-combobox-item-indicator-icon-color-active": { shadowSelector: "calcite-combobox-item", - targetProp: "--calcite-combobox-item-indicator-icon-color-active", + targetProp: "--calcite-combobox-item-indicator-color-active", }, "--calcite-input-combobox-item-indicator-icon-color": { shadowSelector: "calcite-combobox-item", - targetProp: "--calcite-combobox-item-indicator-icon-color", + targetProp: "--calcite-combobox-item-indicator-color", }, "--calcite-input-combobox-item-shadow": { shadowSelector: "calcite-combobox-item", diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss b/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss index 33abaa90db4..21ec0195b21 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss @@ -29,8 +29,8 @@ calcite-combobox { calcite-combobox-item { --calcite-combobox-item-background-color-active: var(--calcite-input-combobox-item-background-color-active); --calcite-combobox-item-background-color: var(--calcite-input-combobox-item-background-color); - --calcite-combobox-item-indicator-icon-color-active: var(--calcite-input-combobox-item-indicator-icon-color-active); - --calcite-combobox-item-indicator-icon-color: var(--calcite-input-combobox-item-indicator-icon-color); + --calcite-combobox-item-indicator-color-active: var(--calcite-input-combobox-item-indicator-icon-color-active); + --calcite-combobox-item-indicator-color: var(--calcite-input-combobox-item-indicator-icon-color); --calcite-combobox-item-icon-color: var(--calcite-input-combobox-item-icon-color); --calcite-combobox-item-shadow: var(--calcite-input-combobox-item-shadow); --calcite-combobox-item-text-color-active: var(--calcite-input-combobox-item-text-color-active);