docs(textfield,stepper): storybook - allow ids for textfield and stepper (#2271)

* docs(textfield): add arg to storybook for input id

Add ability to pass in an ID for the Text field input. Needed for
components such as Label that can refer to this ID.

* docs(stepper): storybook - use an id on its input

Also set an ID on the input created by Stepper when an ID is passed in.

Author: jawinn

components/stepper/stories/template.js

@@ -1,10 +1,10 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
-import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
 import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js";
+import { Template as Textfield } from "@spectrum-css/textfield/stories/template.js";
 
 import "../index.css";
 
@@ -74,6 +74,7 @@ export const Template = ({
 				value: "0",
 				isDisabled,
 				isQuiet,
+				id: id ? `${id}-input` : undefined,
 				customClasses: [`${rootClass}-textfield`],
 				customInputClasses: [`${rootClass}-input`],
 			})}

components/textfield/stories/template.js

@@ -28,10 +28,11 @@ export const Template = ({
 	isReadOnly = false,
 	isKeyboardFocused = false,
 	isLoading = false,
+	iconName,
 	pattern,
 	placeholder,
 	name,
-	iconName,
+	id,
 	value,
 	type = "text",
 	autocomplete = true,
@@ -83,6 +84,7 @@ export const Template = ({
 					: { isFocused: false };
 				updateArgs(focusClass);
 			}}
+			id=${ifDefined(id)}
 		>
 			${when(iconName, () => Icon({
 				...globals,
@@ -95,34 +97,39 @@ export const Template = ({
 					...customIconClasses,
 				],
 			}))}
-			${when(multiline, () => html`<textarea
-				placeholder=${ifDefined(placeholder)}
-				name=${ifDefined(name)}
-				.value=${ifDefined(value)}
-				autocomplete=${autocomplete ? undefined : "off"}
-				?required=${isRequired}
-				?disabled=${isDisabled}
-				?readonly=${ifDefined(isReadOnly)}
-				pattern=${ifDefined(pattern)}
-				class=${classMap({
-					[`${rootClass}-input`]: true,
-					...customInputClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-				})}
-			/>`, () => html` <input
-						type=${ifDefined(type)}
-						placeholder=${ifDefined(placeholder)}
-						name=${ifDefined(name)}
-						value=${ifDefined(value)}
-						autocomplete=${autocomplete ? undefined : "off"}
-						?required=${isRequired}
-						?disabled=${isDisabled}
-						readonly=${ifDefined(isReadOnly ? "readonly" : undefined)}
-						pattern=${ifDefined(pattern)}
-						class=${classMap({
-							[`${rootClass}-input`]: true,
-							...customInputClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-						})}
-				  />`)}
+			${when(multiline, 
+				() => html`<textarea
+					placeholder=${ifDefined(placeholder)}
+					name=${ifDefined(name)}
+					id=${ifDefined(id ? `${id}-input` : undefined)}
+					.value=${ifDefined(value)}
+					autocomplete=${autocomplete ? undefined : "off"}
+					?required=${isRequired}
+					?disabled=${isDisabled}
+					?readonly=${ifDefined(isReadOnly)}
+					pattern=${ifDefined(pattern)}
+					class=${classMap({
+						[`${rootClass}-input`]: true,
+						...customInputClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+					})}
+				/>`, 
+				() => html`<input
+					type=${ifDefined(type)}
+					placeholder=${ifDefined(placeholder)}
+					name=${ifDefined(name)}
+					id=${ifDefined(id ? `${id}-input` : undefined)}
+					.value=${ifDefined(value)}
+					autocomplete=${autocomplete ? undefined : "off"}
+					?required=${isRequired}
+					?disabled=${isDisabled}
+					?readonly=${ifDefined(isReadOnly)}
+					pattern=${ifDefined(pattern)}
+					class=${classMap({
+						[`${rootClass}-input`]: true,
+						...customInputClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+					})}
+				/>`
+			)}
 			${when(isLoading, () => ProgressCircle({
 				isIndeterminate: true,
 				size: "s",