fix(field)!: remove resizable, use css resize: both

PiperOrigin-RevId: 547567087
material-components · Jul 12, 2023 · 6734344 · 6734344
1 parent 0ab5fd5
commit 6734344
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/field/demo/stories.ts b/field/demo/stories.ts
@@ -10,6 +10,7 @@ import '@material/web/field/outlined-field.js';
 
 import {MaterialStoryInit} from './material-collection.js';
 import {css, html, nothing} from 'lit';
+import {styleMap} from 'lit/directives/style-map.js';
 
 /** Knob types for field stories. */
 export interface StoryKnobs {
@@ -62,16 +63,17 @@ const filled: MaterialStoryInit<StoryKnobs> = {
         html`<textarea rows="1" ?disabled=${disabled}></textarea>` :
         html`<input ?disabled=${disabled}>`;
 
+    const styles = {resize: resizable ? 'both' : null};
     return html`
       <md-filled-field
+        style=${styleMap(styles)}
         .label=${label}
         ?disabled=${disabled}
         .error=${error}
         .focused=${focused}
         .hasStart=${hasStart}
         .hasEnd=${hasEnd}
         .populated=${populated}
-        .resizable=${resizable}
         .required=${required}
         supporting-text=${supportingText}
         error-text=${errorText}
@@ -110,16 +112,17 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
             disabled} aria-describedby="description"></textarea>` :
         html`<input ?disabled=${disabled} aria-describedby="description">`;
 
+    const styles = {resize: resizable ? 'both' : null};
     return html`
       <md-outlined-field
+        style=${styleMap(styles)}
         .label=${label}
         ?disabled=${disabled}
         .error=${error}
         .focused=${focused}
         .hasStart=${hasStart}
         .hasEnd=${hasEnd}
         .populated=${populated}
-        .resizable=${resizable}
         .required=${required}
         supporting-text=${supportingText}
         error-text=${errorText}

diff --git a/field/lib/_shared.scss b/field/lib/_shared.scss
@@ -49,8 +49,10 @@
     position: relative;
   }
 
-  .resizable .container {
-    resize: both;
+  .field,
+  .container-overflow,
+  .container {
+    resize: inherit;
   }
 
   .disabled {

diff --git a/field/lib/field.ts b/field/lib/field.ts
@@ -20,7 +20,6 @@ export class Field extends LitElement implements SurfacePositionTarget {
   @property({type: Boolean}) focused = false;
   @property() label = '';
   @property({type: Boolean}) populated = false;
-  @property({type: Boolean}) resizable = false;
   @property({type: Boolean}) required = false;
   @property({attribute: 'supporting-text'}) supportingText = '';
   @property({attribute: 'error-text'}) errorText = '';
@@ -104,7 +103,6 @@ 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,
     };