From 6eff7f41bb716fdaf37a24a802bc7d471bdf0729 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 9 Nov 2020 13:30:51 +0100 Subject: [PATCH 1/6] init --- docs/src/pages/system/api/api.md | 111 +++++++------- .../src/pages/system/typography/typography.md | 19 +-- packages/material-ui-system/src/typography.js | 7 + .../material-ui/src/Box/styleFunction.test.js | 135 ++++++++++++------ 4 files changed, 168 insertions(+), 104 deletions(-) diff --git a/docs/src/pages/system/api/api.md b/docs/src/pages/system/api/api.md index 9d1ede4694679e..7b0f120e08b19b 100644 --- a/docs/src/pages/system/api/api.md +++ b/docs/src/pages/system/api/api.md @@ -2,58 +2,59 @@

The API reference of the @material-ui/system package.

-| Group | Import name | Prop | CSS property | Theme key | -| :-------------------------------- | :--------------- | :----------------- | :------------------------------ | :--------------------------------------------------------------------- | -| [borders](/system/borders/) | `border` | `border` | `border` | `borders` | -| [borders](/system/borders/) | `borderBottom` | `borderBottom` | `border-bottom` | `borders` | -| [borders](/system/borders/) | `borderColor` | `borderColor` | `border-color` | [`palette`](/customization/default-theme/?expand-path=$.palette) | -| [borders](/system/borders/) | `borderLeft` | `borderLeft` | `border-left` | `borders` | -| [borders](/system/borders/) | `borderRadius` | `borderRadius` | `border-radius` | [`shape`](/customization/default-theme/?expand-path=$.shape) | -| [borders](/system/borders/) | `borderRight` | `borderRight` | `border-right` | `borders` | -| [borders](/system/borders/) | `borderTop` | `borderTop` | `border-top` | `borders` | -| [shadows](/system/shadows/) | `boxShadow` | `boxShadow` | `box-shadow` | `shadows` | -| [display](/system/display/) | `displayPrint` | `displayPrint` | `display` | none | -| [display](/system/display/) | `displayRaw` | `display` | `display` | none | -| [flexbox](/system/flexbox/) | `alignContent` | `alignContent` | `align-content` | none | -| [flexbox](/system/flexbox/) | `alignItems` | `alignItems` | `align-items` | none | -| [flexbox](/system/flexbox/) | `alignSelf` | `alignSelf` | `align-self` | none | -| [flexbox](/system/flexbox/) | `flex` | `flex` | `flex` | none | -| [flexbox](/system/flexbox/) | `flexDirection` | `flexDirection` | `flex-direction` | none | -| [flexbox](/system/flexbox/) | `flexGrow` | `flexGrow` | `flex-grow` | none | -| [flexbox](/system/flexbox/) | `flexShrink` | `flexShrink` | `flex-shrink` | none | -| [flexbox](/system/flexbox/) | `flexWrap` | `flexWrap` | `flex-wrap` | none | -| [flexbox](/system/flexbox/) | `justifyContent` | `justifyContent` | `justify-content` | none | -| [flexbox](/system/flexbox/) | `order` | `order` | `order` | none | -| [palette](/system/palette/) | `bgcolor` | `bgcolor` | `backgroundColor` | [`palette`](/customization/default-theme/?expand-path=$.palette) | -| [palette](/system/palette/) | `color` | `color` | `color` | [`palette`](/customization/default-theme/?expand-path=$.palette) | -| [positions](/system/positions/) | `bottom` | `bottom` | `bottom` | none | -| [positions](/system/positions/) | `left` | `left` | `left` | none | -| [positions](/system/positions/) | `position` | `position` | `position` | none | -| [positions](/system/positions/) | `right` | `right` | `right` | none | -| [positions](/system/positions/) | `top` | `top` | `top` | none | -| [positions](/system/positions/) | `zIndex` | `zIndex` | `z-index` | [`zIndex`](/customization/default-theme/?expand-path=$.zIndex) | -| [sizing](/system/sizing/) | `height` | `height` | `height` | none | -| [sizing](/system/sizing/) | `maxHeight` | `maxHeight` | `max-height` | none | -| [sizing](/system/sizing/) | `maxWidth` | `maxWidth` | `max-width` | none | -| [sizing](/system/sizing/) | `minHeight` | `minHeight` | `min-height` | none | -| [sizing](/system/sizing/) | `minWidth` | `minWidth` | `min-width` | none | -| [sizing](/system/sizing/) | `width` | `width` | `width` | none | -| [sizing](/system/sizing/) | `boxSizing` | `boxSizing` | `box-sizing` | none | -| [spacing](/system/spacing/) | `spacing` | `m,margin` | `margin` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mb,marginBottom` | `margin-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `ml,marginLeft` | `margin-left` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mr,marginRight` | `margin-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mt,marginTop` | `margin-top` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mx,marginX` | `margin-left`, `margin-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `my,marginY` | `margin-top`, `margin-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `p,padding` | `padding` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pb,paddingBottom` | `padding-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pl,paddingLeft` | `padding-left` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pr,paddingRight` | `padding-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pt,paddingTop` | `padding-top` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `px,paddingX` | `padding-left`, `padding-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `py,paddingY` | `padding-top`, `padding-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [typography](/system/typography/) | `fontFamily` | `fontFamily` | `font-family` | [`typography`](/customization/default-theme/?expand-path=$.typography) | -| [typography](/system/typography/) | `fontSize` | `fontSize` | `font-size` | [`typography`](/customization/default-theme/?expand-path=$.typography) | -| [typography](/system/typography/) | `fontWeight` | `fontWeight` | `font-weight` | [`typography`](/customization/default-theme/?expand-path=$.typography) | -| [typography](/system/typography/) | `textAlign` | `textAlign` | `text-align` | none | +| Group | Import name | Prop | CSS property | Theme key | +| :-------------------------------- | :--------------- | :----------------- | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- | +| [borders](/system/borders/) | `border` | `border` | `border` | `borders` | +| [borders](/system/borders/) | `borderBottom` | `borderBottom` | `border-bottom` | `borders` | +| [borders](/system/borders/) | `borderColor` | `borderColor` | `border-color` | [`palette`](/customization/default-theme/?expand-path=$.palette) | +| [borders](/system/borders/) | `borderLeft` | `borderLeft` | `border-left` | `borders` | +| [borders](/system/borders/) | `borderRadius` | `borderRadius` | `border-radius` | [`shape`](/customization/default-theme/?expand-path=$.shape) | +| [borders](/system/borders/) | `borderRight` | `borderRight` | `border-right` | `borders` | +| [borders](/system/borders/) | `borderTop` | `borderTop` | `border-top` | `borders` | +| [shadows](/system/shadows/) | `boxShadow` | `boxShadow` | `box-shadow` | `shadows` | +| [display](/system/display/) | `displayPrint` | `displayPrint` | `display` | none | +| [display](/system/display/) | `displayRaw` | `display` | `display` | none | +| [flexbox](/system/flexbox/) | `alignContent` | `alignContent` | `align-content` | none | +| [flexbox](/system/flexbox/) | `alignItems` | `alignItems` | `align-items` | none | +| [flexbox](/system/flexbox/) | `alignSelf` | `alignSelf` | `align-self` | none | +| [flexbox](/system/flexbox/) | `flex` | `flex` | `flex` | none | +| [flexbox](/system/flexbox/) | `flexDirection` | `flexDirection` | `flex-direction` | none | +| [flexbox](/system/flexbox/) | `flexGrow` | `flexGrow` | `flex-grow` | none | +| [flexbox](/system/flexbox/) | `flexShrink` | `flexShrink` | `flex-shrink` | none | +| [flexbox](/system/flexbox/) | `flexWrap` | `flexWrap` | `flex-wrap` | none | +| [flexbox](/system/flexbox/) | `justifyContent` | `justifyContent` | `justify-content` | none | +| [flexbox](/system/flexbox/) | `order` | `order` | `order` | none | +| [palette](/system/palette/) | `bgcolor` | `bgcolor` | `backgroundColor` | [`palette`](/customization/default-theme/?expand-path=$.palette) | +| [palette](/system/palette/) | `color` | `color` | `color` | [`palette`](/customization/default-theme/?expand-path=$.palette) | +| [positions](/system/positions/) | `bottom` | `bottom` | `bottom` | none | +| [positions](/system/positions/) | `left` | `left` | `left` | none | +| [positions](/system/positions/) | `position` | `position` | `position` | none | +| [positions](/system/positions/) | `right` | `right` | `right` | none | +| [positions](/system/positions/) | `top` | `top` | `top` | none | +| [positions](/system/positions/) | `zIndex` | `zIndex` | `z-index` | [`zIndex`](/customization/default-theme/?expand-path=$.zIndex) | +| [sizing](/system/sizing/) | `height` | `height` | `height` | none | +| [sizing](/system/sizing/) | `maxHeight` | `maxHeight` | `max-height` | none | +| [sizing](/system/sizing/) | `maxWidth` | `maxWidth` | `max-width` | none | +| [sizing](/system/sizing/) | `minHeight` | `minHeight` | `min-height` | none | +| [sizing](/system/sizing/) | `minWidth` | `minWidth` | `min-width` | none | +| [sizing](/system/sizing/) | `width` | `width` | `width` | none | +| [sizing](/system/sizing/) | `boxSizing` | `boxSizing` | `box-sizing` | none | +| [spacing](/system/spacing/) | `spacing` | `m,margin` | `margin` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mb,marginBottom` | `margin-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `ml,marginLeft` | `margin-left` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mr,marginRight` | `margin-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mt,marginTop` | `margin-top` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mx,marginX` | `margin-left`, `margin-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `my,marginY` | `margin-top`, `margin-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `p,padding` | `padding` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pb,paddingBottom` | `padding-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pl,paddingLeft` | `padding-left` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pr,paddingRight` | `padding-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pt,paddingTop` | `padding-top` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `px,paddingX` | `padding-left`, `padding-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `py,paddingY` | `padding-top`, `padding-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | +| [typography](/system/typography/) | `font` | `font` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `fontFamily` | `fontFamily` | `font-family` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `fontSize` | `fontSize` | `font-size` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `fontWeight` | `fontWeight` | `font-weight` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `textAlign` | `textAlign` | `text-align` | none | diff --git a/docs/src/pages/system/typography/typography.md b/docs/src/pages/system/typography/typography.md index d845abcd02bf76..da68c416d8989f 100644 --- a/docs/src/pages/system/typography/typography.md +++ b/docs/src/pages/system/typography/typography.md @@ -77,12 +77,13 @@ import { typography } from '@material-ui/system'; ``` -| Import name | Prop | CSS property | Theme key | -| :-------------- | :-------------- | :--------------- | :--------------------------------------------------------------------- | -| `fontFamily` | `fontFamily` | `font-family` | [`typography`](/customization/default-theme/?expand-path=$.typography) | -| `fontSize` | `fontSize` | `font-size` | [`typography`](/customization/default-theme/?expand-path=$.typography) | -| `fontStyle` | `fontStyle` | `font-style` | [`typography`](/customization/default-theme/?expand-path=$.typography) | -| `fontWeight` | `fontWeight` | `font-weight` | [`typography`](/customization/default-theme/?expand-path=$.typography) | -| `letterSpacing` | `letterSpacing` | `letter-spacing` | none | -| `lineHeight` | `lineHeight` | `line-height` | none | -| `textAlign` | `textAlign` | `text-align` | none | +| Import name | Prop | CSS property | Theme key | +| :-------------- | :-------------- | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- | +| `font` | `font` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| `fontFamily` | `fontFamily` | `font-family` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| `fontSize` | `fontSize` | `font-size` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| `fontStyle` | `fontStyle` | `font-style` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| `fontWeight` | `fontWeight` | `font-weight` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| `letterSpacing` | `letterSpacing` | `letter-spacing` | none | +| `lineHeight` | `lineHeight` | `line-height` | none | +| `textAlign` | `textAlign` | `text-align` | none | diff --git a/packages/material-ui-system/src/typography.js b/packages/material-ui-system/src/typography.js index c3b4d777bcc6a3..4edaff6d12b716 100644 --- a/packages/material-ui-system/src/typography.js +++ b/packages/material-ui-system/src/typography.js @@ -33,7 +33,14 @@ export const textAlign = style({ prop: 'textAlign', }); +export const font = style({ + prop: 'font', + cssProperty: false, + themeKey: 'typography', +}); + const typography = compose( + font, fontFamily, fontSize, fontStyle, diff --git a/packages/material-ui/src/Box/styleFunction.test.js b/packages/material-ui/src/Box/styleFunction.test.js index 318601cdc9e81d..f5661edbfc82f4 100644 --- a/packages/material-ui/src/Box/styleFunction.test.js +++ b/packages/material-ui/src/Box/styleFunction.test.js @@ -13,8 +13,11 @@ describe('styleFunction', () => { main: 'rgb(0, 255, 0)', }, }, + typography: { pxToRem: (pxValue) => `${pxValue / 16}rem` }, }); + const round = (value) => Math.round(value * 1e5) / 1e5; + it('resolves palette', () => { const result = styleFunction({ theme, @@ -41,18 +44,44 @@ describe('styleFunction', () => { }); }); - it('resolves typography', () => { - const result = styleFunction({ - theme, - fontFamily: 'fontFamily', - fontWeight: 'fontWeightLight', - fontSize: 'fontSize', + describe('typography', () => { + it('resolves font prop', () => { + const result = styleFunction({ + theme, + font: ['body2', 'body1'], + }); + + expect(result).to.deep.equal({ + '@media (min-width:0px)': { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: `${14 / 16}rem`, + letterSpacing: `${round(0.15 / 14)}em`, + fontWeight: 400, + lineHeight: 1.43, + }, + '@media (min-width:600px)': { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: '1rem', + letterSpacing: `${round(0.15 / 16)}em`, + fontWeight: 400, + lineHeight: 1.5, + }, + }); }); - expect(result).to.deep.equal({ - fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', - fontWeight: 300, - fontSize: 14, + it('resolves longhand font props', () => { + const result = styleFunction({ + theme, + fontFamily: 'fontFamily', + fontWeight: 'fontWeightLight', + fontSize: 'fontSize', + }); + + expect(result).to.deep.equal({ + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 300, + fontSize: 14, + }); }); }); @@ -83,38 +112,64 @@ describe('styleFunction', () => { }); describe('sx prop', () => { - it('resolves system', () => { - const result = styleFunction({ - theme, - sx: { - color: 'primary.main', - bgcolor: 'secondary.main', - m: 2, - p: 1, - fontFamily: 'fontFamily', - fontWeight: 'fontWeightLight', - fontSize: 'fontSize', - displayPrint: 'block', - border: [1, 2, 3, 4, 5], - }, + describe('system', () => { + it('resolves system ', () => { + const result = styleFunction({ + theme, + sx: { + color: 'primary.main', + bgcolor: 'secondary.main', + m: 2, + p: 1, + fontFamily: 'fontFamily', + fontWeight: 'fontWeightLight', + fontSize: 'fontSize', + displayPrint: 'block', + border: [1, 2, 3, 4, 5], + }, + }); + + expect(result).to.deep.equal({ + color: 'rgb(0, 0, 255)', + backgroundColor: 'rgb(0, 255, 0)', + margin: '20px', + padding: '10px', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 300, + fontSize: 14, + '@media print': { + display: 'block', + }, + '@media (min-width:0px)': { border: '1px solid' }, + '@media (min-width:600px)': { border: '2px solid' }, + '@media (min-width:960px)': { border: '3px solid' }, + '@media (min-width:1280px)': { border: '4px solid' }, + '@media (min-width:1920px)': { border: '5px solid' }, + }); }); - expect(result).to.deep.equal({ - color: 'rgb(0, 0, 255)', - backgroundColor: 'rgb(0, 255, 0)', - margin: '20px', - padding: '10px', - fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', - fontWeight: 300, - fontSize: 14, - '@media print': { - display: 'block', - }, - '@media (min-width:0px)': { border: '1px solid' }, - '@media (min-width:600px)': { border: '2px solid' }, - '@media (min-width:960px)': { border: '3px solid' }, - '@media (min-width:1280px)': { border: '4px solid' }, - '@media (min-width:1920px)': { border: '5px solid' }, + it('resolves system typography', () => { + const result = styleFunction({ + theme, + sx: { font: ['body2', 'body1'] }, + }); + + expect(result).to.deep.equal({ + '@media (min-width:0px)': { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: `${14 / 16}rem`, + letterSpacing: `${round(0.15 / 14)}em`, + fontWeight: 400, + lineHeight: 1.43, + }, + '@media (min-width:600px)': { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: '1rem', + letterSpacing: `${round(0.15 / 16)}em`, + fontWeight: 400, + lineHeight: 1.5, + }, + }); }); }); From a4cca4bcf60244e95b2c6698d937f90110aaac86 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 9 Nov 2020 13:45:20 +0100 Subject: [PATCH 2/6] typings --- packages/material-ui-system/src/index.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index 962830ec543183..51d57e090fd489 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -199,6 +199,7 @@ export function style( ): StyleFunction<{ [K in PropKey]?: unknown } & { theme: Theme }>; // typography.js +export const font: SimpleStyleFunction<'font'>; export const fontFamily: SimpleStyleFunction<'fontFamily'>; export const fontSize: SimpleStyleFunction<'fontSize'>; export const fontStyle: SimpleStyleFunction<'fontStyle'>; @@ -207,6 +208,7 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>; export const lineHeight: SimpleStyleFunction<'lineHeight'>; export const textAlign: SimpleStyleFunction<'textAlign'>; export const typography: SimpleStyleFunction< + | 'font' | 'fontFamily' | 'fontSize' | 'fontStyle' From d243410fa743b8067e2cc2d8befdd668dfa02fc9 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 16:16:32 +0100 Subject: [PATCH 3/6] renamed to typography --- docs/src/pages/system/api/api.md | 2 +- docs/src/pages/system/typography/typography.md | 2 +- packages/material-ui-system/src/index.d.ts | 4 ++-- packages/material-ui-system/src/typography.js | 6 +++--- packages/material-ui/src/Box/styleFunction.test.js | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/src/pages/system/api/api.md b/docs/src/pages/system/api/api.md index 7b0f120e08b19b..eaeb225d98a6b2 100644 --- a/docs/src/pages/system/api/api.md +++ b/docs/src/pages/system/api/api.md @@ -53,7 +53,7 @@ | [spacing](/system/spacing/) | `spacing` | `pt,paddingTop` | `padding-top` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | | [spacing](/system/spacing/) | `spacing` | `px,paddingX` | `padding-left`, `padding-right` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | | [spacing](/system/spacing/) | `spacing` | `py,paddingY` | `padding-top`, `padding-bottom` | [`spacing`](/customization/default-theme/?expand-path=$.spacing) | -| [typography](/system/typography/) | `font` | `font` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `typography` | `typography` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/customization/default-theme/?expand-path=$.typography) | | [typography](/system/typography/) | `fontFamily` | `fontFamily` | `font-family` | [`typography`](/customization/default-theme/?expand-path=$.typography) | | [typography](/system/typography/) | `fontSize` | `fontSize` | `font-size` | [`typography`](/customization/default-theme/?expand-path=$.typography) | | [typography](/system/typography/) | `fontWeight` | `fontWeight` | `font-weight` | [`typography`](/customization/default-theme/?expand-path=$.typography) | diff --git a/docs/src/pages/system/typography/typography.md b/docs/src/pages/system/typography/typography.md index da68c416d8989f..fcd0b98068de36 100644 --- a/docs/src/pages/system/typography/typography.md +++ b/docs/src/pages/system/typography/typography.md @@ -79,7 +79,7 @@ import { typography } from '@material-ui/system'; | Import name | Prop | CSS property | Theme key | | :-------------- | :-------------- | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- | -| `font` | `font` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/customization/default-theme/?expand-path=$.typography) | +| `typography` | `typography` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`typography`](/customization/default-theme/?expand-path=$.typography) | | `fontFamily` | `fontFamily` | `font-family` | [`typography`](/customization/default-theme/?expand-path=$.typography) | | `fontSize` | `fontSize` | `font-size` | [`typography`](/customization/default-theme/?expand-path=$.typography) | | `fontStyle` | `fontStyle` | `font-style` | [`typography`](/customization/default-theme/?expand-path=$.typography) | diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index 51d57e090fd489..c832ca2e65e228 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -199,7 +199,7 @@ export function style( ): StyleFunction<{ [K in PropKey]?: unknown } & { theme: Theme }>; // typography.js -export const font: SimpleStyleFunction<'font'>; +export const typographyFn: SimpleStyleFunction<'typography'>; export const fontFamily: SimpleStyleFunction<'fontFamily'>; export const fontSize: SimpleStyleFunction<'fontSize'>; export const fontStyle: SimpleStyleFunction<'fontStyle'>; @@ -208,7 +208,7 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>; export const lineHeight: SimpleStyleFunction<'lineHeight'>; export const textAlign: SimpleStyleFunction<'textAlign'>; export const typography: SimpleStyleFunction< - | 'font' + | 'typography' | 'fontFamily' | 'fontSize' | 'fontStyle' diff --git a/packages/material-ui-system/src/typography.js b/packages/material-ui-system/src/typography.js index 4edaff6d12b716..1f9bc439e46153 100644 --- a/packages/material-ui-system/src/typography.js +++ b/packages/material-ui-system/src/typography.js @@ -33,14 +33,14 @@ export const textAlign = style({ prop: 'textAlign', }); -export const font = style({ - prop: 'font', +export const typographyFn = style({ + prop: 'typography', cssProperty: false, themeKey: 'typography', }); const typography = compose( - font, + typographyFn, fontFamily, fontSize, fontStyle, diff --git a/packages/material-ui/src/Box/styleFunction.test.js b/packages/material-ui/src/Box/styleFunction.test.js index f5661edbfc82f4..1c5ef80e13ef59 100644 --- a/packages/material-ui/src/Box/styleFunction.test.js +++ b/packages/material-ui/src/Box/styleFunction.test.js @@ -45,10 +45,10 @@ describe('styleFunction', () => { }); describe('typography', () => { - it('resolves font prop', () => { + it('resolves typography prop', () => { const result = styleFunction({ theme, - font: ['body2', 'body1'], + typography: ['body2', 'body1'], }); expect(result).to.deep.equal({ @@ -151,7 +151,7 @@ describe('styleFunction', () => { it('resolves system typography', () => { const result = styleFunction({ theme, - sx: { font: ['body2', 'body1'] }, + sx: { typography: ['body2', 'body1'] }, }); expect(result).to.deep.equal({ From d54d4372a5576906b2c02a8352053b8f88cd0999 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 16:53:42 +0100 Subject: [PATCH 4/6] fixed test --- .../src/styleFunctionSx.test.js | 104 ++++++++++++------ 1 file changed, 73 insertions(+), 31 deletions(-) diff --git a/packages/material-ui-system/src/styleFunctionSx.test.js b/packages/material-ui-system/src/styleFunctionSx.test.js index 0fd4b937ce7267..01360b1ad6ac83 100644 --- a/packages/material-ui-system/src/styleFunctionSx.test.js +++ b/packages/material-ui-system/src/styleFunctionSx.test.js @@ -9,6 +9,8 @@ describe('styleFunctionSx', () => { lg: 1280, xl: 1920, }; + + const round = (value) => Math.round(value * 1e5) / 1e5; const theme = { spacing: (val) => `${val * 10}px`, @@ -32,43 +34,83 @@ describe('styleFunctionSx', () => { fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', fontWeightLight: 300, fontSize: 14, + body1: { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: '1rem', + letterSpacing: `${round(0.15 / 16)}em`, + fontWeight: 400, + lineHeight: 1.5, + }, + body2: { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: `${14 / 16}rem`, + letterSpacing: `${round(0.15 / 14)}em`, + fontWeight: 400, + lineHeight: 1.43, + } }, }; - it('resolves system', () => { - const result = styleFunctionSx({ - theme, - sx: { - color: 'primary.main', - bgcolor: 'secondary.main', - m: 2, - p: 1, - fontFamily: 'fontFamily', - fontWeight: 'fontWeightLight', - fontSize: 'fontSize', - displayPrint: 'block', - border: [1, 2, 3, 4, 5], - }, + describe('system', () => { + it('resolves system ', () => { + const result = styleFunctionSx({ + theme, + sx: { + color: 'primary.main', + bgcolor: 'secondary.main', + m: 2, + p: 1, + fontFamily: 'fontFamily', + fontWeight: 'fontWeightLight', + fontSize: 'fontSize', + displayPrint: 'block', + border: [1, 2, 3, 4, 5], + }, + }); + + expect(result).to.deep.equal({ + color: 'rgb(0, 0, 255)', + backgroundColor: 'rgb(0, 255, 0)', + margin: '20px', + padding: '10px', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 300, + fontSize: 14, + '@media print': { + display: 'block', + }, + '@media (min-width:0px)': { border: '1px solid' }, + '@media (min-width:600px)': { border: '2px solid' }, + '@media (min-width:960px)': { border: '3px solid' }, + '@media (min-width:1280px)': { border: '4px solid' }, + '@media (min-width:1920px)': { border: '5px solid' }, + }); }); - expect(result).to.deep.equal({ - color: 'rgb(0, 0, 255)', - backgroundColor: 'rgb(0, 255, 0)', - margin: '20px', - padding: '10px', - fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', - fontWeight: 300, - fontSize: 14, - '@media print': { - display: 'block', - }, - '@media (min-width:0px)': { border: '1px solid' }, - '@media (min-width:600px)': { border: '2px solid' }, - '@media (min-width:960px)': { border: '3px solid' }, - '@media (min-width:1280px)': { border: '4px solid' }, - '@media (min-width:1920px)': { border: '5px solid' }, + it('resolves system typography', () => { + const result = styleFunctionSx({ + theme, + sx: { typography: ['body2', 'body1'] }, + }); + + expect(result).to.deep.equal({ + '@media (min-width:0px)': { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: `${14 / 16}rem`, + letterSpacing: `${round(0.15 / 14)}em`, + fontWeight: 400, + lineHeight: 1.43, + }, + '@media (min-width:600px)': { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontSize: '1rem', + letterSpacing: `${round(0.15 / 16)}em`, + fontWeight: 400, + lineHeight: 1.5, + }, + }); }); - }); +}); it('resolves non system CSS properties if specified', () => { const result = styleFunctionSx({ From dbf3a2bea01cb823d72cb2b3eb77a7d4bf9e0c70 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 17:13:36 +0100 Subject: [PATCH 5/6] prettier --- packages/material-ui-system/src/styleFunctionSx.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui-system/src/styleFunctionSx.test.js b/packages/material-ui-system/src/styleFunctionSx.test.js index 01360b1ad6ac83..acaea6491a73cf 100644 --- a/packages/material-ui-system/src/styleFunctionSx.test.js +++ b/packages/material-ui-system/src/styleFunctionSx.test.js @@ -9,7 +9,7 @@ describe('styleFunctionSx', () => { lg: 1280, xl: 1920, }; - + const round = (value) => Math.round(value * 1e5) / 1e5; const theme = { @@ -47,7 +47,7 @@ describe('styleFunctionSx', () => { letterSpacing: `${round(0.15 / 14)}em`, fontWeight: 400, lineHeight: 1.43, - } + }, }, }; @@ -110,7 +110,7 @@ describe('styleFunctionSx', () => { }, }); }); -}); + }); it('resolves non system CSS properties if specified', () => { const result = styleFunctionSx({ From 06cdf071b3e308afd5e01141dde24890748196ae Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 10 Nov 2020 17:36:51 +0100 Subject: [PATCH 6/6] typographyFn -> typograpohyVariant --- packages/material-ui-system/src/index.d.ts | 2 +- packages/material-ui-system/src/typography.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index b9617557df555c..014e3d71ef196c 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -205,7 +205,7 @@ export function style( ): StyleFunction<{ [K in PropKey]?: unknown } & { theme: Theme }>; // typography.js -export const typographyFn: SimpleStyleFunction<'typography'>; +export const typographyVariant: SimpleStyleFunction<'typography'>; export const fontFamily: SimpleStyleFunction<'fontFamily'>; export const fontSize: SimpleStyleFunction<'fontSize'>; export const fontStyle: SimpleStyleFunction<'fontStyle'>; diff --git a/packages/material-ui-system/src/typography.js b/packages/material-ui-system/src/typography.js index 1f9bc439e46153..d240bc2d974b8f 100644 --- a/packages/material-ui-system/src/typography.js +++ b/packages/material-ui-system/src/typography.js @@ -33,14 +33,14 @@ export const textAlign = style({ prop: 'textAlign', }); -export const typographyFn = style({ +export const typographyVariant = style({ prop: 'typography', cssProperty: false, themeKey: 'typography', }); const typography = compose( - typographyFn, + typographyVariant, fontFamily, fontSize, fontStyle,