From 63594aa7706fea554d6dd1d47ae347fe137cdc44 Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Tue, 3 Sep 2024 11:34:38 -0700
Subject: [PATCH 1/2] feat(input, input-number, input-text): add prefix and
suffix width css tokens
---
.../input-number/input-number.e2e.ts | 24 +++++++++++++++++++
.../components/input-number/input-number.scss | 11 +++++++++
.../input-number/input-number.stories.ts | 16 +++++++++++++
.../components/input-text/input-text.e2e.ts | 24 +++++++++++++++++++
.../src/components/input-text/input-text.scss | 11 +++++++++
.../input-text/input-text.stories.ts | 16 +++++++++++++
.../src/components/input/input.e2e.ts | 18 ++++++++++++++
.../src/components/input/input.scss | 11 +++++++++
.../src/components/input/input.stories.ts | 16 +++++++++++++
9 files changed, 147 insertions(+)
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
index b898d811b0f..179bb98905a 100644
--- 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-number-prefix-width": {
+ shadowSelector: `.${CSS.prefix}`,
+ targetProp: "width",
+ },
+ "--calcite-input-number-suffix-width": {
+ shadowSelector: `.${CSS.suffix}`,
+ targetProp: "width",
+ },
+ },
+ );
+ });
});
diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
index d349bfeaec0..f46a60586a6 100755
--- 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-number-prefix-width: Specifies the component's prefix width.
+ * @prop --calcite-input-number-suffix-width: 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-number-prefix-width, auto);
}
.suffix {
@apply order-5;
border-inline-start-width: theme("borderWidth.0");
+ inline-size: var(--calcite-input-number-suffix-width, auto);
}
// alignment type
diff --git a/packages/calcite-components/src/components/input-number/input-number.stories.ts b/packages/calcite-components/src/components/input-number/input-number.stories.ts
index 78bdfc68a68..ad3426b1e58 100644
--- a/packages/calcite-components/src/components/input-number/input-number.stories.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.stories.ts
@@ -216,3 +216,19 @@ export const widthSetToBreakpoints_TestOnly = (): string =>
value="123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"
></calcite-input-number>
`);
+
+export const inputNumberPrefixAndSuffixWidth = (): string => html`
+ <calcite-input-number
+ placeholder="Placeholder text"
+ prefix-text="prefix"
+ suffix-text="suffix"
+ style="--calcite-input-number-prefix-width: 100px; --calcite-input-number-suffix-width: 100px"
+ ></calcite-input-number>
+ <br />
+ <calcite-input-number
+ placeholder="Placeholder text"
+ prefix-text="prefix"
+ suffix-text="suffix"
+ style="--calcite-input-number-prefix-width: 100px; --calcite-input-number-suffix-width: 100px"
+ ></calcite-input-number>
+`;
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
index e7caced8c1c..ac18eb6c73d 100644
--- 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-text-prefix-width": {
+ shadowSelector: `.${CSS.prefix}`,
+ targetProp: "width",
+ },
+ "--calcite-input-text-suffix-width": {
+ shadowSelector: `.${CSS.suffix}`,
+ targetProp: "width",
+ },
+ },
+ );
+ });
});
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index d46e7ec4315..daf7fc4150d 100755
--- 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-text-prefix-width: Specifies the component's prefix width.
+ * @prop --calcite-input-text-suffix-width: 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-text-prefix-width, auto);
}
.suffix {
@apply order-5;
border-inline-start-width: theme("borderWidth.0");
+ inline-size: var(--calcite-input-text-suffix-width, auto);
}
// alignment type
diff --git a/packages/calcite-components/src/components/input-text/input-text.stories.ts b/packages/calcite-components/src/components/input-text/input-text.stories.ts
index 86a49c3624e..e03f3cc7835 100644
--- a/packages/calcite-components/src/components/input-text/input-text.stories.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.stories.ts
@@ -166,3 +166,19 @@ export const validationMessageAllScales_TestOnly = (): string => html`
></calcite-input-text>
</div>
`;
+
+export const inputTextPrefixAndSuffixWidth = (): string => html`
+ <calcite-input-text
+ placeholder="Placeholder text"
+ prefix-text="prefix"
+ suffix-text="suffix"
+ style="--calcite-input-text-prefix-width: 100px; --calcite-input-text-suffix-width: 100px"
+ ></calcite-input-text>
+ <br />
+ <calcite-input-text
+ placeholder="Placeholder text"
+ prefix-text="prefix"
+ suffix-text="suffix"
+ style="--calcite-input-text-prefix-width: 100px; --calcite-input-text-suffix-width: 100px"
+ ></calcite-input-text>
+`;
diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
index 94cb3e12e54..00df4bdecd7 100644
--- a/packages/calcite-components/src/components/input/input.e2e.ts
+++ b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -10,6 +10,7 @@ import {
renders,
hidden,
t9n,
+ themed,
} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { letterKeys, numberKeys } from "../../utils/key";
@@ -17,6 +18,7 @@ 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-width": {
+ shadowSelector: `.${CSS.prefix}`,
+ targetProp: "width",
+ },
+ "--calcite-input-suffix-width": {
+ shadowSelector: `.${CSS.suffix}`,
+ targetProp: "width",
+ },
+ },
+ );
+ });
});
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index c5890155d41..a1a2ac7b5f4 100755
--- 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-width: Specifies the component's prefix width.
+ * @prop --calcite-input-suffix-width: 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-width, auto);
}
.suffix {
@apply order-5;
border-inline-start-width: theme("borderWidth.0");
+ inline-size: var(--calcite-input-suffix-width, auto);
}
// alignment type
diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts
index 6bd9560c123..52786dac1e1 100644
--- a/packages/calcite-components/src/components/input/input.stories.ts
+++ b/packages/calcite-components/src/components/input/input.stories.ts
@@ -228,3 +228,19 @@ export const widthSetToBreakpoints_TestOnly = (): string =>
value="Value: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque eu ultrices vitae auctor eu augue. Rhoncus dolor purus non enim praesent elementum facilisis."
></calcite-input>
`);
+
+export const inputPrefixAndSuffixWidth = (): string => html`
+ <calcite-input
+ placeholder="Placeholder text"
+ prefix-text="prefix"
+ suffix-text="suffix"
+ style="--calcite-input-prefix-width: 100px; --calcite-input-suffix-width: 100px"
+ ></calcite-input>
+ <br />
+ <calcite-input
+ placeholder="Placeholder text"
+ prefix-text="prefix"
+ suffix-text="suffix"
+ style="--calcite-input-prefix-width: 100px; --calcite-input-suffix-width: 100px"
+ ></calcite-input>
+`;
From 1ec602e96adeec2ae986a42c0079ec369c893686 Mon Sep 17 00:00:00 2001
From: aPreciado88 <apreciado@esri.com>
Date: Tue, 3 Sep 2024 17:01:08 -0700
Subject: [PATCH 2/2] feat(input, input-number, input-text): add prefix and
suffix width css tokens
---
.../components/input-number/input-number.e2e.ts | 8 ++++----
.../components/input-number/input-number.scss | 8 ++++----
.../input-number/input-number.stories.ts | 16 ----------------
.../src/components/input-text/input-text.e2e.ts | 8 ++++----
.../src/components/input-text/input-text.scss | 8 ++++----
.../components/input-text/input-text.stories.ts | 16 ----------------
.../src/components/input/input.e2e.ts | 8 ++++----
.../src/components/input/input.scss | 8 ++++----
.../src/components/input/input.stories.ts | 16 ----------------
.../src/custom-theme.stories.ts | 6 ++++++
.../src/custom-theme/input-number.ts | 7 +++++++
.../src/custom-theme/input-text.ts | 7 +++++++
.../calcite-components/src/custom-theme/input.ts | 12 ++++++++++++
13 files changed, 56 insertions(+), 72 deletions(-)
create mode 100644 packages/calcite-components/src/custom-theme/input-number.ts
create mode 100644 packages/calcite-components/src/custom-theme/input-text.ts
create mode 100644 packages/calcite-components/src/custom-theme/input.ts
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
index 179bb98905a..6ebe8ecb683 100644
--- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts
@@ -1884,13 +1884,13 @@ describe("calcite-input-number", () => {
></calcite-input-number>
`,
{
- "--calcite-input-number-prefix-width": {
+ "--calcite-input-prefix-size": {
shadowSelector: `.${CSS.prefix}`,
- targetProp: "width",
+ targetProp: "inlineSize",
},
- "--calcite-input-number-suffix-width": {
+ "--calcite-input-suffix-size": {
shadowSelector: `.${CSS.suffix}`,
- targetProp: "width",
+ 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
index f46a60586a6..5cb9dfb8d37 100755
--- a/packages/calcite-components/src/components/input-number/input-number.scss
+++ b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -3,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-input-number-prefix-width: Specifies the component's prefix width.
- * @prop --calcite-input-number-suffix-width: Specifies the component's suffix width.
+ * @prop --calcite-input-prefix-size: Specifies the component's prefix width.
+ * @prop --calcite-input-suffix-size: Specifies the component's suffix width.
*/
:host {
@@ -259,12 +259,12 @@ input:focus {
.prefix {
@apply order-2;
border-inline-end-width: theme("borderWidth.0");
- inline-size: var(--calcite-input-number-prefix-width, auto);
+ inline-size: var(--calcite-input-prefix-size, auto);
}
.suffix {
@apply order-5;
border-inline-start-width: theme("borderWidth.0");
- inline-size: var(--calcite-input-number-suffix-width, auto);
+ inline-size: var(--calcite-input-suffix-size, auto);
}
// alignment type
diff --git a/packages/calcite-components/src/components/input-number/input-number.stories.ts b/packages/calcite-components/src/components/input-number/input-number.stories.ts
index ad3426b1e58..78bdfc68a68 100644
--- a/packages/calcite-components/src/components/input-number/input-number.stories.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.stories.ts
@@ -216,19 +216,3 @@ export const widthSetToBreakpoints_TestOnly = (): string =>
value="123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890"
></calcite-input-number>
`);
-
-export const inputNumberPrefixAndSuffixWidth = (): string => html`
- <calcite-input-number
- placeholder="Placeholder text"
- prefix-text="prefix"
- suffix-text="suffix"
- style="--calcite-input-number-prefix-width: 100px; --calcite-input-number-suffix-width: 100px"
- ></calcite-input-number>
- <br />
- <calcite-input-number
- placeholder="Placeholder text"
- prefix-text="prefix"
- suffix-text="suffix"
- style="--calcite-input-number-prefix-width: 100px; --calcite-input-number-suffix-width: 100px"
- ></calcite-input-number>
-`;
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
index ac18eb6c73d..d0b3fa416b8 100644
--- a/packages/calcite-components/src/components/input-text/input-text.e2e.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.e2e.ts
@@ -514,13 +514,13 @@ describe("calcite-input-text", () => {
></calcite-input-text>
`,
{
- "--calcite-input-text-prefix-width": {
+ "--calcite-input-prefix-size": {
shadowSelector: `.${CSS.prefix}`,
- targetProp: "width",
+ targetProp: "inlineSize",
},
- "--calcite-input-text-suffix-width": {
+ "--calcite-input-suffix-size": {
shadowSelector: `.${CSS.suffix}`,
- targetProp: "width",
+ 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
index daf7fc4150d..b1bdab1fc5e 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -3,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-input-text-prefix-width: Specifies the component's prefix width.
- * @prop --calcite-input-text-suffix-width: Specifies the component's suffix width.
+ * @prop --calcite-input-prefix-size: Specifies the component's prefix width.
+ * @prop --calcite-input-suffix-size: Specifies the component's suffix width.
*/
:host {
@@ -301,12 +301,12 @@ input[type="text"]::-ms-reveal {
.prefix {
@apply order-2;
border-inline-end-width: theme("borderWidth.0");
- inline-size: var(--calcite-input-text-prefix-width, auto);
+ inline-size: var(--calcite-input-prefix-size, auto);
}
.suffix {
@apply order-5;
border-inline-start-width: theme("borderWidth.0");
- inline-size: var(--calcite-input-text-suffix-width, auto);
+ inline-size: var(--calcite-input-suffix-size, auto);
}
// alignment type
diff --git a/packages/calcite-components/src/components/input-text/input-text.stories.ts b/packages/calcite-components/src/components/input-text/input-text.stories.ts
index e03f3cc7835..86a49c3624e 100644
--- a/packages/calcite-components/src/components/input-text/input-text.stories.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.stories.ts
@@ -166,19 +166,3 @@ export const validationMessageAllScales_TestOnly = (): string => html`
></calcite-input-text>
</div>
`;
-
-export const inputTextPrefixAndSuffixWidth = (): string => html`
- <calcite-input-text
- placeholder="Placeholder text"
- prefix-text="prefix"
- suffix-text="suffix"
- style="--calcite-input-text-prefix-width: 100px; --calcite-input-text-suffix-width: 100px"
- ></calcite-input-text>
- <br />
- <calcite-input-text
- placeholder="Placeholder text"
- prefix-text="prefix"
- suffix-text="suffix"
- style="--calcite-input-text-prefix-width: 100px; --calcite-input-text-suffix-width: 100px"
- ></calcite-input-text>
-`;
diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
index 00df4bdecd7..287f21c4922 100644
--- a/packages/calcite-components/src/components/input/input.e2e.ts
+++ b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -2116,13 +2116,13 @@ describe("calcite-input", () => {
themed(
html` <calcite-input placeholder="Placeholder text" prefix-text="prefix" suffix-text="suffix"></calcite-input> `,
{
- "--calcite-input-prefix-width": {
+ "--calcite-input-prefix-size": {
shadowSelector: `.${CSS.prefix}`,
- targetProp: "width",
+ targetProp: "inlineSize",
},
- "--calcite-input-suffix-width": {
+ "--calcite-input-suffix-size": {
shadowSelector: `.${CSS.suffix}`,
- targetProp: "width",
+ targetProp: "inlineSize",
},
},
);
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index a1a2ac7b5f4..ecb5e2f16d2 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -3,8 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-input-prefix-width: Specifies the component's prefix width.
- * @prop --calcite-input-suffix-width: Specifies the component's suffix width.
+ * @prop --calcite-input-prefix-size: Specifies the component's prefix width.
+ * @prop --calcite-input-suffix-size: Specifies the component's suffix width.
*/
:host {
@@ -331,12 +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-width, auto);
+ 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-width, auto);
+ inline-size: var(--calcite-input-suffix-size, auto);
}
// alignment type
diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts
index 52786dac1e1..6bd9560c123 100644
--- a/packages/calcite-components/src/components/input/input.stories.ts
+++ b/packages/calcite-components/src/components/input/input.stories.ts
@@ -228,19 +228,3 @@ export const widthSetToBreakpoints_TestOnly = (): string =>
value="Value: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque eu ultrices vitae auctor eu augue. Rhoncus dolor purus non enim praesent elementum facilisis."
></calcite-input>
`);
-
-export const inputPrefixAndSuffixWidth = (): string => html`
- <calcite-input
- placeholder="Placeholder text"
- prefix-text="prefix"
- suffix-text="suffix"
- style="--calcite-input-prefix-width: 100px; --calcite-input-suffix-width: 100px"
- ></calcite-input>
- <br />
- <calcite-input
- placeholder="Placeholder text"
- prefix-text="prefix"
- suffix-text="suffix"
- style="--calcite-input-prefix-width: 100px; --calcite-input-suffix-width: 100px"
- ></calcite-input>
-`;
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 6e6adf7970f..e055b02f598 100644
--- 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
new file mode 100644
index 00000000000..4d781b0d075
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..46dc529a57e
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..d862b0260a9
--- /dev/null
+++ 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>`;