chore(text-field): update to use lit static

PiperOrigin-RevId: 466774176
material-components · Aug 10, 2022 · 606697d · 606697d
1 parent 7792ae1
commit 606697d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 91 deletions.
diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts
@@ -6,8 +6,8 @@
 
 import '@material/web/field/filled-field';
 
-import {html, TemplateResult} from 'lit';
 import {customElement} from 'lit/decorators';
+import {literal} from 'lit/static-html';
 
 // TODO(b/236285090): update with HCM best practices
 import {styles as filledForcedColorsStyles} from './lib/filled-forced-colors-styles.css';
@@ -31,24 +31,5 @@ export class MdFilledTextField extends FilledTextField {
   static override styles =
       [sharedStyles, filledStyles, filledForcedColorsStyles];
 
-  /** @soyTemplate */
-  protected override renderField(): TemplateResult {
-    return html`
-      <md-filled-field
-        class="md3-text-field__field"
-        ?disabled=${this.disabled}
-        ?error=${this.error}
-        ?hasEnd=${this.hasTrailingIcon}
-        ?hasStart=${this.hasLeadingIcon}
-        .label=${this.label}
-        ?populated=${!!this.value}
-        ?required=${this.required}
-      >
-        ${this.renderLeadingIcon()}
-        ${this.renderFieldContent()}
-        ${this.renderTrailingIcon()}
-        ${this.renderSupportingText()}
-      </md-filled-field>
-    `;
-  }
+  protected override readonly fieldTag = literal`md-filled-field`;
 }
diff --git a/textfield/lib/filled-text-field_test.ts b/textfield/lib/filled-text-field_test.ts
@@ -10,6 +10,7 @@ import '@material/web/field/filled-field';
 import {Environment} from '@material/web/testing/environment';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators';
+import {literal} from 'lit/static-html';
 
 import {TextFieldHarness} from '../harness';
 
@@ -23,20 +24,7 @@ declare global {
 
 @customElement('md-test-filled-text-field')
 class TestTextField extends FilledTextField {
-  protected override renderField() {
-    return html`
-      <md-filled-field
-        class="md3-text-field__field"
-        ?disabled=${this.disabled}
-        .error=${this.error}
-        .label=${this.label}
-        .populated=${Boolean(this.value)}
-        .required=${this.required}
-      >
-        ${this.renderFieldContent()}
-      </md-filled-field>
-    `;
-  }
+  protected override readonly fieldTag = literal`md-filled-field`;
 
   override getRenderClasses() {
     return super.getRenderClasses();

diff --git a/textfield/lib/outlined-text-field_test.ts b/textfield/lib/outlined-text-field_test.ts
@@ -10,6 +10,7 @@ import '@material/web/field/outlined-field';
 import {Environment} from '@material/web/testing/environment';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators';
+import {literal} from 'lit/static-html';
 
 import {TextFieldHarness} from '../harness';
 
@@ -23,20 +24,7 @@ declare global {
 
 @customElement('md-test-outlined-text-field')
 class TestTextField extends OutlinedTextField {
-  protected override renderField() {
-    return html`
-       <md-outlined-field
-         class="md3-text-field__field"
-         ?disabled=${this.disabled}
-         .error=${this.error}
-         .label=${this.label}
-         .populated=${Boolean(this.value)}
-         .required=${this.required}
-       >
-         ${this.renderFieldContent()}
-       </md-outlined-field>
-     `;
-  }
+  protected override readonly fieldTag = literal`md-outlined-field`;
 
   override getRenderClasses() {
     return super.getRenderClasses();

diff --git a/textfield/lib/text-field.ts b/textfield/lib/text-field.ts
@@ -15,6 +15,7 @@ import {property, query, queryAssignedElements, state} from 'lit/decorators';
 import {ClassInfo, classMap} from 'lit/directives/class-map';
 import {ifDefined} from 'lit/directives/if-defined';
 import {live} from 'lit/directives/live';
+import {html as staticHtml, literal} from 'lit/static-html';
 
 /**
  * Input types that are compatible with the text field.
@@ -142,6 +143,8 @@ export class TextField extends LitElement {
   @state() protected dirty = false;
   @query('.md3-text-field__input')
   protected readonly input?: HTMLInputElement|null;
+  // TODO(b/241841846): make abstract
+  protected readonly fieldTag = literal`div`;
 
   @queryAssignedElements({slot: 'leadingicon'})
   private readonly leadingIcons!: Element[];
@@ -193,17 +196,25 @@ export class TextField extends LitElement {
 
   /** @soyTemplate */
   protected renderField(): TemplateResult {
-    // TODO(b/237286701): replace with lit static
-    return html``;
-  }
-
-  /** @soyTemplate */
-  protected renderFieldContent(): TemplateResult {
     const prefix = this.renderPrefix();
     const suffix = this.renderSuffix();
     const input = this.renderInput();
 
-    return html`${prefix}${input}${suffix}`;
+    return staticHtml`<${this.fieldTag}
+      class="md3-text-field__field"
+      ?disabled=${this.disabled}
+      ?error=${this.error}
+      ?hasEnd=${this.hasTrailingIcon}
+      ?hasStart=${this.hasLeadingIcon}
+      .label=${this.label}
+      ?populated=${!!this.value}
+      ?required=${this.required}
+    >
+      ${this.renderLeadingIcon()}
+      ${prefix}${input}${suffix}
+      ${this.renderTrailingIcon()}
+      ${this.renderSupportingText()}
+    </${this.fieldTag}>`;
   }
 
   /**

diff --git a/textfield/lib/text-field_test.ts b/textfield/lib/text-field_test.ts
@@ -10,6 +10,7 @@ import '@material/web/field/filled-field';
 import {Environment} from '@material/web/testing/environment';
 import {html} from 'lit';
 import {customElement} from 'lit/decorators';
+import {literal} from 'lit/static-html';
 
 import {TextFieldHarness} from '../harness';
 
@@ -27,20 +28,7 @@ class TestTextField extends TextField {
     return this.dirty;
   }
 
-  protected override renderField() {
-    return html`
-      <md-filled-field
-        class="md3-text-field__field"
-        ?disabled=${this.disabled}
-        .error=${this.error}
-        .label=${this.label}
-        .populated=${Boolean(this.value)}
-        .required=${this.required}
-      >
-        ${this.renderFieldContent()}
-      </md-filled-field>
-    `;
-  }
+  protected override readonly fieldTag = literal`md-filled-field`;
 }
 
 describe('TextField', () => {

diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts
@@ -6,8 +6,8 @@
 
 import '@material/web/field/outlined-field';
 
-import {html, TemplateResult} from 'lit';
 import {customElement} from 'lit/decorators';
+import {literal} from 'lit/static-html';
 
 // TODO(b/236285090): update with HCM best practices
 import {styles as outlinedForcedColorsStyles} from './lib/outlined-forced-colors-styles.css';
@@ -31,24 +31,5 @@ export class MdOutlinedTextField extends OutlinedTextField {
   static override styles =
       [sharedStyles, outlinedStyles, outlinedForcedColorsStyles];
 
-  /** @soyTemplate */
-  protected override renderField(): TemplateResult {
-    return html`
-      <md-outlined-field
-        class="md3-text-field__field"
-        ?disabled=${this.disabled}
-        ?error=${this.error}
-        ?hasEnd=${this.hasTrailingIcon}
-        ?hasStart=${this.hasLeadingIcon}
-        .label=${this.label}
-        ?populated=${!!this.value}
-        ?required=${this.required}
-      >
-        ${this.renderLeadingIcon()}
-        ${this.renderFieldContent()}
-        ${this.renderTrailingIcon()}
-        ${this.renderSupportingText()}
-      </md-outlined-field>
-    `;
-  }
+  protected override readonly fieldTag = literal`md-outlined-field`;
 }