refactor(field): simplify rendering

PiperOrigin-RevId: 511557733

Author: asyncliz

field/lib/field.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, LitElement, PropertyValues} from 'lit';
+import {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';
 import {property, queryAsync, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
@@ -57,6 +57,9 @@ export class Field extends LitElement {
   }
 
   protected override render() {
+    const floatingLabel = this.renderLabel(/*isFloating*/ true);
+    const restingLabel = this.renderLabel(/*isFloating*/ false);
+    const outline = this.renderOutline?.(floatingLabel);
     const classes = {
       'disabled': this.disabled,
       'error': this.error && !this.disabled,
@@ -71,7 +74,22 @@ export class Field extends LitElement {
     return html`
       <span class="field ${classMap(classes)}">
         <span class="container">
-          ${this.renderContainerContents()}
+          ${this.renderBackground?.()}
+          ${this.renderIndicator?.()}
+          ${outline}
+          <span class="start">
+            <slot name="start"></slot>
+          </span>
+          <span class="middle">
+            ${restingLabel}
+            ${outline ? nothing : floatingLabel}
+            <span class="content">
+              <slot></slot>
+            </span>
+          </span>
+          <span class="end">
+            <slot name="end"></slot>
+          </span>
         </span>
 
         <span class="supporting-text">
@@ -86,31 +104,9 @@ export class Field extends LitElement {
     `;
   }
 
-  protected renderContainerContents() {
-    return html`
-      <span class="start">
-        <slot name="start"></slot>
-      </span>
-      <span class="middle">${this.renderMiddleContents()}</span>
-      <span class="end">
-        <slot name="end"></slot>
-      </span>
-    `;
-  }
-
-  protected renderMiddleContents() {
-    return html`
-      <span class="content"><slot></slot></span>
-    `;
-  }
-
-  protected renderFloatingLabel() {
-    return this.renderLabel(/*isFloating*/ true);
-  }
-
-  protected renderRestingLabel() {
-    return this.renderLabel(/*isFloating*/ false);
-  }
+  protected renderBackground?(): TemplateResult;
+  protected renderIndicator?(): TemplateResult;
+  protected renderOutline?(floatingLabel: TemplateResult): TemplateResult;
 
   private renderLabel(isFloating: boolean) {
     let visible: boolean;

field/lib/field_test.ts

@@ -6,7 +6,7 @@
 
 // import 'jasmine'; (google3-only)
 
-import {html} from 'lit';
+import {html, TemplateResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {Environment} from '../../testing/environment.js';
@@ -27,12 +27,8 @@ class TestField extends Field {
   }
 
   // Ensure floating/resting labels are both rendered
-  protected override renderMiddleContents() {
-    return html`
-      ${this.renderFloatingLabel()}
-      ${this.renderRestingLabel()}
-      ${super.renderMiddleContents()}
-    `;
+  protected override renderOutline(floatingLabel: TemplateResult) {
+    return floatingLabel;
   }
 }
 

field/lib/filled-field.ts

@@ -18,45 +18,36 @@ export class FilledField extends Field {
 
   constructor() {
     super();
-    this.addEventListener('click', this.handleClick);
+    this.addEventListener('click', event => {
+      if (!this.disabled) {
+        this.updateStrokeTransformOrigin(event);
+      }
+    });
   }
 
-  protected override update(props: PropertyValues<FilledField>) {
-    // Upon losing focus, the stroke resets to expanding from the center, such
-    // as when re-focusing with a keyboard.
-    const unfocusing = props.has('focused') && !this.focused;
-    if (unfocusing) {
-      this.updateStrokeTransformOrigin();
-    }
-
-    super.update(props);
-  }
-
-  protected override renderContainerContents() {
-    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};
+  protected override renderBackground() {
     return html`
       <span class="state-layer"></span>
-      ${super.renderContainerContents()}
-      <span class="active-indicator"
-        style="${styleMap(strokeStyle)}"></span>
     `;
   }
 
-  protected override renderMiddleContents() {
+  protected override renderIndicator() {
+    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};
     return html`
-      ${this.renderFloatingLabel()}
-      ${this.renderRestingLabel()}
-      ${super.renderMiddleContents()}
+      <span class="active-indicator" style="${styleMap(strokeStyle)}"></span>
     `;
   }
 
-  private readonly handleClick = (event: MouseEvent|TouchEvent) => {
-    if (this.disabled) {
-      return;
+  protected override update(props: PropertyValues<FilledField>) {
+    // Upon losing focus, the stroke resets to expanding from the center, such
+    // as when re-focusing with a keyboard.
+    const unfocusing = props.has('focused') && !this.focused;
+    if (unfocusing) {
+      this.updateStrokeTransformOrigin();
     }
 
-    this.updateStrokeTransformOrigin(event);
-  };
+    super.update(props);
+  }
 
   private updateStrokeTransformOrigin(event?: MouseEvent|TouchEvent) {
     let transformOrigin = '';

field/lib/outlined-field.ts

@@ -4,33 +4,25 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html} from 'lit';
+import {html, TemplateResult} from 'lit';
 
 import {Field} from './field.js';
 
 /**
  * An outlined field component.
  */
 export class OutlinedField extends Field {
-  protected override renderContainerContents() {
+  protected override renderOutline(floatingLabel: TemplateResult) {
     return html`
       <span class="outline">
         <span class="outline-start"></span>
         <span class="outline-notch">
           <span class="outline-panel-inactive"></span>
           <span class="outline-panel-active"></span>
-          ${this.renderFloatingLabel()}
+          ${floatingLabel}
         </span>
         <span class="outline-end"></span>
       </span>
-      ${super.renderContainerContents()}
-    `;
-  }
-
-  protected override renderMiddleContents() {
-    return html`
-      ${this.renderRestingLabel()}
-      ${super.renderMiddleContents()}
     `;
   }
 }