chore(text-field): remove wrapper slot spans

PiperOrigin-RevId: 466112636
material-components · Aug 8, 2022 · fe86936 · fe86936
1 parent f7e1bbb
commit fe86936
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts
@@ -33,7 +33,6 @@ export class MdFilledTextField extends FilledTextField {
 
   /** @soyTemplate */
   protected override renderField(): TemplateResult {
-    // TODO(b/239690585): move start/end slots to renderFieldContent
     return html`
       <md-filled-field
         class="md3-text-field__field"
@@ -45,13 +44,9 @@ export class MdFilledTextField extends FilledTextField {
         ?populated=${!!this.value}
         ?required=${this.required}
       >
-        <span slot="start">
-          ${this.renderLeadingIcon()}
-        </span>
+        ${this.renderLeadingIcon()}
         ${this.renderFieldContent()}
-        <span slot="end">
-          ${this.renderTrailingIcon()}
-        </span>
+        ${this.renderTrailingIcon()}
       </md-filled-field>
     `;
   }

diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
@@ -175,19 +175,27 @@ export class TextField extends LitElement {
     return html`${prefix}${input}${suffix}`;
   }
 
-  /** @soyTemplate */
+  /**
+   * @soyTemplate
+   * @slotName start
+   */
   protected renderLeadingIcon(): TemplateResult {
     return html`
-      <span class="md3-text-field__icon md3-text-field__icon--leading">
+      <span class="md3-text-field__icon md3-text-field__icon--leading" 
+          slot="start">
         <slot name="leadingicon" @slotchange=${this.handleIconChange}></slot>
       </span>
     `;
   }
 
-  /** @soyTemplate */
+  /**
+   * @soyTemplate
+   * @slotName end
+   */
   protected renderTrailingIcon(): TemplateResult {
     return html`
-      <span class="md3-text-field__icon md3-text-field__icon--trailing">
+      <span class="md3-text-field__icon md3-text-field__icon--trailing" 
+          slot="end">
         <slot name="trailingicon" @slotchange=${this.handleIconChange}></slot>
       </span>
     `;

diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts
@@ -33,7 +33,6 @@ export class MdOutlinedTextField extends OutlinedTextField {
 
   /** @soyTemplate */
   protected override renderField(): TemplateResult {
-    // TODO(b/239690585): move start/end slots to renderFieldContent
     return html`
       <md-outlined-field
         class="md3-text-field__field"
@@ -45,13 +44,9 @@ export class MdOutlinedTextField extends OutlinedTextField {
         ?populated=${!!this.value}
         ?required=${this.required}
       >
-        <span slot="start">
-          ${this.renderLeadingIcon()}
-        </span>
+        ${this.renderLeadingIcon()}
         ${this.renderFieldContent()}
-        <span slot="end">
-          ${this.renderTrailingIcon()}
-        </span>
+        ${this.renderTrailingIcon()}
       </md-outlined-field>
     `;
   }