fix extra spacing – older browsers (#493)

* fix extra spacing – older browsers

* fix css colors on 'required' asterisk

* update changelog

CHANGELOG.md

@@ -24,13 +24,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   `lit-element` or `lit-html` APIs (e.g. `LitElement`, `customElement`,
   `classMap`). Users should import directly from the `lit-element` and
   `lit-html` modules instead.
-- `mwc-input` and `mwc-textarea` now update `value` on `input` rather than on
-  `change`.
+- **BREAKING** `mwc-textfield` and `mwc-textarea` will now update their `.value`
+  on the native `input`'s `input` event instead of `change`.
 
 ### Fixed
 
 - `<mwc-drawer>` can now be used with Rollup (via version bump to pick up
   [WICG/inert#135](https://github.com/WICG/inert/pull/135)).
+- `<mwc-textfield>` and `<mwc-textarea>` will now have the same height between
+  their filled and outlined variants with helper text on older browsers.
+- `mwc-textfield[required]` and `mwc-textarea[required]` will now have their
+  required asterisk colored correctly when customized.
 - `<mwc-textfield>` and `<mwc-textarea>` can now have basic usability in IE.
 
 

packages/notched-outline/src/mwc-notched-outline.scss

@@ -53,11 +53,6 @@ limitations under the License.
 
 .mdc-notched-outline--upgraded ::slotted(.mdc-floating-label--float-above) {
   max-width: calc(100% / .75);
-
-  @include mdc-theme-prop(color, (
-    varname: --mdc-theme-primary,
-    fallback: $mdc-theme-primary
-  ));
 }
 
 .mdc-notched-outline__leading {

packages/textfield/src/mwc-textfield.scss

@@ -38,13 +38,14 @@ limitations under the License.
 }
 
 .mdc-text-field {
+  display: flex;
+
   width: 100%;
 
   @include mdc-theme-prop(border-radius, (
     varname: --mdc-text-field-filled-border-radius,
     fallback: mdc-shape-mask-radius(mdc-shape-prop-value(small), 1 1 0 0)
   ));
-
 }
 
 mwc-notched-outline {
@@ -79,7 +80,14 @@ mwc-notched-outline {
       --mdc-notched-outline-border-color: var(--mdc-text-field-focused-label-color, var(--mdc-theme-primary, #{$mdc-text-field-focused-label-color}));
     }
 
-    .mdc-floating-label, .mdc-floating-label::after {
+    .mdc-floating-label {
+      @include mdc-theme-prop(color, (
+        varname: --mdc-theme-primary,
+        fallback: $mdc-theme-primary
+      ));
+    }
+
+    @include mdc-required-text-field-label-asterisk_ {
       @include mdc-theme-prop(color, (
         varname: --mdc-theme-primary,
         fallback: $mdc-theme-primary