fix(text-field): Changes to text area label positioning to cover text…

… content.

Other changes:
  - RTL position fix for text area label.
  - Made RTL mixin public to reuse in text area and top app bar.
  - User can now scroll the text area content when hovering on label.

packages/mdc-rtl/README.md

@@ -40,6 +40,7 @@ Both `mdc-rtl-reflexive-property` and `mdc-rtl-reflexive-box` work with one base
 | `mdc-rtl-reflexive-box($base-property, $default-direction, $value, $root-selector)` | Applies the value to the `#{$base-property}-#{$default-direction}` property  in a LTR context, and flips the direction in an RTL context. **This mixin zeros out the original value in an RTL context.**  |
 | `mdc-rtl-reflexive-property($base-property, $left-value, $right-value, $root-selector)` | Emits rules that assign `#{$base-property}`-left to `#{left-value}` and `#{base-property}`-right to `#{right-value}` in a LTR context, and vice versa in a RTL context. **Basically it flips values between a LTR and RTL context.** |
 | `mdc-rtl-reflexive-position($position-property, $value, $root-selector)` | Applies the value to the specified position in a LTR context, and flips the direction in an RTL context. `$position-property` is a horizontal position, either "left" or "right". |
+| `mdc-rtl-reflexive($left-property, $left-value, $right-property, $right-value, $root-selector)` | Applies the pair of property values to the specified position in a LTR context, and flips the direction in an RTL context. |
 
 **A note about [dir="rtl"]**: `mdc-rtl($root-selector)` checks for `[dir="rtl"]` on the ancestor element. This works in most cases, it will sometimes lead to false negatives for more complex layouts, e.g.
 

packages/mdc-rtl/_mixins.scss

@@ -168,7 +168,7 @@
   $prop-left: #{$base-property}-left;
   $prop-right: #{$base-property}-right;
 
-  @include mdc-rtl-reflexive_($prop-left, $left-value, $prop-right, $right-value, $root-selector);
+  @include mdc-rtl-reflexive($prop-left, $left-value, $prop-right, $right-value, $root-selector);
 }
 
 // Takes an argument specifying a horizontal position property (either "left" or "right") as well
@@ -209,10 +209,34 @@
     $left-value: initial;
   }
 
-  @include mdc-rtl-reflexive_(left, $left-value, right, $right-value, $root-selector);
+  @include mdc-rtl-reflexive(left, $left-value, right, $right-value, $root-selector);
 }
 
-@mixin mdc-rtl-reflexive_(
+// Takes pair of properties with values as arguments and flips it in RTL context.
+// For example:
+//
+// ```scss
+// .mdc-foo {
+//   @include mdc-rtl-reflexive(left, 2px, right, 5px);
+//   position: absolute;
+//  }
+//  ```
+//  is equivalent to:
+//
+//  ```scss
+//  .mdc-foo {
+//    position: absolute;
+//    left: 2px;
+//    right: 5px;
+//
+//    @include mdc-rtl {
+//      right: 2px;
+//      left: 5px;
+//    }
+//  }
+//  ```
+// An optional third $root-selector argument may also be given, which is passed to `mdc-rtl`.
+@mixin mdc-rtl-reflexive(
   $left-property,
   $left-value,
   $right-property,

packages/mdc-textfield/_mixins.scss

@@ -494,15 +494,15 @@
   }
 
   .mdc-floating-label {
-    @include mdc-rtl-reflexive-position(left, 1px);
     @include mdc-floating-label-fill-color($mdc-textarea-background);
-
+    @include mdc-rtl-reflexive(left, 1px, right, 0);
     top: $label-offset-y;
     bottom: auto;
     margin-top: 2px;
-    margin-left: 8px;
-    padding: 8px;
+    @include mdc-rtl-reflexive-property(margin, 8px, 0);
+    padding: 12px 8px 8px 8px;
     line-height: 1.15;
+    pointer-events: none;
   }
 }
 

packages/mdc-top-app-bar/_mixins.scss

@@ -46,7 +46,7 @@
 }
 
 @mixin mdc-top-app-bar-short-border-radius($border-radius: $mdc-top-app-bar-short-collapsed-border-radius) {
-  @include mdc-rtl-reflexive_(border-bottom-left-radius, 0, border-bottom-right-radius, $border-radius);
+  @include mdc-rtl-reflexive(border-bottom-left-radius, 0, border-bottom-right-radius, $border-radius);
 }
 
 @mixin mdc-top-app-bar-mobile-breakpoint_($mobile-breakpoint: $mdc-top-app-bar-mobile-breakpoint) {