fix(textfield): remove extra padding on nested label and help (#2519)

* fix(textfield): nested label extra inline start padding

There were styles that were adding extra inline start padding to the
label and help text, when they are nested within Textfield (as shown on
the docs page for Textfield). This was particularly noticeable on the
quiet variation.

It looks like this previously was adding padding that matched the amount
of corner rounding, so text would start where the corner started its
curve.

On the design, there is no additional left padding. This update removes
that padding to adhere to the design.

* docs(textfield): use correct icon set for valid icon in storybook

Define the icon set used for the valid and invalid icons in Textfield.

This necessary story update was related to recent fixes to icon that
addressed the fact that icons with the same name exist in both
icon sets. This one wasn't caught in VRTs because Textfield does not
have a kitchen sink style story yet to represent all of its states.

Author: jawinn

components/textfield/index.css

@@ -616,12 +616,6 @@ governing permissions and limitations under the License.
 		);
 		grid-row: 1;
 		grid-column: 1 / span 1;
-		padding-inline-start: calc(
-			var(
-					--mod-textfield-corner-radius,
-					var(--spectrum-textfield-corner-radius)
-				) / 2
-		);
 	}
 
 	.spectrum-Textfield--quiet & {
@@ -645,12 +639,6 @@ governing permissions and limitations under the License.
 		);
 		grid-row: 3;
 		grid-column: 1 / span 2;
-		padding-inline-start: calc(
-			var(
-					--mod-textfield-corner-radius,
-					var(--spectrum-textfield-corner-radius)
-				) / 2
-		);
 	}
 }
 

components/textfield/stories/template.js

@@ -33,6 +33,7 @@ export const Template = ({
 	labelPosition = "top",
 	labelText,
 	iconName,
+	iconSet,
 	pattern,
 	placeholder,
 	name,
@@ -54,8 +55,13 @@ export const Template = ({
 		console.warn(e);
 	}
 
-	if (isInvalid) iconName = "Alert";
-	else if (isValid) iconName = "Checkmark";
+	if (isInvalid) {
+		iconName = "Alert";
+		iconSet = "workflow";
+	} else if (isValid) {
+		iconName = "Checkmark";
+		iconSet = "ui";
+	}
 
 	return html`
 		<div
@@ -101,6 +107,7 @@ export const Template = ({
 				...globals,
 				size,
 				iconName,
+				setName: iconSet,
 				customClasses: [
 					!!(isInvalid || isValid)
 						? `${rootClass}-validationIcon`