Skip to content

Commit

Permalink
[system] Add typography prop that will pull from theme.typography (#2…
Browse files Browse the repository at this point in the history 
…3451)
  • Loading branch information
@mnajdova
mnajdova authored Nov 11, 2020
1 parent f3d581b commit e58fc20
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 104 deletions.
111 changes: 56 additions & 55 deletions docs/src/pages/system/api/api.md
View file

Large diffs are not rendered by default.

19 changes: 10 additions & 9 deletions docs/src/pages/system/typography/typography.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| :-------------- | :-------------- | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
| `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) |
| `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 |
2 changes: 2 additions & 0 deletions packages/material-ui-system/src/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ export function style<PropKey extends string, Theme extends object>(
): StyleFunction<{ [K in PropKey]?: unknown } & { theme: Theme }>;

// typography.js
export const typographyVariant: SimpleStyleFunction<'typography'>;
export const fontFamily: SimpleStyleFunction<'fontFamily'>;
export const fontSize: SimpleStyleFunction<'fontSize'>;
export const fontStyle: SimpleStyleFunction<'fontStyle'>;
Expand All @@ -246,6 +247,7 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
export const lineHeight: SimpleStyleFunction<'lineHeight'>;
export const textAlign: SimpleStyleFunction<'textAlign'>;
export const typography: SimpleStyleFunction<
| 'typography'
| 'fontFamily'
| 'fontSize'
| 'fontStyle'
Expand Down
102 changes: 72 additions & 30 deletions packages/material-ui-system/src/styleFunctionSx.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ describe('styleFunctionSx', () => {
xl: 1920,
};

const round = (value) => Math.round(value * 1e5) / 1e5;

const theme = {
spacing: (val) => `${val * 10}px`,
breakpoints: {
Expand All @@ -32,41 +34,81 @@ 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,
},
});
});
});

Expand Down
7 changes: 7 additions & 0 deletions packages/material-ui-system/src/typography.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,14 @@ export const textAlign = style({
prop: 'textAlign',
});

export const typographyVariant = style({
prop: 'typography',
cssProperty: false,
themeKey: 'typography',
});

const typography = compose(
typographyVariant,
fontFamily,
fontSize,
fontStyle,
Expand Down
49 changes: 39 additions & 10 deletions packages/material-ui/src/Box/styleFunction.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -41,18 +44,44 @@ describe('styleFunction', () => {
});
});

it('resolves typography', () => {
const result = styleFunction({
theme,
fontFamily: 'fontFamily',
fontWeight: 'fontWeightLight',
fontSize: 'fontSize',
describe('typography', () => {
it('resolves typography prop', () => {
const result = styleFunction({
theme,
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,
},
});
});

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

Expand Down

0 comments on commit e58fc20

Please sign in to comment.