Skip to content

test(block, block-section): add component token E2E tests #9685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcfranco merged 5 commits into from
Jun 28, 2024
Merged

test(block, block-section): add component token E2E tests #9685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cc605c6
test(block, block-section): add component token E2E tests
jcfranco Jun 19, 2024
488b981
add missing token and tidy up
jcfranco Jun 25, 2024
8445ebe
merge epic/7180-component-tokens
jcfranco Jun 26, 2024
f73b42d
update styles and tests
jcfranco Jun 26, 2024
e57f29b
address review feedback
jcfranco Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 92 additions & 1 deletion packages/calcite-components/src/components/block-section/block-section.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
import { accessible, defaults, focusable, hidden, reflects, renders, t9n, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS } from "./resources";

Expand Down Expand Up @@ -232,4 +232,95 @@ describe("calcite-block-section", () => {
expect(await element.getProperty("open")).toBe(false);
expect(toggle.getAttribute("aria-expanded")).toBe("false");
}

describe("theme", () => {
describe("default", () => {
themed(html`<calcite-block-section text="text"></calcite-block-section>`, {
"--calcite-block-section-background-color": {
targetProp: "backgroundColor",
},
"--calcite-block-section-heading-text-color": {
shadowSelector: `.${CSS.sectionHeader}`,
targetProp: "color",
},
"--calcite-block-section-heading-text-color-hover": {
shadowSelector: `.${CSS.sectionHeader}`,
targetProp: "color",
state: "hover",
},
"--calcite-block-section-text-color": {
targetProp: "color",
},
"--calcite-block-section-toggle-icon-color": {
shadowSelector: `.${CSS.chevronIcon}`,
targetProp: "color",
},
});
});

describe("open", () => {
themed(`<calcite-block-section open></calcite-block-section>`, {
"--calcite-block-section-border-color": {
targetProp: "borderColor",
},
});
});

describe("status icon", () => {
themed(`<calcite-block-section status="valid"></calcite-block-section>`, {
"--calcite-block-section-status-icon-color": {
shadowSelector: `.${CSS.statusIcon}`,
targetProp: "--calcite-icon-color",
},
});
});

describe("switch toggle (open)", () => {
themed(`<calcite-block-section open toggle-display="switch"></calcite-block-section>`, {
"--calcite-block-section-switch-handle-border-color-checked": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-handle-border-color",
state: "hover",
},
"--calcite-block-section-switch-track-background-color-checked": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-track-background-color",
},
"--calcite-block-section-switch-border-color-checked": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-border-color",
},
});
});

describe("switch toggle (closed)", () => {
themed(`<calcite-block-section toggle-display="switch"></calcite-block-section>`, {
"--calcite-block-section-switch-corner-radius": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-corner-radius",
},
"--calcite-block-section-switch-handle-background-color": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-handle-background-color",
},
"--calcite-block-section-switch-handle-border-color": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-handle-border-color",
},
"--calcite-block-section-switch-handle-border-color-hover": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-handle-border-color",
state: "hover",
},
"--calcite-block-section-switch-track-background-color": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-track-background-color",
},
"--calcite-block-section-switch-border-color": {
shadowSelector: `calcite-switch`,
targetProp: "--calcite-switch-border-color",
},
});
});
});
});
70 changes: 15 additions & 55 deletions packages/calcite-components/src/components/block-section/block-section.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@
* @prop --calcite-block-section-border-color: Specifies the border color of the component. Applicable on bottom border when open.
* @prop --calcite-block-section-heading-text-color-hover: Specifies the component's heading text color on hover.
* @prop --calcite-block-section-heading-text-color: Specifies the component's heading text color.
* @prop --calcite-block-section-icon-color: Specifies the component's heading text color.
* @prop --calcite-block-section-status-icon-color: Specifies the status icon color of the component.
* @prop --calcite-block-section-switch-corner-radius: Specifies the border radius of the switch.
* @prop --calcite-block-section-switch-handle-background-color: Specifies the background color of the switch handle.
* @prop --calcite-block-section-switch-handle-border-color-checked: Specifies the border color of the switch handle when checked.
* @prop --calcite-block-section-switch-handle-border-color-hover: Specifies the border color of the switch handle on hover.
* @prop --calcite-block-section-switch-handle-border-color: Specifies the border color of the switch handle.
* @prop --calcite-block-section-switch-track-background-color-checked: Specifies the background color of the switch track when checked.
* @prop --calcite-block-section-switch-track-background-color: Specifies the background color of the switch track.
* @prop --calcite-block-section-switch-track-border-color-checked: Specifies the border color of the switch track when checked.
* @prop --calcite-block-section-switch-track-border-color: Specifies the border color of the switch track.
* @prop --calcite-block-section-text-color: Specifies the text color of the component.
* @prop --calcite-block-section-toggle-icon-color: Specifies the icon color of the toggle.
*/

Expand All @@ -25,7 +28,7 @@
text-n1;

background-color: var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));
color: var(--calcite-color-text-2);
color: var(--calcite-block-section-text-color, var(--calcite-color-text-2));
}

:host([open]) {
Expand All @@ -34,22 +37,6 @@
@apply border-0
border-b
border-solid;

.toggle {
color: var(--calcite-color-text-1);

&:hover {
color: var(--calcite-color-text-1);
}
}

.chevron-icon {
color: var(--calcite-color-text-3);

&:hover {
color: var(--calcite-color-text-1);
}
}
}

:host(:last-child) {
Expand All @@ -61,10 +48,6 @@

background-color: var(--calcite-color-transparent);
gap: var(--calcite-spacing-md);

calcite-icon {
--calcite-icon-color: var(--calcite-block-section-toggle-icon-color);
}
}

.status-icon {
Expand All @@ -74,12 +57,7 @@
);

gap: var(--calcite-spacing-md);
color: var(--calcite-color-text-2);
font-weight: var(--calcite-font-weight-normal);

&:hover {
color: var(--calcite-color-text-1);
}
}

.status-icon.valid {
Expand Down Expand Up @@ -109,7 +87,7 @@
@apply focus-outset;
}
&:hover {
color: var(--calcite-block-section-heading-text-color, var(--calcite-color-text-1));
color: var(--calcite-block-section-heading-text-color-hover, var(--calcite-color-text-1));
}
}

Expand All @@ -135,58 +113,40 @@
@apply flex flex-auto items-center;
}

.icon--end,
.icon--start,
.chevron-icon {
@apply flex items-center;

color: var(--calcite-color-text-3);

&:hover {
color: var(--calcite-color-text-1);
}
}

.switch {
@apply flex items-center;
}
}

.status-icon {
@apply flex items-center;
}

.status-icon.valid {
color: theme("colors.success");
}

.status-icon.invalid {
color: theme("colors.danger");
.icon--start,
.icon--end {
--calcite-icon-color: var(--calcite-internal-block-section-icon-color, var(--calcite-color-text-3));
}

.chevron-icon {
@apply flex items-center;
}
--calcite-icon-color: var(--calcite-block-section-toggle-icon-color, var(--calcite-color-text-3));

.chevron-icon {
@apply flex items-center;
&:hover {
--calcite-icon-color: var(--calcite-block-section-toggle-icon-color-hover, var(--calcite-color-text-1));
}
}

calcite-switch {
--calcite-switch-border-color: var(--calcite-block-section-switch-border-color);
--calcite-switch-corner-radius: var(--calcite-block-section-switch-corner-radius);
--calcite-switch-handle-background-color: var(--calcite-block-section-switch-handle-background-color);
--calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color);
--calcite-switch-track-background-color: var(--calcite-block-section-switch-track-background-color);
--calcite-switch-track-border-color: var(--calcite-block-section-switch-track-border-color);

&:focus,
&:hover {
--calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color-hover);
}

&[checked] {
--calcite-switch-border-color: var(--calcite-block-section-switch-border-color-checked);
--calcite-switch-handle-border-color: var(--calcite-block-section-switch-handle-border-color-checked);
--calcite-switch-track-background-color: var(--calcite-block-section-switch-track-background-color-checked);
--calcite-switch-track-border-color: var(--calcite-block-section-switch-track-border-color-checked);
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/block-section/block-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,10 +224,10 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
/** Icon scale is not variable as the component does not have a scale property */
return (
<calcite-icon
class={isIconStart ? this.iconStart : this.iconEnd}
class={isIconStart ? CSS.iconStart : CSS.iconEnd}
flipRtl={isIconStart ? flipRtlStart : flipRtlEnd}
icon={isIconStart ? this.iconStart : this.iconEnd}
key={isIconStart ? CSS.iconStart : CSS.iconEnd}
key={isIconStart ? this.iconStart : this.iconEnd}
scale="s"
/>
);
Expand Down
Loading