Skip to content

Commit

Permalink
test(action-group, dropdown-item, handle, input-time-picker): fix the…
Browse files Browse the repository at this point in the history 
…med test failures (#9480)

**Related Issue:** #7180

## Summary

✨🧪🔨✨
  • Loading branch information
@jcfranco
jcfranco authored Jun 6, 2024
1 parent 0956bad commit 51236da
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 56 deletions.
44 changes: 25 additions & 19 deletions packages/calcite-components/src/components/action-group/action-group.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
import { ComponentTestTokens } from "../../tests/commonTests/themed";
import { html } from "../../../support/formatting";
import { CSS, SLOTS } from "./resources";

const actionGroupHTML = `<calcite-action-group scale="l">
Expand Down Expand Up @@ -102,90 +103,95 @@ describe("calcite-action-group", () => {
targetProp: "--calcite-action-menu-popover-shadow",
},
"--calcite-action-group-trigger-background-color-active": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-background-color",
state: { press: { attribute: "class", value: CSS.expandToggle } },
},
"--calcite-action-group-trigger-background-color-focus": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-background-color",
state: "focus",
},
"--calcite-action-group-trigger-background-color-hover": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-background-color",
state: "hover",
},
"--calcite-action-group-trigger-background-color": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-background-color",
},
"--calcite-action-group-trigger-icon-color-active": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-icon-color",
state: { press: { attribute: "class", value: CSS.expandToggle } },
},
"--calcite-action-group-trigger-icon-color-focus": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-icon-color",
state: "focus",
},
"--calcite-action-group-trigger-icon-color-hover": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-icon-color",
state: "hover",
},
"--calcite-action-group-trigger-icon-color": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-icon-color",
},
"--calcite-action-group-trigger-indicator-color": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-indicator-color",
},
"--calcite-action-group-trigger-loader-color": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-loader-color",
},
"--calcite-action-group-trigger-shadow-active": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-shadow",
state: { press: { attribute: "class", value: CSS.expandToggle } },
},
"--calcite-action-group-trigger-shadow-hover": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-shadow",
state: "hover",
},
"--calcite-action-group-trigger-shadow-focus": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-shadow",
state: "focus",
},
"--calcite-action-group-trigger-shadow": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-shadow",
},
"--calcite-action-group-trigger-text-color-active": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-text-color",
state: { press: { attribute: "class", value: CSS.expandToggle } },
},
"--calcite-action-group-trigger-text-color-hover": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-text-color",
state: "hover",
},
"--calcite-action-group-trigger-text-color-focus": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-text-color",
state: "focus",
},
"--calcite-action-group-trigger-text-color": {
shadowSelector: "calcite-action",
shadowSelector: `.${CSS.expandToggle}`,
targetProp: "--calcite-action-text-color",
},
};
themed(`calcite-action-group`, tokens);
themed(
html`<calcite-action-group
><calcite-action slot="menu-actions" text="banana" icon="banana"></calcite-action
></calcite-action-group>`,
tokens,
);
});
});
63 changes: 44 additions & 19 deletions packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { newE2EPage } from "@stencil/core/testing";
import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
import { themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS } from "./resources";

describe("calcite-dropdown-item", () => {
describe("renders", () => {
Expand Down Expand Up @@ -52,27 +54,50 @@ describe("calcite-dropdown-item", () => {
});

describe("theme", () => {
const tokens: ComponentTestTokens = {
"--calcite-dropdown-item-background-color": [
{
shadowSelector: ".container",
describe("default", () => {
themed("calcite-dropdown-item", {
"--calcite-dropdown-item-background-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "backgroundColor",
},
{
shadowSelector: ".container a",
"--calcite-dropdown-item-text-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "color",
},
});
});

describe("selected", () => {
themed(html`<calcite-dropdown-item selected></calcite-dropdown-item>`, {
"--calcite-dropdown-item-indicator-color": {
shadowSelector: `.${CSS.icon}`,
targetProp: "--calcite-icon-color",
},
});
});

describe("with link", () => {
themed(html`<calcite-dropdown-item href="http://example.com"></calcite-dropdown-item>`, {
"--calcite-dropdown-item-background-color": {
shadowSelector: `.${CSS.link}`,
targetProp: "backgroundColor",
},
],
"--calcite-dropdown-item-icon-color": {
targetProp: "--calcite-icon-color",
},
"--calcite-dropdown-item-indicator-color": {
targetProp: "--calcite-icon-color",
},
"--calcite-dropdown-item-text-color": {
targetProp: "color",
},
};
themed(`calcite-action-bar`, tokens);
});
});

describe("with start/end icon", () => {
themed(html`<calcite-dropdown-item icon-start="banana" icon-end="banana"></calcite-dropdown-item>`, {
"--calcite-dropdown-item-icon-color": [
{
shadowSelector: `.${CSS.iconStart}`,
targetProp: "--calcite-icon-color",
},
{
shadowSelector: `.${CSS.iconEnd}`,
targetProp: "--calcite-icon-color",
},
],
});
});
});
});
14 changes: 8 additions & 6 deletions packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
duration-150
ease-in-out;
color: var(--calcite-dropdown-item-text-color, (--calcite-color-text-3));
background-color: var(--calcite-dropdown-item-background-color, none);
background-color: var(--calcite-dropdown-item-background-color, transparent);
}

:host {
Expand Down Expand Up @@ -130,18 +130,20 @@
:host([selected]) .dropdown-link {
@apply font-medium;
color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
& calcite-icon {
--calcite-icon-color: var(--calcite-dropdown-item-icon-color, theme("backgroundColor.brand"));
}
}

.dropdown-item-icon--start,
.dropdown-item-icon--end {
--calcite-icon-color: var(--calcite-dropdown-item-icon-color, theme("backgroundColor.brand"));
}

:host(:hover:not([disabled])) .dropdown-item-icon {
color: var(--calcite-dropdown-item-indicator-color, theme("borderColor.color.1"));
--calcite-icon-color: var(--calcite-dropdown-item-indicator-color, theme("borderColor.color.1"));
@apply opacity-100;
}

:host([selected]) .dropdown-item-icon {
color: var(--calcite-dropdown-item-indicator-color, theme("backgroundColor.brand"));
--calcite-icon-color: var(--calcite-dropdown-item-indicator-color, theme("backgroundColor.brand"));
@apply opacity-100;
}

Expand Down
5 changes: 3 additions & 2 deletions packages/calcite-components/src/components/handle/handle.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
import { accessible, disabled, hidden, renders, t9n, themed } from "../../tests/commonTests";
import { HandleMessages } from "../../components";
import { ComponentTestTokens } from "../../tests/commonTests/themed";
import { html } from "../../../support/formatting";
import { CSS, SUBSTITUTIONS } from "./resources";

describe("calcite-handle", () => {
Expand Down Expand Up @@ -184,15 +185,15 @@ describe("calcite-handle", () => {
};
themed(`calcite-handle`, tokens);
});

describe("selected", () => {
const tokens: ComponentTestTokens = {
"--calcite-handle-background-color-selected": {
targetProp: "backgroundColor",
shadowSelector: `.${CSS.handle}`,
state: { press: { attribute: "class", value: CSS.handle } },
},
};
themed(`calcite-handle`, tokens);
themed(html`<calcite-handle selected></calcite-handle>`, tokens);
});
});
});
3 changes: 2 additions & 1 deletion packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { getFocusedElementProp, skipAnimations, waitForAnimationFrame } from "..
import { html } from "../../../support/formatting";
import { openClose } from "../../tests/commonTests";
import { ComponentTestTokens } from "../../tests/commonTests/themed";
import { CSS } from "./resources";

async function getInputValue(page: E2EPage): Promise<string> {
return page.evaluate(
Expand Down Expand Up @@ -1054,7 +1055,7 @@ describe("calcite-input-time-picker", () => {
targetProp: "--calcite-time-picker-text-color",
},
"--calcite-input-time-picker-toggle-icon-color-hover": {
shadowSelector: "calcite-icon",
shadowSelector: `.${CSS.toggleIcon} calcite-icon`,
targetProp: "--calcite-icon-color",
state: "hover",
},
Expand Down
11 changes: 2 additions & 9 deletions packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,12 @@
}

calcite-icon {
--calcite-icon-color: var(--calcite-input-icon-color);

&:hover {
--calcite-icon-color: var(--calcite-input-icon-color-hover);
}
&:active {
--calcite-icon-color: var(--calcite-input-icon-color-active);
}
--calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color);
}
}

.input-wrapper:hover .toggle-icon,
calcite-input-text:focus + .toggle-icon {
:is(calcite-input-text:active, calcite-input-text:hover, calcite-input-text:focus) + .toggle-icon {
calcite-icon {
--calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color-hover, var(--calcite-color-text-1));
}
Expand Down

0 comments on commit 51236da

Please sign in to comment.