Skip to content

Commit

Permalink
fix(input): update tokens and E2E tests (#9176)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7180 

## Summary

Fix calcite-input mixin and base component. Adds docs for calcite-input
  • Loading branch information
@alisonailea
alisonailea authored Apr 29, 2024
1 parent 211fc2a commit 69b49c4
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 11 deletions.
13 changes: 5 additions & 8 deletions packages/calcite-components/src/components/input/common/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,11 @@
* @prop --calcite-input-suffix-background-color: defines the background color of the suffix sub-component.
* @prop --calcite-input-suffix-text-color: defines the text color of the suffix sub-component.
*
* @prop --calcite-input-icon-color: defines the icon color of the component.
*
* @prop --calcite-input-button-border-color: defines the border color of a button in the component.
* @prop --calcite-input-button-background-color: defines the background color of a button in the component.
* @prop --calcite-input-button-background-color-hover: defines the background color of a button in the component when it's hovered.
* @prop --calcite-input-button-icon-color: defines the icon color of a button in the component.
* @prop --calcite-input-button-icon-color-hover: defines the icon color of a button in the component when it's hovered.
* @prop --calcite-input-button-icon-color-active: defines the icon color of a button in the component when it's active.
* @prop --calcite-input-icon-color: defines the color of an icon in the component.
* @prop --calcite-input-icon-color-hover: defines the color of an icon in the component when it's hovered.
* @prop --calcite-input-icon-color-active: defines the color of an icon in the component when it's active.
*/

@mixin inputTextSpacing() {
Expand Down Expand Up @@ -372,14 +369,14 @@

calcite-icon {
@apply transition-default;
color: var(--calcite-input-button-icon-color-hover, var(--calcite-color-text-1));
color: var(--calcite-input-icon-color-hover, var(--calcite-color-text-1));
}
}
&:active {
background-color: var(--calcite-input-button-background-color-active, var(--calcite-color-foreground-3));

calcite-icon {
color: var(--calcite-input-button-icon-color-active, var(--calcite-color-text-1));
color: var(--calcite-input-icon-color-active, var(--calcite-color-text-1));
}
}
&:focus {
Expand Down
108 changes: 108 additions & 0 deletions packages/calcite-components/src/components/input/input.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,15 @@ import {
renders,
hidden,
t9n,
ComponentTestTokens,
themed,
} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { letterKeys, numberKeys } from "../../utils/key";
import { locales, numberStringFormatter } from "../../utils/locale";
import { getElementRect, getElementXY, selectText } from "../../tests/utils";
import { testHiddenInputSyncing, testPostValidationFocusing } from "./common/tests";
import { CSS } from "./resources";

describe("calcite-input", () => {
const delayFor2UpdatesInMs = 200;
Expand Down Expand Up @@ -2065,4 +2068,109 @@ describe("calcite-input", () => {
describe("translation support", () => {
t9n("calcite-input");
});

describe("theme", () => {
describe("default", () => {
const tokens: ComponentTestTokens = {
"--calcite-input-background-color": {
shadowSelector: "input",
targetProp: "backgroundColor",
},
"--calcite-input-border-color": {
shadowSelector: "input",
targetProp: "borderColor",
},
"--calcite-input-corner-radius": {
shadowSelector: "input",
targetProp: "borderRadius",
},
"--calcite-input-shadow": {
targetProp: "boxShadow",
},
"--calcite-input-text-color": {
shadowSelector: "input",
targetProp: "color",
},
};
themed(`calcite-input`, tokens);
});
describe("clearable", () => {
const tokens: ComponentTestTokens = {
"--calcite-input-button-background-color-hover": {
shadowSelector: "button",
targetProp: "backgroundColor",
state: "hover",
},
"--calcite-input-button-background-color": {
shadowSelector: "button",
targetProp: "backgroundColor",
},
"--calcite-input-border-color": {
shadowSelector: "button",
targetProp: "borderColor",
},
"--calcite-input-icon-color-active": {
shadowSelector: "calcite-icon",
targetProp: "--calcite-icon-color",
},
"--calcite-input-icon-color-hover": {
shadowSelector: "calcite-icon",
targetProp: "--calcite-icon-color",
},
"--calcite-input-icon-color": {
shadowSelector: "calcite-icon",
targetProp: "--calcite-icon-color",
},
};
themed(html`<calcite-input value="test" clearable />`, tokens);
});
describe("loading", () => {
const tokens: ComponentTestTokens = {
"--calcite-input-progress-background-color": {
shadowSelector: "calcite-progress",
targetProp: "--calcite-progress-text-color",
},
"--calcite-input-progress-fill-color": {
shadowSelector: "calcite-progress",
targetProp: "--calcite-progress-text-color",
},
"--calcite-input-progress-text-color": {
shadowSelector: "calcite-progress",
targetProp: "--calcite-progress-text-color",
},
};
themed(html`<calcite-input loading />`, tokens);
});
describe("prefix and suffix", () => {
const tokens: ComponentTestTokens = {
"--calcite-input-border-color": [
{
shadowSelector: `.${CSS.prefix}`,
targetProp: "borderColor",
},
{
shadowSelector: `.${CSS.suffix}`,
targetProp: "borderColor",
},
],
"--calcite-input-prefix-background-color": {
shadowSelector: `.${CSS.prefix}`,
targetProp: "backgroundColor",
},
"--calcite-input-prefix-text-color": {
shadowSelector: `.${CSS.prefix}`,
targetProp: "color",
},
"--calcite-input-suffix-background-color": {
shadowSelector: `.${CSS.suffix}`,
targetProp: "backgroundColor",
},
"--calcite-input-suffix-text-color": {
shadowSelector: `.${CSS.suffix}`,
targetProp: "color",
},
};
themed(html`<calcite-input prefix-text="prefix" suffix-text="suffix" />`, tokens);
});
});
});
8 changes: 5 additions & 3 deletions packages/calcite-components/src/components/input/input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,11 @@
*
* @prop --calcite-input-background-color: defines the background color of the component.
* @prop --calcite-input-border-color: defines the border color of the component.
* @prop --calcite-input-button-background-color: defines the background color of a button in the component.
* @prop --calcite-input-button-background-color-hover: defines the background color of a button in the component when it's hovered.
* @prop --calcite-input-button-border-color: defines the border color of a button in the component.
* @prop --calcite-input-button-icon-color: defines the icon color of a button in the component.
* @prop --calcite-input-button-background-color: defines the background color of a button in the component.
* @prop --calcite-input-button-icon-color-active: defines the icon color of a button in the component when it's active.
* @prop --calcite-input-button-icon-color-hover: defines the icon color of a button in the component when it's hovered.
* @prop --calcite-input-button-icon-color: defines the icon color of a button in the component.
* @prop --calcite-input-corner-radius: defines the corner radius of the component.
* @prop --calcite-input-icon-color: defines the icon color of the component.
* @prop --calcite-input-placeholder-text-color: defines the color of placeholder text in the component.
Expand All @@ -21,8 +20,11 @@
* @prop --calcite-input-progress-background-color: Defines the background color of the progress sub-component.
* @prop --calcite-input-progress-fill-color: Defines the background color of the progress sub-component bar.
* @prop --calcite-input-progress-text-color: Defines the text color of the progress sub-component.
* @prop --calcite-input-shadow: defines the shadow of the component.
* @prop --calcite-input-suffix-background-color: defines the background color of the suffix sub-component.
* @prop --calcite-input-suffix-background-color: defines the background color of the suffix sub-component.
* @prop --calcite-input-suffix-text-color: defines the text color of the suffix sub-component.
* @prop --calcite-input-suffix-text-color: defines the text color of the suffix sub-component.
* @prop --calcite-input-text-color: defines the text color of the component.
*
*/
Expand Down

0 comments on commit 69b49c4

Please sign in to comment.