Skip to content

Commit

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

## Summary

✨🧪✨
  • Loading branch information
@jcfranco
jcfranco authored Jul 17, 2024
1 parent 48a2665 commit ad9b49a
Show file tree
Hide file tree
Showing 7 changed files with 289 additions and 44 deletions.
87 changes: 86 additions & 1 deletion ...es/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
import { accessible, defaults, focusable, hidden, reflects, renders, themed } from "../../tests/commonTests";
import { selectText } from "../../tests/utils";
import { canConvertToHexa, isValidHex, normalizeHex } from "../color-picker/utils";
import { html } from "../../../support/formatting";
import { CSS } from "./resources";

describe("calcite-color-picker-hex-input", () => {
Expand Down Expand Up @@ -572,4 +573,88 @@ describe("calcite-color-picker-hex-input", () => {
});
});
});

describe("theme", () => {
describe("default", () => {
themed("calcite-color-picker-hex-input", {
"--calcite-color-picker-hex-input-affix-background-color": [
{
targetProp: "--calcite-input-prefix-background-color",
shadowSelector: `.${CSS.hexInput}`,
},
{
targetProp: "--calcite-input-suffix-background-color",
shadowSelector: `.${CSS.hexInput}`,
},
],
"--calcite-color-picker-hex-input-affix-text-color": [
{
targetProp: "--calcite-input-prefix-text-color",
shadowSelector: `.${CSS.hexInput}`,
},
{
targetProp: "--calcite-input-suffix-text-color",
shadowSelector: `.${CSS.hexInput}`,
},
],
"--calcite-color-picker-hex-input-background-color": {
targetProp: "--calcite-input-background-color",
shadowSelector: `.${CSS.hexInput}`,
},
"--calcite-color-picker-hex-input-border-color": {
targetProp: "--calcite-input-border-color",
shadowSelector: `.${CSS.hexInput}`,
},
"--calcite-color-picker-hex-input-corner-radius": {
targetProp: "--calcite-input-corner-radius",
shadowSelector: `.${CSS.hexInput}`,
},
"--calcite-color-picker-hex-input-text-color": {
targetProp: "--calcite-input-text-color",
shadowSelector: `.${CSS.hexInput}`,
},
});
});

describe("opacity enabled", () => {
themed(html`<calcite-color-picker-hex-input alpha-channel></calcite-color-picker-hex-input>`, {
"--calcite-color-picker-hex-input-background-color": {
targetProp: "--calcite-input-background-color",
shadowSelector: `.${CSS.opacityInput}`,
},
"--calcite-color-picker-hex-input-border-color": {
targetProp: "--calcite-input-border-color",
shadowSelector: `.${CSS.opacityInput}`,
},
"--calcite-color-picker-hex-input-corner-radius": {
targetProp: "--calcite-input-corner-radius",
shadowSelector: `.${CSS.opacityInput}`,
},
"--calcite-color-picker-hex-input-affix-background-color": [
{
targetProp: "--calcite-input-prefix-background-color",
shadowSelector: `.${CSS.opacityInput}`,
},
{
targetProp: "--calcite-input-suffix-background-color",
shadowSelector: `.${CSS.opacityInput}`,
},
],
"--calcite-color-picker-hex-input-affix-text-color": [
{
targetProp: "--calcite-input-prefix-text-color",
shadowSelector: `.${CSS.opacityInput}`,
},
{
targetProp: "--calcite-input-suffix-text-color",
shadowSelector: `.${CSS.opacityInput}`,
},
],
"--calcite-color-picker-hex-input-text-color": {
targetProp: "--calcite-input-text-color",
shadowSelector: `.${CSS.opacityInput}`,
},
});
});
});
});
14 changes: 6 additions & 8 deletions ...ages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-color-picker-hex-input-affix-background-color: defines the background color of the prefix and suffix of the sub-component.
* @prop --calcite-color-picker-hex-input-affix-text-color: defines the text color of the prefix and suffix of the sub-component.
* @prop --calcite-color-picker-hex-input-background-color: defines the background color of the input sub-component.
* @prop --calcite-color-picker-hex-input-border-color: defines the border color of the input sub-component.
* @prop --calcite-color-picker-hex-input-corner-radius: defines the corner radius of the input sub-component.
* @prop --calcite-color-picker-hex-input-prefix-background-color: defines the background color of the prefix sub-component.
* @prop --calcite-color-picker-hex-input-prefix-text-color: defines the text color of the prefix sub-component.
* @prop --calcite-color-picker-hex-input-suffix-background-color: defines the background color of the suffix sub-component.
* @prop --calcite-color-picker-hex-input-suffix-text-color: defines the text color of the suffix sub-component.
* @prop --calcite-color-picker-hex-input-text-color: defines the text color of the input sub-component.
*/

Expand Down Expand Up @@ -49,10 +47,10 @@

calcite-input-text,
calcite-input-number {
--calcite-input-suffix-background-color: var(--calcite-color-picker-hex-input-suffix-background-color);
--calcite-input-suffix-text-color: var(--calcite-color-picker-hex-input-suffix-text-color);
--calcite-input-prefix-background-color: var(--calcite-color-picker-hex-input-prefix-background-color);
--calcite-input-prefix-text-color: var(--calcite-color-picker-hex-input-prefix-text-color);
--calcite-input-suffix-background-color: var(--calcite-color-picker-hex-input-affix-background-color);
--calcite-input-suffix-text-color: var(--calcite-color-picker-hex-input-affix-text-color);
--calcite-input-prefix-background-color: var(--calcite-color-picker-hex-input-affix-background-color);
--calcite-input-prefix-text-color: var(--calcite-color-picker-hex-input-affix-text-color);
--calcite-input-text-color: var(--calcite-color-picker-hex-input-text-color);
--calcite-input-background-color: var(--calcite-color-picker-hex-input-background-color);
--calcite-input-border-color: var(--calcite-color-picker-hex-input-border-color);
Expand Down
176 changes: 175 additions & 1 deletion packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing";
import { accessible, defaults, hidden, reflects, renders, focusable, disabled, t9n } from "../../tests/commonTests";
import {
accessible,
defaults,
hidden,
reflects,
renders,
focusable,
disabled,
t9n,
themed,
} from "../../tests/commonTests";
import {
GlobalTestProps,
selectText,
Expand Down Expand Up @@ -2345,4 +2355,168 @@ describe("calcite-color-picker", () => {
});
});
});

describe("theme", () => {
describe("default", () => {
themed(`calcite-color-picker`, {
"--calcite-color-picker-background-color": {
shadowSelector: `.${CSS.container}`,
targetProp: "backgroundColor",
},
"--calcite-color-picker-button-background-color": [
{
shadowSelector: `.${CSS.deleteColor}`,
targetProp: "--calcite-button-background-color",
},
{
shadowSelector: `.${CSS.saveColor}`,
targetProp: "--calcite-button-background-color",
},
],
"--calcite-color-picker-button-background-color-active": [
{
shadowSelector: `.${CSS.deleteColor}`,
targetProp: "--calcite-button-background-color",
state: { press: { attribute: "class", value: CSS.deleteColor } },
},
{
shadowSelector: `.${CSS.saveColor}`,
targetProp: "--calcite-button-background-color",
state: { press: { attribute: "class", value: CSS.saveColor } },
},
],
"--calcite-color-picker-button-background-color-focus": [
{
shadowSelector: `.${CSS.deleteColor}`,
targetProp: "--calcite-button-background-color",
state: { focus: { attribute: "class", value: CSS.deleteColor } },
},
{
shadowSelector: `.${CSS.saveColor}`,
targetProp: "--calcite-button-background-color",
state: { focus: { attribute: "class", value: CSS.saveColor } },
},
],
"--calcite-color-picker-button-background-color-hover": [
{
shadowSelector: `.${CSS.deleteColor}`,
targetProp: "--calcite-button-background-color",
state: "hover",
},
{
shadowSelector: `.${CSS.saveColor}`,
targetProp: "--calcite-button-background-color",
state: "hover",
},
],
"--calcite-color-picker-input-background-color": [
{
shadowSelector: `.${CSS.channel}`,
targetProp: "--calcite-input-background-color",
},
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-background-color",
},
],
"--calcite-color-picker-input-border-color": [
{
shadowSelector: `.${CSS.channel}`,
targetProp: "--calcite-input-border-color",
},
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-border-color",
},
],
"--calcite-color-picker-input-corner-radius": [
{
shadowSelector: `.${CSS.channel}`,
targetProp: "--calcite-input-corner-radius",
},
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-corner-radius",
},
],
"--calcite-color-picker-input-affix-background-color": [
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-affix-background-color",
},
{
shadowSelector: `.${CSS.channel}`,
targetProp: "--calcite-input-suffix-background-color",
},
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-affix-background-color",
},
],
"--calcite-color-picker-input-affix-text-color": [
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-affix-text-color",
},
{
shadowSelector: `.${CSS.channel}`,
targetProp: "--calcite-input-suffix-text-color",
},
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-affix-text-color",
},
],
"--calcite-color-picker-input-text-color": [
{
shadowSelector: `.${CSS.channel}`,
targetProp: "--calcite-input-text-color",
},
{
shadowSelector: `.${CSS.hexInput}`,
targetProp: "--calcite-color-picker-hex-input-text-color",
},
],
"--calcite-color-picker-tab-nav-indicator-color": {
shadowSelector: `.${CSS.colorModes}`,
targetProp: "--calcite-tab-nav-indicator-color",
},
"--calcite-color-picker-tab-title-text-color": {
shadowSelector: `.${CSS.colorMode}`,
targetProp: "--calcite-tab-title-text-color",
},
"--calcite-color-picker-tabs-border-color": {
shadowSelector: `.${CSS.colorModeContainer}`,
targetProp: "--calcite-tabs-border-color",
},
"--calcite-color-picker-text-color": [
{
shadowSelector: `.${CSS.deleteColor}`,
targetProp: "--calcite-button-text-color",
},
{
shadowSelector: `.${CSS.saveColor}`,
targetProp: "--calcite-button-text-color",
},
{
shadowSelector: `.${CSS.header}`,
targetProp: "color",
},
],
});
});

describe("opacity enabled", () => {
themed(html`<calcite-color-picker alpha-channel></calcite-color-picker>`, {
"--calcite-color-picker-input-affix-background-color": {
shadowSelector: `.${CSS.channel}[data-channel-index="3"]`,
targetProp: "--calcite-input-suffix-background-color",
},
"--calcite-color-picker-input-affix-text-color": {
shadowSelector: `.${CSS.channel}[data-channel-index="3"]`,
targetProp: "--calcite-input-suffix-text-color",
},
});
});
});
});
40 changes: 9 additions & 31 deletions packages/calcite-components/src/components/color-picker/color-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,14 @@
* @prop --calcite-color-picker-button-background-color-focus: defines the background color of the button when in a focus state in the component.
* @prop --calcite-color-picker-button-background-color-hover: defines the background color of the button when in a hover state in the component.
* @prop --calcite-color-picker-button-corner-radius: defines the corner radius of the button in the component.
* @prop --calcite-color-picker-button-icon-color-active: defines the icon color of the button when in a active state in the component.
* @prop --calcite-color-picker-button-icon-color-focus: defines the icon color of the button when in a focus state in the component.
* @prop --calcite-color-picker-button-icon-color-hover: defines the icon color of the button when in a hover state in the component.
* @prop --calcite-color-picker-button-loader-color: defines the loader color in the button in the component.
* @prop --calcite-color-picker-button-text-color-active: defines the text color of the button when in a active state in the component.
* @prop --calcite-color-picker-button-text-color-focus: defines the text color of the button when in a focus state in the component.
* @prop --calcite-color-picker-button-text-color-hover: defines the text color of the button when in a hover state in the component.
* @prop --calcite-color-picker-button-text-color: defines the text color of the button in the component.
* @prop --calcite-color-picker-input-affix-background-color: defines the background color of the prefix and suffix of the sub-component.
* @prop --calcite-color-picker-input-affix-text-color: defines the text color of the prefix and suffix of the sub-component.
* @prop --calcite-color-picker-input-background-color: defines the background color of the input in the component.
* @prop --calcite-color-picker-input-border-color: defines the border color of the input in the component.
* @prop --calcite-color-picker-input-corner-radius: defines the corner radius of the input in the component.
* @prop --calcite-color-picker-input-prefix-background-color: defines the background color of the prefix sub-component.
* @prop --calcite-color-picker-input-prefix-text-color: defines the text color of the prefix sub-component.
* @prop --calcite-color-picker-input-suffix-background-color: defines the background color of the suffix sub-component.
* @prop --calcite-color-picker-input-suffix-text-color: defines the text color of the suffix sub-component.
* @prop --calcite-color-picker-input-text-color: defines the text color of the input in the component.
* @prop --calcite-color-picker-tab-nav-indicator-color: Specifies the color of the active tab indicator.
* @prop --calcite-color-picker-tab-title-background-color: Specifies the background color of the sub-component.
* @prop --calcite-color-picker-tab-title-text-color: Specifies the text color of the sub-component.
* @prop --calcite-color-picker-tabs-background-color: The background color of the sub-component.
* @prop --calcite-color-picker-tabs-border-color: The border color of the sub-component.
* @prop --calcite-color-picker-text-color: Specifies the background color of the component.
*/
Expand Down Expand Up @@ -232,34 +220,24 @@

calcite-button {
--calcite-button-corner-radius: var(--calcite-color-picker-button-corner-radius);
--calcite-button-loader-color: var(--calcite-color-picker-button-loader-color);
--calcite-button-text-color: var(--calcite-color-picker-button-text-color);
--calcite-button-text-color: var(--calcite-color-picker-text-color);
--calcite-button-background-color: var(--calcite-color-picker-button-background-color);
--calcite-button-icon-color: var(--calcite-color-picker-text-color);

&:hover {
--calcite-button-text-color: var(--calcite-color-picker-button-text-color-hover);
--calcite-button-background-color: var(--calcite-color-picker-button-background-color-hover);
--calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-hover);
--calcite-button-border-color: var(--calcite-color-picker-button-icon-color-hover);
}
&:focus {
--calcite-button-text-color: var(--calcite-color-picker-button-text-color-focus);
--calcite-button-background-color: var(--calcite-color-picker-button-background-color-focus);
--calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-focus);
--calcite-button-border-color: var(--calcite-color-picker-button-icon-color-focus);
}
&:active {
--calcite-button-text-color: var(--calcite-color-picker-button-text-color-active);
--calcite-button-background-color: var(--calcite-color-picker-button-background-color-active);
--calcite-button-icon-color: var(--calcite-color-picker-button-icon-color-active);
--calcite-button-border-color: var(--calcite-color-picker-button-icon-color-active);
}
}

calcite-color-picker-hex-input {
--calcite-color-picker-hex-input-prefix-background-color: var(--calcite-color-picker-input-prefix-background-color);
--calcite-color-picker-hex-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color);
--calcite-color-picker-hex-input-suffix-background-color: var(--calcite-color-picker-input-suffix-background-color);
--calcite-color-picker-hex-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color);
--calcite-color-picker-hex-input-affix-background-color: var(--calcite-color-picker-input-affix-background-color);
--calcite-color-picker-hex-input-affix-text-color: var(--calcite-color-picker-input-affix-text-color);
--calcite-color-picker-hex-input-background-color: var(--calcite-color-picker-input-background-color);
--calcite-color-picker-hex-input-border-color: var(--calcite-color-picker-input-border-color);
--calcite-color-picker-hex-input-corner-radius: var(--calcite-color-picker-input-corner-radius);
Expand All @@ -270,8 +248,8 @@ calcite-input-number {
--calcite-input-background-color: var(--calcite-color-picker-input-background-color);
--calcite-input-border-color: var(--calcite-color-picker-input-border-color);
--calcite-input-text-color: var(--calcite-color-picker-input-text-color);
--calcite-input-suffix-background-color: var(--calcite-color-picker-input-suffix-background-color);
--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-background-color);
--calcite-input-suffix-background-color: var(--calcite-color-picker-input-affix-background-color);
--calcite-input-suffix-text-color: var(--calcite-color-picker-input-affix-background-color);
--calcite-input-corner-radius: var(--calcite-color-picker-input-corner-radius);
}

Expand Down
Loading

0 comments on commit ad9b49a

Please sign in to comment.