fix(textfield): show overflowing content like popups and focus rings

Fixes #4071

Note: Right now textareas cannot display overflowing content due to `resize` requiring hidden overflow.

BREAKING CHANGE: The field component must add the `resizable` attribute rather than using CSS. CSS `resize` can still customize the direction (defaults to both).

PiperOrigin-RevId: 561981406

field/internal/_shared.scss

@@ -15,6 +15,7 @@
 @mixin styles() {
   :host {
     display: inline-flex;
+    resize: both;
   }
 
   .field {
@@ -29,7 +30,7 @@
 
   // A separate wrapper is needed around the container for the outline, whose
   // floating label needs overflow: visible. The container itself needs
-  // overflow: hidden for resizability.
+  // overflow: hidden when resizable.
   .container-overflow {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
@@ -48,16 +49,23 @@
     max-height: 100%;
     min-height: 100%;
     min-width: min-content;
-    overflow: hidden;
     position: relative;
   }
 
   .field,
-  .container-overflow,
-  .field:not(.disabled) .container {
-    // Inherit `resize` set on host, but only inherit it for the actual
-    // container if the field is not disabled.
+  .container-overflow {
+    resize: inherit;
+  }
+
+  .resizable:not(.disabled) .container {
+    // `resize` is inherited from the host, but only applies to the container
+    // when resizable.
     resize: inherit;
+    // Overflow is visible when not resizable to allow overflowing content such
+    // as popups or icon focus rings.
+    // Resizable fields cannot display overflowing content due to `resize` not
+    // allowing it.
+    overflow: hidden;
   }
 
   .disabled {

field/internal/field.ts

@@ -21,6 +21,7 @@ export class Field extends LitElement implements SurfacePositionTarget {
   @property() label = '';
   @property({type: Boolean}) populated = false;
   @property({type: Boolean}) required = false;
+  @property({type: Boolean}) resizable = false;
   @property({attribute: 'supporting-text'}) supportingText = '';
   @property({attribute: 'error-text'}) errorText = '';
   @property({type: Number}) count = -1;
@@ -109,6 +110,7 @@ export class Field extends LitElement implements SurfacePositionTarget {
       'with-start': this.hasStart,
       'with-end': this.hasEnd,
       'populated': this.populated,
+      'resizable': this.resizable,
       'required': this.required,
       'no-label': !this.label,
     };

textfield/demo/stories.ts

@@ -5,6 +5,7 @@
  */
 
 import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 import '@material/web/textfield/filled-text-field.js';
 import '@material/web/textfield/outlined-text-field.js';
 
@@ -99,7 +100,8 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
 };
 
 const LEADING_ICON = html`<md-icon slot="leadingicon">search</md-icon>`;
-const TRAILING_ICON = html`<md-icon slot="trailingicon">event</md-icon>`;
+const TRAILING_ICON =
+    html`<md-icon-button slot="trailingicon"><md-icon>event</md-icon></md-icon-button>`;
 function reportValidity(event: Event) {
   (event.target as MdFilledTextField).reportValidity();
 }

textfield/internal/text-field.ts

@@ -214,6 +214,25 @@ export abstract class TextField extends LitElement {
    */
   @property() step = '';
 
+  /**
+   * The `<input>` type to use, defaults to "text". The type greatly changes how
+   * the text field behaves.
+   *
+   * Text fields support a limited number of `<input>` types:
+   *
+   * - text
+   * - textarea
+   * - email
+   * - number
+   * - password
+   * - search
+   * - tel
+   * - url
+   *
+   * See
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+   * for more details on each input type.
+   */
   @property({reflect: true})
   type: TextFieldType|UnsupportedTextFieldType = 'text';
 
@@ -561,6 +580,7 @@ export abstract class TextField extends LitElement {
       max=${this.maxLength}
       ?populated=${!!this.value}
       ?required=${this.required}
+      ?resizable=${this.type === 'textarea'}
       supporting-text=${this.supportingText}
     >
       ${this.renderLeadingIcon()}