Skip to content

Commit

Permalink
test(inline-editable): add token theme tests (#9648)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7180 

## Summary

Adds token theme tests for `calcite-inline-editable`.
  • Loading branch information
@eriklharper
eriklharper authored Jun 21, 2024
1 parent 7f60326 commit 5bb25ad
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 2 deletions.
215 changes: 214 additions & 1 deletion packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
import { accessible, disabled, labelable, renders, hidden, t9n } from "../../tests/commonTests";
import { accessible, disabled, labelable, renders, hidden, t9n, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { ComponentTestTokens } from "../../tests/commonTests/themed";
import { CSS } from "./resources";

describe("calcite-inline-editable", () => {
Expand Down Expand Up @@ -379,6 +380,218 @@ describe("calcite-inline-editable", () => {
});
});

describe("theme", () => {
describe("default", () => {
const tokens: ComponentTestTokens = {
"--calcite-inline-editable-background-color": {
shadowSelector: `.${CSS.wrapper}`,
targetProp: "backgroundColor",
},
"--calcite-inline-editable-edit-button-background-color": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-background-color",
},
"--calcite-inline-editable-edit-button-background-color-active": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-background-color",
state: { press: { attribute: "class", value: CSS.enableEditingButton } },
},
"--calcite-inline-editable-edit-button-background-color-focus": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-background-color",
state: "focus",
},
"--calcite-inline-editable-edit-button-background-color-hover": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-background-color",
state: "hover",
},
"--calcite-inline-editable-edit-button-border-color": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-border-color",
},
"--calcite-inline-editable-edit-button-border-color-active": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-border-color",
state: { press: { attribute: "class", value: CSS.enableEditingButton } },
},
"--calcite-inline-editable-edit-button-border-color-focus": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-border-color",
state: "focus",
},
"--calcite-inline-editable-edit-button-border-color-hover": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-border-color",
state: "hover",
},
"--calcite-inline-editable-edit-button-icon-color": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-icon-color",
},
"--calcite-inline-editable-edit-button-icon-color-active": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-icon-color",
state: { press: { attribute: "class", value: CSS.enableEditingButton } },
},
"--calcite-inline-editable-edit-button-icon-color-focus": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-icon-color",
state: "focus",
},
"--calcite-inline-editable-edit-button-icon-color-hover": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-icon-color",
state: "hover",
},
"--calcite-inline-editable-edit-button-corner-radius": {
shadowSelector: `.${CSS.enableEditingButton}`,
targetProp: "--calcite-button-corner-radius",
},
};
themed(
html`
<calcite-inline-editable controls>
<calcite-input placeholder="My placeholder" value="Edit me"></calcite-input>
</calcite-inline-editable>
`,
tokens,
);
});
describe("editing enabled", () => {
const tokens: ComponentTestTokens = {
"--calcite-inline-editable-cancel-button-background-color": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-background-color",
},
"--calcite-inline-editable-cancel-button-background-color-active": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-background-color",
state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
},
"--calcite-inline-editable-cancel-button-background-color-focus": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-background-color",
state: "focus",
},
"--calcite-inline-editable-cancel-button-background-color-hover": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-background-color",
state: "hover",
},
"--calcite-inline-editable-cancel-button-border-color-active": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-border-color",
state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
},
"--calcite-inline-editable-cancel-button-border-color-focus": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-border-color",
state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
},
"--calcite-inline-editable-cancel-button-border-color-hover": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-border-color",
state: "hover",
},
"--calcite-inline-editable-cancel-button-icon-color": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-icon-color",
},
"--calcite-inline-editable-cancel-button-icon-color-active": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-icon-color",
state: { press: { attribute: "class", value: CSS.cancelEditingButton } },
},
"--calcite-inline-editable-cancel-button-icon-color-focus": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-icon-color",
state: "focus",
},
"--calcite-inline-editable-cancel-button-icon-color-hover": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-icon-color",
state: "hover",
},
"--calcite-inline-editable-cancel-button-corner-radius": {
shadowSelector: `.${CSS.cancelEditingButton}`,
targetProp: "--calcite-button-corner-radius",
},
"--calcite-inline-editable-ok-button-background-color": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-background-color",
},
"--calcite-inline-editable-ok-button-background-color-active": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-background-color",
state: { press: { attribute: "class", value: CSS.confirmChangesButton } },
},
"--calcite-inline-editable-ok-button-background-color-focus": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-background-color",
state: "focus",
},
"--calcite-inline-editable-ok-button-background-color-hover": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-background-color",
state: "hover",
},
"--calcite-inline-editable-ok-button-border-color": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-border-color",
state: "hover",
},
"--calcite-inline-editable-ok-button-border-color-active": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-border-color",
state: { press: { attribute: "class", value: CSS.confirmChangesButton } },
},
"--calcite-inline-editable-ok-button-border-color-focus": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-border-color",
state: "focus",
},
"--calcite-inline-editable-ok-button-border-color-hover": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-border-color",
state: "hover",
},
"--calcite-inline-editable-ok-button-icon-color": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-icon-color",
state: "hover",
},
"--calcite-inline-editable-ok-button-icon-color-active": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-icon-color",
state: { press: { attribute: "class", value: CSS.confirmChangesButton } },
},
"--calcite-inline-editable-ok-button-icon-color-focus": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-icon-color",
state: "focus",
},
"--calcite-inline-editable-ok-button-icon-color-hover": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-icon-color",
state: "hover",
},
"--calcite-inline-editable-ok-button-corner-radius": {
shadowSelector: `.${CSS.confirmChangesButton}`,
targetProp: "--calcite-button-corner-radius",
},
};
themed(
html`
<calcite-inline-editable editing-enabled controls>
<calcite-input placeholder="My placeholder" value="Edit me"></calcite-input>
</calcite-inline-editable>
`,
tokens,
);
});
});

describe("translation support", () => {
t9n("calcite-inline-editable");
});
Expand Down
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/inline-editable/inline-editable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
}
}

.confirm-editing-button {
.confirm-changes-button {
--calcite-button-background-color: var(--calcite-inline-editable-ok-button-background-color);
--calcite-button-border-color: var(--calcite-inline-editable-ok-button-border-color);
--calcite-button-icon-color: var(--calcite-inline-editable-ok-button-icon-color);
Expand Down

0 comments on commit 5bb25ad

Please sign in to comment.