From 63f4f150d192bfa57188b6f6d396ab3937caeb4c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 10 Jun 2018 16:57:54 +0200
Subject: [PATCH] [typography] Add a variants key in the theme

---
 packages/material-ui/src/Grid/Grid.js         |  2 --
 .../src/styles/createTypography.js            | 13 ++++++++++++
 .../src/styles/createTypography.test.js       | 21 +++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index 7d8c8713c2fb22..237d2a51e5d22c 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -47,10 +47,8 @@ function generateGrid(globalStyles, theme, breakpoint) {
     // Only keep 6 significant numbers.
     const width = `${Math.round((size / 12) * 10e6) / 10e4}%`;
 
-    /* eslint-disable max-len */
     // Close to the bootstrap implementation:
     // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
-    /* eslint-enable max-len */
     styles[key] = {
       flexBasis: width,
       flexGrow: 0,
diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js
index a6f489fdb1e381..5cef547e33de95 100644
--- a/packages/material-ui/src/styles/createTypography.js
+++ b/packages/material-ui/src/styles/createTypography.js
@@ -17,6 +17,8 @@ export default function createTypography(palette: Object, typography: Object | F
     // Tell Material-UI what's the font-size on the html element.
     // 16px is the default font-size used by browsers.
     htmlFontSize = 16,
+    // Apply the CSS properties to all the variants.
+    allVariants,
     ...other
   } =
     typeof typography === 'function' ? typography(palette) : typography;
@@ -43,6 +45,7 @@ export default function createTypography(palette: Object, typography: Object | F
         lineHeight: `${round(128 / 112)}em`,
         marginLeft: '-.04em',
         color: palette.text.secondary,
+        ...allVariants,
       },
       display3: {
         fontSize: pxToRem(56),
@@ -52,6 +55,7 @@ export default function createTypography(palette: Object, typography: Object | F
         lineHeight: `${round(73 / 56)}em`,
         marginLeft: '-.02em',
         color: palette.text.secondary,
+        ...allVariants,
       },
       display2: {
         fontSize: pxToRem(45),
@@ -60,6 +64,7 @@ export default function createTypography(palette: Object, typography: Object | F
         lineHeight: `${round(48 / 45)}em`,
         marginLeft: '-.02em',
         color: palette.text.secondary,
+        ...allVariants,
       },
       display1: {
         fontSize: pxToRem(34),
@@ -67,6 +72,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontFamily,
         lineHeight: `${round(41 / 34)}em`,
         color: palette.text.secondary,
+        ...allVariants,
       },
       headline: {
         fontSize: pxToRem(24),
@@ -74,6 +80,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontFamily,
         lineHeight: `${round(32.5 / 24)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       title: {
         fontSize: pxToRem(21),
@@ -81,6 +88,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontFamily,
         lineHeight: `${round(24.5 / 21)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       subheading: {
         fontSize: pxToRem(16),
@@ -88,6 +96,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontFamily,
         lineHeight: `${round(24 / 16)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       body2: {
         fontSize: pxToRem(14),
@@ -95,6 +104,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontFamily,
         lineHeight: `${round(24 / 14)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       body1: {
         fontSize: pxToRem(14),
@@ -102,6 +112,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontFamily,
         lineHeight: `${round(20.5 / 14)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       caption: {
         fontSize: pxToRem(12),
@@ -109,6 +120,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontFamily,
         lineHeight: `${round(16.5 / 12)}em`,
         color: palette.text.secondary,
+        ...allVariants,
       },
       button: {
         fontSize: pxToRem(14),
@@ -116,6 +128,7 @@ export default function createTypography(palette: Object, typography: Object | F
         fontWeight: fontWeightMedium,
         fontFamily,
         color: palette.text.primary,
+        ...allVariants,
       },
     },
     other,
diff --git a/packages/material-ui/src/styles/createTypography.test.js b/packages/material-ui/src/styles/createTypography.test.js
index 4a940d65363914..8869734196b3dd 100644
--- a/packages/material-ui/src/styles/createTypography.test.js
+++ b/packages/material-ui/src/styles/createTypography.test.js
@@ -45,4 +45,25 @@ describe('createTypography', () => {
     const typography = createTypography(palette, { display4: { fontSize: customFontSize } });
     assert.strictEqual(typography.display4.fontSize, customFontSize);
   });
+
+  it('should apply a CSS property to all the variants', () => {
+    const typography = createTypography(palette, { allVariants: { marginLeft: 0 } });
+    const allVariants = [
+      'display4',
+      'display3',
+      'display2',
+      'display1',
+      'headline',
+      'title',
+      'subheading',
+      'body2',
+      'body1',
+      'caption',
+      'button',
+    ];
+
+    allVariants.forEach(variant => {
+      assert.strictEqual(typography[variant].marginLeft, 0);
+    });
+  });
 });