feat(typography): typography: Update styles to match guidance as per …

…MDCWeb 0.35.0 material-components/material-components-web#2527 BREAKING CHANGE: Previous typography styles are removed. The new styles are listed in the readme.
stasson · Apr 29, 2018 · 7aa9a33 · 7aa9a33
1 parent bd48d8c
commit 7aa9a33
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 183 deletions.
diff --git a/components/card/styles.scss b/components/card/styles.scss
@@ -1,63 +1,63 @@
-@import "@material/button/mdc-button";
-@import "@material/card/mdc-card";
-
-.mdc-card-media {
-    background-size: cover;
-    background-repeat: no-repeat;
-}
-
-// Legacy mdc layout
-.mdc-card {
-    &__title {
-        @include mdc-typography(body2);
-        @include mdc-theme-prop(color, text-primary-on-light);
-
-        margin: -0.063rem 0; // -1sp 0
-    }
-
-    &__title--large {
-        @include mdc-typography(headline);
-
-        margin: 0;
-    }
-
-    &__primary {
-        padding: 16px;
-
-        // Add extra space before large title.
-        .mdc-card__title--large {
-            padding-top: 8px;
-        }
-
-        // Add extra padding if this is the last block.
-        &:last-child {
-            padding-bottom: 24px;
-        }
-    }
-
-    &__supporting-text {
-        @include mdc-typography(body1);
-        @include mdc-theme-prop(color, text-primary-on-light);
-
-        box-sizing: border-box;
-        padding: 8px 16px;
-
-        // Remove top padding if immediately preceded by a primary block.
-        .mdc-card__primary + & {
-            margin-top: -8px;
-            padding-top: 0;
-        }
-
-        // Add extra padding if this is the last block.
-        &:last-child {
-            padding-bottom: 24px;
-        }
-    }
-
-    &__subtitle {
-        @include mdc-typography(body1);
-        @include mdc-theme-prop(color, text-primary-on-light);
-
-        margin: -0.063rem 0; // -1sp 0
-    }
-}
+@import "@material/button/mdc-button";
+@import "@material/card/mdc-card";
+
+.mdc-card-media {
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+// Legacy mdc layout
+.mdc-card {
+    &__title {
+        @include mdc-typography(body2);
+        @include mdc-theme-prop(color, text-primary-on-light);
+
+        margin: -0.063rem 0; // -1sp 0
+    }
+
+    &__title--large {
+        @include mdc-typography(headline5);
+
+        margin: 0;
+    }
+
+    &__primary {
+        padding: 16px;
+
+        // Add extra space before large title.
+        .mdc-card__title--large {
+            padding-top: 8px;
+        }
+
+        // Add extra padding if this is the last block.
+        &:last-child {
+            padding-bottom: 24px;
+        }
+    }
+
+    &__supporting-text {
+        @include mdc-typography(body1);
+        @include mdc-theme-prop(color, text-primary-on-light);
+
+        box-sizing: border-box;
+        padding: 8px 16px;
+
+        // Remove top padding if immediately preceded by a primary block.
+        .mdc-card__primary + & {
+            margin-top: -8px;
+            padding-top: 0;
+        }
+
+        // Add extra padding if this is the last block.
+        &:last-child {
+            padding-bottom: 24px;
+        }
+    }
+
+    &__subtitle {
+        @include mdc-typography(body1);
+        @include mdc-theme-prop(color, text-primary-on-light);
+
+        margin: -0.063rem 0; // -1sp 0
+    }
+}
diff --git a/components/typography/README.md b/components/typography/README.md
@@ -1,6 +1,6 @@
 ## Usage
 
-The `mdc-typography` components defines basic properties for text, such as the 
+The `mdc-typography` components defines basic properties for text, such as the
 typeface and antialiasing settings.
 
 ```html
@@ -11,8 +11,8 @@ typeface and antialiasing settings.
 <mdc-body>Body</mdc-body>
 ```
 
-> Material Design typography uses the Roboto font. mdc-typography only uses 
-300, 400 and 500.
+> Material Design typography uses the Roboto font. mdc-typography only uses
+> 300, 400 and 500.
 
 ### mdc-text
 
@@ -22,90 +22,78 @@ typeface and antialiasing settings.
 <mdc-text typo='body2' tag="span" adjust-margin></mdc-text>
 ```
 
-| prop           | Type    | Default | Description              |
-|----------------|---------|---------|--------------------------|
-|`typo`          | String  | `body1` | one of the styles (*)    |
-|`tag`           | String  | `p`     | rendering tag            |
-|`adjust-margin` | Boolean | `false` | whether to adjust margin (**) |
-
-(*) styles: display4, display3 , display2, display1, headline, title, subheading1,
-subheading2, body1, body2, caption, button
-
-
-(**)  the `adjust-margin` property should only be used in a text context; using this 
-property on UI elements such as buttons might cause them to be positioned incorrectly.
-
-> wrap typography components with  `mdc-text-section` to force margin adjustment:
-
-```html
-<mdc-text-section>
-  <mdc-headline>Headline</mdc-headline>
-  <mdc-title>Title <mdc-caption>Caption</mdc-caption></mdc-title>
-  <mdc-subheading >Subheading</mdc-subheading>
-  <mdc-body>Body</mdc-body>
-  <mdc-body typo='body2'>Callout</mdc-body>
-</mdc-text-section>
+| prop   | Type   | Default | Description            |
+| ------ | ------ | ------- | ---------------------- |
+| `typo` | String | `body1` | one of the styles (\*) |
+| `tag`  | String | `p`     | rendering tag          |
+
+(\*) styles:
+
+```javascript
+const typos = [
+  'headline1',
+  'headline2',
+  'headline3',
+  'headline4',
+  'headline5',
+  'headline6',
+  'subtitle1',
+  'subtitle2',
+  'body1',
+  'body2',
+  'caption',
+  'button',
+  'overline'
+]
 ```
 
 ### mdc-display
 
-| prop  | Type   | Default   | Description |
-|-------|--------|-----------|-------------|
-|`typo` | String | `display1` | one of the styles (*) |
-|`tag`  | String | `h1`       | rendering tag |
-|`adjust-margin` | Boolean   | `false` | whether to adjust margin |
+| prop   | Type   | Default     | Description            |
+| ------ | ------ | ----------- | ---------------------- |
+| `typo` | String | `headline4` | one of the styles (\*) |
+| `tag`  | String | `h1`        | rendering tag          |
 
-(*) styles: display4, display3, display2, display1 
+(\*) styles: 'headline1', 'headline2', 'headline3', 'headline4',
 
 ### mdc-headline
 
-| prop  | Type   | Default  | Description |
-|-------|--------|----------|-------------|
-|`tag`  | String | `h2`     | rendering tag |
-|`adjust-margin` | Boolean | `false` | whether to adjust margin |
+| prop  | Type   | Default | Description   |
+| ----- | ------ | ------- | ------------- |
+| `tag` | String | `h2`    | rendering tag |
 
+### mdc-title
 
-
-### mdc-title 
-
-| prop  | Type   | Default   | Description |
-|-------|--------|-----------|-------------|
-|`tag`  | String | `h3`       | rendering tag |
-|`adjust-margin` | Boolean   | `false` | whether to adjust margin |
+| prop  | Type   | Default | Description   |
+| ----- | ------ | ------- | ------------- |
+| `tag` | String | `h3`    | rendering tag |
 
 ### mdc-caption
 
-| prop  | Type   | Default   | Description |
-|-------|--------|-----------|-------------|
-|`tag`  | String | `span`       | rendering tag |
-|`adjust-margin` | Boolean   | `false` | whether to adjust margin |
-
+| prop  | Type   | Default | Description   |
+| ----- | ------ | ------- | ------------- |
+| `tag` | String | `span`  | rendering tag |
 
 ### mdc-subheading
 
-| prop  | Type   | Default   | Description |
-|-------|--------|-----------|-------------|
-|`typo` | String | `subheading2` | one of the styles (*) |
-|`tag`  | String | `h4`       | rendering tag |
-|`adjust-margin` | Boolean   | `false` | whether to adjust margin |
-
-(*) styles: subheading1, subheading2
-
+| prop   | Type   | Default     | Description            |
+| ------ | ------ | ----------- | ---------------------- |
+| `typo` | String | `subtitle2` | one of the styles (\*) |
+| `tag`  | String | `h4`        | rendering tag          |
 
+(\*) styles: 'subtitle1', 'subtitle2'
 
 ### mdc-body
 
-| prop  | Type   | Default   | Description |
-|-------|--------|-----------|-------------|
-|`typo` | String | `body1` | one of the styles (*) |
-|`tag`  | String | `p`       | rendering tag |
-|`adjust-margin` | Boolean    | `false` | whether to adjust margin |
+| prop   | Type   | Default | Description            |
+| ------ | ------ | ------- | ---------------------- |
+| `typo` | String | `body1` | one of the styles (\*) |
+| `tag`  | String | `p`     | rendering tag          |
 
-(*) styles: body1, body2
+(\*) styles: body1, body2
 
 > use body2 for text calling out something
 
-
 ### Reference
 
-- <https://material.io/components/web/catalog/typography>
+* <https://material.io/components/web/catalog/typography>
diff --git a/components/typography/mdc-typography.js b/components/typography/mdc-typography.js
@@ -1,16 +1,17 @@
 const typos = [
-  'display4',
-  'display3',
-  'display2',
-  'display1',
-  'headline',
-  'title',
-  'subheading1',
-  'subheading2',
+  'headline1',
+  'headline2',
+  'headline3',
+  'headline4',
+  'headline5',
+  'headline6',
+  'subtitle1',
+  'subtitle2',
   'body1',
   'body2',
   'caption',
-  'button'
+  'button',
+  'overline'
 ]
 
 export const mdcTypoMixin = name => {
@@ -22,8 +23,7 @@ export const mdcTypoMixin = name => {
           class: {
             'mdc-typo': true,
             [name]: true,
-            [`mdc-typography--${this.typo}`]: true,
-            'mdc-typography--adjust-margin': this.adjustMargin
+            [`mdc-typography--${this.typo}`]: true
           },
           attrs: this.$attrs,
           on: this.$listeners
@@ -45,10 +45,6 @@ export function mdcTypoPropMixin(defaultTag, defaultTypo, validTypos) {
         type: String,
         default: defaultTypo,
         validator: value => validTypos.indexOf(value) !== -1
-      },
-      'adjust-margin': {
-        type: Boolean,
-        default: false
       }
     }
   }
@@ -86,12 +82,12 @@ export const mdcText = {
 export const mdcDisplay = {
   name: 'mdc-display',
   mixins: [
-    mdcTypoMixin('mdc-display'),
-    mdcTypoPropMixin('h1', 'display1', [
-      'display4',
-      'display3',
-      'display2',
-      'display1'
+    mdcTypoMixin('mdc-headline'),
+    mdcTypoPropMixin('h1', 'headline4', [
+      'headline4',
+      'headline3',
+      'headline2',
+      'headline1'
     ])
   ]
 }
@@ -100,23 +96,23 @@ export const mdcHeadline = {
   name: 'mdc-headline',
   mixins: [
     mdcTypoMixin('mdc-headline'),
-    mdcTypoPropMixin('h2', 'headline', ['headline'])
+    mdcTypoPropMixin('h2', 'headline5', ['headline5'])
   ]
 }
 
 export const mdcTitle = {
   name: 'mdc-title',
   mixins: [
     mdcTypoMixin('mdc-title'),
-    mdcTypoPropMixin('h3', 'title', ['title'])
+    mdcTypoPropMixin('h3', 'headline6', ['headline6'])
   ]
 }
 
 export const mdcSubHeading = {
   name: 'mdc-subheading',
   mixins: [
     mdcTypoMixin('mdc-subheading'),
-    mdcTypoPropMixin('h4', 'subheading2', ['subheading1', 'subheading2'])
+    mdcTypoPropMixin('h4', 'subtitle2', ['subtitle1', 'subtitle2'])
   ]
 }