From bfcf94b6d29596e1b63d02197c8f477a3ef05aec Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 14 Jul 2020 20:50:15 +0200 Subject: [PATCH 01/23] init --- docs/pages/system/global-classes.js | 20 ++++++++ docs/src/pages.js | 1 + .../src/pages/system/global-classes/Basics.js | 28 +++++++++++ .../pages/system/global-classes/Basics.tsx | 28 +++++++++++ .../pages/system/global-classes/colors.d.ts | 3 ++ .../src/pages/system/global-classes/colors.js | 23 +++++++++ .../system/global-classes/global-classes.md | 7 +++ .../pages/system/global-classes/spacings.d.ts | 5 ++ .../pages/system/global-classes/spacings.js | 48 +++++++++++++++++++ 9 files changed, 163 insertions(+) create mode 100644 docs/pages/system/global-classes.js create mode 100644 docs/src/pages/system/global-classes/Basics.js create mode 100644 docs/src/pages/system/global-classes/Basics.tsx create mode 100644 docs/src/pages/system/global-classes/colors.d.ts create mode 100644 docs/src/pages/system/global-classes/colors.js create mode 100644 docs/src/pages/system/global-classes/global-classes.md create mode 100644 docs/src/pages/system/global-classes/spacings.d.ts create mode 100644 docs/src/pages/system/global-classes/spacings.js diff --git a/docs/pages/system/global-classes.js b/docs/pages/system/global-classes.js new file mode 100644 index 00000000000000..85e2ceb1382cb6 --- /dev/null +++ b/docs/pages/system/global-classes.js @@ -0,0 +1,20 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'system/global-classes'; +const requireDemo = require.context('docs/src/pages/system/global-classes', false, /\.(js|tsx)$/); +const requireRaw = require.context( + '!raw-loader!../../src/pages/system/global-classes', + false, + /\.(js|md|tsx)$/, +); + +export default function Page({ demos, docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/src/pages.js b/docs/src/pages.js index aa9f3c94278f81..4c39cb12490055 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -153,6 +153,7 @@ const pages = [ { pathname: '/system/screen-readers' }, { pathname: '/system/typography' }, { pathname: '/system/api', title: 'API' }, + { pathname: '/system/global-classes' }, ], }, { diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js new file mode 100644 index 00000000000000..d9f0d2da69a219 --- /dev/null +++ b/docs/src/pages/system/global-classes/Basics.js @@ -0,0 +1,28 @@ +import { withStyles } from '@material-ui/styles'; + +import Button from '@material-ui/core/Button'; +import spacings from './spacings'; +import colors from './colors'; + +const GlobalCss = withStyles((theme) => { + return { + '@global': { + ...spacings(theme), + ...colors(theme), + }, + }; +})(() => null); + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx new file mode 100644 index 00000000000000..b652a4e1c0df9b --- /dev/null +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -0,0 +1,28 @@ +import { withStyles } from '@material-ui/styles'; +import { Theme } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import spacings from './spacings'; +import colors from './colors'; + +const GlobalCss = withStyles((theme: Theme) => { + return { + '@global': { + ...spacings(theme), + ...colors(theme), + }, + }; +})(() => null); + +export default function App() { + return ( +
+ + +
+ ); +} diff --git a/docs/src/pages/system/global-classes/colors.d.ts b/docs/src/pages/system/global-classes/colors.d.ts new file mode 100644 index 00000000000000..15617ea28985f8 --- /dev/null +++ b/docs/src/pages/system/global-classes/colors.d.ts @@ -0,0 +1,3 @@ +import { Theme } from '@material-ui/core/styles'; + +export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/colors.js b/docs/src/pages/system/global-classes/colors.js new file mode 100644 index 00000000000000..fcba948a5ce726 --- /dev/null +++ b/docs/src/pages/system/global-classes/colors.js @@ -0,0 +1,23 @@ +const r = (val, accumulator, colors) => { + if (typeof val === 'string') { + colors[accumulator] = { backgroundColor: val }; + colors[`${accumulator}--text`] = { color: val }; + colors[`${accumulator}--hover`] = { '&:hover': { backgroundColor: val } }; + colors[`${accumulator}--text--hover`] = { '&:hover': { color: val } }; + } else if (typeof val === 'object' && val !== null) { + Object.keys(val).forEach((key) => { + r( + val[key], + `${accumulator}${accumulator.length > 1 ? '-' : ''}${key}`, + colors, + ); + }); + } +}; + +export default function colors(theme) { + const colors = {}; + r(theme.palette, '.', colors); + console.log(colors); + return colors; +} diff --git a/docs/src/pages/system/global-classes/global-classes.md b/docs/src/pages/system/global-classes/global-classes.md new file mode 100644 index 00000000000000..c81e5f038f61b6 --- /dev/null +++ b/docs/src/pages/system/global-classes/global-classes.md @@ -0,0 +1,7 @@ +# Global classes + +

The global classes available allows users to use the system properties consistenlty on all components.

+ +## Basics + +{{"demo": "pages/system/global-classes/Basics.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/system/global-classes/spacings.d.ts b/docs/src/pages/system/global-classes/spacings.d.ts new file mode 100644 index 00000000000000..c14ca4d73d36ae --- /dev/null +++ b/docs/src/pages/system/global-classes/spacings.d.ts @@ -0,0 +1,5 @@ +import { object } from 'prop-types'; + +import { Theme } from '@material-ui/core/styles'; + +export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/spacings.js b/docs/src/pages/system/global-classes/spacings.js new file mode 100644 index 00000000000000..1cef875df9e9fb --- /dev/null +++ b/docs/src/pages/system/global-classes/spacings.js @@ -0,0 +1,48 @@ +// TODO: add breakpoints +// vuetifty has breakpoints in the utility classes names +const properties = { + m: 'margin', + p: 'padding', +}; + +const directions = { + t: 'Top', + r: 'Right', + b: 'Bottom', + l: 'Left', + x: ['Left', 'Right'], + y: ['Top', 'Bottom'], +}; + +const values = Array.from(Array(17).keys()); // 0..16 + +export default function spacings(theme) { + const spacings = {}; + + Object.keys(properties).forEach((property) => { + values.forEach((val) => { + spacings[`.${property}-${val}`] = { + [`${properties[property]}`]: theme.spacing(val / 2), + }; + }); + + Object.keys(directions).forEach((direction) => { + values.forEach((val) => { + const cssProperties = + direction !== 'x' && direction !== 'y' + ? [directions[direction]] + : directions[direction]; + + const cssKey = `.${property}${direction}-${val}`; + spacings[cssKey] = {}; + cssProperties.forEach((cssProperty) => { + spacings[cssKey][ + `${properties[property]}${cssProperty}` + ] = theme.spacing(val / 2); + }); + }); + }); + }); + + return spacings; +} From 52759380832702374f3e9164b6cb98146b3f11ae Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 15 Jul 2020 08:35:21 +0200 Subject: [PATCH 02/23] added elevation --- docs/src/pages/system/global-classes/Basics.js | 7 +++++++ docs/src/pages/system/global-classes/Basics.tsx | 7 +++++++ docs/src/pages/system/global-classes/elevations.d.ts | 3 +++ docs/src/pages/system/global-classes/elevations.js | 9 +++++++++ 4 files changed, 26 insertions(+) create mode 100644 docs/src/pages/system/global-classes/elevations.d.ts create mode 100644 docs/src/pages/system/global-classes/elevations.js diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index d9f0d2da69a219..604d561407600a 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -3,12 +3,14 @@ import { withStyles } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; import spacings from './spacings'; import colors from './colors'; +import elevations from './elevations'; const GlobalCss = withStyles((theme) => { return { '@global': { ...spacings(theme), ...colors(theme), + ...elevations(theme), }, }; })(() => null); @@ -23,6 +25,11 @@ export default function App() { > Submit + {Array.from(Array(24).keys()).map((val) => ( + + ))} ); } diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index b652a4e1c0df9b..42ddfb5c4c5070 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -3,12 +3,14 @@ import { Theme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import spacings from './spacings'; import colors from './colors'; +import elevations from './elevations'; const GlobalCss = withStyles((theme: Theme) => { return { '@global': { ...spacings(theme), ...colors(theme), + ...elevations(theme), }, }; })(() => null); @@ -23,6 +25,11 @@ export default function App() { > Submit + {Array.from(Array(24).keys()).map((val) => ( + + ))} ); } diff --git a/docs/src/pages/system/global-classes/elevations.d.ts b/docs/src/pages/system/global-classes/elevations.d.ts new file mode 100644 index 00000000000000..15617ea28985f8 --- /dev/null +++ b/docs/src/pages/system/global-classes/elevations.d.ts @@ -0,0 +1,3 @@ +import { Theme } from '@material-ui/core/styles'; + +export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/elevations.js b/docs/src/pages/system/global-classes/elevations.js new file mode 100644 index 00000000000000..f375a7c0f3c0cb --- /dev/null +++ b/docs/src/pages/system/global-classes/elevations.js @@ -0,0 +1,9 @@ +export default function elevations(theme) { + const elevations = {}; + + theme.shadows.forEach((shadow, idx) => { + elevations[`.elevation-${idx}`] = { boxShadow: shadow }; + }); + + return elevations; +} From 951a0d61dfdd26918e8e1b945c70aa5b488458fd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 15 Jul 2020 08:51:47 +0200 Subject: [PATCH 03/23] added texts --- .../src/pages/system/global-classes/Basics.js | 20 +++++++++++++++++++ .../pages/system/global-classes/Basics.tsx | 19 ++++++++++++++++++ .../src/pages/system/global-classes/colors.js | 1 - .../pages/system/global-classes/texts.d.ts | 3 +++ docs/src/pages/system/global-classes/texts.js | 11 ++++++++++ 5 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 docs/src/pages/system/global-classes/texts.d.ts create mode 100644 docs/src/pages/system/global-classes/texts.js diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index 604d561407600a..1e32f639ae3961 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -4,6 +4,7 @@ import Button from '@material-ui/core/Button'; import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; +import texts from './texts'; const GlobalCss = withStyles((theme) => { return { @@ -11,6 +12,7 @@ const GlobalCss = withStyles((theme) => { ...spacings(theme), ...colors(theme), ...elevations(theme), + ...texts(theme), }, }; })(() => null); @@ -30,6 +32,24 @@ export default function App() { Elevation {val} ))} + + {[ + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'subtitle1', + 'subtitle2', + 'body1', + 'body2', + 'button', + 'caption', + 'overline', + ].map((val) => ( +
Text {val}
+ ))} ); } diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index 42ddfb5c4c5070..31477ef07e1858 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -4,6 +4,7 @@ import Button from '@material-ui/core/Button'; import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; +import texts from './texts'; const GlobalCss = withStyles((theme: Theme) => { return { @@ -11,6 +12,7 @@ const GlobalCss = withStyles((theme: Theme) => { ...spacings(theme), ...colors(theme), ...elevations(theme), + ...texts(theme), }, }; })(() => null); @@ -30,6 +32,23 @@ export default function App() { Elevation {val} ))} + {[ + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'subtitle1', + 'subtitle2', + 'body1', + 'body2', + 'button', + 'caption', + 'overline', + ].map((val) => ( +
Text {val}
+ ))} ); } diff --git a/docs/src/pages/system/global-classes/colors.js b/docs/src/pages/system/global-classes/colors.js index fcba948a5ce726..9233421cec59bf 100644 --- a/docs/src/pages/system/global-classes/colors.js +++ b/docs/src/pages/system/global-classes/colors.js @@ -18,6 +18,5 @@ const r = (val, accumulator, colors) => { export default function colors(theme) { const colors = {}; r(theme.palette, '.', colors); - console.log(colors); return colors; } diff --git a/docs/src/pages/system/global-classes/texts.d.ts b/docs/src/pages/system/global-classes/texts.d.ts new file mode 100644 index 00000000000000..15617ea28985f8 --- /dev/null +++ b/docs/src/pages/system/global-classes/texts.d.ts @@ -0,0 +1,3 @@ +import { Theme } from '@material-ui/core/styles'; + +export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/texts.js b/docs/src/pages/system/global-classes/texts.js new file mode 100644 index 00000000000000..8ab50ae8d06a4b --- /dev/null +++ b/docs/src/pages/system/global-classes/texts.js @@ -0,0 +1,11 @@ +export default function texts(theme) { + const texts = {}; + + Object.keys(theme.typography).forEach((key) => { + if (typeof theme.typography[key] === 'object') { + texts[`.text-${key}`] = theme.typography[key]; + } + }); + + return texts; +} From 3f4157a7ca358a79d059f5fd0ab9e99cd2b9b8c0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 15 Jul 2020 16:05:05 +0200 Subject: [PATCH 04/23] added displays --- .../src/pages/system/global-classes/Basics.js | 18 +++- .../pages/system/global-classes/Basics.tsx | 16 +++- .../pages/system/global-classes/displays.d.ts | 5 ++ .../pages/system/global-classes/displays.js | 82 +++++++++++++++++++ 4 files changed, 117 insertions(+), 4 deletions(-) create mode 100644 docs/src/pages/system/global-classes/displays.d.ts create mode 100644 docs/src/pages/system/global-classes/displays.js diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index 1e32f639ae3961..fc58f8b017f2ff 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -1,10 +1,10 @@ import { withStyles } from '@material-ui/styles'; - import Button from '@material-ui/core/Button'; import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; import texts from './texts'; +import { displays, overflows, textOverflows, visibilities, whiteSpaces } from './displays'; const GlobalCss = withStyles((theme) => { return { @@ -13,6 +13,11 @@ const GlobalCss = withStyles((theme) => { ...colors(theme), ...elevations(theme), ...texts(theme), + ...displays, + ...overflows, + ...textOverflows, + ...visibilities, + ...whiteSpaces, }, }; })(() => null); @@ -21,18 +26,23 @@ export default function App() { return (
+ {Array.from(Array(24).keys()).map((val) => ( ))} - {[ 'h1', 'h2', @@ -50,6 +60,8 @@ export default function App() { ].map((val) => (
Text {val}
))} +
Inline
+
Not visible when printed
); } diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index 31477ef07e1858..20db0ed9fa6aaa 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -5,6 +5,7 @@ import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; import texts from './texts'; +import { displays, overflows, textOverflows, visibilities, whiteSpaces } from './displays'; const GlobalCss = withStyles((theme: Theme) => { return { @@ -13,6 +14,11 @@ const GlobalCss = withStyles((theme: Theme) => { ...colors(theme), ...elevations(theme), ...texts(theme), + ...displays, + ...overflows, + ...textOverflows, + ...visibilities, + ...whiteSpaces, }, }; })(() => null); @@ -21,11 +27,17 @@ export default function App() { return (
+ {Array.from(Array(24).keys()).map((val) => (
); } diff --git a/docs/src/pages/system/global-classes/displays.d.ts b/docs/src/pages/system/global-classes/displays.d.ts new file mode 100644 index 00000000000000..66e6ef794e56e7 --- /dev/null +++ b/docs/src/pages/system/global-classes/displays.d.ts @@ -0,0 +1,5 @@ +export const displays: object; +export const overflows: object; +export const textOverflows: object; +export const visibilities: object; +export const whiteSpaces: object; diff --git a/docs/src/pages/system/global-classes/displays.js b/docs/src/pages/system/global-classes/displays.js new file mode 100644 index 00000000000000..f34188b2b74dd3 --- /dev/null +++ b/docs/src/pages/system/global-classes/displays.js @@ -0,0 +1,82 @@ +export const displays = { + '.d-inline': { display: 'inline' }, + '.d-block': { display: 'block' }, + '.d-contents': { display: 'contents' }, + '.d-flex': { display: 'flex' }, + '.d-grid': { display: 'grid' }, + '.d-inline-block': { display: 'inline-block' }, + '.d-inline-flex': { display: 'inline-flex' }, + '.d-inline-grid': { display: 'inline-grid' }, + '.d-inline-table': { display: 'inline-table' }, + '.d-list-item': { display: 'list-item' }, + '.d-run-in': { display: 'run-in' }, + '.d-table': { display: 'table' }, + '.d-table-caption': { display: 'table-caption' }, + '.d-table-column-group': { display: 'table-column-group' }, + '.d-table-header-group': { display: 'table-header-group' }, + '.d-table-footer-group': { display: 'table-footer-group' }, + '.d-table-row-group': { display: 'table-row-group' }, + '.d-table-cell': { display: 'table-cell' }, + '.d-table-column': { display: 'table-column' }, + '.d-table-row': { display: 'table-row' }, + '.d-none': { display: 'none' }, + '.d-initial': { display: 'initial' }, + '.d-inherit': { display: 'inherit' }, + '.d-print-inline': { '@media print': { display: 'inline' }}, + '.d-print-block': { '@media print': { display: 'block' }}, + '.d-print-contents': { '@media print': { display: 'contents' }}, + '.d-print-flex': { '@media print': { display: 'flex' }}, + '.d-print-grid': { '@media print': { display: 'grid' }}, + '.d-print-inline-block': { '@media print': { display: 'inline-block' }}, + '.d-print-inline-flex': { '@media print': { display: 'inline-flex' }}, + '.d-print-inline-grid': { '@media print': { display: 'inline-grid' }}, + '.d-print-inline-table': { '@media print': { display: 'inline-table' }}, + '.d-print-list-item': { '@media print': { display: 'list-item' }}, + '.d-print-run-in': { '@media print': { display: 'run-in' }}, + '.d-print-table': { '@media print': { display: 'table' }}, + '.d-print-table-caption': { '@media print': { display: 'table-caption' }}, + '.d-print-table-column-group': { '@media print': { display: 'table-column-group' }}, + '.d-print-table-header-group': { '@media print': { display: 'table-header-group' }}, + '.d-print-table-footer-group': { '@media print': { display: 'table-footer-group' }}, + '.d-print-table-row-group': { '@media print': { display: 'table-row-group' }}, + '.d-print-table-cell': { '@media print': { display: 'table-cell' }}, + '.d-print-table-column': { '@media print': { display: 'table-column' }}, + '.d-print-table-row': { '@media print': { display: 'table-row' }}, + '.d-print-none': { '@media print': { display: 'none' }}, + '.d-print-initial': { '@media print': { display: 'initial' }}, + '.d-print-inherit': { '@media print': { display: 'inherit' }}, +}; + +export const overflows = { + '.overflow-visible': { overflow: 'visible' }, + '.overflow-hidden': { overflow: 'hidden' }, + '.overflow-scroll': { overflow: 'scroll' }, + '.overflow-auto': { overflow: 'auto' }, + '.overflow-initial': { overflow: 'initial' }, + '.overflow-inherit': { overflow: 'inherit' }, +}; + +export const textOverflows = { + '.text-overflow-clip': { textOverflow: 'clip' }, + '.text-overflow-ellipsis': { textOverflow: 'ellipsis' }, + '.text-overflow-initial': { textOverflow: 'initial' }, + '.text-overflow-inherit': { textOverflow: 'inherit' }, +}; + +export const visibilities = { + '.v-visible': { visibility: 'visible' }, + '.v-hidden': { visibility: 'hidden' }, + '.v-collapse': { visibility: 'collapse' }, + '.v-initial': { visibility: 'initial' }, + '.v-inherit': { visibility: 'inherit' }, +}; + +export const whiteSpaces = { + '.ws-normal': { whiteSpace: 'normal' }, + '.ws-nowrap': { whiteSpace: 'nowrap' }, + '.ws-pre': { whiteSpace: 'pre' }, + '.ws-pre-line': { whiteSpace: 'pre-line' }, + '.ws-pre-wrap': { whiteSpace: 'pre-wrap' }, + '.ws-initial': { whiteSpace: 'initial' }, + '.ws-inherit': { whiteSpace: 'inherit' }, +}; From 7ac50cb64dc5b2f637b570d1d2801d1e1b192cac Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 15 Jul 2020 16:05:54 +0200 Subject: [PATCH 05/23] prettier --- .../src/pages/system/global-classes/Basics.js | 16 ++++-- .../pages/system/global-classes/Basics.tsx | 13 +++-- .../pages/system/global-classes/displays.js | 54 +++++++++++-------- 3 files changed, 50 insertions(+), 33 deletions(-) diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index fc58f8b017f2ff..f23d090f346016 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -1,10 +1,17 @@ import { withStyles } from '@material-ui/styles'; + import Button from '@material-ui/core/Button'; import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; import texts from './texts'; -import { displays, overflows, textOverflows, visibilities, whiteSpaces } from './displays'; +import { + displays, + overflows, + textOverflows, + visibilities, + whiteSpaces, +} from './displays'; const GlobalCss = withStyles((theme) => { return { @@ -26,10 +33,7 @@ export default function App() { return (
-
diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index 20db0ed9fa6aaa..941d7277d0deb7 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -5,7 +5,13 @@ import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; import texts from './texts'; -import { displays, overflows, textOverflows, visibilities, whiteSpaces } from './displays'; +import { + displays, + overflows, + textOverflows, + visibilities, + whiteSpaces, +} from './displays'; const GlobalCss = withStyles((theme: Theme) => { return { @@ -27,10 +33,7 @@ export default function App() { return (
-
); } diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index c368d7445017c3..f275deabd0164b 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -38,6 +38,14 @@ export default function App() { ))}
Inline
Not visible when printed
+
+
+ Positioned +
+
+ zIndex tooltip +
+
); } diff --git a/docs/src/pages/system/global-classes/GlobalCss.js b/docs/src/pages/system/global-classes/GlobalCss.js index ca07aa2c31e0d4..bbcf2f3258ca40 100644 --- a/docs/src/pages/system/global-classes/GlobalCss.js +++ b/docs/src/pages/system/global-classes/GlobalCss.js @@ -3,6 +3,7 @@ import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; import texts from './texts'; +import positions from './positions'; import { displays, overflows, @@ -18,6 +19,7 @@ const GlobalCss = withStyles((theme) => { ...colors(theme), ...elevations(theme), ...texts(theme), + ...positions(theme), ...displays, ...overflows, ...textOverflows, diff --git a/docs/src/pages/system/global-classes/positions.d.ts b/docs/src/pages/system/global-classes/positions.d.ts new file mode 100644 index 00000000000000..15617ea28985f8 --- /dev/null +++ b/docs/src/pages/system/global-classes/positions.d.ts @@ -0,0 +1,3 @@ +import { Theme } from '@material-ui/core/styles'; + +export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/positions.js b/docs/src/pages/system/global-classes/positions.js new file mode 100644 index 00000000000000..5dccc509527bb1 --- /dev/null +++ b/docs/src/pages/system/global-classes/positions.js @@ -0,0 +1,36 @@ +const values = Array.from(Array(17).keys()); // 0..16 + +export default function positions(theme) { + const positions = { + '.position-static': { position: 'static' }, + '.position-absolute': { position: 'absolute' }, + '.position-fixed': { position: 'fixed' }, + '.position-relative': { position: 'relative' }, + '.position-sticky': { position: 'sticky' }, + '.position-initial': { position: 'initial' }, + '.position-inherit': { position: 'inherit' }, + }; + + values.forEach((val) => { + positions[`.top-${val}`] = { + top: theme.spacing(val / 2), + }; + positions[`.bottom-${val}`] = { + bottom: theme.spacing(val / 2), + }; + positions[`.right-${val}`] = { + right: theme.spacing(val / 2), + }; + positions[`.left-${val}`] = { + left: theme.spacing(val / 2), + }; + }); + + Object.keys(theme.zIndex).forEach((key) => { + positions[`.zIndex-${key}`] = { + zIndex: theme.zIndex[key], + }; + }); + + return positions; +} From 78461256dc9317214be0f298b33afeca66f9f2d8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 16 Jul 2020 17:31:52 +0200 Subject: [PATCH 09/23] fixed wrong classname --- docs/src/pages/system/global-classes/Basics.js | 2 +- docs/src/pages/system/global-classes/Basics.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index 23345dfb8f0b5b..de375e67042160 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -35,7 +35,7 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
Text {val}
+
Text {val}
))}
Inline
diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index f275deabd0164b..a13390a0a61c4f 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -34,7 +34,7 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
Text {val}
+
Text {val}
))}
Inline
Not visible when printed
From 7152ea8f436f8f5de09c95544b32861ef3b8b2d4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 16 Jul 2020 18:04:51 +0200 Subject: [PATCH 10/23] updated color classes, updated spacing values --- .../src/pages/system/global-classes/Basics.js | 10 +++++----- .../pages/system/global-classes/Basics.tsx | 10 +++++----- .../src/pages/system/global-classes/colors.js | 12 +++++------ .../pages/system/global-classes/positions.js | 20 +++++++++---------- .../pages/system/global-classes/spacings.js | 14 ++++++------- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index de375e67042160..fa40685576a296 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -10,7 +10,7 @@ export default function App() { @@ -35,16 +35,16 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
Text {val}
+
Text {val}
))}
Inline
Not visible when printed
-
-
+
+
Positioned
-
+
zIndex tooltip
diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index a13390a0a61c4f..b55146c7e269d1 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -10,7 +10,7 @@ export default function App() { @@ -34,15 +34,15 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
Text {val}
+
Text {val}
))}
Inline
Not visible when printed
-
-
+
+
Positioned
-
+
zIndex tooltip
diff --git a/docs/src/pages/system/global-classes/colors.js b/docs/src/pages/system/global-classes/colors.js index 9233421cec59bf..225b299c1f1b91 100644 --- a/docs/src/pages/system/global-classes/colors.js +++ b/docs/src/pages/system/global-classes/colors.js @@ -1,14 +1,14 @@ const r = (val, accumulator, colors) => { if (typeof val === 'string') { - colors[accumulator] = { backgroundColor: val }; - colors[`${accumulator}--text`] = { color: val }; - colors[`${accumulator}--hover`] = { '&:hover': { backgroundColor: val } }; - colors[`${accumulator}--text--hover`] = { '&:hover': { color: val } }; + colors[`.bg-${accumulator}`] = { backgroundColor: val }; + colors[`.text-${accumulator}`] = { color: val }; + colors[`.hover-bg-${accumulator}`] = { '&:hover': { backgroundColor: val } }; + colors[`.hover-text-${accumulator}`] = { '&:hover': { color: val } }; } else if (typeof val === 'object' && val !== null) { Object.keys(val).forEach((key) => { r( val[key], - `${accumulator}${accumulator.length > 1 ? '-' : ''}${key}`, + `${accumulator}${accumulator.length > 0 ? '-' : ''}${key}`, colors, ); }); @@ -17,6 +17,6 @@ const r = (val, accumulator, colors) => { export default function colors(theme) { const colors = {}; - r(theme.palette, '.', colors); + r(theme.palette, '', colors); return colors; } diff --git a/docs/src/pages/system/global-classes/positions.js b/docs/src/pages/system/global-classes/positions.js index 5dccc509527bb1..9657d414525378 100644 --- a/docs/src/pages/system/global-classes/positions.js +++ b/docs/src/pages/system/global-classes/positions.js @@ -1,4 +1,4 @@ -const values = Array.from(Array(17).keys()); // 0..16 +const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 11, 13, 15, 17]; export default function positions(theme) { const positions = { @@ -11,18 +11,18 @@ export default function positions(theme) { '.position-inherit': { position: 'inherit' }, }; - values.forEach((val) => { - positions[`.top-${val}`] = { - top: theme.spacing(val / 2), + values.forEach((val, idx) => { + positions[`.top-${idx}`] = { + top: theme.spacing(val), }; - positions[`.bottom-${val}`] = { - bottom: theme.spacing(val / 2), + positions[`.bottom-${idx}`] = { + bottom: theme.spacing(val), }; - positions[`.right-${val}`] = { - right: theme.spacing(val / 2), + positions[`.right-${idx}`] = { + right: theme.spacing(val), }; - positions[`.left-${val}`] = { - left: theme.spacing(val / 2), + positions[`.left-${idx}`] = { + left: theme.spacing(val), }; }); diff --git a/docs/src/pages/system/global-classes/spacings.js b/docs/src/pages/system/global-classes/spacings.js index 1cef875df9e9fb..636ae4f0263640 100644 --- a/docs/src/pages/system/global-classes/spacings.js +++ b/docs/src/pages/system/global-classes/spacings.js @@ -14,31 +14,31 @@ const directions = { y: ['Top', 'Bottom'], }; -const values = Array.from(Array(17).keys()); // 0..16 +const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 11, 13, 15, 17]; export default function spacings(theme) { const spacings = {}; Object.keys(properties).forEach((property) => { - values.forEach((val) => { - spacings[`.${property}-${val}`] = { - [`${properties[property]}`]: theme.spacing(val / 2), + values.forEach((val, idx) => { + spacings[`.${property}-${idx}`] = { + [`${properties[property]}`]: theme.spacing(val), }; }); Object.keys(directions).forEach((direction) => { - values.forEach((val) => { + values.forEach((val, idx) => { const cssProperties = direction !== 'x' && direction !== 'y' ? [directions[direction]] : directions[direction]; - const cssKey = `.${property}${direction}-${val}`; + const cssKey = `.${property}${direction}-${idx}`; spacings[cssKey] = {}; cssProperties.forEach((cssProperty) => { spacings[cssKey][ `${properties[property]}${cssProperty}` - ] = theme.spacing(val / 2); + ] = theme.spacing(val); }); }); }); From f236b43d6dd59ac76f08dedd837449bd32d5fc38 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 16 Jul 2020 19:22:29 +0200 Subject: [PATCH 11/23] docs updates v1 --- .../src/pages/system/global-classes/Basics.js | 39 ++----------------- .../pages/system/global-classes/Basics.tsx | 37 ++---------------- .../system/global-classes/ColorsExample.js | 27 +++++++++++++ .../system/global-classes/ColorsExample.tsx | 27 +++++++++++++ .../global-classes/ElevationsExample.js | 21 ++++++++++ .../global-classes/ElevationsExample.tsx | 21 ++++++++++ .../system/global-classes/SpacingsExample.js | 20 ++++++++++ .../system/global-classes/SpacingsExample.tsx | 20 ++++++++++ .../system/global-classes/TextsExample.js | 27 +++++++++++++ .../system/global-classes/TextsExample.tsx | 27 +++++++++++++ .../src/pages/system/global-classes/colors.js | 4 +- .../system/global-classes/global-classes.md | 28 ++++++++++++- 12 files changed, 226 insertions(+), 72 deletions(-) create mode 100644 docs/src/pages/system/global-classes/ColorsExample.js create mode 100644 docs/src/pages/system/global-classes/ColorsExample.tsx create mode 100644 docs/src/pages/system/global-classes/ElevationsExample.js create mode 100644 docs/src/pages/system/global-classes/ElevationsExample.tsx create mode 100644 docs/src/pages/system/global-classes/SpacingsExample.js create mode 100644 docs/src/pages/system/global-classes/SpacingsExample.tsx create mode 100644 docs/src/pages/system/global-classes/TextsExample.js create mode 100644 docs/src/pages/system/global-classes/TextsExample.tsx diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index fa40685576a296..442bc80e83ad23 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -1,45 +1,12 @@ -import Button from '@material-ui/core/Button'; +import React from 'react'; import GlobalCss from './GlobalCss'; export default function App() { return (
- - - {Array.from(Array(24).keys()).map((val) => ( - - ))} - - {[ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'subtitle1', - 'subtitle2', - 'body1', - 'body2', - 'button', - 'caption', - 'overline', - ].map((val) => ( -
Text {val}
- ))} - -
Inline
-
Not visible when printed
+
div.d-inline
+
Hidden when printed
Positioned diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index b55146c7e269d1..5435e6ff3bf569 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -1,43 +1,12 @@ -import Button from '@material-ui/core/Button'; +import * as React from 'react'; import GlobalCss from './GlobalCss'; export default function App() { return (
- - - {Array.from(Array(24).keys()).map((val) => ( - - ))} - {[ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'subtitle1', - 'subtitle2', - 'body1', - 'body2', - 'button', - 'caption', - 'overline', - ].map((val) => ( -
Text {val}
- ))} -
Inline
-
Not visible when printed
+
div.d-inline
+
Hidden when printed
Positioned diff --git a/docs/src/pages/system/global-classes/ColorsExample.js b/docs/src/pages/system/global-classes/ColorsExample.js new file mode 100644 index 00000000000000..a0cee368282a72 --- /dev/null +++ b/docs/src/pages/system/global-classes/ColorsExample.js @@ -0,0 +1,27 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/system/global-classes/ColorsExample.tsx b/docs/src/pages/system/global-classes/ColorsExample.tsx new file mode 100644 index 00000000000000..a0cee368282a72 --- /dev/null +++ b/docs/src/pages/system/global-classes/ColorsExample.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function App() { + return ( +
+ + + +
+ ); +} diff --git a/docs/src/pages/system/global-classes/ElevationsExample.js b/docs/src/pages/system/global-classes/ElevationsExample.js new file mode 100644 index 00000000000000..feeb4e436177a3 --- /dev/null +++ b/docs/src/pages/system/global-classes/ElevationsExample.js @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& > *': { border: '1px dashed grey' }, + }, +}); + +export default function App() { + const classes = useStyles(); + return ( +
+ {Array.from(Array(24).keys()).map((val) => ( +
+ Elevation {val} +
+ ))} +
+ ); +} diff --git a/docs/src/pages/system/global-classes/ElevationsExample.tsx b/docs/src/pages/system/global-classes/ElevationsExample.tsx new file mode 100644 index 00000000000000..feeb4e436177a3 --- /dev/null +++ b/docs/src/pages/system/global-classes/ElevationsExample.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& > *': { border: '1px dashed grey' }, + }, +}); + +export default function App() { + const classes = useStyles(); + return ( +
+ {Array.from(Array(24).keys()).map((val) => ( +
+ Elevation {val} +
+ ))} +
+ ); +} diff --git a/docs/src/pages/system/global-classes/SpacingsExample.js b/docs/src/pages/system/global-classes/SpacingsExample.js new file mode 100644 index 00000000000000..9e3cd543496398 --- /dev/null +++ b/docs/src/pages/system/global-classes/SpacingsExample.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& *': { border: '1px dashed grey' }, + }, +}); + +export default function App() { + const classes = useStyles(); + + return ( +
+
+
+
+
+ ); +} diff --git a/docs/src/pages/system/global-classes/SpacingsExample.tsx b/docs/src/pages/system/global-classes/SpacingsExample.tsx new file mode 100644 index 00000000000000..9e3cd543496398 --- /dev/null +++ b/docs/src/pages/system/global-classes/SpacingsExample.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& *': { border: '1px dashed grey' }, + }, +}); + +export default function App() { + const classes = useStyles(); + + return ( +
+
+
+
+
+ ); +} diff --git a/docs/src/pages/system/global-classes/TextsExample.js b/docs/src/pages/system/global-classes/TextsExample.js new file mode 100644 index 00000000000000..c8287505b00002 --- /dev/null +++ b/docs/src/pages/system/global-classes/TextsExample.js @@ -0,0 +1,27 @@ +import * as React from 'react'; + +export default function App() { + return ( +
+ {[ + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'subtitle1', + 'subtitle2', + 'body1', + 'body2', + 'button', + 'caption', + 'overline', + ].map((val) => ( +
+ Text {val} +
+ ))} +
+ ); +} diff --git a/docs/src/pages/system/global-classes/TextsExample.tsx b/docs/src/pages/system/global-classes/TextsExample.tsx new file mode 100644 index 00000000000000..c8287505b00002 --- /dev/null +++ b/docs/src/pages/system/global-classes/TextsExample.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; + +export default function App() { + return ( +
+ {[ + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'subtitle1', + 'subtitle2', + 'body1', + 'body2', + 'button', + 'caption', + 'overline', + ].map((val) => ( +
+ Text {val} +
+ ))} +
+ ); +} diff --git a/docs/src/pages/system/global-classes/colors.js b/docs/src/pages/system/global-classes/colors.js index 225b299c1f1b91..f20f627e2cd3ec 100644 --- a/docs/src/pages/system/global-classes/colors.js +++ b/docs/src/pages/system/global-classes/colors.js @@ -2,7 +2,9 @@ const r = (val, accumulator, colors) => { if (typeof val === 'string') { colors[`.bg-${accumulator}`] = { backgroundColor: val }; colors[`.text-${accumulator}`] = { color: val }; - colors[`.hover-bg-${accumulator}`] = { '&:hover': { backgroundColor: val } }; + colors[`.hover-bg-${accumulator}`] = { + '&:hover': { backgroundColor: val }, + }; colors[`.hover-text-${accumulator}`] = { '&:hover': { color: val } }; } else if (typeof val === 'object' && val !== null) { Object.keys(val).forEach((key) => { diff --git a/docs/src/pages/system/global-classes/global-classes.md b/docs/src/pages/system/global-classes/global-classes.md index c81e5f038f61b6..c968983f64e098 100644 --- a/docs/src/pages/system/global-classes/global-classes.md +++ b/docs/src/pages/system/global-classes/global-classes.md @@ -1,7 +1,33 @@ # Global classes -

The global classes available allows users to use the system properties consistenlty on all components.

+

The global classes available trough the GlobalCss provider allows users to use the system properties consistenlty on all components.

## Basics +You can add the `` provider in your application tree and use all utility classes available. + {{"demo": "pages/system/global-classes/Basics.js", "defaultCodeOpen": false}} + +## Spacing + +You can use the utility `m-{val}` and `p-{val}` to add margins and paddings to your components. + +{{"demo": "pages/system/global-classes/SpacingsExample.js"}} + +## Colors + +You can access all colors available in the palette, for both the background or text in your components. + +{{"demo": "pages/system/global-classes/ColorsExample.js"}} + +## Text/Typography + +You can apply different text styles in your components using the text classes. + +{{"demo": "pages/system/global-classes/TextsExample.js"}} + +## Elevations + +You can use each of the theme's shadows for applying different eleavtion to your components. + +{{"demo": "pages/system/global-classes/ElevationsExample.js"}} From 0e6637d1b74887a7b682b43c69685153035ba0f3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 16 Jul 2020 20:48:15 +0200 Subject: [PATCH 12/23] added positions docs --- .../src/pages/system/global-classes/Basics.js | 10 +------- .../pages/system/global-classes/Basics.tsx | 8 ------- .../system/global-classes/PositionsExample.js | 23 +++++++++++++++++++ .../global-classes/PositionsExample.tsx | 23 +++++++++++++++++++ .../system/global-classes/global-classes.md | 6 +++++ 5 files changed, 53 insertions(+), 17 deletions(-) create mode 100644 docs/src/pages/system/global-classes/PositionsExample.js create mode 100644 docs/src/pages/system/global-classes/PositionsExample.tsx diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index 442bc80e83ad23..dfb1ec41c139b1 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import GlobalCss from './GlobalCss'; export default function App() { @@ -7,14 +7,6 @@ export default function App() {
div.d-inline
Hidden when printed
-
-
- Positioned -
-
- zIndex tooltip -
-
); } diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index 5435e6ff3bf569..dfb1ec41c139b1 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -7,14 +7,6 @@ export default function App() {
div.d-inline
Hidden when printed
-
-
- Positioned -
-
- zIndex tooltip -
-
); } diff --git a/docs/src/pages/system/global-classes/PositionsExample.js b/docs/src/pages/system/global-classes/PositionsExample.js new file mode 100644 index 00000000000000..34a25136e37897 --- /dev/null +++ b/docs/src/pages/system/global-classes/PositionsExample.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + root: { width: '100%' }, +}); + +export default function App() { + const classes = useStyles(); + + return ( +
+
+
+ position-absolute +
+
+ zIndex-tooltip +
+
+
+ ); +} diff --git a/docs/src/pages/system/global-classes/PositionsExample.tsx b/docs/src/pages/system/global-classes/PositionsExample.tsx new file mode 100644 index 00000000000000..34a25136e37897 --- /dev/null +++ b/docs/src/pages/system/global-classes/PositionsExample.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + root: { width: '100%' }, +}); + +export default function App() { + const classes = useStyles(); + + return ( +
+
+
+ position-absolute +
+
+ zIndex-tooltip +
+
+
+ ); +} diff --git a/docs/src/pages/system/global-classes/global-classes.md b/docs/src/pages/system/global-classes/global-classes.md index c968983f64e098..79ab064570368b 100644 --- a/docs/src/pages/system/global-classes/global-classes.md +++ b/docs/src/pages/system/global-classes/global-classes.md @@ -31,3 +31,9 @@ You can apply different text styles in your components using the text classes. You can use each of the theme's shadows for applying different eleavtion to your components. {{"demo": "pages/system/global-classes/ElevationsExample.js"}} + +## Positions + +You can use different positioning on the components, as well as different zIndexs which are available via the theme. + +{{"demo": "pages/system/global-classes/PositionsExample.js"}} From 925ebc312f45d7b5cc19fd7fee12c74b5f9a95b7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 16 Jul 2020 21:08:43 +0200 Subject: [PATCH 13/23] docs updates --- .../src/pages/system/global-classes/Basics.js | 18 ++++++++++++++--- .../pages/system/global-classes/Basics.tsx | 18 ++++++++++++++--- .../system/global-classes/DisplaysExample.js | 20 +++++++++++++++++++ .../system/global-classes/DisplaysExample.tsx | 20 +++++++++++++++++++ .../system/global-classes/global-classes.md | 6 ++++++ 5 files changed, 76 insertions(+), 6 deletions(-) create mode 100644 docs/src/pages/system/global-classes/DisplaysExample.js create mode 100644 docs/src/pages/system/global-classes/DisplaysExample.tsx diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index dfb1ec41c139b1..af65a7845a8c66 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -1,12 +1,24 @@ import * as React from 'react'; import GlobalCss from './GlobalCss'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& *': { + border: '1px dashed grey', + }, + }, +}); export default function App() { + const classes = useStyles(); + return ( -
+
-
div.d-inline
-
Hidden when printed
+
+
+
); } diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index dfb1ec41c139b1..af65a7845a8c66 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -1,12 +1,24 @@ import * as React from 'react'; import GlobalCss from './GlobalCss'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& *': { + border: '1px dashed grey', + }, + }, +}); export default function App() { + const classes = useStyles(); + return ( -
+
-
div.d-inline
-
Hidden when printed
+
+
+
); } diff --git a/docs/src/pages/system/global-classes/DisplaysExample.js b/docs/src/pages/system/global-classes/DisplaysExample.js new file mode 100644 index 00000000000000..6286932a501381 --- /dev/null +++ b/docs/src/pages/system/global-classes/DisplaysExample.js @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& *': { + border: '1px dashed grey', + }, + }, +}); + +export default function App() { + const classes = useStyles(); + return ( +
+
div.d-inline
+
Hidden when printed
+
+ ); +} diff --git a/docs/src/pages/system/global-classes/DisplaysExample.tsx b/docs/src/pages/system/global-classes/DisplaysExample.tsx new file mode 100644 index 00000000000000..6286932a501381 --- /dev/null +++ b/docs/src/pages/system/global-classes/DisplaysExample.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/styles'; + +const useStyles = makeStyles({ + debug: { + '& *': { + border: '1px dashed grey', + }, + }, +}); + +export default function App() { + const classes = useStyles(); + return ( +
+
div.d-inline
+
Hidden when printed
+
+ ); +} diff --git a/docs/src/pages/system/global-classes/global-classes.md b/docs/src/pages/system/global-classes/global-classes.md index 79ab064570368b..4047de4c62d04d 100644 --- a/docs/src/pages/system/global-classes/global-classes.md +++ b/docs/src/pages/system/global-classes/global-classes.md @@ -37,3 +37,9 @@ You can use each of the theme's shadows for applying different eleavtion to your You can use different positioning on the components, as well as different zIndexs which are available via the theme. {{"demo": "pages/system/global-classes/PositionsExample.js"}} + +## Displays + +You can set different values for the display property, as well as specify different display values when the page is printed. + +{{"demo": "pages/system/global-classes/DisplaysExample.js"}} From 8ec1d98218914f26ad9a9ffb5ae05b92ba4ed3f7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 09:40:41 +0200 Subject: [PATCH 14/23] added breakpoints, addressed comments --- .../system/global-classes/ColorsExample.js | 12 +- .../system/global-classes/ColorsExample.tsx | 12 +- .../system/global-classes/DisplaysExample.js | 2 +- .../system/global-classes/DisplaysExample.tsx | 2 +- .../pages/system/global-classes/GlobalCss.js | 18 +- .../{TextsExample.js => TypographyExample.js} | 2 +- ...TextsExample.tsx => TypographyExample.tsx} | 2 +- .../src/pages/system/global-classes/colors.js | 12 +- .../combineWithBreakpoints.d.ts | 3 + .../global-classes/combineWithBreakpoints.js | 17 ++ .../pages/system/global-classes/displays.d.ts | 8 +- .../pages/system/global-classes/displays.js | 162 ++++++++++-------- .../pages/system/global-classes/elevations.js | 6 +- .../system/global-classes/global-classes.md | 6 +- .../pages/system/global-classes/positions.js | 28 +-- .../pages/system/global-classes/spacings.js | 10 +- docs/src/pages/system/global-classes/texts.js | 11 -- .../{texts.d.ts => typography.d.ts} | 0 .../pages/system/global-classes/typography.js | 13 ++ 19 files changed, 184 insertions(+), 142 deletions(-) rename docs/src/pages/system/global-classes/{TextsExample.js => TypographyExample.js} (86%) rename docs/src/pages/system/global-classes/{TextsExample.tsx => TypographyExample.tsx} (86%) create mode 100644 docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts create mode 100644 docs/src/pages/system/global-classes/combineWithBreakpoints.js delete mode 100644 docs/src/pages/system/global-classes/texts.js rename docs/src/pages/system/global-classes/{texts.d.ts => typography.d.ts} (100%) create mode 100644 docs/src/pages/system/global-classes/typography.js diff --git a/docs/src/pages/system/global-classes/ColorsExample.js b/docs/src/pages/system/global-classes/ColorsExample.js index a0cee368282a72..47ddc9080130e6 100644 --- a/docs/src/pages/system/global-classes/ColorsExample.js +++ b/docs/src/pages/system/global-classes/ColorsExample.js @@ -6,22 +6,28 @@ export default function App() {
+
); } diff --git a/docs/src/pages/system/global-classes/ColorsExample.tsx b/docs/src/pages/system/global-classes/ColorsExample.tsx index a0cee368282a72..47ddc9080130e6 100644 --- a/docs/src/pages/system/global-classes/ColorsExample.tsx +++ b/docs/src/pages/system/global-classes/ColorsExample.tsx @@ -6,22 +6,28 @@ export default function App() {
+
); } diff --git a/docs/src/pages/system/global-classes/DisplaysExample.js b/docs/src/pages/system/global-classes/DisplaysExample.js index 6286932a501381..8e810b1cd998d8 100644 --- a/docs/src/pages/system/global-classes/DisplaysExample.js +++ b/docs/src/pages/system/global-classes/DisplaysExample.js @@ -14,7 +14,7 @@ export default function App() { return (
div.d-inline
-
Hidden when printed
+
Hidden when printed
); } diff --git a/docs/src/pages/system/global-classes/DisplaysExample.tsx b/docs/src/pages/system/global-classes/DisplaysExample.tsx index 6286932a501381..8e810b1cd998d8 100644 --- a/docs/src/pages/system/global-classes/DisplaysExample.tsx +++ b/docs/src/pages/system/global-classes/DisplaysExample.tsx @@ -14,7 +14,7 @@ export default function App() { return (
div.d-inline
-
Hidden when printed
+
Hidden when printed
); } diff --git a/docs/src/pages/system/global-classes/GlobalCss.js b/docs/src/pages/system/global-classes/GlobalCss.js index bbcf2f3258ca40..a28ddde0aa86c1 100644 --- a/docs/src/pages/system/global-classes/GlobalCss.js +++ b/docs/src/pages/system/global-classes/GlobalCss.js @@ -2,15 +2,9 @@ import { withStyles } from '@material-ui/styles'; import spacings from './spacings'; import colors from './colors'; import elevations from './elevations'; -import texts from './texts'; +import typography from './typography'; import positions from './positions'; -import { - displays, - overflows, - textOverflows, - visibilities, - whiteSpaces, -} from './displays'; +import displays from './displays'; const GlobalCss = withStyles((theme) => { return { @@ -18,13 +12,9 @@ const GlobalCss = withStyles((theme) => { ...spacings(theme), ...colors(theme), ...elevations(theme), - ...texts(theme), + ...typography(theme), ...positions(theme), - ...displays, - ...overflows, - ...textOverflows, - ...visibilities, - ...whiteSpaces, + ...displays(theme), }, }; })(() => null); diff --git a/docs/src/pages/system/global-classes/TextsExample.js b/docs/src/pages/system/global-classes/TypographyExample.js similarity index 86% rename from docs/src/pages/system/global-classes/TextsExample.js rename to docs/src/pages/system/global-classes/TypographyExample.js index c8287505b00002..4faa13ba000759 100644 --- a/docs/src/pages/system/global-classes/TextsExample.js +++ b/docs/src/pages/system/global-classes/TypographyExample.js @@ -18,7 +18,7 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
+
Text {val}
))} diff --git a/docs/src/pages/system/global-classes/TextsExample.tsx b/docs/src/pages/system/global-classes/TypographyExample.tsx similarity index 86% rename from docs/src/pages/system/global-classes/TextsExample.tsx rename to docs/src/pages/system/global-classes/TypographyExample.tsx index c8287505b00002..4faa13ba000759 100644 --- a/docs/src/pages/system/global-classes/TextsExample.tsx +++ b/docs/src/pages/system/global-classes/TypographyExample.tsx @@ -18,7 +18,7 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
+
Text {val}
))} diff --git a/docs/src/pages/system/global-classes/colors.js b/docs/src/pages/system/global-classes/colors.js index f20f627e2cd3ec..c1757b1e1a7240 100644 --- a/docs/src/pages/system/global-classes/colors.js +++ b/docs/src/pages/system/global-classes/colors.js @@ -1,11 +1,13 @@ +import combineWithBreakpoints from './combineWithBreakpoints'; + const r = (val, accumulator, colors) => { if (typeof val === 'string') { - colors[`.bg-${accumulator}`] = { backgroundColor: val }; - colors[`.text-${accumulator}`] = { color: val }; - colors[`.hover-bg-${accumulator}`] = { + colors[`bg-${accumulator}`] = { backgroundColor: val }; + colors[`text-${accumulator}`] = { color: val }; + colors[`hover\\:bg-${accumulator}`] = { '&:hover': { backgroundColor: val }, }; - colors[`.hover-text-${accumulator}`] = { '&:hover': { color: val } }; + colors[`hover\\:text-${accumulator}`] = { '&:hover': { color: val } }; } else if (typeof val === 'object' && val !== null) { Object.keys(val).forEach((key) => { r( @@ -20,5 +22,5 @@ const r = (val, accumulator, colors) => { export default function colors(theme) { const colors = {}; r(theme.palette, '', colors); - return colors; + return combineWithBreakpoints(theme, colors); } diff --git a/docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts b/docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts new file mode 100644 index 00000000000000..969382a95a0960 --- /dev/null +++ b/docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts @@ -0,0 +1,3 @@ +import { Theme } from '@material-ui/core/styles'; + +export default function (theme: Theme, obj: object): object; diff --git a/docs/src/pages/system/global-classes/combineWithBreakpoints.js b/docs/src/pages/system/global-classes/combineWithBreakpoints.js new file mode 100644 index 00000000000000..ca64a1720d6313 --- /dev/null +++ b/docs/src/pages/system/global-classes/combineWithBreakpoints.js @@ -0,0 +1,17 @@ +export default function combineWithBreakpoints(theme, obj) { + const result = {}; + + theme.breakpoints.keys.forEach((breakpoint) => { + Object.keys(obj).forEach((selector) => { + result[`.${breakpoint}\\:${selector}`] = { + [theme.breakpoints.up(breakpoint)]: obj[selector], + }; + }); + }); + + Object.keys(obj).forEach((selector) => { + result[`.${selector}`] = obj[selector]; + }); + + return result; +} diff --git a/docs/src/pages/system/global-classes/displays.d.ts b/docs/src/pages/system/global-classes/displays.d.ts index 66e6ef794e56e7..15617ea28985f8 100644 --- a/docs/src/pages/system/global-classes/displays.d.ts +++ b/docs/src/pages/system/global-classes/displays.d.ts @@ -1,5 +1,3 @@ -export const displays: object; -export const overflows: object; -export const textOverflows: object; -export const visibilities: object; -export const whiteSpaces: object; +import { Theme } from '@material-ui/core/styles'; + +export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/displays.js b/docs/src/pages/system/global-classes/displays.js index c15749bc8a606b..dbbd72b88c5ac8 100644 --- a/docs/src/pages/system/global-classes/displays.js +++ b/docs/src/pages/system/global-classes/displays.js @@ -1,59 +1,61 @@ -export const displays = { - '.d-inline': { display: 'inline' }, - '.d-block': { display: 'block' }, - '.d-contents': { display: 'contents' }, - '.d-flex': { display: 'flex' }, - '.d-grid': { display: 'grid' }, - '.d-inline-block': { display: 'inline-block' }, - '.d-inline-flex': { display: 'inline-flex' }, - '.d-inline-grid': { display: 'inline-grid' }, - '.d-inline-table': { display: 'inline-table' }, - '.d-list-item': { display: 'list-item' }, - '.d-run-in': { display: 'run-in' }, - '.d-table': { display: 'table' }, - '.d-table-caption': { display: 'table-caption' }, - '.d-table-column-group': { display: 'table-column-group' }, - '.d-table-header-group': { display: 'table-header-group' }, - '.d-table-footer-group': { display: 'table-footer-group' }, - '.d-table-row-group': { display: 'table-row-group' }, - '.d-table-cell': { display: 'table-cell' }, - '.d-table-column': { display: 'table-column' }, - '.d-table-row': { display: 'table-row' }, - '.d-none': { display: 'none' }, - '.d-initial': { display: 'initial' }, - '.d-inherit': { display: 'inherit' }, - '.d-print-inline': { '@media print': { display: 'inline' } }, - '.d-print-block': { '@media print': { display: 'block' } }, - '.d-print-contents': { '@media print': { display: 'contents' } }, - '.d-print-flex': { '@media print': { display: 'flex' } }, - '.d-print-grid': { '@media print': { display: 'grid' } }, - '.d-print-inline-block': { '@media print': { display: 'inline-block' } }, - '.d-print-inline-flex': { '@media print': { display: 'inline-flex' } }, - '.d-print-inline-grid': { '@media print': { display: 'inline-grid' } }, - '.d-print-inline-table': { '@media print': { display: 'inline-table' } }, - '.d-print-list-item': { '@media print': { display: 'list-item' } }, - '.d-print-run-in': { '@media print': { display: 'run-in' } }, - '.d-print-table': { '@media print': { display: 'table' } }, - '.d-print-table-caption': { '@media print': { display: 'table-caption' } }, - '.d-print-table-column-group': { +import combineWithBreakpoints from './combineWithBreakpoints'; + +const displaysProps = { + 'd-inline': { display: 'inline' }, + 'd-block': { display: 'block' }, + 'd-contents': { display: 'contents' }, + 'd-flex': { display: 'flex' }, + 'd-grid': { display: 'grid' }, + 'd-inline-block': { display: 'inline-block' }, + 'd-inline-flex': { display: 'inline-flex' }, + 'd-inline-grid': { display: 'inline-grid' }, + 'd-inline-table': { display: 'inline-table' }, + 'd-list-item': { display: 'list-item' }, + 'd-run-in': { display: 'run-in' }, + 'd-table': { display: 'table' }, + 'd-table-caption': { display: 'table-caption' }, + 'd-table-column-group': { display: 'table-column-group' }, + 'd-table-header-group': { display: 'table-header-group' }, + 'd-table-footer-group': { display: 'table-footer-group' }, + 'd-table-row-group': { display: 'table-row-group' }, + 'd-table-cell': { display: 'table-cell' }, + 'd-table-column': { display: 'table-column' }, + 'd-table-row': { display: 'table-row' }, + 'd-none': { display: 'none' }, + 'd-initial': { display: 'initial' }, + 'd-inherit': { display: 'inherit' }, + 'print\\:d-inline': { '@media print': { display: 'inline' } }, + 'print\\:d-block': { '@media print': { display: 'block' } }, + 'print\\:d-contents': { '@media print': { display: 'contents' } }, + 'print\\:d-flex': { '@media print': { display: 'flex' } }, + 'print\\:d-grid': { '@media print': { display: 'grid' } }, + 'print\\:d-inline-block': { '@media print': { display: 'inline-block' } }, + 'print\\:d-inline-flex': { '@media print': { display: 'inline-flex' } }, + 'print\\:d-inline-grid': { '@media print': { display: 'inline-grid' } }, + 'print\\:d-inline-table': { '@media print': { display: 'inline-table' } }, + 'print\\:d-list-item': { '@media print': { display: 'list-item' } }, + 'print\\:d-run-in': { '@media print': { display: 'run-in' } }, + 'print\\:d-table': { '@media print': { display: 'table' } }, + 'print\\:d-table-caption': { '@media print': { display: 'table-caption' } }, + 'print\\:d-table-column-group': { '@media print': { display: 'table-column-group' }, }, - '.d-print-table-header-group': { + 'print\\:d-table-header-group': { '@media print': { display: 'table-header-group' }, }, - '.d-print-table-footer-group': { + 'print\\:d-table-footer-group': { '@media print': { display: 'table-footer-group' }, }, - '.d-print-table-row-group': { + 'print\\:d-table-row-group': { '@media print': { display: 'table-row-group' }, }, - '.d-print-table-cell': { '@media print': { display: 'table-cell' } }, - '.d-print-table-column': { '@media print': { display: 'table-column' } }, - '.d-print-table-row': { '@media print': { display: 'table-row' } }, - '.d-print-none': { '@media print': { display: 'none' } }, - '.d-print-initial': { '@media print': { display: 'initial' } }, - '.d-print-inherit': { '@media print': { display: 'inherit' } }, - '.d-sr-only': { + 'print\\:d-table-cell': { '@media print': { display: 'table-cell' } }, + 'print\\:d-table-column': { '@media print': { display: 'table-column' } }, + 'print\\:d-table-row': { '@media print': { display: 'table-row' } }, + 'print\\:d-none': { '@media print': { display: 'none' } }, + 'print\\:d-initial': { '@media print': { display: 'initial' } }, + 'print\\:d-inherit': { '@media print': { display: 'inherit' } }, + 'd-sr-only': { border: 0, clip: 'rect(0 0 0 0)', height: 1, @@ -66,36 +68,48 @@ export const displays = { }, }; -export const overflows = { - '.overflow-visible': { overflow: 'visible' }, - '.overflow-hidden': { overflow: 'hidden' }, - '.overflow-scroll': { overflow: 'scroll' }, - '.overflow-auto': { overflow: 'auto' }, - '.overflow-initial': { overflow: 'initial' }, - '.overflow-inherit': { overflow: 'inherit' }, +const overflows = { + 'overflow-visible': { overflow: 'visible' }, + 'overflow-hidden': { overflow: 'hidden' }, + 'overflow-scroll': { overflow: 'scroll' }, + 'overflow-auto': { overflow: 'auto' }, + 'overflow-initial': { overflow: 'initial' }, + 'overflow-inherit': { overflow: 'inherit' }, }; -export const textOverflows = { - '.text-overflow-clip': { textOverflow: 'clip' }, - '.text-overflow-ellipsis': { textOverflow: 'ellipsis' }, - '.text-overflow-initial': { textOverflow: 'initial' }, - '.text-overflow-inherit': { textOverflow: 'inherit' }, +const textOverflows = { + 'text-overflow-clip': { textOverflow: 'clip' }, + 'text-overflow-ellipsis': { textOverflow: 'ellipsis' }, + 'text-overflow-initial': { textOverflow: 'initial' }, + 'text-overflow-inherit': { textOverflow: 'inherit' }, }; -export const visibilities = { - '.v-visible': { visibility: 'visible' }, - '.v-hidden': { visibility: 'hidden' }, - '.v-collapse': { visibility: 'collapse' }, - '.v-initial': { visibility: 'initial' }, - '.v-inherit': { visibility: 'inherit' }, +const visibilities = { + 'v-visible': { visibility: 'visible' }, + 'v-hidden': { visibility: 'hidden' }, + 'v-collapse': { visibility: 'collapse' }, + 'v-initial': { visibility: 'initial' }, + 'v-inherit': { visibility: 'inherit' }, }; -export const whiteSpaces = { - '.ws-normal': { whiteSpace: 'normal' }, - '.ws-nowrap': { whiteSpace: 'nowrap' }, - '.ws-pre': { whiteSpace: 'pre' }, - '.ws-pre-line': { whiteSpace: 'pre-line' }, - '.ws-pre-wrap': { whiteSpace: 'pre-wrap' }, - '.ws-initial': { whiteSpace: 'initial' }, - '.ws-inherit': { whiteSpace: 'inherit' }, +const whiteSpaces = { + 'ws-normal': { whiteSpace: 'normal' }, + 'ws-nowrap': { whiteSpace: 'nowrap' }, + 'ws-pre': { whiteSpace: 'pre' }, + 'ws-pre-line': { whiteSpace: 'pre-line' }, + 'ws-pre-wrap': { whiteSpace: 'pre-wrap' }, + 'ws-initial': { whiteSpace: 'initial' }, + 'ws-inherit': { whiteSpace: 'inherit' }, }; + +export default function displays(theme) { + const result = { + ...combineWithBreakpoints(theme, displaysProps), + ...combineWithBreakpoints(theme, overflows), + ...combineWithBreakpoints(theme, textOverflows), + ...combineWithBreakpoints(theme, visibilities), + ...combineWithBreakpoints(theme, whiteSpaces), + }; + + return result; +} diff --git a/docs/src/pages/system/global-classes/elevations.js b/docs/src/pages/system/global-classes/elevations.js index f375a7c0f3c0cb..5513a68d833839 100644 --- a/docs/src/pages/system/global-classes/elevations.js +++ b/docs/src/pages/system/global-classes/elevations.js @@ -1,9 +1,11 @@ +import combineWithBreakpoints from './combineWithBreakpoints'; + export default function elevations(theme) { const elevations = {}; theme.shadows.forEach((shadow, idx) => { - elevations[`.elevation-${idx}`] = { boxShadow: shadow }; + elevations[`elevation-${idx}`] = { boxShadow: shadow }; }); - return elevations; + return combineWithBreakpoints(theme, elevations); } diff --git a/docs/src/pages/system/global-classes/global-classes.md b/docs/src/pages/system/global-classes/global-classes.md index 4047de4c62d04d..445d9491b8191d 100644 --- a/docs/src/pages/system/global-classes/global-classes.md +++ b/docs/src/pages/system/global-classes/global-classes.md @@ -20,11 +20,11 @@ You can access all colors available in the palette, for both the background or t {{"demo": "pages/system/global-classes/ColorsExample.js"}} -## Text/Typography +## Typography -You can apply different text styles in your components using the text classes. +You can apply different typography styles in your components using the typography classes. -{{"demo": "pages/system/global-classes/TextsExample.js"}} +{{"demo": "pages/system/global-classes/TypographyExample.js"}} ## Elevations diff --git a/docs/src/pages/system/global-classes/positions.js b/docs/src/pages/system/global-classes/positions.js index 9657d414525378..b4bb7693af64b0 100644 --- a/docs/src/pages/system/global-classes/positions.js +++ b/docs/src/pages/system/global-classes/positions.js @@ -1,36 +1,38 @@ +import combineWithBreakpoints from './combineWithBreakpoints'; + const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 11, 13, 15, 17]; export default function positions(theme) { const positions = { - '.position-static': { position: 'static' }, - '.position-absolute': { position: 'absolute' }, - '.position-fixed': { position: 'fixed' }, - '.position-relative': { position: 'relative' }, - '.position-sticky': { position: 'sticky' }, - '.position-initial': { position: 'initial' }, - '.position-inherit': { position: 'inherit' }, + 'position-static': { position: 'static' }, + 'position-absolute': { position: 'absolute' }, + 'position-fixed': { position: 'fixed' }, + 'position-relative': { position: 'relative' }, + 'position-sticky': { position: 'sticky' }, + 'position-initial': { position: 'initial' }, + 'position-inherit': { position: 'inherit' }, }; values.forEach((val, idx) => { - positions[`.top-${idx}`] = { + positions[`top-${idx}`] = { top: theme.spacing(val), }; - positions[`.bottom-${idx}`] = { + positions[`bottom-${idx}`] = { bottom: theme.spacing(val), }; - positions[`.right-${idx}`] = { + positions[`right-${idx}`] = { right: theme.spacing(val), }; - positions[`.left-${idx}`] = { + positions[`left-${idx}`] = { left: theme.spacing(val), }; }); Object.keys(theme.zIndex).forEach((key) => { - positions[`.zIndex-${key}`] = { + positions[`zIndex-${key}`] = { zIndex: theme.zIndex[key], }; }); - return positions; + return combineWithBreakpoints(theme, positions); } diff --git a/docs/src/pages/system/global-classes/spacings.js b/docs/src/pages/system/global-classes/spacings.js index 636ae4f0263640..d5c25634da8c7e 100644 --- a/docs/src/pages/system/global-classes/spacings.js +++ b/docs/src/pages/system/global-classes/spacings.js @@ -1,5 +1,5 @@ -// TODO: add breakpoints -// vuetifty has breakpoints in the utility classes names +import combineWithBreakpoints from './combineWithBreakpoints'; + const properties = { m: 'margin', p: 'padding', @@ -21,7 +21,7 @@ export default function spacings(theme) { Object.keys(properties).forEach((property) => { values.forEach((val, idx) => { - spacings[`.${property}-${idx}`] = { + spacings[`${property}-${idx}`] = { [`${properties[property]}`]: theme.spacing(val), }; }); @@ -33,7 +33,7 @@ export default function spacings(theme) { ? [directions[direction]] : directions[direction]; - const cssKey = `.${property}${direction}-${idx}`; + const cssKey = `${property}${direction}-${idx}`; spacings[cssKey] = {}; cssProperties.forEach((cssProperty) => { spacings[cssKey][ @@ -44,5 +44,5 @@ export default function spacings(theme) { }); }); - return spacings; + return combineWithBreakpoints(theme, spacings); } diff --git a/docs/src/pages/system/global-classes/texts.js b/docs/src/pages/system/global-classes/texts.js deleted file mode 100644 index 8ab50ae8d06a4b..00000000000000 --- a/docs/src/pages/system/global-classes/texts.js +++ /dev/null @@ -1,11 +0,0 @@ -export default function texts(theme) { - const texts = {}; - - Object.keys(theme.typography).forEach((key) => { - if (typeof theme.typography[key] === 'object') { - texts[`.text-${key}`] = theme.typography[key]; - } - }); - - return texts; -} diff --git a/docs/src/pages/system/global-classes/texts.d.ts b/docs/src/pages/system/global-classes/typography.d.ts similarity index 100% rename from docs/src/pages/system/global-classes/texts.d.ts rename to docs/src/pages/system/global-classes/typography.d.ts diff --git a/docs/src/pages/system/global-classes/typography.js b/docs/src/pages/system/global-classes/typography.js new file mode 100644 index 00000000000000..ed4af977f934b1 --- /dev/null +++ b/docs/src/pages/system/global-classes/typography.js @@ -0,0 +1,13 @@ +import combineWithBreakpoints from './combineWithBreakpoints'; + +export default function typography(theme) { + const typographys = {}; + + Object.keys(theme.typography).forEach((key) => { + if (typeof theme.typography[key] === 'object') { + typographys[`typography-${key}`] = theme.typography[key]; + } + }); + + return combineWithBreakpoints(theme, typographys); +} From 2b99ca1c41e98f63c2f323123ba142ac6527c76b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 09:41:34 +0200 Subject: [PATCH 15/23] Update docs/src/pages/system/global-classes/global-classes.md Co-authored-by: Olivier Tassinari --- docs/src/pages/system/global-classes/global-classes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/system/global-classes/global-classes.md b/docs/src/pages/system/global-classes/global-classes.md index 445d9491b8191d..5a0970c035949c 100644 --- a/docs/src/pages/system/global-classes/global-classes.md +++ b/docs/src/pages/system/global-classes/global-classes.md @@ -6,7 +6,7 @@ You can add the `` provider in your application tree and use all utility classes available. -{{"demo": "pages/system/global-classes/Basics.js", "defaultCodeOpen": false}} +{{"demo": "pages/system/global-classes/Basics.js"}} ## Spacing From 9f6c0267b7d138a6ef8808103aed9fbd58d4476f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 09:53:29 +0200 Subject: [PATCH 16/23] addressed comments --- .../src/pages/system/global-classes/Basics.js | 2 +- .../pages/system/global-classes/Basics.tsx | 2 +- .../system/global-classes/PositionsExample.js | 6 ++-- .../global-classes/PositionsExample.tsx | 6 ++-- .../pages/system/global-classes/positions.js | 33 +++++++++++++++---- .../pages/system/global-classes/spacings.js | 33 ++++++++++++++++--- 6 files changed, 63 insertions(+), 19 deletions(-) diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index af65a7845a8c66..254d1b5adb8925 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -16,7 +16,7 @@ export default function App() { return (
-
+
diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index af65a7845a8c66..254d1b5adb8925 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -16,7 +16,7 @@ export default function App() { return (
-
+
diff --git a/docs/src/pages/system/global-classes/PositionsExample.js b/docs/src/pages/system/global-classes/PositionsExample.js index 34a25136e37897..cfe3e542abb9d2 100644 --- a/docs/src/pages/system/global-classes/PositionsExample.js +++ b/docs/src/pages/system/global-classes/PositionsExample.js @@ -10,11 +10,11 @@ export default function App() { return (
-
-
+
+
position-absolute
-
+
zIndex-tooltip
diff --git a/docs/src/pages/system/global-classes/PositionsExample.tsx b/docs/src/pages/system/global-classes/PositionsExample.tsx index 34a25136e37897..cfe3e542abb9d2 100644 --- a/docs/src/pages/system/global-classes/PositionsExample.tsx +++ b/docs/src/pages/system/global-classes/PositionsExample.tsx @@ -10,11 +10,11 @@ export default function App() { return (
-
-
+
+
position-absolute
-
+
zIndex-tooltip
diff --git a/docs/src/pages/system/global-classes/positions.js b/docs/src/pages/system/global-classes/positions.js index b4bb7693af64b0..58e59ecbef5182 100644 --- a/docs/src/pages/system/global-classes/positions.js +++ b/docs/src/pages/system/global-classes/positions.js @@ -1,6 +1,27 @@ import combineWithBreakpoints from './combineWithBreakpoints'; -const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 11, 13, 15, 17]; +const values = [ + 0, + 0.5, + 1, + 1.5, + 2, + 2.5, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 10, + 11, + 12, + 13, + 14, + 15, + 16, +]; export default function positions(theme) { const positions = { @@ -13,17 +34,17 @@ export default function positions(theme) { 'position-inherit': { position: 'inherit' }, }; - values.forEach((val, idx) => { - positions[`top-${idx}`] = { + values.forEach((val) => { + positions[`top-${val.toString().replace('.', '-')}`] = { top: theme.spacing(val), }; - positions[`bottom-${idx}`] = { + positions[`bottom-${val.toString().replace('.', '-')}`] = { bottom: theme.spacing(val), }; - positions[`right-${idx}`] = { + positions[`right-${val.toString().replace('.', '-')}`] = { right: theme.spacing(val), }; - positions[`left-${idx}`] = { + positions[`left-${val.toString().replace('.', '-')}`] = { left: theme.spacing(val), }; }); diff --git a/docs/src/pages/system/global-classes/spacings.js b/docs/src/pages/system/global-classes/spacings.js index d5c25634da8c7e..823ac51a30d480 100644 --- a/docs/src/pages/system/global-classes/spacings.js +++ b/docs/src/pages/system/global-classes/spacings.js @@ -14,26 +14,49 @@ const directions = { y: ['Top', 'Bottom'], }; -const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 11, 13, 15, 17]; +const values = [ + 0, + 0.5, + 1, + 1.5, + 2, + 2.5, + 3, + 4, + 5, + 6, + 7, + 8, + 9, + 10, + 11, + 12, + 13, + 14, + 15, + 16, +]; export default function spacings(theme) { const spacings = {}; Object.keys(properties).forEach((property) => { - values.forEach((val, idx) => { - spacings[`${property}-${idx}`] = { + values.forEach((val) => { + spacings[`${property}-${val.toString().replace('.', '-')}`] = { [`${properties[property]}`]: theme.spacing(val), }; }); Object.keys(directions).forEach((direction) => { - values.forEach((val, idx) => { + values.forEach((val) => { const cssProperties = direction !== 'x' && direction !== 'y' ? [directions[direction]] : directions[direction]; - const cssKey = `${property}${direction}-${idx}`; + const cssKey = `${property}${direction}-${val + .toString() + .replace('.', '-')}`; spacings[cssKey] = {}; cssProperties.forEach((cssProperty) => { spacings[cssKey][ From 9bd7de0662acb4fc7476856279757df206ff9871 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 10:10:32 +0200 Subject: [PATCH 17/23] extracted to separate package --- docs/src/pages/system/global-classes/Basics.js | 2 +- docs/src/pages/system/global-classes/Basics.tsx | 2 +- docs/src/pages/system/global-classes/colors.d.ts | 3 --- .../system/global-classes/combineWithBreakpoints.d.ts | 3 --- docs/src/pages/system/global-classes/displays.d.ts | 3 --- docs/src/pages/system/global-classes/elevations.d.ts | 3 --- docs/src/pages/system/global-classes/positions.d.ts | 3 --- docs/src/pages/system/global-classes/spacings.d.ts | 5 ----- docs/src/pages/system/global-classes/typography.d.ts | 3 --- .../material-ui-system/src/GlobalCss}/GlobalCss.d.ts | 0 .../material-ui-system/src/GlobalCss}/GlobalCss.js | 0 .../material-ui-system/src/GlobalCss}/colors.js | 8 ++++---- .../src/GlobalCss}/combineWithBreakpoints.js | 0 .../material-ui-system/src/GlobalCss}/displays.js | 0 .../material-ui-system/src/GlobalCss}/elevations.js | 2 +- .../material-ui-system/src/GlobalCss}/positions.js | 0 .../material-ui-system/src/GlobalCss}/spacings.js | 0 .../material-ui-system/src/GlobalCss}/typography.js | 0 packages/material-ui-system/src/index.d.ts | 2 ++ packages/material-ui-system/src/index.js | 1 + 20 files changed, 10 insertions(+), 30 deletions(-) delete mode 100644 docs/src/pages/system/global-classes/colors.d.ts delete mode 100644 docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts delete mode 100644 docs/src/pages/system/global-classes/displays.d.ts delete mode 100644 docs/src/pages/system/global-classes/elevations.d.ts delete mode 100644 docs/src/pages/system/global-classes/positions.d.ts delete mode 100644 docs/src/pages/system/global-classes/spacings.d.ts delete mode 100644 docs/src/pages/system/global-classes/typography.d.ts rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/GlobalCss.d.ts (100%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/GlobalCss.js (100%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/colors.js (73%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/combineWithBreakpoints.js (100%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/displays.js (100%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/elevations.js (75%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/positions.js (100%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/spacings.js (100%) rename {docs/src/pages/system/global-classes => packages/material-ui-system/src/GlobalCss}/typography.js (100%) diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index 254d1b5adb8925..8500dca5ad3e4d 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import GlobalCss from './GlobalCss'; +import { GlobalCss } from '@material-ui/system'; import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index 254d1b5adb8925..8500dca5ad3e4d 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import GlobalCss from './GlobalCss'; +import { GlobalCss } from '@material-ui/system'; import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles({ diff --git a/docs/src/pages/system/global-classes/colors.d.ts b/docs/src/pages/system/global-classes/colors.d.ts deleted file mode 100644 index 15617ea28985f8..00000000000000 --- a/docs/src/pages/system/global-classes/colors.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Theme } from '@material-ui/core/styles'; - -export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts b/docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts deleted file mode 100644 index 969382a95a0960..00000000000000 --- a/docs/src/pages/system/global-classes/combineWithBreakpoints.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Theme } from '@material-ui/core/styles'; - -export default function (theme: Theme, obj: object): object; diff --git a/docs/src/pages/system/global-classes/displays.d.ts b/docs/src/pages/system/global-classes/displays.d.ts deleted file mode 100644 index 15617ea28985f8..00000000000000 --- a/docs/src/pages/system/global-classes/displays.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Theme } from '@material-ui/core/styles'; - -export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/elevations.d.ts b/docs/src/pages/system/global-classes/elevations.d.ts deleted file mode 100644 index 15617ea28985f8..00000000000000 --- a/docs/src/pages/system/global-classes/elevations.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Theme } from '@material-ui/core/styles'; - -export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/positions.d.ts b/docs/src/pages/system/global-classes/positions.d.ts deleted file mode 100644 index 15617ea28985f8..00000000000000 --- a/docs/src/pages/system/global-classes/positions.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Theme } from '@material-ui/core/styles'; - -export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/spacings.d.ts b/docs/src/pages/system/global-classes/spacings.d.ts deleted file mode 100644 index c14ca4d73d36ae..00000000000000 --- a/docs/src/pages/system/global-classes/spacings.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { object } from 'prop-types'; - -import { Theme } from '@material-ui/core/styles'; - -export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/typography.d.ts b/docs/src/pages/system/global-classes/typography.d.ts deleted file mode 100644 index 15617ea28985f8..00000000000000 --- a/docs/src/pages/system/global-classes/typography.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Theme } from '@material-ui/core/styles'; - -export default function (theme: Theme): object; diff --git a/docs/src/pages/system/global-classes/GlobalCss.d.ts b/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts similarity index 100% rename from docs/src/pages/system/global-classes/GlobalCss.d.ts rename to packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts diff --git a/docs/src/pages/system/global-classes/GlobalCss.js b/packages/material-ui-system/src/GlobalCss/GlobalCss.js similarity index 100% rename from docs/src/pages/system/global-classes/GlobalCss.js rename to packages/material-ui-system/src/GlobalCss/GlobalCss.js diff --git a/docs/src/pages/system/global-classes/colors.js b/packages/material-ui-system/src/GlobalCss/colors.js similarity index 73% rename from docs/src/pages/system/global-classes/colors.js rename to packages/material-ui-system/src/GlobalCss/colors.js index c1757b1e1a7240..abd22c768ade93 100644 --- a/docs/src/pages/system/global-classes/colors.js +++ b/packages/material-ui-system/src/GlobalCss/colors.js @@ -2,12 +2,12 @@ import combineWithBreakpoints from './combineWithBreakpoints'; const r = (val, accumulator, colors) => { if (typeof val === 'string') { - colors[`bg-${accumulator}`] = { backgroundColor: val }; - colors[`text-${accumulator}`] = { color: val }; + colors[`bg-${accumulator}`] = { backgroundColor: `${val} !important` }; + colors[`text-${accumulator}`] = { color: `${val} !important` }; colors[`hover\\:bg-${accumulator}`] = { - '&:hover': { backgroundColor: val }, + '&:hover': { backgroundColor: `${val} !important` }, }; - colors[`hover\\:text-${accumulator}`] = { '&:hover': { color: val } }; + colors[`hover\\:text-${accumulator}`] = { '&:hover': { color: `${val} !important` } }; } else if (typeof val === 'object' && val !== null) { Object.keys(val).forEach((key) => { r( diff --git a/docs/src/pages/system/global-classes/combineWithBreakpoints.js b/packages/material-ui-system/src/GlobalCss/combineWithBreakpoints.js similarity index 100% rename from docs/src/pages/system/global-classes/combineWithBreakpoints.js rename to packages/material-ui-system/src/GlobalCss/combineWithBreakpoints.js diff --git a/docs/src/pages/system/global-classes/displays.js b/packages/material-ui-system/src/GlobalCss/displays.js similarity index 100% rename from docs/src/pages/system/global-classes/displays.js rename to packages/material-ui-system/src/GlobalCss/displays.js diff --git a/docs/src/pages/system/global-classes/elevations.js b/packages/material-ui-system/src/GlobalCss/elevations.js similarity index 75% rename from docs/src/pages/system/global-classes/elevations.js rename to packages/material-ui-system/src/GlobalCss/elevations.js index 5513a68d833839..a28822211dc223 100644 --- a/docs/src/pages/system/global-classes/elevations.js +++ b/packages/material-ui-system/src/GlobalCss/elevations.js @@ -4,7 +4,7 @@ export default function elevations(theme) { const elevations = {}; theme.shadows.forEach((shadow, idx) => { - elevations[`elevation-${idx}`] = { boxShadow: shadow }; + elevations[`elevation-${idx}`] = { boxShadow: `${shadow} !important` }; }); return combineWithBreakpoints(theme, elevations); diff --git a/docs/src/pages/system/global-classes/positions.js b/packages/material-ui-system/src/GlobalCss/positions.js similarity index 100% rename from docs/src/pages/system/global-classes/positions.js rename to packages/material-ui-system/src/GlobalCss/positions.js diff --git a/docs/src/pages/system/global-classes/spacings.js b/packages/material-ui-system/src/GlobalCss/spacings.js similarity index 100% rename from docs/src/pages/system/global-classes/spacings.js rename to packages/material-ui-system/src/GlobalCss/spacings.js diff --git a/docs/src/pages/system/global-classes/typography.js b/packages/material-ui-system/src/GlobalCss/typography.js similarity index 100% rename from docs/src/pages/system/global-classes/typography.js rename to packages/material-ui-system/src/GlobalCss/typography.js diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index c149cec73d0e57..565e246f441c78 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -205,3 +205,5 @@ export const visuallyHidden: CSS.Properties; // utils type Omit = Pick>; + +export { default as GlobalCss } from './GlobalCss/GlobalCss'; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index 46dce6a29323d7..e8bc0752c3acfa 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -21,3 +21,4 @@ export { default as style } from './style'; export { default as typography } from './typography'; export * from './typography'; export { default as visuallyHidden } from './visuallyHidden'; +export { default as GlobalCss } from './GlobalCss/GlobalCss'; From 306d95e2e1e9668c5023037a5b332c01704310e4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 10:18:45 +0200 Subject: [PATCH 18/23] prettier + formatted --- .../src/GlobalCss/GlobalCss.d.ts | 2 +- .../src/GlobalCss/colors.js | 6 +--- .../src/GlobalCss/positions.js | 23 +----------- .../src/GlobalCss/spacings.js | 35 +++---------------- 4 files changed, 7 insertions(+), 59 deletions(-) diff --git a/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts b/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts index 7b405719b46e68..1adfaf454ddb98 100644 --- a/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts +++ b/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts @@ -1 +1 @@ -export default function (): JSX.Element; +export default function(): JSX.Element; diff --git a/packages/material-ui-system/src/GlobalCss/colors.js b/packages/material-ui-system/src/GlobalCss/colors.js index abd22c768ade93..7d424df93895e5 100644 --- a/packages/material-ui-system/src/GlobalCss/colors.js +++ b/packages/material-ui-system/src/GlobalCss/colors.js @@ -10,11 +10,7 @@ const r = (val, accumulator, colors) => { colors[`hover\\:text-${accumulator}`] = { '&:hover': { color: `${val} !important` } }; } else if (typeof val === 'object' && val !== null) { Object.keys(val).forEach((key) => { - r( - val[key], - `${accumulator}${accumulator.length > 0 ? '-' : ''}${key}`, - colors, - ); + r(val[key], `${accumulator}${accumulator.length > 0 ? '-' : ''}${key}`, colors); }); } }; diff --git a/packages/material-ui-system/src/GlobalCss/positions.js b/packages/material-ui-system/src/GlobalCss/positions.js index 58e59ecbef5182..e6fbc237feeb8b 100644 --- a/packages/material-ui-system/src/GlobalCss/positions.js +++ b/packages/material-ui-system/src/GlobalCss/positions.js @@ -1,27 +1,6 @@ import combineWithBreakpoints from './combineWithBreakpoints'; -const values = [ - 0, - 0.5, - 1, - 1.5, - 2, - 2.5, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 13, - 14, - 15, - 16, -]; +const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; export default function positions(theme) { const positions = { diff --git a/packages/material-ui-system/src/GlobalCss/spacings.js b/packages/material-ui-system/src/GlobalCss/spacings.js index 823ac51a30d480..59879bedc2a536 100644 --- a/packages/material-ui-system/src/GlobalCss/spacings.js +++ b/packages/material-ui-system/src/GlobalCss/spacings.js @@ -14,28 +14,7 @@ const directions = { y: ['Top', 'Bottom'], }; -const values = [ - 0, - 0.5, - 1, - 1.5, - 2, - 2.5, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 13, - 14, - 15, - 16, -]; +const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; export default function spacings(theme) { const spacings = {}; @@ -50,18 +29,12 @@ export default function spacings(theme) { Object.keys(directions).forEach((direction) => { values.forEach((val) => { const cssProperties = - direction !== 'x' && direction !== 'y' - ? [directions[direction]] - : directions[direction]; + direction !== 'x' && direction !== 'y' ? [directions[direction]] : directions[direction]; - const cssKey = `${property}${direction}-${val - .toString() - .replace('.', '-')}`; + const cssKey = `${property}${direction}-${val.toString().replace('.', '-')}`; spacings[cssKey] = {}; cssProperties.forEach((cssProperty) => { - spacings[cssKey][ - `${properties[property]}${cssProperty}` - ] = theme.spacing(val); + spacings[cssKey][`${properties[property]}${cssProperty}`] = theme.spacing(val); }); }); }); From 52070183df29c323c34a6bb74c2199a712784794 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 10:33:58 +0200 Subject: [PATCH 19/23] prettier --- packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts b/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts index 1adfaf454ddb98..7a8198f630d1b9 100644 --- a/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts +++ b/packages/material-ui-system/src/GlobalCss/GlobalCss.d.ts @@ -1 +1 @@ -export default function(): JSX.Element; +export default function GlobalCss(): JSX.Element; From 9a45d26a6f1a4441b2afdcb78458723d853004b5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 10:55:54 +0200 Subject: [PATCH 20/23] fixes --- .../src/pages/system/global-classes/Basics.js | 2 +- .../pages/system/global-classes/Basics.tsx | 2 +- .../system/global-classes/SpacingsExample.js | 2 +- .../system/global-classes/SpacingsExample.tsx | 2 +- .../global-classes/TypographyExample.js | 2 +- .../src/GlobalCss/colors.js | 18 +-- .../src/GlobalCss/displays.js | 136 +++++++++--------- .../src/GlobalCss/elevations.js | 6 +- .../src/GlobalCss/positions.js | 38 ++--- .../src/GlobalCss/spacings.js | 12 +- 10 files changed, 110 insertions(+), 110 deletions(-) diff --git a/docs/src/pages/system/global-classes/Basics.js b/docs/src/pages/system/global-classes/Basics.js index 8500dca5ad3e4d..872991a9a437ef 100644 --- a/docs/src/pages/system/global-classes/Basics.js +++ b/docs/src/pages/system/global-classes/Basics.js @@ -17,7 +17,7 @@ export default function App() {
-
+
); diff --git a/docs/src/pages/system/global-classes/Basics.tsx b/docs/src/pages/system/global-classes/Basics.tsx index 8500dca5ad3e4d..872991a9a437ef 100644 --- a/docs/src/pages/system/global-classes/Basics.tsx +++ b/docs/src/pages/system/global-classes/Basics.tsx @@ -17,7 +17,7 @@ export default function App() {
-
+
); diff --git a/docs/src/pages/system/global-classes/SpacingsExample.js b/docs/src/pages/system/global-classes/SpacingsExample.js index 9e3cd543496398..de3025b98a6b61 100644 --- a/docs/src/pages/system/global-classes/SpacingsExample.js +++ b/docs/src/pages/system/global-classes/SpacingsExample.js @@ -13,7 +13,7 @@ export default function App() { return (
-
+
); diff --git a/docs/src/pages/system/global-classes/SpacingsExample.tsx b/docs/src/pages/system/global-classes/SpacingsExample.tsx index 9e3cd543496398..de3025b98a6b61 100644 --- a/docs/src/pages/system/global-classes/SpacingsExample.tsx +++ b/docs/src/pages/system/global-classes/SpacingsExample.tsx @@ -13,7 +13,7 @@ export default function App() { return (
-
+
); diff --git a/docs/src/pages/system/global-classes/TypographyExample.js b/docs/src/pages/system/global-classes/TypographyExample.js index 4faa13ba000759..bbe82efe42b64e 100644 --- a/docs/src/pages/system/global-classes/TypographyExample.js +++ b/docs/src/pages/system/global-classes/TypographyExample.js @@ -18,7 +18,7 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
+
Text {val}
))} diff --git a/packages/material-ui-system/src/GlobalCss/colors.js b/packages/material-ui-system/src/GlobalCss/colors.js index 7d424df93895e5..9a5b0afa77f20f 100644 --- a/packages/material-ui-system/src/GlobalCss/colors.js +++ b/packages/material-ui-system/src/GlobalCss/colors.js @@ -1,22 +1,22 @@ import combineWithBreakpoints from './combineWithBreakpoints'; -const r = (val, accumulator, colors) => { +const r = (val, accumulator, colorsSelectors) => { if (typeof val === 'string') { - colors[`bg-${accumulator}`] = { backgroundColor: `${val} !important` }; - colors[`text-${accumulator}`] = { color: `${val} !important` }; - colors[`hover\\:bg-${accumulator}`] = { + colorsSelectors[`bg-${accumulator}`] = { backgroundColor: `${val} !important` }; + colorsSelectors[`text-${accumulator}`] = { color: `${val} !important` }; + colorsSelectors[`hover\\:bg-${accumulator}`] = { '&:hover': { backgroundColor: `${val} !important` }, }; - colors[`hover\\:text-${accumulator}`] = { '&:hover': { color: `${val} !important` } }; + colorsSelectors[`hover\\:text-${accumulator}`] = { '&:hover': { color: `${val} !important` } }; } else if (typeof val === 'object' && val !== null) { Object.keys(val).forEach((key) => { - r(val[key], `${accumulator}${accumulator.length > 0 ? '-' : ''}${key}`, colors); + r(val[key], `${accumulator}${accumulator.length > 0 ? '-' : ''}${key}`, colorsSelectors); }); } }; export default function colors(theme) { - const colors = {}; - r(theme.palette, '', colors); - return combineWithBreakpoints(theme, colors); + const colorsSelectors = {}; + r(theme.palette, '', colorsSelectors); + return combineWithBreakpoints(theme, colorsSelectors); } diff --git a/packages/material-ui-system/src/GlobalCss/displays.js b/packages/material-ui-system/src/GlobalCss/displays.js index dbbd72b88c5ac8..e68a5745a75e08 100644 --- a/packages/material-ui-system/src/GlobalCss/displays.js +++ b/packages/material-ui-system/src/GlobalCss/displays.js @@ -1,60 +1,60 @@ import combineWithBreakpoints from './combineWithBreakpoints'; const displaysProps = { - 'd-inline': { display: 'inline' }, - 'd-block': { display: 'block' }, - 'd-contents': { display: 'contents' }, - 'd-flex': { display: 'flex' }, - 'd-grid': { display: 'grid' }, - 'd-inline-block': { display: 'inline-block' }, - 'd-inline-flex': { display: 'inline-flex' }, - 'd-inline-grid': { display: 'inline-grid' }, - 'd-inline-table': { display: 'inline-table' }, - 'd-list-item': { display: 'list-item' }, - 'd-run-in': { display: 'run-in' }, - 'd-table': { display: 'table' }, - 'd-table-caption': { display: 'table-caption' }, - 'd-table-column-group': { display: 'table-column-group' }, - 'd-table-header-group': { display: 'table-header-group' }, - 'd-table-footer-group': { display: 'table-footer-group' }, - 'd-table-row-group': { display: 'table-row-group' }, - 'd-table-cell': { display: 'table-cell' }, - 'd-table-column': { display: 'table-column' }, - 'd-table-row': { display: 'table-row' }, - 'd-none': { display: 'none' }, - 'd-initial': { display: 'initial' }, - 'd-inherit': { display: 'inherit' }, - 'print\\:d-inline': { '@media print': { display: 'inline' } }, - 'print\\:d-block': { '@media print': { display: 'block' } }, - 'print\\:d-contents': { '@media print': { display: 'contents' } }, - 'print\\:d-flex': { '@media print': { display: 'flex' } }, - 'print\\:d-grid': { '@media print': { display: 'grid' } }, - 'print\\:d-inline-block': { '@media print': { display: 'inline-block' } }, - 'print\\:d-inline-flex': { '@media print': { display: 'inline-flex' } }, - 'print\\:d-inline-grid': { '@media print': { display: 'inline-grid' } }, - 'print\\:d-inline-table': { '@media print': { display: 'inline-table' } }, - 'print\\:d-list-item': { '@media print': { display: 'list-item' } }, - 'print\\:d-run-in': { '@media print': { display: 'run-in' } }, - 'print\\:d-table': { '@media print': { display: 'table' } }, - 'print\\:d-table-caption': { '@media print': { display: 'table-caption' } }, + 'd-inline': { display: 'inline !important' }, + 'd-block': { display: 'block !important' }, + 'd-contents': { display: 'contents !important' }, + 'd-flex': { display: 'flex !important' }, + 'd-grid': { display: 'grid !important' }, + 'd-inline-block': { display: 'inline-block !important' }, + 'd-inline-flex': { display: 'inline-flex !important' }, + 'd-inline-grid': { display: 'inline-grid !important' }, + 'd-inline-table': { display: 'inline-table !important' }, + 'd-list-item': { display: 'list-item !important' }, + 'd-run-in': { display: 'run-in !important' }, + 'd-table': { display: 'table !important' }, + 'd-table-caption': { display: 'table-caption !important' }, + 'd-table-column-group': { display: 'table-column-group !important' }, + 'd-table-header-group': { display: 'table-header-group !important' }, + 'd-table-footer-group': { display: 'table-footer-group !important' }, + 'd-table-row-group': { display: 'table-row-group !important' }, + 'd-table-cell': { display: 'table-cell !important' }, + 'd-table-column': { display: 'table-column !important' }, + 'd-table-row': { display: 'table-row !important' }, + 'd-none': { display: 'none !important' }, + 'd-initial': { display: 'initial !important' }, + 'd-inherit': { display: 'inherit !important' }, + 'print\\:d-inline': { '@media print': { display: 'inline !important' } }, + 'print\\:d-block': { '@media print': { display: 'block !important' } }, + 'print\\:d-contents': { '@media print': { display: 'contents !important' } }, + 'print\\:d-flex': { '@media print': { display: 'flex !important' } }, + 'print\\:d-grid': { '@media print': { display: 'grid !important' } }, + 'print\\:d-inline-block': { '@media print': { display: 'inline-block !important' } }, + 'print\\:d-inline-flex': { '@media print': { display: 'inline-flex !important' } }, + 'print\\:d-inline-grid': { '@media print': { display: 'inline-grid !important' } }, + 'print\\:d-inline-table': { '@media print': { display: 'inline-table !important' } }, + 'print\\:d-list-item': { '@media print': { display: 'list-item !important' } }, + 'print\\:d-run-in': { '@media print': { display: 'run-in !important' } }, + 'print\\:d-table': { '@media print': { display: 'table !important' } }, + 'print\\:d-table-caption': { '@media print': { display: 'table-caption !important' } }, 'print\\:d-table-column-group': { - '@media print': { display: 'table-column-group' }, + '@media print': { display: 'table-column-group !important' }, }, 'print\\:d-table-header-group': { - '@media print': { display: 'table-header-group' }, + '@media print': { display: 'table-header-group !important' }, }, 'print\\:d-table-footer-group': { - '@media print': { display: 'table-footer-group' }, + '@media print': { display: 'table-footer-group !important' }, }, 'print\\:d-table-row-group': { - '@media print': { display: 'table-row-group' }, + '@media print': { display: 'table-row-group !important' }, }, - 'print\\:d-table-cell': { '@media print': { display: 'table-cell' } }, - 'print\\:d-table-column': { '@media print': { display: 'table-column' } }, - 'print\\:d-table-row': { '@media print': { display: 'table-row' } }, - 'print\\:d-none': { '@media print': { display: 'none' } }, - 'print\\:d-initial': { '@media print': { display: 'initial' } }, - 'print\\:d-inherit': { '@media print': { display: 'inherit' } }, + 'print\\:d-table-cell': { '@media print': { display: 'table-cell !important' } }, + 'print\\:d-table-column': { '@media print': { display: 'table-column !important' } }, + 'print\\:d-table-row': { '@media print': { display: 'table-row !important' } }, + 'print\\:d-none': { '@media print': { display: 'none !important' } }, + 'print\\:d-initial': { '@media print': { display: 'initial !important' } }, + 'print\\:d-inherit': { '@media print': { display: 'inherit !important' } }, 'd-sr-only': { border: 0, clip: 'rect(0 0 0 0)', @@ -69,37 +69,37 @@ const displaysProps = { }; const overflows = { - 'overflow-visible': { overflow: 'visible' }, - 'overflow-hidden': { overflow: 'hidden' }, - 'overflow-scroll': { overflow: 'scroll' }, - 'overflow-auto': { overflow: 'auto' }, - 'overflow-initial': { overflow: 'initial' }, - 'overflow-inherit': { overflow: 'inherit' }, + 'overflow-visible': { overflow: 'visible !important' }, + 'overflow-hidden': { overflow: 'hidden !important' }, + 'overflow-scroll': { overflow: 'scroll !important' }, + 'overflow-auto': { overflow: 'auto !important' }, + 'overflow-initial': { overflow: 'initial !important' }, + 'overflow-inherit': { overflow: 'inherit !important' }, }; const textOverflows = { - 'text-overflow-clip': { textOverflow: 'clip' }, - 'text-overflow-ellipsis': { textOverflow: 'ellipsis' }, - 'text-overflow-initial': { textOverflow: 'initial' }, - 'text-overflow-inherit': { textOverflow: 'inherit' }, + 'text-overflow-clip': { textOverflow: 'clip !important' }, + 'text-overflow-ellipsis': { textOverflow: 'ellipsis !important' }, + 'text-overflow-initial': { textOverflow: 'initial !important' }, + 'text-overflow-inherit': { textOverflow: 'inherit !important' }, }; const visibilities = { - 'v-visible': { visibility: 'visible' }, - 'v-hidden': { visibility: 'hidden' }, - 'v-collapse': { visibility: 'collapse' }, - 'v-initial': { visibility: 'initial' }, - 'v-inherit': { visibility: 'inherit' }, + 'v-visible': { visibility: 'visible !important' }, + 'v-hidden': { visibility: 'hidden !important' }, + 'v-collapse': { visibility: 'collapse !important' }, + 'v-initial': { visibility: 'initial !important' }, + 'v-inherit': { visibility: 'inherit !important' }, }; const whiteSpaces = { - 'ws-normal': { whiteSpace: 'normal' }, - 'ws-nowrap': { whiteSpace: 'nowrap' }, - 'ws-pre': { whiteSpace: 'pre' }, - 'ws-pre-line': { whiteSpace: 'pre-line' }, - 'ws-pre-wrap': { whiteSpace: 'pre-wrap' }, - 'ws-initial': { whiteSpace: 'initial' }, - 'ws-inherit': { whiteSpace: 'inherit' }, + 'ws-normal': { whiteSpace: 'normal !important' }, + 'ws-nowrap': { whiteSpace: 'nowrap !important' }, + 'ws-pre': { whiteSpace: 'pre !important' }, + 'ws-pre-line': { whiteSpace: 'pre-line !important' }, + 'ws-pre-wrap': { whiteSpace: 'pre-wrap !important' }, + 'ws-initial': { whiteSpace: 'initial !important' }, + 'ws-inherit': { whiteSpace: 'inherit !important' }, }; export default function displays(theme) { diff --git a/packages/material-ui-system/src/GlobalCss/elevations.js b/packages/material-ui-system/src/GlobalCss/elevations.js index a28822211dc223..414aa32dbd5a34 100644 --- a/packages/material-ui-system/src/GlobalCss/elevations.js +++ b/packages/material-ui-system/src/GlobalCss/elevations.js @@ -1,11 +1,11 @@ import combineWithBreakpoints from './combineWithBreakpoints'; export default function elevations(theme) { - const elevations = {}; + const elevationsSelectors = {}; theme.shadows.forEach((shadow, idx) => { - elevations[`elevation-${idx}`] = { boxShadow: `${shadow} !important` }; + elevationsSelectors[`elevation-${idx}`] = { boxShadow: `${shadow} !important` }; }); - return combineWithBreakpoints(theme, elevations); + return combineWithBreakpoints(theme, elevationsSelectors); } diff --git a/packages/material-ui-system/src/GlobalCss/positions.js b/packages/material-ui-system/src/GlobalCss/positions.js index e6fbc237feeb8b..554771c5e94817 100644 --- a/packages/material-ui-system/src/GlobalCss/positions.js +++ b/packages/material-ui-system/src/GlobalCss/positions.js @@ -3,36 +3,36 @@ import combineWithBreakpoints from './combineWithBreakpoints'; const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; export default function positions(theme) { - const positions = { - 'position-static': { position: 'static' }, - 'position-absolute': { position: 'absolute' }, - 'position-fixed': { position: 'fixed' }, - 'position-relative': { position: 'relative' }, - 'position-sticky': { position: 'sticky' }, - 'position-initial': { position: 'initial' }, - 'position-inherit': { position: 'inherit' }, + const positionsSelectors = { + 'position-static': { position: 'static !important' }, + 'position-absolute': { position: 'absolute !important' }, + 'position-fixed': { position: 'fixed !important' }, + 'position-relative': { position: 'relative !important' }, + 'position-sticky': { position: 'sticky !important' }, + 'position-initial': { position: 'initial !important' }, + 'position-inherit': { position: 'inherit !important' }, }; values.forEach((val) => { - positions[`top-${val.toString().replace('.', '-')}`] = { - top: theme.spacing(val), + positionsSelectors[`top-${val.toString().replace('.', '-')}`] = { + top: `${theme.spacing(val)}px !important`, }; - positions[`bottom-${val.toString().replace('.', '-')}`] = { - bottom: theme.spacing(val), + positionsSelectors[`bottom-${val.toString().replace('.', '-')}`] = { + bottom: `${theme.spacing(val)}px !important`, }; - positions[`right-${val.toString().replace('.', '-')}`] = { - right: theme.spacing(val), + positionsSelectors[`right-${val.toString().replace('.', '-')}`] = { + right: `${theme.spacing(val)}px !important`, }; - positions[`left-${val.toString().replace('.', '-')}`] = { - left: theme.spacing(val), + positionsSelectors[`left-${val.toString().replace('.', '-')}`] = { + left: `${theme.spacing(val)}px !important`, }; }); Object.keys(theme.zIndex).forEach((key) => { - positions[`zIndex-${key}`] = { - zIndex: theme.zIndex[key], + positionsSelectors[`zIndex-${key}`] = { + zIndex: `${theme.zIndex[key]} !important`, }; }); - return combineWithBreakpoints(theme, positions); + return combineWithBreakpoints(theme, positionsSelectors); } diff --git a/packages/material-ui-system/src/GlobalCss/spacings.js b/packages/material-ui-system/src/GlobalCss/spacings.js index 59879bedc2a536..449d25098affdd 100644 --- a/packages/material-ui-system/src/GlobalCss/spacings.js +++ b/packages/material-ui-system/src/GlobalCss/spacings.js @@ -17,12 +17,12 @@ const directions = { const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]; export default function spacings(theme) { - const spacings = {}; + const spacingsSelectors = {}; Object.keys(properties).forEach((property) => { values.forEach((val) => { - spacings[`${property}-${val.toString().replace('.', '-')}`] = { - [`${properties[property]}`]: theme.spacing(val), + spacingsSelectors[`${property}-${val.toString().replace('.', '-')}`] = { + [`${properties[property]}`]: `${theme.spacing(val)}px !important`, }; }); @@ -32,13 +32,13 @@ export default function spacings(theme) { direction !== 'x' && direction !== 'y' ? [directions[direction]] : directions[direction]; const cssKey = `${property}${direction}-${val.toString().replace('.', '-')}`; - spacings[cssKey] = {}; + spacingsSelectors[cssKey] = {}; cssProperties.forEach((cssProperty) => { - spacings[cssKey][`${properties[property]}${cssProperty}`] = theme.spacing(val); + spacingsSelectors[cssKey][`${properties[property]}${cssProperty}`] = `${theme.spacing(val)}px !important`; }); }); }); }); - return combineWithBreakpoints(theme, spacings); + return combineWithBreakpoints(theme, spacingsSelectors); } From 3431773929971b222cc917a4b839adf1c7c77e7f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 17 Jul 2020 11:06:51 +0200 Subject: [PATCH 21/23] fixes --- docs/src/pages/system/global-classes/TypographyExample.tsx | 2 +- packages/material-ui-system/src/GlobalCss/spacings.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/system/global-classes/TypographyExample.tsx b/docs/src/pages/system/global-classes/TypographyExample.tsx index 4faa13ba000759..bbe82efe42b64e 100644 --- a/docs/src/pages/system/global-classes/TypographyExample.tsx +++ b/docs/src/pages/system/global-classes/TypographyExample.tsx @@ -18,7 +18,7 @@ export default function App() { 'caption', 'overline', ].map((val) => ( -
+
Text {val}
))} diff --git a/packages/material-ui-system/src/GlobalCss/spacings.js b/packages/material-ui-system/src/GlobalCss/spacings.js index 449d25098affdd..6a2c0c9c82a0d9 100644 --- a/packages/material-ui-system/src/GlobalCss/spacings.js +++ b/packages/material-ui-system/src/GlobalCss/spacings.js @@ -34,7 +34,9 @@ export default function spacings(theme) { const cssKey = `${property}${direction}-${val.toString().replace('.', '-')}`; spacingsSelectors[cssKey] = {}; cssProperties.forEach((cssProperty) => { - spacingsSelectors[cssKey][`${properties[property]}${cssProperty}`] = `${theme.spacing(val)}px !important`; + spacingsSelectors[cssKey][`${properties[property]}${cssProperty}`] = `${theme.spacing( + val, + )}px !important`; }); }); }); From f2c98e0b5b50b87bf82234d4e64c72e92fa4ee9e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sun, 19 Jul 2020 14:49:44 +0200 Subject: [PATCH 22/23] fixed important --- .../src/GlobalCss/GlobalCss.js | 2 +- .../src/GlobalCss/colors.js | 8 +- .../src/GlobalCss/displays.js | 136 +++++++++--------- .../src/GlobalCss/elevations.js | 2 +- .../src/GlobalCss/positions.js | 24 ++-- .../src/GlobalCss/spacings.js | 6 +- 6 files changed, 88 insertions(+), 90 deletions(-) diff --git a/packages/material-ui-system/src/GlobalCss/GlobalCss.js b/packages/material-ui-system/src/GlobalCss/GlobalCss.js index a28ddde0aa86c1..6f99f48550d182 100644 --- a/packages/material-ui-system/src/GlobalCss/GlobalCss.js +++ b/packages/material-ui-system/src/GlobalCss/GlobalCss.js @@ -17,6 +17,6 @@ const GlobalCss = withStyles((theme) => { ...displays(theme), }, }; -})(() => null); +}, { index: 0 })(() => null); export default GlobalCss; diff --git a/packages/material-ui-system/src/GlobalCss/colors.js b/packages/material-ui-system/src/GlobalCss/colors.js index 9a5b0afa77f20f..258b78ac4ff35d 100644 --- a/packages/material-ui-system/src/GlobalCss/colors.js +++ b/packages/material-ui-system/src/GlobalCss/colors.js @@ -2,12 +2,12 @@ import combineWithBreakpoints from './combineWithBreakpoints'; const r = (val, accumulator, colorsSelectors) => { if (typeof val === 'string') { - colorsSelectors[`bg-${accumulator}`] = { backgroundColor: `${val} !important` }; - colorsSelectors[`text-${accumulator}`] = { color: `${val} !important` }; + colorsSelectors[`bg-${accumulator}`] = { backgroundColor: val }; + colorsSelectors[`text-${accumulator}`] = { color: val }; colorsSelectors[`hover\\:bg-${accumulator}`] = { - '&:hover': { backgroundColor: `${val} !important` }, + '&:hover': { backgroundColor: val }, }; - colorsSelectors[`hover\\:text-${accumulator}`] = { '&:hover': { color: `${val} !important` } }; + colorsSelectors[`hover\\:text-${accumulator}`] = { '&:hover': { color: val } }; } else if (typeof val === 'object' && val !== null) { Object.keys(val).forEach((key) => { r(val[key], `${accumulator}${accumulator.length > 0 ? '-' : ''}${key}`, colorsSelectors); diff --git a/packages/material-ui-system/src/GlobalCss/displays.js b/packages/material-ui-system/src/GlobalCss/displays.js index e68a5745a75e08..dbbd72b88c5ac8 100644 --- a/packages/material-ui-system/src/GlobalCss/displays.js +++ b/packages/material-ui-system/src/GlobalCss/displays.js @@ -1,60 +1,60 @@ import combineWithBreakpoints from './combineWithBreakpoints'; const displaysProps = { - 'd-inline': { display: 'inline !important' }, - 'd-block': { display: 'block !important' }, - 'd-contents': { display: 'contents !important' }, - 'd-flex': { display: 'flex !important' }, - 'd-grid': { display: 'grid !important' }, - 'd-inline-block': { display: 'inline-block !important' }, - 'd-inline-flex': { display: 'inline-flex !important' }, - 'd-inline-grid': { display: 'inline-grid !important' }, - 'd-inline-table': { display: 'inline-table !important' }, - 'd-list-item': { display: 'list-item !important' }, - 'd-run-in': { display: 'run-in !important' }, - 'd-table': { display: 'table !important' }, - 'd-table-caption': { display: 'table-caption !important' }, - 'd-table-column-group': { display: 'table-column-group !important' }, - 'd-table-header-group': { display: 'table-header-group !important' }, - 'd-table-footer-group': { display: 'table-footer-group !important' }, - 'd-table-row-group': { display: 'table-row-group !important' }, - 'd-table-cell': { display: 'table-cell !important' }, - 'd-table-column': { display: 'table-column !important' }, - 'd-table-row': { display: 'table-row !important' }, - 'd-none': { display: 'none !important' }, - 'd-initial': { display: 'initial !important' }, - 'd-inherit': { display: 'inherit !important' }, - 'print\\:d-inline': { '@media print': { display: 'inline !important' } }, - 'print\\:d-block': { '@media print': { display: 'block !important' } }, - 'print\\:d-contents': { '@media print': { display: 'contents !important' } }, - 'print\\:d-flex': { '@media print': { display: 'flex !important' } }, - 'print\\:d-grid': { '@media print': { display: 'grid !important' } }, - 'print\\:d-inline-block': { '@media print': { display: 'inline-block !important' } }, - 'print\\:d-inline-flex': { '@media print': { display: 'inline-flex !important' } }, - 'print\\:d-inline-grid': { '@media print': { display: 'inline-grid !important' } }, - 'print\\:d-inline-table': { '@media print': { display: 'inline-table !important' } }, - 'print\\:d-list-item': { '@media print': { display: 'list-item !important' } }, - 'print\\:d-run-in': { '@media print': { display: 'run-in !important' } }, - 'print\\:d-table': { '@media print': { display: 'table !important' } }, - 'print\\:d-table-caption': { '@media print': { display: 'table-caption !important' } }, + 'd-inline': { display: 'inline' }, + 'd-block': { display: 'block' }, + 'd-contents': { display: 'contents' }, + 'd-flex': { display: 'flex' }, + 'd-grid': { display: 'grid' }, + 'd-inline-block': { display: 'inline-block' }, + 'd-inline-flex': { display: 'inline-flex' }, + 'd-inline-grid': { display: 'inline-grid' }, + 'd-inline-table': { display: 'inline-table' }, + 'd-list-item': { display: 'list-item' }, + 'd-run-in': { display: 'run-in' }, + 'd-table': { display: 'table' }, + 'd-table-caption': { display: 'table-caption' }, + 'd-table-column-group': { display: 'table-column-group' }, + 'd-table-header-group': { display: 'table-header-group' }, + 'd-table-footer-group': { display: 'table-footer-group' }, + 'd-table-row-group': { display: 'table-row-group' }, + 'd-table-cell': { display: 'table-cell' }, + 'd-table-column': { display: 'table-column' }, + 'd-table-row': { display: 'table-row' }, + 'd-none': { display: 'none' }, + 'd-initial': { display: 'initial' }, + 'd-inherit': { display: 'inherit' }, + 'print\\:d-inline': { '@media print': { display: 'inline' } }, + 'print\\:d-block': { '@media print': { display: 'block' } }, + 'print\\:d-contents': { '@media print': { display: 'contents' } }, + 'print\\:d-flex': { '@media print': { display: 'flex' } }, + 'print\\:d-grid': { '@media print': { display: 'grid' } }, + 'print\\:d-inline-block': { '@media print': { display: 'inline-block' } }, + 'print\\:d-inline-flex': { '@media print': { display: 'inline-flex' } }, + 'print\\:d-inline-grid': { '@media print': { display: 'inline-grid' } }, + 'print\\:d-inline-table': { '@media print': { display: 'inline-table' } }, + 'print\\:d-list-item': { '@media print': { display: 'list-item' } }, + 'print\\:d-run-in': { '@media print': { display: 'run-in' } }, + 'print\\:d-table': { '@media print': { display: 'table' } }, + 'print\\:d-table-caption': { '@media print': { display: 'table-caption' } }, 'print\\:d-table-column-group': { - '@media print': { display: 'table-column-group !important' }, + '@media print': { display: 'table-column-group' }, }, 'print\\:d-table-header-group': { - '@media print': { display: 'table-header-group !important' }, + '@media print': { display: 'table-header-group' }, }, 'print\\:d-table-footer-group': { - '@media print': { display: 'table-footer-group !important' }, + '@media print': { display: 'table-footer-group' }, }, 'print\\:d-table-row-group': { - '@media print': { display: 'table-row-group !important' }, + '@media print': { display: 'table-row-group' }, }, - 'print\\:d-table-cell': { '@media print': { display: 'table-cell !important' } }, - 'print\\:d-table-column': { '@media print': { display: 'table-column !important' } }, - 'print\\:d-table-row': { '@media print': { display: 'table-row !important' } }, - 'print\\:d-none': { '@media print': { display: 'none !important' } }, - 'print\\:d-initial': { '@media print': { display: 'initial !important' } }, - 'print\\:d-inherit': { '@media print': { display: 'inherit !important' } }, + 'print\\:d-table-cell': { '@media print': { display: 'table-cell' } }, + 'print\\:d-table-column': { '@media print': { display: 'table-column' } }, + 'print\\:d-table-row': { '@media print': { display: 'table-row' } }, + 'print\\:d-none': { '@media print': { display: 'none' } }, + 'print\\:d-initial': { '@media print': { display: 'initial' } }, + 'print\\:d-inherit': { '@media print': { display: 'inherit' } }, 'd-sr-only': { border: 0, clip: 'rect(0 0 0 0)', @@ -69,37 +69,37 @@ const displaysProps = { }; const overflows = { - 'overflow-visible': { overflow: 'visible !important' }, - 'overflow-hidden': { overflow: 'hidden !important' }, - 'overflow-scroll': { overflow: 'scroll !important' }, - 'overflow-auto': { overflow: 'auto !important' }, - 'overflow-initial': { overflow: 'initial !important' }, - 'overflow-inherit': { overflow: 'inherit !important' }, + 'overflow-visible': { overflow: 'visible' }, + 'overflow-hidden': { overflow: 'hidden' }, + 'overflow-scroll': { overflow: 'scroll' }, + 'overflow-auto': { overflow: 'auto' }, + 'overflow-initial': { overflow: 'initial' }, + 'overflow-inherit': { overflow: 'inherit' }, }; const textOverflows = { - 'text-overflow-clip': { textOverflow: 'clip !important' }, - 'text-overflow-ellipsis': { textOverflow: 'ellipsis !important' }, - 'text-overflow-initial': { textOverflow: 'initial !important' }, - 'text-overflow-inherit': { textOverflow: 'inherit !important' }, + 'text-overflow-clip': { textOverflow: 'clip' }, + 'text-overflow-ellipsis': { textOverflow: 'ellipsis' }, + 'text-overflow-initial': { textOverflow: 'initial' }, + 'text-overflow-inherit': { textOverflow: 'inherit' }, }; const visibilities = { - 'v-visible': { visibility: 'visible !important' }, - 'v-hidden': { visibility: 'hidden !important' }, - 'v-collapse': { visibility: 'collapse !important' }, - 'v-initial': { visibility: 'initial !important' }, - 'v-inherit': { visibility: 'inherit !important' }, + 'v-visible': { visibility: 'visible' }, + 'v-hidden': { visibility: 'hidden' }, + 'v-collapse': { visibility: 'collapse' }, + 'v-initial': { visibility: 'initial' }, + 'v-inherit': { visibility: 'inherit' }, }; const whiteSpaces = { - 'ws-normal': { whiteSpace: 'normal !important' }, - 'ws-nowrap': { whiteSpace: 'nowrap !important' }, - 'ws-pre': { whiteSpace: 'pre !important' }, - 'ws-pre-line': { whiteSpace: 'pre-line !important' }, - 'ws-pre-wrap': { whiteSpace: 'pre-wrap !important' }, - 'ws-initial': { whiteSpace: 'initial !important' }, - 'ws-inherit': { whiteSpace: 'inherit !important' }, + 'ws-normal': { whiteSpace: 'normal' }, + 'ws-nowrap': { whiteSpace: 'nowrap' }, + 'ws-pre': { whiteSpace: 'pre' }, + 'ws-pre-line': { whiteSpace: 'pre-line' }, + 'ws-pre-wrap': { whiteSpace: 'pre-wrap' }, + 'ws-initial': { whiteSpace: 'initial' }, + 'ws-inherit': { whiteSpace: 'inherit' }, }; export default function displays(theme) { diff --git a/packages/material-ui-system/src/GlobalCss/elevations.js b/packages/material-ui-system/src/GlobalCss/elevations.js index 414aa32dbd5a34..a6b5d8a44f2435 100644 --- a/packages/material-ui-system/src/GlobalCss/elevations.js +++ b/packages/material-ui-system/src/GlobalCss/elevations.js @@ -4,7 +4,7 @@ export default function elevations(theme) { const elevationsSelectors = {}; theme.shadows.forEach((shadow, idx) => { - elevationsSelectors[`elevation-${idx}`] = { boxShadow: `${shadow} !important` }; + elevationsSelectors[`elevation-${idx}`] = { boxShadow: shadow }; }); return combineWithBreakpoints(theme, elevationsSelectors); diff --git a/packages/material-ui-system/src/GlobalCss/positions.js b/packages/material-ui-system/src/GlobalCss/positions.js index 554771c5e94817..fd3c7f73d77fd5 100644 --- a/packages/material-ui-system/src/GlobalCss/positions.js +++ b/packages/material-ui-system/src/GlobalCss/positions.js @@ -4,33 +4,33 @@ const values = [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, export default function positions(theme) { const positionsSelectors = { - 'position-static': { position: 'static !important' }, - 'position-absolute': { position: 'absolute !important' }, - 'position-fixed': { position: 'fixed !important' }, - 'position-relative': { position: 'relative !important' }, - 'position-sticky': { position: 'sticky !important' }, - 'position-initial': { position: 'initial !important' }, - 'position-inherit': { position: 'inherit !important' }, + 'position-static': { position: 'static' }, + 'position-absolute': { position: 'absolute' }, + 'position-fixed': { position: 'fixed' }, + 'position-relative': { position: 'relative' }, + 'position-sticky': { position: 'sticky' }, + 'position-initial': { position: 'initial' }, + 'position-inherit': { position: 'inherit' }, }; values.forEach((val) => { positionsSelectors[`top-${val.toString().replace('.', '-')}`] = { - top: `${theme.spacing(val)}px !important`, + top: theme.spacing(val), }; positionsSelectors[`bottom-${val.toString().replace('.', '-')}`] = { - bottom: `${theme.spacing(val)}px !important`, + bottom: theme.spacing(val), }; positionsSelectors[`right-${val.toString().replace('.', '-')}`] = { - right: `${theme.spacing(val)}px !important`, + right: theme.spacing(val), }; positionsSelectors[`left-${val.toString().replace('.', '-')}`] = { - left: `${theme.spacing(val)}px !important`, + left: theme.spacing(val), }; }); Object.keys(theme.zIndex).forEach((key) => { positionsSelectors[`zIndex-${key}`] = { - zIndex: `${theme.zIndex[key]} !important`, + zIndex: `${theme.zIndex[key]}`, }; }); diff --git a/packages/material-ui-system/src/GlobalCss/spacings.js b/packages/material-ui-system/src/GlobalCss/spacings.js index 6a2c0c9c82a0d9..6fbcb5d87ff359 100644 --- a/packages/material-ui-system/src/GlobalCss/spacings.js +++ b/packages/material-ui-system/src/GlobalCss/spacings.js @@ -22,7 +22,7 @@ export default function spacings(theme) { Object.keys(properties).forEach((property) => { values.forEach((val) => { spacingsSelectors[`${property}-${val.toString().replace('.', '-')}`] = { - [`${properties[property]}`]: `${theme.spacing(val)}px !important`, + [`${properties[property]}`]: theme.spacing(val), }; }); @@ -34,9 +34,7 @@ export default function spacings(theme) { const cssKey = `${property}${direction}-${val.toString().replace('.', '-')}`; spacingsSelectors[cssKey] = {}; cssProperties.forEach((cssProperty) => { - spacingsSelectors[cssKey][`${properties[property]}${cssProperty}`] = `${theme.spacing( - val, - )}px !important`; + spacingsSelectors[cssKey][`${properties[property]}${cssProperty}`] = theme.spacing(val); }); }); }); From 09bce372b4c146b0d137e168ac7b29f44e14ccee Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Sun, 19 Jul 2020 14:56:34 +0200 Subject: [PATCH 23/23] prettier --- .../src/GlobalCss/GlobalCss.js | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/material-ui-system/src/GlobalCss/GlobalCss.js b/packages/material-ui-system/src/GlobalCss/GlobalCss.js index 6f99f48550d182..06ff3f56e0ead4 100644 --- a/packages/material-ui-system/src/GlobalCss/GlobalCss.js +++ b/packages/material-ui-system/src/GlobalCss/GlobalCss.js @@ -6,17 +6,20 @@ import typography from './typography'; import positions from './positions'; import displays from './displays'; -const GlobalCss = withStyles((theme) => { - return { - '@global': { - ...spacings(theme), - ...colors(theme), - ...elevations(theme), - ...typography(theme), - ...positions(theme), - ...displays(theme), - }, - }; -}, { index: 0 })(() => null); +const GlobalCss = withStyles( + (theme) => { + return { + '@global': { + ...spacings(theme), + ...colors(theme), + ...elevations(theme), + ...typography(theme), + ...positions(theme), + ...displays(theme), + }, + }; + }, + { index: 0 }, +)(() => null); export default GlobalCss;