Skip to content

Commit

Permalink
test(tip, tip-group, tip-manager): add component token E2E tests (#9589)
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 5626ed8 commit 6b090e5
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 34 deletions.
15 changes: 14 additions & 1 deletion packages/calcite-components/src/components/tip-group/tip-group.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { accessible, hidden, renders } from "../../tests/commonTests";
import { accessible, hidden, renders, themed } from "../../tests/commonTests";

describe("calcite-tip-group", () => {
describe("renders", () => {
Expand All @@ -12,4 +12,17 @@ describe("calcite-tip-group", () => {
describe("accessible", () => {
accessible(`calcite-tip-group`);
});

describe("theme", () => {
describe("default", () => {
themed("calcite-tip-group", {
"--calcite-tip-group-background-color": {
targetProp: "backgroundColor",
},
"--calcite-tip-group-text-color": {
targetProp: "color",
},
});
});
});
});
87 changes: 86 additions & 1 deletion packages/calcite-components/src/components/tip-manager/tip-manager.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests";
import { accessible, defaults, hidden, renders, t9n, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS, TEXT } from "./resources";

Expand Down Expand Up @@ -252,4 +252,89 @@ describe("calcite-tip-manager", () => {
describe("translation support", () => {
t9n("calcite-tip-manager");
});

describe("theme", () => {
const testHTML = html` <calcite-tip-manager>
<calcite-tip id="one"><p>first</p></calcite-tip>
<calcite-tip id="two"><p>second</p></calcite-tip>
</calcite-tip-manager>`;

describe("default", () => {
themed(testHTML, {
"--calcite-tip-manager-background-color": {
targetProp: "backgroundColor",
},
"--calcite-tip-manager-border-color": {
shadowSelector: `.${CSS.header}`,
targetProp: "borderColor",
},
"--calcite-tip-manager-close-background-color": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-background-color",
},
"--calcite-tip-manager-close-background-color-active": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-background-color",
state: { press: { attribute: "class", value: CSS.close } },
},
"--calcite-tip-manager-close-background-color-hover": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-background-color",
state: "hover",
},
"--calcite-tip-manager-close-icon-color": {
shadowSelector: `.${CSS.close} calcite-icon`,
targetProp: "--calcite-icon-color",
},
"--calcite-tip-manager-close-icon-color-active": {
shadowSelector: `.${CSS.close} calcite-icon`,
targetProp: "--calcite-icon-color",
state: { press: { attribute: "class", value: CSS.close } },
},
"--calcite-tip-manager-close-icon-color-hover": {
shadowSelector: `.${CSS.close} calcite-icon`,
targetProp: "--calcite-icon-color",
state: "hover",
},
"--calcite-tip-manager-close-text-color": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-text-color",
},
"--calcite-tip-manager-close-text-color-active": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-text-color",
state: { press: { attribute: "class", value: CSS.close } },
},
"--calcite-tip-manager-close-text-color-hover": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-text-color",
state: "hover",
},
"--calcite-tip-manager-content-height": {
shadowSelector: `.${CSS.tipContainer}`,
targetProp: "blockSize",
},
"--calcite-tip-manager-heading-text-color": {
shadowSelector: `.${CSS.heading}`,
targetProp: "color",
},
"--calcite-tip-manager-text-color": {
targetProp: "color",
},
});
});

describe("deprecated", () => {
themed(testHTML, {
"--calcite-tip-manager-height": {
shadowSelector: `.${CSS.tipContainer}`,
targetProp: "blockSize",
},
"--calcite-tip-max-width": {
selector: "calcite-tip",
targetProp: "maxInlineSize",
},
});
});
});
});
35 changes: 18 additions & 17 deletions packages/calcite-components/src/components/tip-manager/tip-manager.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tip-manager-action-background-color-active: defines the background color of an action sub-component when active inside the component.
* @prop --calcite-tip-manager-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-action-background-color: defines the background color of an action sub-component inside the component.
* @prop --calcite-tip-manager-action-text-color-active: defines the text color of an action sub-component when active inside the component.
* @prop --calcite-tip-manager-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-action-text-color: defines the text color of an action sub-component inside the component.
* @prop --calcite-tip-manager-background-color: The background color of the component.
* @prop --calcite-tip-manager-border-color: The border color of the component.
* @prop --calcite-tip-manager-close-background-color-active: defines the background color of an action sub-component when active inside the component.
* @prop --calcite-tip-manager-close-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-close-background-color: defines the background color of an action sub-component inside the component.
* @prop --calcite-tip-manager-close-icon-color-active: The color of the component's close icon when active.
* @prop --calcite-tip-manager-close-icon-color-hover: The color of the component's close icon when hovered.
* @prop --calcite-tip-manager-close-icon-color: The color of the component's close icon.
* @prop --calcite-tip-manager-close-text-color-active: defines the text color of an action sub-component when active inside the component.
* @prop --calcite-tip-manager-close-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-manager-close-text-color: defines the text color of an action sub-component inside the component.
* @prop --calcite-tip-manager-content-height: The height of the content area.
* @prop --calcite-tip-manager-heading-text-color: The heading text color of the component.
* @prop --calcite-tip-manager-height: [Deprecated] use `--calcite-tip-manager-content-height` instead - Specifies the maximum height of a slotted `calcite-tip` within the component.
* @prop --calcite-tip-manager-text-color: The text color of the component.
* @prop --calcite-tip-max-width: [Deprecated] in favor of setting `max-width` on tips directly - Specifies the maximum width of a slotted `calcite-tip` within the component.
* @prop --calcite-tip-manager-close-icon-color: The color of the component's close icon.
* @prop --calcite-tip-manager-close-icon-color-hover: The color of the component's close icon when hovered.
* @prop --calcite-tip-manager-close-icon-color-active: The color of the component's close icon when active.
*
*/

:host {
Expand Down Expand Up @@ -81,14 +81,15 @@
p-4;
animation-name: none;
animation-duration: var(--calcite-animation-timing);
block-size: var(--calcite-tip-manager-content-height, 19vh);
block-size: var(--calcite-tip-manager-height, var(--calcite-tip-manager-content-height, 19vh));
&:focus {
@apply focus-outset;
}
}

::slotted(calcite-tip) {
@apply m-0 border-none;
max-inline-size: var(--calcite-tip-max-width);
}

.tip-container--advancing {
Expand Down Expand Up @@ -154,18 +155,18 @@
}

calcite-action {
--calcite-action-background-color: var(--calcite-tip-manager-action-background-color);
--calcite-action-text-color: var(--calcite-tip-manager-action-text-color);
--calcite-action-background-color: var(--calcite-tip-manager-close-background-color);
--calcite-action-text-color: var(--calcite-tip-manager-close-text-color);

&:hover,
&:focus {
--calcite-action-background-color: var(--calcite-tip-manager-action-background-color-hover);
--calcite-action-text-color: var(--calcite-tip-manager-action-text-color-hover);
--calcite-action-background-color: var(--calcite-tip-manager-close-background-color-hover);
--calcite-action-text-color: var(--calcite-tip-manager-close-text-color-hover);
}

&:active {
--calcite-action-background-color: var(--calcite-tip-manager-action-background-color-active);
--calcite-action-text-color: var(--calcite-tip-manager-action-text-color-active);
--calcite-action-background-color: var(--calcite-tip-manager-close-background-color-active);
--calcite-action-text-color: var(--calcite-tip-manager-close-text-color-active);
}
}

Expand Down
46 changes: 45 additions & 1 deletion packages/calcite-components/src/components/tip/tip.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
import { accessible, hidden, renders, defaults, slots, t9n } from "../../tests/commonTests";
import { accessible, hidden, renders, defaults, slots, t9n, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS, SLOTS } from "./resources";

describe("calcite-tip", () => {
Expand Down Expand Up @@ -77,4 +78,47 @@ describe("calcite-tip", () => {
describe("translation support", () => {
t9n("calcite-tip");
});

describe("theme", () => {
describe("default", () => {
themed(html`<calcite-tip heading="heading"></calcite-tip>`, {
"--calcite-tip-background-color": {
targetProp: "backgroundColor",
},
"--calcite-tip-text-color": {
targetProp: "color",
},
"--calcite-tip-border-color": {
targetProp: "borderColor",
},
"--calcite-tip-heading-text-color": {
shadowSelector: `.${CSS.heading}`,
targetProp: "color",
},
"--calcite-tip-close-background-color": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-background-color",
},
"--calcite-tip-close-background-color-hover": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-background-color",
state: "hover",
},
"--calcite-tip-close-background-color-active": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-background-color",
state: { press: { attribute: "class", value: CSS.close } },
},
"--calcite-tip-close-text-color": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-text-color",
},
"--calcite-tip-close-text-color-hover": {
shadowSelector: `.${CSS.close}`,
targetProp: "--calcite-action-text-color",
state: "hover",
},
});
});
});
});
26 changes: 12 additions & 14 deletions packages/calcite-components/src/components/tip/tip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,15 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tip-action-background-color: defines the background color of an action sub-component inside the component.
* @prop --calcite-tip-action-text-color: defines the text color of an action sub-component inside the component.
* @prop --calcite-tip-action-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-action-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-action-background-color-active: defines the background color of an action sub-component when active inside the component.
* @prop --calcite-tip-background-color: The background color of the component.
* @prop --calcite-tip-border-color: The border color of the component.
* @prop --calcite-tip-close-background-color-active: defines the background color of an action sub-component when active inside the component.
* @prop --calcite-tip-close-background-color-hover: defines the background color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-close-background-color: defines the background color of an action sub-component inside the component.
* @prop --calcite-tip-close-text-color-hover: defines the text color of an action sub-component when hovered or focused inside the component.
* @prop --calcite-tip-close-text-color: defines the text color of an action sub-component inside the component.
* @prop --calcite-tip-heading-text-color: The heading text color of the component.
* @prop --calcite-tip-slotted-link-text-color: The text color of the slotted link.
* @prop --calcite-tip-text-color: The text color of the component.
*
*/

@include header();
Expand Down Expand Up @@ -88,7 +86,7 @@
::slotted(a) {
@apply focus-base;

color: var(--calcite-tip-slotted-link-text-color, var(--calcite-color-brand));
color: var(--calcite-color-brand);
}

::slotted(a:focus) {
Expand All @@ -107,18 +105,18 @@
}

calcite-action {
--calcite-action-background-color: var(--calcite-tip-action-background-color);
--calcite-action-text-color: var(--calcite-tip-action-text-color);
--calcite-action-background-color: var(--calcite-tip-close-background-color);
--calcite-action-text-color: var(--calcite-tip-close-text-color);

&:hover,
&:focus {
--calcite-action-background-color: var(--calcite-tip-action-background-color-hover);
--calcite-action-text-color: var(--calcite-tip-action-text-color-hover);
--calcite-action-background-color: var(--calcite-tip-close-background-color-hover);
--calcite-action-text-color: var(--calcite-tip-close-text-color-hover);
}

&:active {
--calcite-action-background-color: var(--calcite-tip-action-background-color-active);
--calcite-action-text-color: var(--calcite-tip-action-text-color-active);
--calcite-action-background-color: var(--calcite-tip-close-background-color-active);
--calcite-action-text-color: var(--calcite-tip-close-text-color-active);
}
}

Expand Down

0 comments on commit 6b090e5

Please sign in to comment.