[typography] Add a variants key in the theme

mui · Jun 11, 2018 · 63f4f15 · 63f4f15
1 parent edc57a9
commit 63f4f15
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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,62 +64,71 @@ 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),
         fontWeight: fontWeightRegular,
         fontFamily,
         lineHeight: `${round(41 / 34)}em`,
         color: palette.text.secondary,
+        ...allVariants,
       },
       headline: {
         fontSize: pxToRem(24),
         fontWeight: fontWeightRegular,
         fontFamily,
         lineHeight: `${round(32.5 / 24)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       title: {
         fontSize: pxToRem(21),
         fontWeight: fontWeightMedium,
         fontFamily,
         lineHeight: `${round(24.5 / 21)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       subheading: {
         fontSize: pxToRem(16),
         fontWeight: fontWeightRegular,
         fontFamily,
         lineHeight: `${round(24 / 16)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       body2: {
         fontSize: pxToRem(14),
         fontWeight: fontWeightMedium,
         fontFamily,
         lineHeight: `${round(24 / 14)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       body1: {
         fontSize: pxToRem(14),
         fontWeight: fontWeightRegular,
         fontFamily,
         lineHeight: `${round(20.5 / 14)}em`,
         color: palette.text.primary,
+        ...allVariants,
       },
       caption: {
         fontSize: pxToRem(12),
         fontWeight: fontWeightRegular,
         fontFamily,
         lineHeight: `${round(16.5 / 12)}em`,
         color: palette.text.secondary,
+        ...allVariants,
       },
       button: {
         fontSize: pxToRem(14),
         textTransform: 'uppercase',
         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
@@ -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);
+    });
+  });
 });