feat(inline-editable): add component tokens (#11357)

**Related Issue:** #7180 ## Summary Add `inline-editable` component tokens. `--calcite-inline-editable-background-color-hover`: Specifies the component's background color when hovered. `--calcite-inline-editable-background-color`: Specifies the component's background color. ` --calcite-inline-editable-button-background-color`: Specifies the button element's background color when appearance="solid" or appearance="outline-fill". `--calcite-inline-editable-button-corner-radius`: Specifies the button element's corner radius. `--calcite-inline-editable-button-loader-color`: Specifies the button element's loader color. `--calcite-inline-editable-button-shadow-color`: Specifies the button element's box-shadow color. `--calcite-inline-editable-button-text-color`: Specifies the button element's text color.
Esri · Feb 8, 2025 · e37f8ae · e37f8ae
1 parent 91fcb70
commit e37f8ae
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 16 deletions.
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
 import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
-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 type { Input } from "../input/input";
 import { CSS } from "./resources";
@@ -399,4 +399,71 @@ describe("calcite-inline-editable", () => {
   describe("translation support", () => {
     t9n("calcite-inline-editable");
   });
+
+  describe("theme", () => {
+    themed("calcite-inline-editable", {
+      "--calcite-inline-editable-background-color-hover": {
+        shadowSelector: `.${CSS.wrapper}`,
+        state: "hover",
+        targetProp: "backgroundColor",
+      },
+      "--calcite-inline-editable-background-color": {
+        shadowSelector: `.${CSS.wrapper}`,
+        targetProp: "backgroundColor",
+      },
+    });
+    themed(
+      html`<calcite-inline-editable controls editing-enabled>
+        <calcite-input />
+      </calcite-inline-editable>`,
+      {
+        "--calcite-inline-editable-button-corner-radius": [
+          {
+            shadowSelector: `.${CSS.enableEditingButton}`,
+            targetProp: "--calcite-button-corner-radius",
+          },
+          {
+            shadowSelector: `.${CSS.cancelEditingButton}`,
+            targetProp: "--calcite-button-corner-radius",
+          },
+          {
+            shadowSelector: `.${CSS.confirmChangesButton}`,
+            targetProp: "--calcite-button-corner-radius",
+          },
+        ],
+        "--calcite-inline-editable-button-loader-color": {
+          shadowSelector: `.${CSS.confirmChangesButton}`,
+          targetProp: "--calcite-button-loader-color",
+        },
+        "--calcite-inline-editable-button-shadow-color": [
+          {
+            shadowSelector: `.${CSS.enableEditingButton}`,
+            targetProp: "--calcite-button-shadow-color",
+          },
+          {
+            shadowSelector: `.${CSS.cancelEditingButton}`,
+            targetProp: "--calcite-button-shadow-color",
+          },
+          {
+            shadowSelector: `.${CSS.confirmChangesButton}`,
+            targetProp: "--calcite-button-shadow-color",
+          },
+        ],
+        "--calcite-inline-editable-button-text-color": [
+          {
+            shadowSelector: `.${CSS.enableEditingButton}`,
+            targetProp: "--calcite-button-text-color",
+          },
+          {
+            shadowSelector: `.${CSS.cancelEditingButton}`,
+            targetProp: "--calcite-button-text-color",
+          },
+          {
+            shadowSelector: `.${CSS.confirmChangesButton}`,
+            targetProp: "--calcite-button-text-color",
+          },
+        ],
+      },
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.scss b/packages/calcite-components/src/components/inline-editable/inline-editable.scss
@@ -1,3 +1,17 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-inline-editable-background-color-hover: Specifies the component's background color when hovered.
+ * @prop --calcite-inline-editable-background-color: Specifies the component's background color.
+ * @prop --calcite-inline-editable-button-background-color: Specifies the button element's background color when appearance="solid" or appearance="outline-fill".
+ * @prop --calcite-inline-editable-button-corner-radius: Specifies the button element's corner radius.
+ * @prop --calcite-inline-editable-button-loader-color: Specifies the button element's loader color.
+ * @prop --calcite-inline-editable-button-shadow-color: Specifies the button element's box-shadow color.
+ * @prop --calcite-inline-editable-button-text-color: Specifies the button element's text color.
+ */
+
 :host {
   @apply block;
 }
@@ -20,34 +34,39 @@
   }
 }
 
-:host(:not([editing-enabled]):not([disabled])) {
-  .wrapper {
-    &:hover {
-      @apply bg-foreground-2;
-    }
-  }
-}
-
 .wrapper {
-  @apply bg-foreground-1
-    transition-default
+  @apply transition-default
     box-border
     flex
     justify-between;
 
+  background-color: var(--calcite-inline-editable-background-color, var(--calcite-color-foreground-1));
+
   .input-wrapper {
     @apply flex-1;
   }
 }
 
+:host(:not([editing-enabled]):not([disabled])) {
+  .wrapper {
+    &:hover {
+      background-color: var(--calcite-inline-editable-background-color-hover, var(--calcite-color-foreground-2));
+    }
+  }
+}
+
 .controls-wrapper {
   @apply flex;
 }
 
-@include disabled() {
-  .cancel-editing-button-wrapper {
-    @apply border-color-2;
-  }
+calcite-button {
+  --calcite-button-background-color: var(--calcite-inline-editable-button-background-color);
+  --calcite-button-corner-radius: var(--calcite-inline-editable-button-corner-radius);
+  --calcite-button-loader-color: var(--calcite-inline-editable-button-loader-color);
+  --calcite-button-shadow-color: var(--calcite-inline-editable-button-shadow-color);
+  --calcite-button-text-color: var(--calcite-inline-editable-button-text-color);
 }
 
+@include disabled();
+
 @include base-component();
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -28,6 +28,7 @@ import { flow, flowTokens } from "./custom-theme/flow";
 import { graph, graphTokens } from "./custom-theme/graph";
 import { handle, handleTokens } from "./custom-theme/handle";
 import { icon } from "./custom-theme/icon";
+import { inlineEditable, inlineEditableTokens } from "./custom-theme/inline-editable";
 import { input, inputTokens } from "./custom-theme/input";
 import { inputNumber } from "./custom-theme/input-number";
 import { inputText } from "./custom-theme/input-text";
@@ -124,7 +125,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div style="width: 40px; height: 40px;">${actionMenu}</div>
           ${icon}
         </div>
-        ${input} ${inputNumber} ${inputText} ${select}
+        ${inlineEditable} ${input} ${inputNumber} ${inputText} ${select}
       </div>
       <div class="demo-column">
         <div>${card}</div>
@@ -166,6 +167,7 @@ const componentTokens = {
   ...chipTokens,
   ...flowTokens,
   ...handleTokens,
+  ...inlineEditableTokens,
   ...graphTokens,
   ...inputTokens,
   ...labelTokens,

diff --git a/packages/calcite-components/src/custom-theme/inline-editable.ts b/packages/calcite-components/src/custom-theme/inline-editable.ts
@@ -0,0 +1,17 @@
+import { html } from "../../support/formatting";
+
+export const inlineEditableTokens = {
+  calciteInlineEditableBackgroundColor: "",
+  calciteInlineEditableBackgroundColorHover: "",
+  calciteInlineEditableButtonBackgroundColor: "",
+  calciteInlineEditableButtonCornerRadius: "",
+  calciteInlineEditableButtonLoaderColor: "",
+  calciteInlineEditableButtonShadowColor: "",
+  calciteInlineEditableButtonTextColor: "",
+};
+
+export const inlineEditable = html`
+  <calcite-inline-editable>
+    <calcite-input />
+  </calcite-inline-editable>
+`;
diff --git a/packages/calcite-components/src/demos/inline-editable.html b/packages/calcite-components/src/demos/inline-editable.html
@@ -43,6 +43,7 @@
       };
     </script>
   </head>
+
   <body>
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Inline Editable</h1>
@@ -140,6 +141,49 @@ <h1 style="margin: 0 auto; text-align: center">Inline Editable</h1>
           </calcite-label>
         </div>
       </div>
+
+      <!-- themed -->
+      <div
+        class="parent"
+        style="
+          --calcite-inline-editable-background-color-hover: red;
+          --calcite-inline-editable-background-color: purple;
+          --calcite-inline-editable-button-background-color: orange;
+          --calcite-inline-editable-button-corner-radius: 10px;
+          --calcite-inline-editable-button-loader-color: pink;
+          --calcite-inline-editable-button-shadow-color: green;
+          --calcite-inline-editable-button-text-color: indigo;
+        "
+      >
+        <div class="child right-aligned-text">themed</div>
+
+        <div class="child">
+          <calcite-label scale="s">
+            Access denied
+            <calcite-inline-editable controls>
+              <calcite-input placeholder="Day of the week" scale="s" />
+            </calcite-inline-editable>
+          </calcite-label>
+        </div>
+
+        <div class="child">
+          <calcite-label scale="m">
+            Access denied
+            <calcite-inline-editable controls>
+              <calcite-input placeholder="Day of the week" scale="m" />
+            </calcite-inline-editable>
+          </calcite-label>
+        </div>
+
+        <div class="child">
+          <calcite-label scale="l">
+            Access denied
+            <calcite-inline-editable controls>
+              <calcite-input placeholder="Day of the week" scale="l" />
+            </calcite-inline-editable>
+          </calcite-label>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>