Skip to content

Commit

Permalink
fix(tree-item): update tokens and tests (#9553)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7180 

## Summary

Updates tree-item tokens and adds themed e2e tests
  • Loading branch information
@alisonailea
alisonailea authored Jun 15, 2024
1 parent 4395f91 commit f6c9f9c
Show file tree
Hide file tree
Showing 3 changed files with 191 additions and 21 deletions.
32 changes: 17 additions & 15 deletions packages/calcite-components/src/components/action/action.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, hidden, renders, slots, t9n, defaults, themed } from "../../tests/commonTests";
import { ComponentTestTokens } from "../../tests/commonTests/themed";
import { html } from "../../../support/formatting";
import { CSS, SLOTS } from "./resources";

describe("calcite-action", () => {
Expand Down Expand Up @@ -208,7 +210,7 @@ describe("calcite-action", () => {

describe("theme", () => {
describe("default", () => {
const tokens = {
const tokens: ComponentTestTokens = {
"--calcite-action-background-color": {
shadowSelector: `.${CSS.button}`,
targetProp: "backgroundColor",
Expand All @@ -229,9 +231,9 @@ describe("calcite-action", () => {
shadowSelector: `.${CSS.actionIndicator}::after`,
targetProp: "backgroundColor",
},
} as const;
};
themed(
`<calcite-action
html`<calcite-action
scale="s"
indicator
active
Expand All @@ -244,24 +246,24 @@ describe("calcite-action", () => {
);
});
describe("loading", () => {
const tokens = {
const tokens: ComponentTestTokens = {
"--calcite-action-loader-color": {
shadowSelector: "calcite-loader",
targetProp: "--calcite-loader-color-start",
},
} as const;
};

themed(
`<calcite-action
scale="s"
indicator
active
text="click-me"
label="hello world"
text-enabled
icon="configure-popup"
loading
></calcite-action>`,
html`<calcite-action
scale="s"
indicator
active
text="click-me"
label="hello world"
text-enabled
icon="configure-popup"
loading
></calcite-action>`,
tokens,
);
});
Expand Down
170 changes: 170 additions & 0 deletions packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
import { SLOTS } from "./resources";
import { CSS } from "./resources";

describe("calcite-tree-item", () => {
describe("renders", () => {
Expand Down Expand Up @@ -384,4 +386,172 @@ describe("calcite-tree-item", () => {

expect(itemBounds.height).not.toBe(0);
});

describe("theme", () => {
describe("default", () => {
const tokens: ComponentTestTokens = {
"--calcite-tree-item-chevron-color-active": {
selector: "calcite-tree-item",
shadowSelector: `.${CSS.chevron}`,
targetProp: "--calcite-icon-color",
state: { press: { attribute: "class", value: CSS.chevron } },
},
"--calcite-tree-item-chevron-color-hover": {
selector: "calcite-tree-item",
shadowSelector: `.${CSS.chevron}`,
targetProp: "--calcite-icon-color",
state: "hover",
},
"--calcite-tree-item-chevron-color": {
selector: "calcite-tree-item",
shadowSelector: `.${CSS.chevron}`,
targetProp: "--calcite-icon-color",
},
"--calcite-tree-item-icon-color": {
selector: "calcite-tree-item",
shadowSelector: `.${CSS.iconStart}`,
targetProp: "--calcite-icon-color",
},
"--calcite-tree-item-line-color": {
selector: "calcite-tree-item",
shadowSelector: `.${CSS.childrenContainer}::after`,
targetProp: "backgroundColor",
},
"--calcite-tree-item-text-color": {
selector: "calcite-tree-item",
targetProp: "color",
},
};
themed(
html`
<calcite-tree id="root" lines>
<calcite-tree-item icon-start="palette" expanded>
Parent
<calcite-tree slot="children">
<calcite-tree-item id="child">child</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
`,
tokens,
);
});
describe("selections", () => {
describe("ancestor", () => {
const tokens: ComponentTestTokens = {
"--calcite-tree-item-checkbox-background-color-checked": {
selector: "calcite-tree-item",
shadowSelector: "calcite-checkbox",
targetProp: "--calcite-checkbox-background-color-checked",
},
"--calcite-tree-item-checkbox-background-color": {
selector: "calcite-tree-item",
shadowSelector: "calcite-checkbox",
targetProp: "--calcite-checkbox-background-color",
},
"--calcite-tree-item-checkbox-shadow-checked": {
selector: "calcite-tree-item",
shadowSelector: "calcite-checkbox",
targetProp: "--calcite-checkbox-shadow-checked",
},
"--calcite-tree-item-checkbox-shadow-hover": {
selector: "calcite-tree-item",
shadowSelector: "calcite-checkbox",
targetProp: "--calcite-checkbox-shadow-hover",
},
"--calcite-tree-item-checkbox-shadow": {
selector: "calcite-tree-item",
shadowSelector: "calcite-checkbox",
targetProp: "--calcite-checkbox-shadow",
},
"--calcite-tree-item-selection-icon-color": {
selector: "calcite-tree-item",
shadowSelector: `calcite-checkbox`,
targetProp: "--calcite-checkbox-icon-color",
},
};
themed(
html`<calcite-tree selection-mode="ancestors">
<calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
<calcite-tree-item expanded>
<span>Child 2</span>
<calcite-tree slot="children">
<calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
<calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
<calcite-tree-item expanded>
<span>Grandchild 3</span>
<calcite-tree slot="children">
<calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
<calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
<calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>`,
tokens,
);
});
describe("multiple", () => {
const tokens: ComponentTestTokens = {
"--calcite-tree-item-selection-icon-color": {
selector: "calcite-tree-item[selected]",
shadowSelector: `.${CSS.checkmarkIcon}`,
targetProp: "--calcite-icon-color",
},
};
themed(
html`<calcite-tree selection-mode="multiple">
<calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
<calcite-tree-item expanded>
<span>Child 2</span>
<calcite-tree slot="children">
<calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
<calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
<calcite-tree-item expanded>
<span>Grandchild 3</span>
<calcite-tree slot="children">
<calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
<calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
<calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>`,
tokens,
);
});
describe("single", () => {
const tokens: ComponentTestTokens = {
"--calcite-tree-item-selection-icon-color": {
selector: "calcite-tree-item[selected]",
shadowSelector: `.${CSS.bulletPointIcon}`,
targetProp: "--calcite-icon-color",
},
};
themed(
html`<calcite-tree selection-mode="single">
<calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
<calcite-tree-item expanded>
<span>Child 2</span>
<calcite-tree slot="children">
<calcite-tree-item><span>Grandchild 1</span></calcite-tree-item>
<calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
<calcite-tree-item>
<span>Grandchild 3</span>
<calcite-tree slot="children">
<calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
<calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
<calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>
</calcite-tree-item>
</calcite-tree>`,
tokens,
);
});
});
});
});
10 changes: 4 additions & 6 deletions packages/calcite-components/src/components/tree-item/tree-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*
* @prop --calcite-tree-item-checkbox-background-color-checked: defines the background-color of the sub-component when checked.
* @prop --calcite-tree-item-checkbox-background-color: defines the background-color of the sub-component.
* @prop --calcite-tree-item-checkbox-icon-color: defines the checkmark color of the sub-component.
* @prop --calcite-tree-item-checkbox-shadow-checked: defines the shadow of the sub-component when checked.
* @prop --calcite-tree-item-checkbox-shadow-hover: defines the shadow of the sub-component when hovered.
* @prop --calcite-tree-item-checkbox-shadow: defines the shadow of the sub-component.
Expand All @@ -19,13 +18,13 @@
*/

:host {
--calcite-internal-tree-item-text-color: var(--calcite-tree-item-text-color, var(--calcite-color-text-3));
--calcite-internal-tree-item-text-color: var(--calcite-color-text-3);

@apply block
cursor-pointer
max-w-full;

color: var(--calcite-internal-tree-item-text-color);
color: var(--calcite-tree-item-text-color, var(--calcite-internal-tree-item-text-color));
}

.node-actions-container {
Expand Down Expand Up @@ -205,7 +204,7 @@
}

:host([selected]) {
--calcite-internal-tree-item-text-color: var(--calcite-tree-item-text-color, var(--calcite-color-text-1));
--calcite-internal-tree-item-text-color: var(--calcite-color-text-1);
}

:host([selected]) .node-container {
Expand Down Expand Up @@ -259,7 +258,6 @@

.chevron {
@apply transition-default
text-color-3
relative
self-center;
flex: 0 0 auto;
Expand All @@ -284,7 +282,7 @@
calcite-checkbox {
--calcite-checkbox-background-color: var(--calcite-tree-item-checkbox-background-color);
--calcite-checkbox-background-color-checked: var(--calcite-tree-item-checkbox-background-color-checked);
--calcite-checkbox-icon-color: var(--calcite-tree-item-checkbox-icon-color);
--calcite-checkbox-icon-color: var(--calcite-tree-item-selection-icon-color);
--calcite-checkbox-shadow: var(--calcite-tree-item-checkbox-shadow);
--calcite-checkbox-shadow-checked: var(--calcite-tree-item-checkbox-shadow-checked);
--calcite-checkbox-shadow-hover: var(--calcite-tree-item-checkbox-shadow-hover);
Expand Down

0 comments on commit f6c9f9c

Please sign in to comment.