breaking(Typography): MDC breaking change, updates almost all typogra…

…phy names. #210 display4 -> headline1 display3 -> headline2 display2 -> headline3 display1 -> headline4 headline -> headline5 title -> headline6 subheading2 -> subheading1 subheading1 -> subheading2 body2 -> body1 body1 -> body2 caption -> caption button -> button ——— -> overline
rmwc · May 2, 2018 · 8d77666 · 8d77666
1 parent 3b8f050
commit 8d77666
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 33 deletions.
diff --git a/src/Card/card.md b/src/Card/card.md
@@ -31,11 +31,11 @@ import { Typography } from 'rmwc/Typography';
       }}
     />
     <div style={{ padding: '0 1rem 1rem 1rem' }}>
-      <Typography use="title" tag="h2">
+      <Typography use="headline6" tag="h2">
         Our Changing Planet
       </Typography>
       <Typography
-        use="subheading1"
+        use="subtitle2"
         tag="h3"
         theme="text-secondary-on-background"
         style={{ marginTop: '-1rem' }}
@@ -75,7 +75,7 @@ import { Icon } from 'rmwc/Icon';
 import { Typography } from 'rmwc/Typography';
 <Card outlined style={{ width: '21rem' }}>
   <Typography
-    use="subheading2"
+    use="subtitle1"
     tag="div"
     style={{ padding: '0.5rem 1rem' }}
     theme="text-secondary-on-background"
@@ -87,7 +87,7 @@ import { Typography } from 'rmwc/Typography';
 
   <CardPrimaryAction>
     <div style={{ padding: '1rem' }}>
-      <Typography use="headline" tag="div">
+      <Typography use="display5" tag="div">
         Copper on the rise
       </Typography>
       <Typography use="body1" tag="p" theme="text-secondary-on-background">
@@ -100,7 +100,7 @@ import { Typography } from 'rmwc/Typography';
 
   <CardPrimaryAction>
     <div style={{ padding: '1rem' }}>
-      <Typography use="headline" tag="div">
+      <Typography use="display5" tag="div">
         U.S. tech startups rebound
       </Typography>
       <Typography use="body1" tag="p" theme="text-secondary-on-background">

diff --git a/src/Typography/index.js b/src/Typography/index.js
@@ -6,7 +6,7 @@ import type { SimpleTagPropsT } from '../Base';
 export type TypographyPropsT = {
   /* prettier-ignore */
   /** The typography style.*/
-  use: 'display4' | 'display3' | 'display2' | 'display1' | 'headline' | 'title' | 'subheading2' | 'subheading1' | 'body2' | 'body1' | 'caption' | 'button'
+  use: 'headline1' | 'headline2' | 'headline3' | 'headline4' | 'headline5' | 'headline6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline'
 } & SimpleTagPropsT;
 
 /**

diff --git a/src/Typography/typography.md b/src/Typography/typography.md
@@ -8,18 +8,19 @@ import from **rmwc/Typography**
 ```jsx render
 import { Typography } from 'rmwc/Typography';
 
-<Typography use="display4">display4</Typography>
-<Typography use="display3">display3</Typography>
-<Typography use="display2">display2</Typography>
-<Typography use="display1">display1</Typography>
-<Typography use="headline">headline</Typography>
-<Typography use="title">title</Typography>
-<Typography use="subheading2">subheading2</Typography>
-<Typography use="subheading1">subheading1</Typography>
-<Typography use="body2">body2</Typography>
+<Typography use="headline1">headline1</Typography>
+<Typography use="headline2">headline2</Typography>
+<Typography use="headline3">headline3</Typography>
+<Typography use="headline4">headline4</Typography>
+<Typography use="headline5">headline5</Typography>
+<Typography use="headline6">headline6</Typography>
+<Typography use="subtitle1">subtitle1</Typography>
+<Typography use="subtitle2">subtitle2</Typography>
 <Typography use="body1">body1</Typography>
+<Typography use="body2">body2</Typography>
 <Typography use="caption">caption</Typography>
 <Typography use="button">button</Typography>
+<Typography use="overline">overline</Typography>
 ```
 
 ```jsx renderOnly

diff --git a/src/docs/Home.js b/src/docs/Home.js
@@ -18,10 +18,10 @@ export const Home = () => {
     <React.Fragment>
       <Theme tag="header" use="primary-bg text-primary-on-primary">
         <div className="container">
-          <Typography use="display2" tag="h1">
+          <Typography use="headline3" tag="h1">
             React Material Web Components
           </Typography>
-          <Typography use="headline" tag="h2">
+          <Typography use="headline5" tag="h2">
             A React wrapper for Google's official Material
             Components&nbsp;for&nbsp;the&nbsp;Web
           </Typography>
@@ -39,7 +39,7 @@ export const Home = () => {
 
       <aside tag="aside" className="intro">
         <div className="intro__inner">
-          <Typography tag="p" use="title" className="container">
+          <Typography tag="p" use="headline6" className="container">
             RMWC was created to be the most performant, un-opinionated, and
             simple implementation of Material Design in React.
           </Typography>
@@ -51,7 +51,7 @@ export const Home = () => {
             <Link to="/installation">
               <Card theme="primary-bg text-primary-on-primary">
                 <div style={{ padding: '1rem' }}>
-                  <Typography use="title" tag="div">
+                  <Typography use="headline6" tag="div">
                     Simple to Use
                   </Typography>
                   <Typography use="body1">Get started in 5 minutes.</Typography>
@@ -80,7 +80,7 @@ export const Home = () => {
               href="https://material.io/components/web/"
             >
               <div style={{ padding: '1rem' }}>
-                <Typography use="title" tag="div">
+                <Typography use="headline6" tag="div">
                   Material Accuracy
                 </Typography>
                 <div>This is Google's official library, wrapped in React.</div>
@@ -107,7 +107,7 @@ export const Home = () => {
                 theme="text-primary-on-dark"
               >
                 <div style={{ padding: '1rem' }}>
-                  <Typography use="title" tag="div">
+                  <Typography use="headline6" tag="div">
                     Easy to Customize
                   </Typography>
                   <Typography use="body1">

diff --git a/src/docs/docgen.json b/src/docs/docgen.json
@@ -4974,47 +4974,47 @@
         "use": {
           "flowType": {
             "name": "union",
-            "raw": "'display4' | 'display3' | 'display2' | 'display1' | 'headline' | 'title' | 'subheading2' | 'subheading1' | 'body2' | 'body1' | 'caption' | 'button'",
+            "raw": "'headline1' | 'headline2' | 'headline3' | 'headline4' | 'headline5' | 'headline6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline'",
             "elements": [
               {
                 "name": "literal",
-                "value": "'display4'"
+                "value": "'headline1'"
               },
               {
                 "name": "literal",
-                "value": "'display3'"
+                "value": "'headline2'"
               },
               {
                 "name": "literal",
-                "value": "'display2'"
+                "value": "'headline3'"
               },
               {
                 "name": "literal",
-                "value": "'display1'"
+                "value": "'headline4'"
               },
               {
                 "name": "literal",
-                "value": "'headline'"
+                "value": "'headline5'"
               },
               {
                 "name": "literal",
-                "value": "'title'"
+                "value": "'headline6'"
               },
               {
                 "name": "literal",
-                "value": "'subheading2'"
+                "value": "'subtitle1'"
               },
               {
                 "name": "literal",
-                "value": "'subheading1'"
+                "value": "'subtitle2'"
               },
               {
                 "name": "literal",
-                "value": "'body2'"
+                "value": "'body1'"
               },
               {
                 "name": "literal",
-                "value": "'body1'"
+                "value": "'body2'"
               },
               {
                 "name": "literal",
@@ -5023,6 +5023,10 @@
               {
                 "name": "literal",
                 "value": "'button'"
+              },
+              {
+                "name": "literal",
+                "value": "'overline'"
               }
             ]
           },

diff --git a/src/docs/usage.md b/src/docs/usage.md
@@ -38,7 +38,7 @@ import { Button } from 'rmwc/Button';
 
 // renders an h1
 const Example1 = props => (
-  <Typography tag="h1" use="display1">
+  <Typography tag="h1" use="headline4">
     Hello World
   </Typography>
 );