fix(text-field): Adjust the baseline of text field's helper text to match spec

demos/text-field.html

@@ -71,7 +71,7 @@
 
       <section class="example">
         <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
-        <section id="demo-text-field-wrapper">
+        <section id="demo-text-field-wrapper" class="demo-text-field-wrapper">
           <div class="mdc-text-field">
             <input type="text" class="mdc-text-field__input" id="full-func-text-field"
                    aria-controls="my-text-field-helper-text"
@@ -80,7 +80,7 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
             <div class="mdc-line-ripple"></div>
           </div>
           <p id="my-text-field-helper-text" class="mdc-text-field-helper-text"
-             aria-hidden="true" style="display:none;">
+             aria-hidden="true" style="visibility: hidden">
             Helper Text (possibly validation message)
           </p>
         </section>
@@ -138,7 +138,7 @@ <h2>Password field with validation</h2>
 
       <section class="example">
         <h2>Outlined Text Field</h2>
-        <div id="demo-tf-outlined-wrapper">
+        <div id="demo-tf-outlined-wrapper" class="demo-text-field-wrapper">
           <div id="tf-outlined-example" class="mdc-text-field mdc-text-field--outlined" data-demo-no-auto-js>
             <input type="text" id="tf-outlined-input" class="mdc-text-field__input"
                    aria-controls="name-validation-message"
@@ -188,7 +188,7 @@ <h2>Outlined Text Field</h2>
 
       <section class="example" id="text-field-box-example">
         <h2>Text Field box</h2>
-        <div id="demo-tf-box-wrapper">
+        <div id="demo-tf-box-wrapper" class="demo-text-field-wrapper">
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
             <input type="text" id="tf-box" class="mdc-text-field__input"
                    aria-controls="box-name-validation-message"
@@ -197,8 +197,7 @@ <h2>Text Field box</h2>
             <div class="mdc-line-ripple"></div>
           </div>
           <p class="mdc-text-field-helper-text"
-            id="box-name-validation-message"
-            style="display: none;">
+            id="box-name-validation-message" style="visibility: hidden">
             Helper Text (possibly validation message)
           </p>
         </div>
@@ -276,7 +275,7 @@ <h2>Text Field - Leading/Trailing icons</h2>
             <div class="mdc-notched-outline__idle"></div>
           </div>
         </div>
-        <div id="demo-tf-outlined-trailing-wrapper">
+        <div id="demo-tf-outlined-trailing-wrapper" class="demo-text-field-wrapper">
           <div id="tf-outlined-trailing-example"
             class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon" data-demo-no-auto-js>
             <input type="text" id="tf-outlined-trailing" class="mdc-text-field__input">
@@ -333,7 +332,7 @@ <h2>Preventing FOUC</h2>
 
       <section class="example">
         <h2>Textarea</h2>
-        <section id="demo-text-field-textarea-wrapper">
+        <section id="demo-text-field-textarea-wrapper" class="demo-text-field-wrapper">
           <div class="mdc-text-field mdc-text-field--textarea">
             <textarea id="textarea" class="mdc-text-field__input" rows="8" cols="40"></textarea>
             <label for="textarea" class="mdc-floating-label">Textarea Label</label>
@@ -359,7 +358,7 @@ <h2>Textarea</h2>
 
       <section class="example">
         <h2>Full-Width Text Field and Textarea</h2>
-        <div id="demo-fullwidth-wrapper">
+        <div id="demo-fullwidth-wrapper" class="demo-text-field-wrapper">
           <div class="mdc-text-field mdc-text-field--fullwidth">
             <input class="mdc-text-field__input" type="text" placeholder="Subject" aria-label="Subject">
             <div class="mdc-line-ripple"></div>
@@ -504,7 +503,7 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
 
         document.getElementById('box-use-helper-text').addEventListener('change', function(evt) {
           var target = evt.target;
-          helperText.style.display = target.checked ? 'block' : 'none';
+          helperText.style.visibility = target.checked ? 'visible' : 'hidden';
           document.getElementById('box-persistent-helper-text').disabled = !target.checked;
           document.getElementById('box-helper-text-as-validation').disabled = !target.checked;
         });
@@ -660,7 +659,7 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
         });
         document.getElementById('use-helper-text').addEventListener('change', function(evt) {
           var target = evt.target;
-          helperText.style.display = target.checked ? 'block' : 'none';
+          helperText.style.visibility = target.checked ? 'visible' : 'hidden';
           document.getElementById('persistent-helper-text').disabled = !target.checked;
           document.getElementById('helper-text-as-validation').disabled = !target.checked;
         });

demos/text-field.scss

@@ -118,3 +118,8 @@
   @include mdc-text-field-helper-text-color(rgba(blue, .6));
 }
 // stylelint-enable selector-class-pattern
+
+.demo-text-field-wrapper {
+  margin-bottom: 8px;
+}
+

demos/typography.html

@@ -84,9 +84,15 @@ <h6 class="mdc-typography--subtitle2">Subtitle 2</h6>
 
       <h6 class="mdc-typography--headline6 demo-typography--heading-baseline">Baseline</h6>
       <section class="demo-typography--section-baseline">
-        <h2 class="demo-typography__title mdc-typography--headline6">Our Changing Planet</h2>
-        <h3 class="demo-typography__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
-        <div class="demo-typography__body mdc-typography--body2">Visit ten places on our planet that are undergoing the biggest changes today.</div>
+        <h2 class="demo-typography__title mdc-typography--headline6">
+          Our Changing Planet
+        </h2>
+        <h3 class="demo-typography__subtitle mdc-typography--subtitle2">
+          by Kurt Wagner
+        </h3>
+        <div class="demo-typography__body mdc-typography--body2">
+          Visit ten places on our planet that are undergoing the biggest changes today.
+        </div>
 
         <line class="demo-typography-line-1">+34px</line>
         <line class="demo-typography-line-2">+22px</line>

packages/mdc-list/README.md

@@ -77,8 +77,6 @@ in the double line list style as defined by
 </ul>
 ```
 
-> NOTE: Make sure that there are no white-space characters before primary and secondary text.
-
 ### List Groups
 
 Multiple related lists can be grouped together using the `mdc-list-group` class on a containing element.

packages/mdc-textfield/helper-text/mdc-text-field-helper-text.scss

@@ -22,18 +22,12 @@
 
 .mdc-text-field-helper-text {
   @include mdc-typography(caption);
+  @include mdc-typography-baseline-top(16px);
 
   margin: 0;
   transition: mdc-text-field-transition(opacity);
   opacity: 0;
   will-change: opacity;
-
-  // stylelint-disable plugin/selector-bem-pattern
-  .mdc-text-field + & {
-    margin-bottom: 8px;
-  }
-
-  // stylelint-enable plugin/selector-bem-pattern
 }
 
 .mdc-text-field-helper-text--persistent {

packages/mdc-textfield/mdc-text-field.scss

@@ -45,7 +45,6 @@
 
   display: inline-block;
   position: relative;
-  margin-bottom: 8px;
   will-change: opacity, transform, color;
 }
 

packages/mdc-typography/_mixins.scss

@@ -42,26 +42,29 @@
 }
 
 @mixin mdc-typography-baseline-top($distance) {
+  display: flex;
+  align-items: baseline;
   margin-top: 0;
   line-height: normal;
 
   &::before {
-    @include mdc-typography-baseline-strut_($distance, 0);
+    @include mdc-typography-baseline-strut_($distance);
   }
 }
 
 @mixin mdc-typography-baseline-bottom($distance) {
   margin-bottom: -1 * $distance;
 
   &::after {
-    @include mdc-typography-baseline-strut_($distance, -1 * $distance);
+    @include mdc-typography-baseline-strut_($distance);
+
+    align-items: flex-start;
   }
 }
 
-@mixin mdc-typography-baseline-strut_($distance, $vertical-align) {
-  display: inline-block;
+@mixin mdc-typography-baseline-strut_($distance) {
+  display: inline-flex;
   width: 0;
   height: $distance;
   content: "";
-  vertical-align: $vertical-align;
 }