chore(typography): Remove the adjust margin feature (#2464)

BREAKING CHANGE: Removes the `mdc-typography--adjust-margin` CSS class and the `mdc-typography-adjust-margin` Sass mixin

demos/top-app-bar.html

@@ -161,7 +161,7 @@
       <h3 class="mdc-typography--title">Demo Controls</h3>
       <div class="demo-row">
         <div class="demo-col">
-          <h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Common Options</h4>
+          <span class="mdc-typography--subheading2 demo-options-heading">Common Options</span>
           <div>
             <input type="checkbox" id="rtl-checkbox"/>
             <label for="rtl-checkbox">RTL</label>
@@ -172,14 +172,14 @@ <h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Common Opt
           </div>
         </div>
         <div class="demo-col">
-          <h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Top App Bar Specific Options</h4>
+          <span class="mdc-typography--subheading2 demo-options-heading">Top App Bar Specific Options</span>
           <div>
             <input type="checkbox" id="prominent-checkbox"/>
             <label for="prominent-checkbox">Prominent</label>
           </div>
         </div>
         <div class="demo-col">
-          <h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Short Top App Bar Specific Options</h4>
+          <span class="mdc-typography--subheading2 demo-options-heading">Short Top App Bar Specific Options</span>
           <div>
             <input type="checkbox" id="short-checkbox"/>
             <label for="short-checkbox">Short</label>

demos/top-app-bar.scss

@@ -69,3 +69,7 @@ input[type="checkbox"]:disabled + label {
   flex: 1 1 auto;
   flex-direction: row;
 }
+
+.demo-options-heading {
+  margin-bottom: 20px;
+}

demos/typography.html

@@ -65,25 +65,6 @@ <h4 class="mdc-typography--subheading1">Subheading 1</h4>
           in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
         <aside class="mdc-typography--body2">Body 2 text, calling something out.</aside>
       </section>
-
-      <section class="demo-typography--section">
-        <h2 class="mdc-typography--display1">Styles with margin adjustments</h2>
-        <h1 class="mdc-typography--display4 mdc-typography--adjust-margin">Display 4</h1>
-        <h1 class="mdc-typography--display3 mdc-typography--adjust-margin">Display 3</h1>
-        <h1 class="mdc-typography--display2 mdc-typography--adjust-margin">Display 2</h1>
-        <h1 class="mdc-typography--display1 mdc-typography--adjust-margin">Display 1</h1>
-        <h1 class="mdc-typography--headline mdc-typography--adjust-margin">Headline</h1>
-        <h2 class="mdc-typography--title mdc-typography--adjust-margin">
-          Title <span class="mdc-typography--caption mdc-typography--adjust-margin">Caption.</span>
-        </h2>
-        <h3 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Subheading 2</h3>
-        <h4 class="mdc-typography--subheading1 mdc-typography--adjust-margin">Subheading 1</h4>
-        <p class="mdc-typography--body1 mdc-typography--adjust-margin">Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-          do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
-          in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-        <aside class="mdc-typography--body2 mdc-typography--adjust-margin">Body 2 text, calling something out.</aside>
-      </section>
     </main>
   </body>
 </html>

packages/mdc-typography/README.md

@@ -90,26 +90,20 @@ CSS Class | Description
 `mdc-typography--body1` | Sets font properties as Body 1
 `mdc-typography--caption` | Sets font properties as Caption
 `mdc-typography--button` | Sets font properties as Button
-`mdc-typography--adjust-margin` | Positions text, used in conjunction with font classes above
-
-> **A note about `mdc-typography--adjust-margin`**, `mdc-typography--adjust-margin` will change the margin properties of the element it is applied to, to align text correctly. `mdc-typography--adjust-margin` should only be used in a text context; using this property on UI elements such as buttons may cause them to be positioned incorrectly.
 
 ### Sass Variables and Mixins
 
 Mixin | Description
 --- | ---
 `mdc-typography-base` | Sets the font to Roboto
 `mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto
-`mdc-typography-adjust-margin($style)` | Positions text
 `mdc-typography-overflow-ellipsis` | Truncates overflow text to one line with an ellipsis
 
-> **A note about `mdc-typography-adjust-margin`**, `mdc-typography-adjust-margin` will change the margin properties of the element it is applied to, to align text correctly. `mdc-typography-adjust-margin` should only be used in a text context; using this property on UI elements such as buttons may cause them to be positioned incorrectly.
-
 > **A note about `mdc-typography-overflow-ellipsis`**, `mdc-typography-overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`.
 
 #### `$style` Values
 
-These styles can be used as the `$style` argument for `mdc-typography` and `mdc-typography-adjust-margin` mixins.
+These styles can be used as the `$style` argument for `mdc-typography` mixin.
 
 * `display4`
 * `display3`

packages/mdc-typography/_mixins.scss

@@ -31,17 +31,11 @@
 
   @include mdc-typography-base;
 
-  $style-props: map-remove($style-props, margin);
-
   @each $key, $value in $style-props {
     #{$key}: $value;
   }
 }
 
-@mixin mdc-typography-adjust-margin($style) {
-  margin: map-get(map-get($mdc-typography-styles, $style), margin);
-}
-
 // Element must be `display: block` or `display: inline-block` for this to work.
 @mixin mdc-typography-overflow-ellipsis {
   text-overflow: ellipsis;

packages/mdc-typography/_variables.scss

@@ -35,7 +35,6 @@ $mdc-typography-styles: (
     line-height: 7rem, /* 112sp */
     font-weight: map-get($mdc-typography-font-weight-values, light),
     letter-spacing: -.04em,
-    margin: -1rem 0 3.5rem -.085em /* -16sp 0 56sp -.085em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -44,7 +43,6 @@ $mdc-typography-styles: (
     line-height: 3.5rem, /* 56px */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: -.02em,
-    margin: -8px 0 64px -.07em,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -53,7 +51,6 @@ $mdc-typography-styles: (
     line-height: 3rem, /* 48px */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: normal,
-    margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -62,7 +59,6 @@ $mdc-typography-styles: (
     line-height: 2.5rem, /* 40sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: normal,
-    margin: -.5rem 0 4rem -.07em /* -8sp 0 64sp -.07em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -71,7 +67,6 @@ $mdc-typography-styles: (
     line-height: 2rem, /* 32sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: normal,
-    margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -80,7 +75,6 @@ $mdc-typography-styles: (
     line-height: 2rem, /* 32sp */
     font-weight: map-get($mdc-typography-font-weight-values, medium),
     letter-spacing: .02em,
-    margin: -.5rem 0 1rem -.05em /* -8sp 0 16sp -.05em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -89,7 +83,6 @@ $mdc-typography-styles: (
     line-height: 1.75rem, /* 28sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .04em,
-    margin: -.5rem 0 1rem -.06em /* -8sp 0 16sp -.06em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -98,7 +91,6 @@ $mdc-typography-styles: (
     line-height: 1.5rem, /* 24sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .04em,
-    margin: -.313rem 0 .813rem -.06em /* -5sp 0 13sp -.06em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -107,7 +99,6 @@ $mdc-typography-styles: (
     line-height: 1.5rem, /* 24sp */
     font-weight: map-get($mdc-typography-font-weight-values, medium),
     letter-spacing: .04em,
-    margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -116,7 +107,6 @@ $mdc-typography-styles: (
     line-height: 1.25rem, /* 20sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .04em,
-    margin: -.25rem 0 .75rem 0 /* -4sp 0 12sp 0 */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -125,7 +115,6 @@ $mdc-typography-styles: (
     line-height: 1.25rem, /* 20sp */
     font-weight: map-get($mdc-typography-font-weight-values, regular),
     letter-spacing: .08em,
-    margin: -.5rem 0 1rem -.04em /* -8sp 0 16sp -.04em */,
     text-decoration: inherit,
     text-transform: inherit
   ),
@@ -134,7 +123,6 @@ $mdc-typography-styles: (
     line-height: 2.25rem, /* 36sp */
     font-weight: map-get($mdc-typography-font-weight-values, medium),
     letter-spacing: .04em,
-    margin: inherit /* We do not have adjust margin for button */,
     text-decoration: none,
     text-transform: uppercase
   )

packages/mdc-typography/mdc-typography.scss

@@ -25,8 +25,4 @@
   .mdc-typography--#{$style} {
     @include mdc-typography($style);
   }
-
-  .mdc-typography--adjust-margin.mdc-typography--#{$style} {
-    @include mdc-typography-adjust-margin($style);
-  }
 }