feat(typography): Reverted baseline mixin to use display inline-block…

… because of IE issues (#3297) BREAKING CHANGE: Helper text and MDC List two-line text that uses new typography baseline mixin should strip the white-space.
material-components · Aug 3, 2018 · ded07d0 · ded07d0
1 parent edf3823
commit ded07d0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 24 deletions.
diff --git a/demos/text-field.html b/demos/text-field.html
@@ -80,8 +80,8 @@ <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="visibility: hidden">
-            Helper Text (possibly validation message)
+             aria-hidden="true" style="visibility: hidden"
+            >Helper Text (possibly validation message)
           </p>
         </section>
         <div>
@@ -131,8 +131,8 @@ <h2>Password field with validation</h2>
           <div class="mdc-line-ripple"></div>
         </div>
         <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg"
-           id="pw-validation-msg">
-          Must be at least 8 characters long
+           id="pw-validation-msg"
+          >Must be at least 8 characters long
         </p>
       </section>
 
@@ -152,8 +152,8 @@ <h2>Outlined Text Field</h2>
             <div class="mdc-notched-outline__idle"></div>
           </div>
           <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
-             id="name-validation-message">
-            Helper Text (possibly validation message)
+             id="name-validation-message"
+            >Helper Text (possibly validation message)
           </p>
         </div>
         <div>
@@ -197,8 +197,8 @@ <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="visibility: hidden">
-            Helper Text (possibly validation message)
+            id="box-name-validation-message" style="visibility: hidden"
+            >Helper Text (possibly validation message)
           </p>
         </div>
         <div>
@@ -394,8 +394,8 @@ <h2>Custom error state behaviour - remove error state as soon as invalid input i
             <label class="mdc-floating-label" for="demo-textfield-error-state-input">Phone number</label>
             <div class="mdc-line-ripple"></div>
           </div>
-          <p id="username-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">
-            Enter 10 digit phone number including area code
+          <p id="username-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true"
+            >Enter 10 digit phone number including area code
           </p>
         </section>
       </section>

diff --git a/demos/typography.html b/demos/typography.html
@@ -84,16 +84,9 @@ <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>
         <line class="demo-typography-line-3">+28px</line>

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

diff --git a/packages/mdc-textfield/helper-text/README.md b/packages/mdc-textfield/helper-text/README.md
@@ -27,6 +27,8 @@ Helper text gives context about a field’s input, such as how the input will be
 <p class="mdc-text-field-helper-text" aria-hidden="true">
 ```
 
+> NOTE: Make sure there are no white-space characters before helper text content.
+
 ### Styles
 
 ```scss

diff --git a/packages/mdc-typography/_mixins.scss b/packages/mdc-typography/_mixins.scss
@@ -42,13 +42,14 @@
 }
 
 @mixin mdc-typography-baseline-top($distance) {
-  display: flex;
-  align-items: baseline;
+  display: block;
   margin-top: 0;
   line-height: normal;
 
   &::before {
     @include mdc-typography-baseline-strut_($distance);
+
+    vertical-align: 0;
   }
 }
 
@@ -58,12 +59,12 @@
   &::after {
     @include mdc-typography-baseline-strut_($distance);
 
-    align-items: flex-start;
+    vertical-align: -1 * $distance;
   }
 }
 
 @mixin mdc-typography-baseline-strut_($distance) {
-  display: inline-flex;
+  display: inline-block;
   width: 0;
   height: $distance;
   content: "";