fix(text-field): remove indicator expansion animation

PiperOrigin-RevId: 512117352

Author: asyncliz

field/lib/_content.scss

@@ -4,14 +4,16 @@
 //
 
 // go/keep-sorted start
+@use 'sass:map';
 @use 'sass:math';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../motion/animation';
+@use '../../tokens';
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
 // Duration of the label animation.
-$_label-duration: 150ms;
+$_label-duration: map.get($_md-sys-motion, 'duration-short3');
 // Duration of the content's visibility animation.
 $_visible-duration: math.round(math.div($_label-duration * 5, 9));
 // Short delay when entering (focusing/populating) so that the label may move
@@ -52,7 +54,8 @@ $_enter-delay: $_label-duration - $_visible-duration;
     display: flex;
     flex: 1;
     opacity: 0;
-    transition: animation.standard(opacity, $_visible-duration);
+    transition: opacity $_visible-duration
+      map.get($_md-sys-motion, 'easing-emphasized');
     // Content elements provided to the field (such as <input>) may use
     // `currentColor` to inherit this property.
     color: var(--_content-color);

field/lib/_filled-field.scss

@@ -7,13 +7,13 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../motion/animation';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../tokens';
 @use './md-comp-filled-field';
 // go/keep-sorted end
 
-$_animation-duration: 150ms;
+$_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
   $reference: md-comp-filled-field.values();
@@ -82,9 +82,9 @@ $_animation-duration: 150ms;
   }
 
   .active-indicator {
+    inset: auto 0 0 0;
     // Prevent click events on the indicator element since it has no width and
     // causes bugs when handled by the foundation for updating transform-origin.
-    inset: auto 0 0 0;
     pointer-events: none;
     position: absolute;
     width: 100%;
@@ -102,23 +102,13 @@ $_animation-duration: 150ms;
     // focused indicator
     &::after {
       opacity: 0;
-      transform: scaleX(0);
-      // The element needs to update the transform-origin style attribute in
-      // response to click events. Psuedo elements cannot have their style
-      // updated, but their transform-origin can be inherited.
-      transform-origin: inherit;
-      // Add two transitions: opacity and a delayed transform. With a non-delayed
-      // transform transition on the focus selector without an opacity transition,
-      // this will result in the indicator scaling on enter and fading on exit.
-      transition: animation.standard(opacity, $_animation-duration),
-        transform 0s ease $_animation-duration;
+      transition: opacity map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
     }
   }
 
   .focused .active-indicator::after {
     opacity: 1;
-    transform: scaleX(1);
-    transition: animation.standard(transform, $_animation-duration);
   }
 
   .field:not(.with-start) .start {

field/lib/_outlined-field.scss

@@ -7,13 +7,13 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
-@use '../../motion/animation';
 @use '../../sass/shape';
 @use '../../sass/theme';
+@use '../../tokens';
 @use './md-comp-outlined-field';
 // go/keep-sorted end
 
-$_animation-duration: 150ms;
+$_md-sys-motion: tokens.md-sys-motion-values();
 
 @mixin theme($tokens) {
   $reference: md-comp-outlined-field.values();
@@ -77,7 +77,8 @@ $_animation-duration: 150ms;
 
     &::after {
       opacity: 0;
-      transition: animation.standard(opacity, $_animation-duration);
+      transition: opacity map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
     }
   }
 
@@ -142,7 +143,8 @@ $_animation-duration: 150ms;
       border-bottom: none;
       bottom: auto;
       transform: scaleX(1);
-      transition: animation.standard(transform, $_animation-duration);
+      transition: transform map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
     }
 
     // Note: no need to do any RTL flipping here. If RTLCSS flips this, it's also
@@ -170,7 +172,8 @@ $_animation-duration: 150ms;
 
   .outline-panel-active {
     opacity: 0;
-    transition: animation.standard(opacity, $_animation-duration);
+    transition: opacity map.get($_md-sys-motion, 'duration-short3')
+      map.get($_md-sys-motion, 'easing-emphasized');
   }
 
   .focused .outline-panel-active {

field/lib/filled-field.ts

@@ -4,62 +4,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, PropertyValues} from 'lit';
-import {state} from 'lit/decorators.js';
-import {styleMap} from 'lit/directives/style-map.js';
+import {html} from 'lit';
 
 import {Field} from './field.js';
 
 /**
  * A filled field component.
  */
 export class FilledField extends Field {
-  @state() private strokeTransformOrigin = '';
-
-  constructor() {
-    super();
-    this.addEventListener('click', event => {
-      if (!this.disabled) {
-        this.updateStrokeTransformOrigin(event);
-      }
-    });
-  }
-
   protected override renderBackground() {
     return html`
       <div class="state-layer"></div>
     `;
   }
 
   protected override renderIndicator() {
-    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};
-    return html`
-      <div class="active-indicator" style="${styleMap(strokeStyle)}"></div>
-    `;
-  }
-
-  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);
-  }
-
-  private updateStrokeTransformOrigin(event?: MouseEvent|TouchEvent) {
-    let transformOrigin = '';
-    if (event) {
-      // Can't use instanceof TouchEvent since Firefox does not provide the
-      // constructor globally.
-      const isTouchEvent = 'touches' in event;
-      const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;
-      const rootRect = this.getBoundingClientRect();
-      transformOrigin = `${eventX - rootRect.x}px`;
-    }
-
-    this.strokeTransformOrigin = transformOrigin;
+    return html`<div class="active-indicator"></div>`;
   }
 }