fix(field): use margin for textarea content

PiperOrigin-RevId: 548159696
material-components · Jul 14, 2023 · 7fdd0c4 · 7fdd0c4
1 parent 6116ed8
commit 7fdd0c4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/field/lib/_content.scss b/field/lib/_content.scss
@@ -95,9 +95,18 @@ $_enter-delay: $_label-duration - $_visible-duration;
     // below.
     color: currentColor;
     font: var(--_content-type);
+    width: 100%;
+  }
+
+  .content ::slotted(:not(textarea)) {
     padding-top: var(--_top-space);
     padding-bottom: var(--_bottom-space);
-    width: 100%;
+  }
+
+  .content ::slotted(textarea) {
+    // Use margin for textareas since they will scroll over the label if not.
+    margin-top: var(--_top-space);
+    margin-bottom: var(--_bottom-space);
   }
 
   :hover .content {

diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss
@@ -141,13 +141,21 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     padding-inline-end: var(--_trailing-space);
   }
 
-  .field:not(.no-label) .content ::slotted(*) {
+  .field:not(.no-label) .content ::slotted(:not(textarea)) {
     padding-bottom: var(--_with-label-bottom-space);
     padding-top: calc(
       var(--_with-label-top-space) + var(--_label-text-populated-line-height)
     );
   }
 
+  .field:not(.no-label) .content ::slotted(textarea) {
+    // Use margin for textareas since they will scroll over the label if not.
+    margin-bottom: var(--_with-label-bottom-space);
+    margin-top: calc(
+      var(--_with-label-top-space) + var(--_label-text-populated-line-height)
+    );
+  }
+
   :hover .active-indicator::before {
     border-bottom-color: var(--_hover-active-indicator-color);
     border-bottom-width: var(--_hover-active-indicator-height);