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

Esri · Jan 22, 2025 · 1d63f15 · 1d63f15
1 parent 3a61027
commit 1d63f15
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 15 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,18 @@ 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",
+      },
+    });
+  });
 });
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,12 @@
+/**
+ * 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.
+ */
+
 :host {
   @apply block;
 }
@@ -20,34 +29,32 @@
   }
 }
 
-:host(:not([editing-enabled]):not([disabled])) {
-  .wrapper {
-    &:hover {
-      @apply bg-foreground-2;
-    }
-  }
-}
-
 .wrapper {
   @apply bg-foreground-1
     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;
-  }
-}
+@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
@@ -26,6 +26,7 @@ import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 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";
@@ -122,7 +123,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>
@@ -162,6 +163,7 @@ const componentTokens = {
   ...checkboxTokens,
   ...chipTokens,
   ...handleTokens,
+  ...inlineEditableTokens,
   ...inputTokens,
   ...labelTokens,
   ...linkTokens,

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,12 @@
+import { html } from "../../support/formatting";
+
+export const inlineEditableTokens = {
+  calciteInlineEditableBackgroundColor: "",
+  calciteInlineEditableBackgroundColorHover: "",
+};
+
+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,44 @@ <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;
+        "
+      >
+        <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>