Utility classes #3
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />; | ||
| } | ||
|
|
||
| Page.getInitialProps = () => { | ||
| const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); | ||
| return { demos, docs }; | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import Button from '@material-ui/core/Button'; | ||
| import GlobalCss from './GlobalCss'; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <div> | ||
| <GlobalCss /> | ||
| <Button variant="contained" className="m-4 py-5"> | ||
| Spacings | ||
| </Button> | ||
| <Button | ||
| variant="contained" | ||
| className="m-1 py-3 warning-light warning-dark--hover warning-contrastText--text" | ||
| > | ||
| Colors | ||
| </Button> | ||
| {Array.from(Array(24).keys()).map((val) => ( | ||
| <Button className={`m-2 p-1 elevation-${val}`} key={val}> | ||
| Elevation {val} | ||
| </Button> | ||
| ))} | ||
|
|
||
| {[ | ||
| 'h1', | ||
| 'h2', | ||
| 'h3', | ||
| 'h4', | ||
| 'h5', | ||
| 'h6', | ||
| 'subtitle1', | ||
| 'subtitle2', | ||
| 'body1', | ||
| 'body2', | ||
| 'button', | ||
| 'caption', | ||
| 'overline', | ||
| ].map((val) => ( | ||
| <div className={`m2 p-1 text-${val}`}>Text {val}</div> | ||
| ))} | ||
|
|
||
| <div className="d-inline mr-1">Inline</div> | ||
| <div className="d-inline d-print-none">Not visible when printed</div> | ||
| <div className="position-relative p-4 mb-16"> | ||
| <div className="position-absolute p-4 top-4 left-0 grey-700 common-white--text"> | ||
| Positioned | ||
| </div> | ||
| <div className="position-absolute p-4 top-14 left-5 zIndex-tooltip primary-light common-white--text"> | ||
| zIndex tooltip | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import Button from '@material-ui/core/Button'; | ||
| import GlobalCss from './GlobalCss'; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <div> | ||
| <GlobalCss /> | ||
| <Button variant="contained" className="m-4 py-5"> | ||
| Spacings | ||
| </Button> | ||
| <Button | ||
| variant="contained" | ||
| className="m-1 py-3 warning-light warning-dark--hover warning-contrastText--text" | ||
| > | ||
| Colors | ||
| </Button> | ||
| {Array.from(Array(24).keys()).map((val) => ( | ||
| <Button className={`m-2 p-1 elevation-${val}`} key={val}> | ||
| Elevation {val} | ||
| </Button> | ||
| ))} | ||
| {[ | ||
| 'h1', | ||
| 'h2', | ||
| 'h3', | ||
| 'h4', | ||
| 'h5', | ||
| 'h6', | ||
| 'subtitle1', | ||
| 'subtitle2', | ||
| 'body1', | ||
| 'body2', | ||
| 'button', | ||
| 'caption', | ||
| 'overline', | ||
| ].map((val) => ( | ||
| <div className={`m2 p-1 text-${val}`}>Text {val}</div> | ||
mnajdova marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| ))} | ||
| <div className="d-inline mr-1">Inline</div> | ||
| <div className="d-inline d-print-none">Not visible when printed</div> | ||
| <div className="position-relative p-4 mb-16"> | ||
| <div className="position-absolute p-4 top-4 left-0 grey-700 common-white--text"> | ||
| Positioned | ||
| </div> | ||
| <div className="position-absolute p-4 top-14 left-5 zIndex-tooltip primary-light common-white--text"> | ||
| zIndex tooltip | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export default function (): JSX.Element; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { withStyles } from '@material-ui/styles'; | ||
| import spacings from './spacings'; | ||
| import colors from './colors'; | ||
| import elevations from './elevations'; | ||
| import texts from './texts'; | ||
| import positions from './positions'; | ||
| import { | ||
| displays, | ||
| overflows, | ||
| textOverflows, | ||
| visibilities, | ||
| whiteSpaces, | ||
| } from './displays'; | ||
|
|
||
| const GlobalCss = withStyles((theme) => { | ||
|
||
| return { | ||
| '@global': { | ||
| ...spacings(theme), | ||
| ...colors(theme), | ||
| ...elevations(theme), | ||
| ...texts(theme), | ||
| ...positions(theme), | ||
| ...displays, | ||
| ...overflows, | ||
| ...textOverflows, | ||
| ...visibilities, | ||
| ...whiteSpaces, | ||
| }, | ||
| }; | ||
| })(() => null); | ||
|
|
||
| export default GlobalCss; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { Theme } from '@material-ui/core/styles'; | ||
|
|
||
| export default function (theme: Theme): object; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| const r = (val, accumulator, colors) => { | ||
| if (typeof val === 'string') { | ||
| colors[accumulator] = { backgroundColor: val }; | ||
mnajdova marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| colors[`${accumulator}--text`] = { color: val }; | ||
mnajdova marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| colors[`${accumulator}--hover`] = { '&:hover': { backgroundColor: val } }; | ||
mnajdova marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| 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); | ||
| return colors; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export const displays: object; | ||
| export const overflows: object; | ||
| export const textOverflows: object; | ||
| export const visibilities: object; | ||
| export const whiteSpaces: object; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| 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' } }, | ||
| '.d-sr-only': { | ||
| border: 0, | ||
| clip: 'rect(0 0 0 0)', | ||
| height: 1, | ||
| margin: -1, | ||
| overflow: 'hidden', | ||
| padding: 0, | ||
| position: 'absolute', | ||
| whiteSpace: 'nowrap', | ||
| width: 1, | ||
| }, | ||
| }; | ||
|
|
||
| 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' }, | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { Theme } from '@material-ui/core/styles'; | ||
|
|
||
| export default function (theme: Theme): object; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export default function elevations(theme) { | ||
| const elevations = {}; | ||
|
|
||
| theme.shadows.forEach((shadow, idx) => { | ||
| elevations[`.elevation-${idx}`] = { boxShadow: shadow }; | ||
| }); | ||
|
|
||
| return elevations; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # Global classes | ||
|
|
||
| <p class="description">The global classes available allows users to use the system properties consistenlty on all components.</p> | ||
|
|
||
| ## Basics | ||
|
|
||
| {{"demo": "pages/system/global-classes/Basics.js", "defaultCodeOpen": false}} | ||
mnajdova marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { Theme } from '@material-ui/core/styles'; | ||
|
|
||
| export default function (theme: Theme): object; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { object } from 'prop-types'; | ||
|
|
||
| import { Theme } from '@material-ui/core/styles'; | ||
|
|
||
| export default function (theme: Theme): object; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seeing the structure makes me think of how we don't explain well the value proposition of the helpers on the
/basicspage. http://material-ui.com/system/basics#real-world-use-case should be at the top like they did on https://tailwindcss.com/docs/utility-first. Or even https://chakra-ui.com/ on the homepage 😆There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was missing explanation a bit too to be honest..