Skip to content

Commit

Permalink
test(chip): add component token E2E tests (#9604)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7180

## Summary

✨🧪✨
  • Loading branch information
@jcfranco
jcfranco authored Jun 18, 2024
1 parent 37c26d5 commit c8cc2d2
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 23 deletions.
98 changes: 97 additions & 1 deletion packages/calcite-components/src/components/chip/chip.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, disabled, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
import { accessible, disabled, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { newProgrammaticE2EPage } from "../../tests/utils";
import { CSS, SLOTS } from "./resources";

describe("calcite-chip", () => {
Expand Down Expand Up @@ -238,4 +240,98 @@ describe("calcite-chip", () => {
describe("translation support", () => {
t9n("calcite-chip");
});

describe("theme", () => {
describe("default", () => {
themed("calcite-chip", {
"--calcite-chip-background-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "backgroundColor",
},
"--calcite-chip-border-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "borderColor",
},
"--calcite-chip-shadow": {
shadowSelector: `.${CSS.container}`,
targetProp: "boxShadow",
},
"--calcite-chip-corner-radius": {
shadowSelector: `.${CSS.container}`,
targetProp: "borderRadius",
},
"--calcite-chip-text-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "color",
},
});
});

describe("closable", () => {
themed(html`<calcite-chip closable></calcite-chip>`, {
"--calcite-chip-close-icon-color": {
shadowSelector: `.${CSS.close} calcite-icon`,
targetProp: "--calcite-icon-color",
},
"--calcite-chip-close-background-color": {
shadowSelector: `.${CSS.close}`,
targetProp: "backgroundColor",
},
"--calcite-chip-close-background-color-hover": {
shadowSelector: `.${CSS.close}`,
targetProp: "backgroundColor",
state: "hover",
},
"--calcite-chip-close-background-color-active": {
shadowSelector: `.${CSS.close}`,
targetProp: "backgroundColor",
state: { press: { attribute: "class", value: CSS.close } },
},
"--calcite-chip-close-background-color-focus": {
shadowSelector: `.${CSS.close}`,
targetProp: "backgroundColor",
state: "focus",
},
"--calcite-chip-close-border-color-focus": {
shadowSelector: `.${CSS.close}`,
targetProp: "outlineColor",
},
});
});

describe("with icon", () => {
themed(html`<calcite-chip closable icon="banana"></calcite-chip>`, {
"--calcite-chip-icon-color": {
shadowSelector: `.${CSS.chipIcon}`,
targetProp: "--calcite-icon-color",
},
});
});

describe("interactive", () => {
themed(
async () => {
const page = await newProgrammaticE2EPage();
await page.evaluate(() => {
const chip = document.createElement("calcite-chip");
chip.selectionMode = "single";
chip.icon = "banana";
chip.selected = true;
chip.interactive = true;
chip.parentChipGroup = { selectedItems: [] } as any;
document.body.append(chip);
});
await page.waitForChanges();

return { page, tag: "calcite-chip" };
},
{
"--calcite-chip-select-icon-color": {
shadowSelector: `.${CSS.selectIcon} calcite-icon`,
targetProp: "--calcite-icon-color",
},
},
);
});
});
});
40 changes: 18 additions & 22 deletions packages/calcite-components/src/components/chip/chip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,8 @@
* @prop --calcite-chip-close-background-color-hover: Specifies the hover background color of the component's `closable` element when hovered.
* @prop --calcite-chip-close-background-color-active: Specifies the active background color of the component's `closable` element when active.
* @prop --calcite-chip-close-background-color-focus: Specifies the focus background color of the component's `closable` element when focused.
* @prop --calcite-chip-close-focus-outline-color Specifies the focus outline color of the component's `closable` element.
* @prop --calcite-chip-close-border-color-focus Specifies the focus outline color of the component's `closable` element.
* @prop --calcite-chip-select-icon-color: Specifies the color of the component's select icon
* @prop --calcite-chip-select-icon-color-active: Specifies the color of the component's select icon when active.
*
*/

Expand Down Expand Up @@ -101,11 +100,11 @@

:host([kind="neutral"]) .container {
color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
.close {
color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
.close calcite-icon {
--calcite-icon-color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
}
.chip-icon {
color: var(--calcite-chip-icon-color, var(--calcite-color-text-1));
--calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-text-1));
}
}

Expand All @@ -119,15 +118,15 @@
}

:host([kind="inverse"]) .container .chip-icon {
color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
--calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
}

:host([kind="inverse"][appearance="solid"]) .container {
background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));
border-color: var(--calcite-chip-border-color, transparent);
color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
.close {
color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
.close calcite-icon {
--calcite-icon-color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
}
}

Expand All @@ -136,20 +135,20 @@
border-color: var(--calcite-chip-border-color, var(--calcite-color-inverse));
color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
.chip-icon {
color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
--calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
}
}

:host([kind="brand"]) .container .chip-icon {
color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
--calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
}

:host([kind="brand"][appearance="solid"]) .container {
background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));
border-color: var(--calcite-chip-border-color, transparent);
color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
.close {
color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
.close calcite-icon {
--calcite-icon-color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
}
}

Expand All @@ -158,14 +157,14 @@
border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));
color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
.chip-icon {
color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
--calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
}
}

:host([kind="brand"][appearance="solid"]) .container,
:host([kind="inverse"][appearance="solid"]) .container {
.close:focus {
outline-color: var(--calcite-chip-close-focus-outline-color, var(--calcite-color-text-inverse));
outline-color: var(--calcite-chip-close-border-color-focus, var(--calcite-color-text-inverse));
}
}

Expand Down Expand Up @@ -257,7 +256,6 @@
align-content: center;
justify-content: center;
margin: 0;
color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
block-size: var(--calcite-internal-chip-icon-size);
inline-size: var(--calcite-internal-chip-icon-size);
background-color: var(--calcite-chip-close-background-color, var(--calcite-color-transparent));
Expand All @@ -267,14 +265,14 @@
&:focus {
background-color: var(--calcite-chip-close-background-color-focus, var(--calcite-color-transparent-hover));
@apply focus-inset;
outline-color: var(--calcite-chip-close-focus-outline-color, var(--calcite-color-brand));
outline-color: var(--calcite-chip-close-border-color-focus, var(--calcite-color-brand));
}
&:active {
background-color: var(--calcite-chip-close-background-color-active, var(--calcite-color-transparent-press));
}

calcite-icon {
color: inherit;
--calcite-icon-color: color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
}
}

Expand All @@ -291,21 +289,19 @@
transition:
opacity 0.15s ease-in-out,
inline-size 0.15s ease-in-out;
&.select-icon--active {

&--active {
block-size: var(--calcite-internal-chip-icon-size);
inline-size: var(--calcite-internal-chip-icon-size);
visibility: visible;
opacity: 0.5;

calcite-icon {
--calcite-icon-color: var(--calcite-chip-select-icon-color-active);
}
}

calcite-icon {
--calcite-icon-color: var(--calcite-chip-select-icon-color);
}
}

.container:not(.is-circle).image--slotted .select-icon.select-icon--active {
margin-inline-end: var(--calcite-internal-chip-spacing-s);
}
Expand Down

0 comments on commit c8cc2d2

Please sign in to comment.