From 606697de36262f1e84445da6d9eb49edeeb31e31 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 10 Aug 2022 13:36:34 -0700 Subject: [PATCH] chore(text-field): update to use lit static PiperOrigin-RevId: 466774176 --- textfield/filled-text-field.ts | 23 ++------------------- textfield/lib/filled-text-field_test.ts | 16 ++------------- textfield/lib/outlined-text-field_test.ts | 16 ++------------- textfield/lib/text-field.ts | 25 ++++++++++++++++------- textfield/lib/text-field_test.ts | 16 ++------------- textfield/outlined-text-field.ts | 23 ++------------------- 6 files changed, 28 insertions(+), 91 deletions(-) diff --git a/textfield/filled-text-field.ts b/textfield/filled-text-field.ts index d6491f673a..69962c7aa2 100644 --- 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` - - ${this.renderLeadingIcon()} - ${this.renderFieldContent()} - ${this.renderTrailingIcon()} - ${this.renderSupportingText()} - - `; - } + 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 index ca05ad813d..f9ca0aed41 100644 --- 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` - - ${this.renderFieldContent()} - - `; - } + 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 index 9cbb53b9e3..9f02c79d3b 100644 --- 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` - - ${this.renderFieldContent()} - - `; - } + 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 index 36f1c55ead..6071624559 100644 --- 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()} + `; } /** diff --git a/textfield/lib/text-field_test.ts b/textfield/lib/text-field_test.ts index a6a2ac4802..981c4ccf4f 100644 --- 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` - - ${this.renderFieldContent()} - - `; - } + protected override readonly fieldTag = literal`md-filled-field`; } describe('TextField', () => { diff --git a/textfield/outlined-text-field.ts b/textfield/outlined-text-field.ts index 04acd49acb..1fd8eb87ad 100644 --- 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` - - ${this.renderLeadingIcon()} - ${this.renderFieldContent()} - ${this.renderTrailingIcon()} - ${this.renderSupportingText()} - - `; - } + protected override readonly fieldTag = literal`md-outlined-field`; }