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); + }); + }); });