feat(input, input-number, input-text): add prefix and suffix width cs…

…s tokens (#10206) **Related Issue:** [#8154](#8154) ## Summary Add `--calcite-input-prefix-size` and `--calcite-input-suffix-size` css tokens to allow users to set custom `prefix` and `suffix` widths.
Esri · Sep 12, 2024 · 7a6ee82 · 7a6ee82
1 parent f33fd5d
commit 7a6ee82
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts
@@ -11,6 +11,7 @@ import {
   reflects,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { getElementRect, getElementXY, isElementFocused, selectText } from "../../tests/utils";
 import { letterKeys, numberKeys } from "../../utils/key";
@@ -21,6 +22,7 @@ import {
   testPostValidationFocusing,
 } from "../input/common/tests";
 import { assertCaretPosition } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-input-number", () => {
   const delayFor2UpdatesInMs = 200;
@@ -1871,4 +1873,26 @@ describe("calcite-input-number", () => {
 
     expect(internalInput.getAttribute("inputmode")).toBe("decimal");
   });
+
+  describe("theme", () => {
+    themed(
+      html`
+        <calcite-input-number
+          placeholder="Placeholder text"
+          prefix-text="prefix"
+          suffix-text="suffix"
+        ></calcite-input-number>
+      `,
+      {
+        "--calcite-input-prefix-size": {
+          shadowSelector: `.${CSS.prefix}`,
+          targetProp: "inlineSize",
+        },
+        "--calcite-input-suffix-size": {
+          shadowSelector: `.${CSS.suffix}`,
+          targetProp: "inlineSize",
+        },
+      },
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-input-prefix-size: Specifies the component's prefix width.
+ * @prop --calcite-input-suffix-size: Specifies the component's suffix width.
+ */
+
 :host {
   @apply block;
 }
@@ -250,10 +259,12 @@ input:focus {
 .prefix {
   @apply order-2;
   border-inline-end-width: theme("borderWidth.0");
+  inline-size: var(--calcite-input-prefix-size, auto);
 }
 .suffix {
   @apply order-5;
   border-inline-start-width: theme("borderWidth.0");
+  inline-size: var(--calcite-input-suffix-size, auto);
 }
 
 // alignment type

diff --git a/packages/calcite-components/src/components/input-text/input-text.e2e.ts b/packages/calcite-components/src/components/input-text/input-text.e2e.ts
@@ -10,6 +10,7 @@ import {
   reflects,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { isElementFocused, selectText } from "../../tests/utils";
 import {
@@ -18,6 +19,7 @@ import {
   testWorkaroundForGlobalPropRemoval,
 } from "../input/common/tests";
 import { assertCaretPosition } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-input-text", () => {
   describe("labelable", () => {
@@ -501,4 +503,26 @@ describe("calcite-input-text", () => {
   describe("translation support", () => {
     t9n("calcite-input-text");
   });
+
+  describe("theme", () => {
+    themed(
+      html`
+        <calcite-input-text
+          placeholder="Placeholder text"
+          prefix-text="prefix"
+          suffix-text="suffix"
+        ></calcite-input-text>
+      `,
+      {
+        "--calcite-input-prefix-size": {
+          shadowSelector: `.${CSS.prefix}`,
+          targetProp: "inlineSize",
+        },
+        "--calcite-input-suffix-size": {
+          shadowSelector: `.${CSS.suffix}`,
+          targetProp: "inlineSize",
+        },
+      },
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-input-prefix-size: Specifies the component's prefix width.
+ * @prop --calcite-input-suffix-size: Specifies the component's suffix width.
+ */
+
 :host {
   @apply block;
 }
@@ -292,10 +301,12 @@ input[type="text"]::-ms-reveal {
 .prefix {
   @apply order-2;
   border-inline-end-width: theme("borderWidth.0");
+  inline-size: var(--calcite-input-prefix-size, auto);
 }
 .suffix {
   @apply order-5;
   border-inline-start-width: theme("borderWidth.0");
+  inline-size: var(--calcite-input-suffix-size, auto);
 }
 
 // alignment type

diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -10,13 +10,15 @@ import {
   renders,
   hidden,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { letterKeys, numberKeys } from "../../utils/key";
 import { locales, numberStringFormatter } from "../../utils/locale";
 import { getElementRect, getElementXY, isElementFocused, selectText } from "../../tests/utils";
 import { DEBOUNCE } from "../../utils/resources";
 import { assertCaretPosition } from "../../tests/utils";
+import { CSS } from "./resources";
 import { testHiddenInputSyncing, testPostValidationFocusing, testWorkaroundForGlobalPropRemoval } from "./common/tests";
 
 describe("calcite-input", () => {
@@ -2109,4 +2111,20 @@ describe("calcite-input", () => {
   describe("translation support", () => {
     t9n("calcite-input");
   });
+
+  describe("theme", () => {
+    themed(
+      html` <calcite-input placeholder="Placeholder text" prefix-text="prefix" suffix-text="suffix"></calcite-input> `,
+      {
+        "--calcite-input-prefix-size": {
+          shadowSelector: `.${CSS.prefix}`,
+          targetProp: "inlineSize",
+        },
+        "--calcite-input-suffix-size": {
+          shadowSelector: `.${CSS.suffix}`,
+          targetProp: "inlineSize",
+        },
+      },
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
@@ -1,3 +1,12 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-input-prefix-size: Specifies the component's prefix width.
+ * @prop --calcite-input-suffix-size: Specifies the component's suffix width.
+ */
+
 :host {
   @apply block;
 }
@@ -322,10 +331,12 @@ input[type="time"]::-webkit-clear-button {
 .prefix {
   @apply order-2;
   border-inline-end-width: theme("borderWidth.0");
+  inline-size: var(--calcite-input-prefix-size, auto);
 }
 .suffix {
   @apply order-5;
   border-inline-start-width: theme("borderWidth.0");
+  inline-size: var(--calcite-input-suffix-size, auto);
 }
 
 // alignment type

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -18,6 +18,9 @@ import { chips } from "./custom-theme/chips";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
 import { icon } from "./custom-theme/icon";
+import { input, inputTokens } from "./custom-theme/input";
+import { inputNumber } from "./custom-theme/input-number";
+import { inputText } from "./custom-theme/input-text";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
@@ -96,6 +99,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
             <div style="width: 40px; height: 40px;">${actionMenu}</div>
             ${icon}
           </div>
+          ${input} ${inputNumber} ${inputText}
         </div>
         <div class="demo-column">
           <div>${card}</div>
@@ -119,6 +123,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...inputTokens,
   },
 };
 
@@ -135,6 +140,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...inputTokens,
     },
     true,
   );

diff --git a/packages/calcite-components/src/custom-theme/input-number.ts b/packages/calcite-components/src/custom-theme/input-number.ts
@@ -0,0 +1,7 @@
+import { html } from "../../support/formatting";
+
+export const inputNumber = html`<calcite-input-number
+  placeholder="Placeholder text"
+  prefix-text="prefix"
+  suffix-text="suffix"
+></calcite-input-number>`;
diff --git a/packages/calcite-components/src/custom-theme/input-text.ts b/packages/calcite-components/src/custom-theme/input-text.ts
@@ -0,0 +1,7 @@
+import { html } from "../../support/formatting";
+
+export const inputText = html`<calcite-input-text
+  placeholder="Placeholder text"
+  prefix-text="prefix"
+  suffix-text="suffix"
+></calcite-input-text>`;
diff --git a/packages/calcite-components/src/custom-theme/input.ts b/packages/calcite-components/src/custom-theme/input.ts
@@ -0,0 +1,12 @@
+import { html } from "../../support/formatting";
+
+export const inputTokens = {
+  calciteInputPrefixSize: "",
+  calciteInputSuffixSize: "",
+};
+
+export const input = html`<calcite-input
+  placeholder="Placeholder text"
+  prefix-text="prefix"
+  suffix-text="suffix"
+></calcite-input>`;