From cbd585a19aba3a82d6c7dbe411e1096e75b267f7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 30 Jan 2019 23:39:03 +0100 Subject: [PATCH 1/2] [docs] Enable the i18n help messages --- docs/notifications.json | 35 ++++++++++++++++++++ docs/src/modules/components/AppWrapper.js | 7 +++- docs/src/modules/components/Demo.js | 1 + docs/src/modules/components/HomeBackers.js | 12 +++---- docs/src/modules/components/Tidelift.js | 3 ++ docs/src/modules/translations.js | 38 ---------------------- docs/src/pages/demos/dividers/dividers.md | 2 +- docs/src/pages/utils/modal/modal.md | 8 +++-- packages/material-ui-docs/README.md | 4 +++ packages/material-ui/README.md | 19 +++++++++++ 10 files changed, 81 insertions(+), 48 deletions(-) create mode 100644 packages/material-ui/README.md diff --git a/docs/notifications.json b/docs/notifications.json index 642b8f42913d2e..96fa2dd912f00e 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -2,5 +2,40 @@ { "id": 27, "text": "You can follow us on Twitter to receive exclusive tips and updates about Material-UI and the React ecosystem." + }, + { + "id": 34, + "text": "Lets translate! Ajude a comunidade a traduzir a documentaรงรฃo para o Portuguรชs. ๐Ÿ‡ง๐Ÿ‡ท", + "userLanguage": "pt" + }, + { + "id": 35, + "text": "Let's translate! ๅธฎๅŠฉ Material-UI ๅฐ†ๆ–‡ๆกฃ็ฟป่ฏ‘ๆˆไธญๆ–‡. ๐Ÿ‡จ๐Ÿ‡ณ", + "userLanguage": "zh" + }, + { + "id": 36, + "text": "Let's translate! ะŸะพะผะพะณะธั‚ะต ัะพะพะฑั‰ะตัั‚ะฒัƒ ะฟะตั€ะตะฒะตัั‚ะธ ะดะพะบัƒะผะตะฝั‚ะฐั†ะธัŽ ะฝะฐ ั€ัƒััะบะธะน ัะทั‹ะบ. ๐Ÿ‡ท๐Ÿ‡บ", + "userLanguage": "ru" + }, + { + "id": 37, + "text": "Let's translate! Aidez la communautรฉ ร  traduire la documentation en franรงais. ๐Ÿ‡ซ๐Ÿ‡ท", + "userLanguage": "fr" + }, + { + "id": 38, + "text": "Let's translate! Ayuda a la comunidad a traducir la documentaciรณn al espaรฑol.. ๐Ÿ‡ช๐Ÿ‡ธ", + "userLanguage": "es" + }, + { + "id": 39, + "text": "Let's translate! Helfen Sie der Community, die Dokumentation ins Deutsche zu รผbersetzen. ๐Ÿ‡ฉ๐Ÿ‡ช", + "userLanguage": "de" + }, + { + "id": 40, + "text": "Let's translate! ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใŒใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ‚’ๆ—ฅๆœฌ่ชžใซ็ฟป่จณใ™ใ‚‹ใฎใ‚’ๆ‰‹ไผใฃใฆใใ ใ•ใ„. ๐Ÿ‡ฏ๐Ÿ‡ต", + "userLanguage": "ja" } ] diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js index ffb2b0fa6c44df..0dd79dd8d0b852 100644 --- a/docs/src/modules/components/AppWrapper.js +++ b/docs/src/modules/components/AppWrapper.js @@ -10,7 +10,7 @@ import acceptLanguage from 'accept-language'; import { lightTheme, darkTheme, setPrismTheme } from '@material-ui/docs/MarkdownElement/prism'; import { updatePageContext } from 'docs/src/modules/styles/getPageContext'; import { getCookie } from 'docs/src/modules/utils/helpers'; -import { ACTION_TYPES, LANGUAGES } from 'docs/src/modules/constants'; +import { ACTION_TYPES, LANGUAGES, CODE_VARIANTS } from 'docs/src/modules/constants'; // Inject the insertion-point-jss after docssearch if (process.browser && !global.__INSERTION_POINT__) { @@ -44,6 +44,8 @@ class SideEffectsRaw extends React.Component { (userLanguage && options.userLanguage !== userLanguage) || (codeVariant && options.codeVariant !== codeVariant) ) { + window.ga('set', 'dimension1', codeVariant); + window.ga('set', 'dimension2', userLanguage); this.props.dispatch({ type: ACTION_TYPES.OPTIONS_CHANGE, payload: { @@ -51,6 +53,9 @@ class SideEffectsRaw extends React.Component { codeVariant, }, }); + } else { + window.ga('set', 'dimension1', CODE_VARIANTS.JS); + window.ga('set', 'dimension2', 'en'); } } diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index c1242a713a9b6a..2e3cfab157bd08 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -175,6 +175,7 @@ class Demo extends React.Component { handleCodeLanguageClick = (event, codeVariant) => { if (this.props.codeVariant !== codeVariant) { document.cookie = `codeVariant=${codeVariant};path=/;max-age=31536000`; + window.ga('set', 'dimension1', codeVariant); this.props.dispatch({ type: ACTION_TYPES.OPTIONS_CHANGE, diff --git a/docs/src/modules/components/HomeBackers.js b/docs/src/modules/components/HomeBackers.js index 03cfb4b6da30f2..1c78181faa1935 100644 --- a/docs/src/modules/components/HomeBackers.js +++ b/docs/src/modules/components/HomeBackers.js @@ -38,10 +38,10 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI. via [Patreon](https://www.patreon.com/oliviertassinari)

- + creative-tim - + bitsrc

@@ -49,14 +49,14 @@ via [Patreon](https://www.patreon.com/oliviertassinari) via [OpenCollective](https://opencollective.com/material-ui)

- + callemall - + localize - - localize + + yakaz

diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js index 5d175286592aaf..1c3d35442783bd 100644 --- a/docs/src/modules/components/Tidelift.js +++ b/docs/src/modules/components/Tidelift.js @@ -38,6 +38,9 @@ function Tidelift(props) { return ( Ajude a comunidade a traduzir a documentaรงรฃo para o Portuguรชs. ๐Ÿ‡ง๐Ÿ‡ท", -// "userLanguage": "pt" -// }, -// { -// "id": 35, -// "text": "Let's translate! ๅธฎๅŠฉ Material-UI ๅฐ†ๆ–‡ๆกฃ็ฟป่ฏ‘ๆˆไธญๆ–‡. ๐Ÿ‡จ๐Ÿ‡ณ", -// "userLanguage": "zh" -// }, -// { -// "id": 36, -// "text": "Let's translate! ะŸะพะผะพะณะธั‚ะต ัะพะพะฑั‰ะตัั‚ะฒัƒ ะฟะตั€ะตะฒะตัั‚ะธ ะดะพะบัƒะผะตะฝั‚ะฐั†ะธัŽ ะฝะฐ ั€ัƒััะบะธะน ัะทั‹ะบ. ๐Ÿ‡ท๐Ÿ‡บ", -// "userLanguage": "ru" -// }, -// { -// "id": 37, -// "text": "Let's translate! Aidez la communautรฉ ร  traduire la documentation en franรงais. ๐Ÿ‡ซ๐Ÿ‡ท", -// "userLanguage": "fr" -// }, -// { -// "id": 38, -// "text": "Let's translate! Ayuda a la comunidad a traducir la documentaciรณn al espaรฑol.. ๐Ÿ‡ช๐Ÿ‡ธ", -// "userLanguage": "es" -// }, -// { -// "id": 39, -// "text": "Let's translate! Helfen Sie der Community, die Dokumentation ins Deutsche zu รผbersetzen. ๐Ÿ‡ฉ๐Ÿ‡ช", -// "userLanguage": "de" -// }, -// { -// "id": 40, -// "text": "Let's translate! ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใŒใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ‚’ๆ—ฅๆœฌ่ชžใซ็ฟป่จณใ™ใ‚‹ใฎใ‚’ๆ‰‹ไผใฃใฆใใ ใ•ใ„. ๐Ÿ‡ฏ๐Ÿ‡ต", -// "userLanguage": "ja" -// } -// diff --git a/docs/src/pages/demos/dividers/dividers.md b/docs/src/pages/demos/dividers/dividers.md index a29e0c2fea740f..439817a73d9167 100644 --- a/docs/src/pages/demos/dividers/dividers.md +++ b/docs/src/pages/demos/dividers/dividers.md @@ -23,7 +23,7 @@ The examples below show two ways of achieving this. ## Inset Dividers -The `inset` property has now been deprecated. You should now use `variant="inset"` +The `inset` property has now been deprecated. You should now use `variant="inset"`. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/utils/modal/modal.md b/docs/src/pages/utils/modal/modal.md index 21ce140eb3638f..692b1569f4e3b2 100644 --- a/docs/src/pages/utils/modal/modal.md +++ b/docs/src/pages/utils/modal/modal.md @@ -18,6 +18,12 @@ component and some styles: and keeping it there until the modal is closed. - โ™ฟ๏ธ Adds the appropriate ARIA roles automatically. + +> **Terminology note**. The term "modal" is sometimes used to mean "dialog", but this is a misnomer. +A Modal window describes parts of a UI. +An element is considered modal if [it blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window). + +If you are creating a modal dialog, you probably want to use the [Dialog](/demos/dialogs/) component rather than directly using Modal. Modal is a lower-level construct that is leveraged by the following components: - [Dialog](/demos/dialogs/) @@ -25,8 +31,6 @@ Modal is a lower-level construct that is leveraged by the following components: - [Menu](/demos/menus/) - [Popover](/utils/popover/) -If you are creating a modal dialog, you probably want to use the [Dialog](/demos/dialogs/) component rather than directly using Modal. - ## Simple modal {{"demo": "pages/utils/modal/SimpleModal.js"}} diff --git a/packages/material-ui-docs/README.md b/packages/material-ui-docs/README.md index 49f47c896c52d2..a609af800dae69 100644 --- a/packages/material-ui-docs/README.md +++ b/packages/material-ui-docs/README.md @@ -24,3 +24,7 @@ npm install @material-ui/core // with yarn yarn add @material-ui/core ``` + +## Documentation + +We have no documentation for these components. diff --git a/packages/material-ui/README.md b/packages/material-ui/README.md new file mode 100644 index 00000000000000..dba66189f03e78 --- /dev/null +++ b/packages/material-ui/README.md @@ -0,0 +1,19 @@ +# @material-ui/core + +React components that implement Google's Material Design. + +## Installation + +Install the package in your project directory with: + +```sh +// with npm +npm install @material-ui/core + +// with yarn +yarn add @material-ui/core +``` + +## Documentation + +[The documentation](https://material-ui.com/) From 02c2f93cbbeadbaf605f9f3d68026a336c6e1802 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 31 Jan 2019 20:50:35 +0100 Subject: [PATCH 2/2] keep improving --- .size-limit.js | 2 +- BACKERS.md | 15 +++-- README.md | 15 +++-- docs/src/modules/components/AppFrame.js | 32 +++++----- docs/src/modules/components/Demo.js | 12 ++-- docs/src/modules/components/HomeBackers.js | 21 ++++--- .../buttons/FloatingActionButtonZoom.hooks.js | 3 + .../demos/buttons/FloatingActionButtonZoom.js | 3 + docs/src/pages/demos/menus/menus-de.md | 4 +- docs/src/pages/demos/menus/menus-es.md | 4 +- docs/src/pages/demos/menus/menus-fr.md | 4 +- docs/src/pages/demos/menus/menus-ja.md | 4 +- docs/src/pages/demos/menus/menus-pt.md | 4 +- docs/src/pages/demos/menus/menus-ru.md | 4 +- docs/src/pages/demos/menus/menus.md | 2 +- .../src/pages/demos/snackbars/snackbars-de.md | 4 +- .../src/pages/demos/snackbars/snackbars-es.md | 4 +- .../src/pages/demos/snackbars/snackbars-fr.md | 4 +- .../src/pages/demos/snackbars/snackbars-ja.md | 4 +- .../src/pages/demos/snackbars/snackbars-pt.md | 4 +- .../src/pages/demos/snackbars/snackbars-ru.md | 4 +- docs/src/pages/demos/snackbars/snackbars.md | 2 +- .../pages/getting-started/usage/usage-de.md | 4 +- .../pages/getting-started/usage/usage-es.md | 4 +- .../pages/getting-started/usage/usage-fr.md | 4 +- .../pages/getting-started/usage/usage-ja.md | 4 +- .../pages/getting-started/usage/usage-pt.md | 4 +- .../pages/getting-started/usage/usage-ru.md | 4 +- docs/src/pages/getting-started/usage/usage.md | 2 +- pages/_app.js | 18 ++++++ pages/index.js | 59 +++++++++++++++---- 31 files changed, 163 insertions(+), 95 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 1a72856c84b3a3..d37368519fb00d 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -80,6 +80,6 @@ module.exports = [ name: 'The docs home page', webpack: false, path: `.next/static/${buildId}/pages/index.js`, - limit: '6 KB', + limit: '7 KB', }, ]; diff --git a/BACKERS.md b/BACKERS.md index cd26b10485b5c4..3467f9ff071003 100644 --- a/BACKERS.md +++ b/BACKERS.md @@ -30,15 +30,18 @@ via [Patreon](https://www.patreon.com/oliviertassinari) via [OpenCollective](https://opencollective.com/material-ui) -

- +

+ callemall - - localize + + localize + + + yakaz - - localize + + zinggrid

diff --git a/README.md b/README.md index c44b39955aeb52..98444ae296dddd 100644 --- a/README.md +++ b/README.md @@ -78,15 +78,18 @@ via [Patreon](https://www.patreon.com/oliviertassinari) via [OpenCollective](https://opencollective.com/material-ui) -

- +

+ callemall - - localize + + localize + + + yakaz - - localize + + zinggrid

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index e46fb412458277..65995776e25cd4 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -51,22 +51,22 @@ const languages = [ code: 'zh', text: '๐Ÿ‡จ๐Ÿ‡ณ ไธญๆ–‡', }, - { - code: 'ru', - text: '๐Ÿ‡ท๐Ÿ‡บ ะ ัƒััะบะธะน', - }, - { - code: 'pt', - text: '๐Ÿ‡ง๐Ÿ‡ท Portuguรชs', - }, - { - code: 'fr', - text: '๐Ÿ‡ซ๐Ÿ‡ท Franรงais', - }, - { - code: 'es', - text: '๐Ÿ‡ช๐Ÿ‡ธ Espaรฑol', - }, + // { + // code: 'ru', + // text: '๐Ÿ‡ท๐Ÿ‡บ ะ ัƒััะบะธะน', + // }, + // { + // code: 'pt', + // text: '๐Ÿ‡ง๐Ÿ‡ท Portuguรชs', + // }, + // { + // code: 'fr', + // text: '๐Ÿ‡ซ๐Ÿ‡ท Franรงais', + // }, + // { + // code: 'es', + // text: '๐Ÿ‡ช๐Ÿ‡ธ Espaรฑol', + // }, // { // code: 'de', // text: '๐Ÿ‡ฉ๐Ÿ‡ช Deutsch', diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 2e3cfab157bd08..76728914d6c955 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -48,21 +48,17 @@ const styles = theme => ({ marginRight: 0, }, }, - demo: theme.mixins.gutters({ + demo: { borderRadius: theme.shape.borderRadius, backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900], display: 'flex', justifyContent: 'center', - paddingTop: theme.spacing.unit * 2, - paddingBottom: theme.spacing.unit * 2, + padding: 20, [theme.breakpoints.up('sm')]: { - paddingLeft: theme.spacing.unit * 3, - paddingRight: theme.spacing.unit * 3, - paddingTop: theme.spacing.unit * 6, - paddingBottom: theme.spacing.unit * 3, + padding: theme.spacing.unit * 3, }, - }), + }, demoHiddenHeader: { paddingTop: theme.spacing.unit * 2, [theme.breakpoints.up('sm')]: { diff --git a/docs/src/modules/components/HomeBackers.js b/docs/src/modules/components/HomeBackers.js index 1c78181faa1935..adfb45c4835176 100644 --- a/docs/src/modules/components/HomeBackers.js +++ b/docs/src/modules/components/HomeBackers.js @@ -17,7 +17,7 @@ const styles = theme => ({ }); function HomeBackers(props) { - const classes = props.classes; + const { classes } = props; return (
@@ -38,25 +38,28 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI. via [Patreon](https://www.patreon.com/oliviertassinari)

- + creative-tim - + bitsrc

via [OpenCollective](https://opencollective.com/material-ui) -

- +

+ callemall - - localize + + localize + + + yakaz - - yakaz + + zinggrid

diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js index 3c10fb8c06b880..fc15e6b4be557e 100644 --- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js +++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js @@ -44,6 +44,9 @@ const useStyles = makeStyles(theme => ({ fabGreen: { color: theme.palette.common.white, backgroundColor: green[500], + '&:hover': { + backgroundColor: green[600], + }, }, })); diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js index 5523cdf76cd7a3..37810e9b36ee31 100644 --- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js +++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js @@ -44,6 +44,9 @@ const styles = theme => ({ fabGreen: { color: theme.palette.common.white, backgroundColor: green[500], + '&:hover': { + backgroundColor: green[600], + }, }, }); diff --git a/docs/src/pages/demos/menus/menus-de.md b/docs/src/pages/demos/menus/menus-de.md index d09a0b41db09c7..5479184bbc5898 100644 --- a/docs/src/pages/demos/menus/menus-de.md +++ b/docs/src/pages/demos/menus/menus-de.md @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3 ## Change Transition -Use a different transition altogether. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-es.md b/docs/src/pages/demos/menus/menus-es.md index d09a0b41db09c7..5479184bbc5898 100644 --- a/docs/src/pages/demos/menus/menus-es.md +++ b/docs/src/pages/demos/menus/menus-es.md @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3 ## Change Transition -Use a different transition altogether. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-fr.md b/docs/src/pages/demos/menus/menus-fr.md index bcc08dd748111b..c17e9ded421594 100644 --- a/docs/src/pages/demos/menus/menus-fr.md +++ b/docs/src/pages/demos/menus/menus-fr.md @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3 ## Changer la transition -Use a different transition altogether. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-ja.md b/docs/src/pages/demos/menus/menus-ja.md index d09a0b41db09c7..5479184bbc5898 100644 --- a/docs/src/pages/demos/menus/menus-ja.md +++ b/docs/src/pages/demos/menus/menus-ja.md @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3 ## Change Transition -Use a different transition altogether. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-pt.md b/docs/src/pages/demos/menus/menus-pt.md index ab09f0d4e6a299..c3d97570f8c48d 100644 --- a/docs/src/pages/demos/menus/menus-pt.md +++ b/docs/src/pages/demos/menus/menus-pt.md @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3 ## Change Transition -Use a different transition altogether. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-ru.md b/docs/src/pages/demos/menus/menus-ru.md index d09a0b41db09c7..5479184bbc5898 100644 --- a/docs/src/pages/demos/menus/menus-ru.md +++ b/docs/src/pages/demos/menus/menus-ru.md @@ -62,7 +62,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3 ## Change Transition -Use a different transition altogether. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus.md b/docs/src/pages/demos/menus/menus.md index 5c6f0115b32315..a16526d01b12b4 100644 --- a/docs/src/pages/demos/menus/menus.md +++ b/docs/src/pages/demos/menus/menus.md @@ -71,7 +71,7 @@ You can use the `Typography` component to workaround this issue: ## Change Transition -Use a different transition altogether. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} diff --git a/docs/src/pages/demos/snackbars/snackbars-de.md b/docs/src/pages/demos/snackbars/snackbars-de.md index 28f8acc4fcd419..45b1fc549705d7 100644 --- a/docs/src/pages/demos/snackbars/snackbars-de.md +++ b/docs/src/pages/demos/snackbars/snackbars-de.md @@ -62,7 +62,7 @@ Change the direction of the transition. Slide is the default transition. ### Change Transition -Use a different transition all together. +Use a different transition. {{"demo": "pages/demos/snackbars/FadeSnackbar.js"}} @@ -76,4 +76,4 @@ For more advanced use cases you might be able to take advantage of: In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another. -{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} \ No newline at end of file +{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} diff --git a/docs/src/pages/demos/snackbars/snackbars-es.md b/docs/src/pages/demos/snackbars/snackbars-es.md index 28f8acc4fcd419..45b1fc549705d7 100644 --- a/docs/src/pages/demos/snackbars/snackbars-es.md +++ b/docs/src/pages/demos/snackbars/snackbars-es.md @@ -62,7 +62,7 @@ Change the direction of the transition. Slide is the default transition. ### Change Transition -Use a different transition all together. +Use a different transition. {{"demo": "pages/demos/snackbars/FadeSnackbar.js"}} @@ -76,4 +76,4 @@ For more advanced use cases you might be able to take advantage of: In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another. -{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} \ No newline at end of file +{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} diff --git a/docs/src/pages/demos/snackbars/snackbars-fr.md b/docs/src/pages/demos/snackbars/snackbars-fr.md index 5910f8c18d01cb..348b0cb0162669 100644 --- a/docs/src/pages/demos/snackbars/snackbars-fr.md +++ b/docs/src/pages/demos/snackbars/snackbars-fr.md @@ -62,7 +62,7 @@ Change the direction of the transition. Slide is the default transition. ### Changer la transition -Use a different transition all together. +Use a different transition. {{"demo": "pages/demos/snackbars/FadeSnackbar.js"}} @@ -76,4 +76,4 @@ For more advanced use cases you might be able to take advantage of: In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another. -{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} \ No newline at end of file +{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} diff --git a/docs/src/pages/demos/snackbars/snackbars-ja.md b/docs/src/pages/demos/snackbars/snackbars-ja.md index 28f8acc4fcd419..45b1fc549705d7 100644 --- a/docs/src/pages/demos/snackbars/snackbars-ja.md +++ b/docs/src/pages/demos/snackbars/snackbars-ja.md @@ -62,7 +62,7 @@ Change the direction of the transition. Slide is the default transition. ### Change Transition -Use a different transition all together. +Use a different transition. {{"demo": "pages/demos/snackbars/FadeSnackbar.js"}} @@ -76,4 +76,4 @@ For more advanced use cases you might be able to take advantage of: In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another. -{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} \ No newline at end of file +{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} diff --git a/docs/src/pages/demos/snackbars/snackbars-pt.md b/docs/src/pages/demos/snackbars/snackbars-pt.md index 645834ddc760fe..072c09164ac512 100644 --- a/docs/src/pages/demos/snackbars/snackbars-pt.md +++ b/docs/src/pages/demos/snackbars/snackbars-pt.md @@ -62,7 +62,7 @@ Change the direction of the transition. Slide is the default transition. ### Change Transition -Use a different transition all together. +Use a different transition. {{"demo": "pages/demos/snackbars/FadeSnackbar.js"}} @@ -76,4 +76,4 @@ For more advanced use cases you might be able to take advantage of: In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another. -{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} \ No newline at end of file +{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} diff --git a/docs/src/pages/demos/snackbars/snackbars-ru.md b/docs/src/pages/demos/snackbars/snackbars-ru.md index 28f8acc4fcd419..45b1fc549705d7 100644 --- a/docs/src/pages/demos/snackbars/snackbars-ru.md +++ b/docs/src/pages/demos/snackbars/snackbars-ru.md @@ -62,7 +62,7 @@ Change the direction of the transition. Slide is the default transition. ### Change Transition -Use a different transition all together. +Use a different transition. {{"demo": "pages/demos/snackbars/FadeSnackbar.js"}} @@ -76,4 +76,4 @@ For more advanced use cases you might be able to take advantage of: In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another. -{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} \ No newline at end of file +{{"demo": "pages/demos/snackbars/IntegrationNotistack.js"}} diff --git a/docs/src/pages/demos/snackbars/snackbars.md b/docs/src/pages/demos/snackbars/snackbars.md index e18599ec29a3ba..95f9163fd91a58 100644 --- a/docs/src/pages/demos/snackbars/snackbars.md +++ b/docs/src/pages/demos/snackbars/snackbars.md @@ -66,7 +66,7 @@ Change the direction of the transition. Slide is the default transition. ### Change Transition -Use a different transition all together. +Use a different transition. {{"demo": "pages/demos/snackbars/FadeSnackbar.js"}} diff --git a/docs/src/pages/getting-started/usage/usage-de.md b/docs/src/pages/getting-started/usage/usage-de.md index a0febcfc89d2a5..5d13c40038d017 100644 --- a/docs/src/pages/getting-started/usage/usage-de.md +++ b/docs/src/pages/getting-started/usage/usage-de.md @@ -2,7 +2,7 @@

Get started with React and Material-UI in no time.

-Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/), +Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/). You can use any of the components as demonstrated in the documentation. Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported. @@ -58,4 +58,4 @@ Now that you have an idea of the basic setup, it's time to learn more about: - How to provide [the Material Design font and typography](/style/typography/). - How to take advantage of the [theming solution](/customization/themes/). -- How to [override](/customization/overrides/) the look and feel of the components. \ No newline at end of file +- How to [override](/customization/overrides/) the look and feel of the components. diff --git a/docs/src/pages/getting-started/usage/usage-es.md b/docs/src/pages/getting-started/usage/usage-es.md index a0febcfc89d2a5..5d13c40038d017 100644 --- a/docs/src/pages/getting-started/usage/usage-es.md +++ b/docs/src/pages/getting-started/usage/usage-es.md @@ -2,7 +2,7 @@

Get started with React and Material-UI in no time.

-Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/), +Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/). You can use any of the components as demonstrated in the documentation. Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported. @@ -58,4 +58,4 @@ Now that you have an idea of the basic setup, it's time to learn more about: - How to provide [the Material Design font and typography](/style/typography/). - How to take advantage of the [theming solution](/customization/themes/). -- How to [override](/customization/overrides/) the look and feel of the components. \ No newline at end of file +- How to [override](/customization/overrides/) the look and feel of the components. diff --git a/docs/src/pages/getting-started/usage/usage-fr.md b/docs/src/pages/getting-started/usage/usage-fr.md index a0febcfc89d2a5..5d13c40038d017 100644 --- a/docs/src/pages/getting-started/usage/usage-fr.md +++ b/docs/src/pages/getting-started/usage/usage-fr.md @@ -2,7 +2,7 @@

Get started with React and Material-UI in no time.

-Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/), +Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/). You can use any of the components as demonstrated in the documentation. Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported. @@ -58,4 +58,4 @@ Now that you have an idea of the basic setup, it's time to learn more about: - How to provide [the Material Design font and typography](/style/typography/). - How to take advantage of the [theming solution](/customization/themes/). -- How to [override](/customization/overrides/) the look and feel of the components. \ No newline at end of file +- How to [override](/customization/overrides/) the look and feel of the components. diff --git a/docs/src/pages/getting-started/usage/usage-ja.md b/docs/src/pages/getting-started/usage/usage-ja.md index a0febcfc89d2a5..5d13c40038d017 100644 --- a/docs/src/pages/getting-started/usage/usage-ja.md +++ b/docs/src/pages/getting-started/usage/usage-ja.md @@ -2,7 +2,7 @@

Get started with React and Material-UI in no time.

-Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/), +Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/). You can use any of the components as demonstrated in the documentation. Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported. @@ -58,4 +58,4 @@ Now that you have an idea of the basic setup, it's time to learn more about: - How to provide [the Material Design font and typography](/style/typography/). - How to take advantage of the [theming solution](/customization/themes/). -- How to [override](/customization/overrides/) the look and feel of the components. \ No newline at end of file +- How to [override](/customization/overrides/) the look and feel of the components. diff --git a/docs/src/pages/getting-started/usage/usage-pt.md b/docs/src/pages/getting-started/usage/usage-pt.md index 372f798e555a44..df3f37f46cca79 100644 --- a/docs/src/pages/getting-started/usage/usage-pt.md +++ b/docs/src/pages/getting-started/usage/usage-pt.md @@ -2,7 +2,7 @@

Get started with React and Material-UI in no time.

-Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/), +Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/). You can use any of the components as demonstrated in the documentation. Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported. @@ -58,4 +58,4 @@ Now that you have an idea of the basic setup, it's time to learn more about: - How to provide [the Material Design font and typography](/style/typography/). - How to take advantage of the [theming solution](/customization/themes/). -- How to [override](/customization/overrides/) the look and feel of the components. \ No newline at end of file +- How to [override](/customization/overrides/) the look and feel of the components. diff --git a/docs/src/pages/getting-started/usage/usage-ru.md b/docs/src/pages/getting-started/usage/usage-ru.md index a0febcfc89d2a5..5d13c40038d017 100644 --- a/docs/src/pages/getting-started/usage/usage-ru.md +++ b/docs/src/pages/getting-started/usage/usage-ru.md @@ -2,7 +2,7 @@

Get started with React and Material-UI in no time.

-Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/), +Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/). You can use any of the components as demonstrated in the documentation. Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported. @@ -58,4 +58,4 @@ Now that you have an idea of the basic setup, it's time to learn more about: - How to provide [the Material Design font and typography](/style/typography/). - How to take advantage of the [theming solution](/customization/themes/). -- How to [override](/customization/overrides/) the look and feel of the components. \ No newline at end of file +- How to [override](/customization/overrides/) the look and feel of the components. diff --git a/docs/src/pages/getting-started/usage/usage.md b/docs/src/pages/getting-started/usage/usage.md index b1d71fea42ded6..a6f8e2d9a525a4 100644 --- a/docs/src/pages/getting-started/usage/usage.md +++ b/docs/src/pages/getting-started/usage/usage.md @@ -4,7 +4,7 @@ Material-UI components work in isolation. **They are self-supporting**, and will inject, and only inject, the styles they need to display. -They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/), +They don't rely on any global style-sheets such as [normalize.css](https://github.com/necolas/normalize.css/). You can use any of the components as demonstrated in the documentation. Please refer to each component's [demo page](/demos/buttons/) to see how they should be imported. diff --git a/pages/_app.js b/pages/_app.js index 7504cccb9efa30..195b3ef98f1c5d 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -29,6 +29,24 @@ function loadDependencies() { loadScript('https://www.google-analytics.com/analytics.js', document.querySelector('head')); } +if (process.browser) { + // eslint-disable-next-line no-console + console.log( + `%c + +โ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•— โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•— +โ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ•šโ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ•โ•โ•โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘ +โ–ˆโ–ˆโ•”โ–ˆโ–ˆโ–ˆโ–ˆโ•”โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘ +โ–ˆโ–ˆโ•‘โ•šโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•”โ•โ•โ• โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•”โ•โ•โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ•šโ•โ•โ•โ•โ•โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘ +โ–ˆโ–ˆโ•‘ โ•šโ•โ• โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•—โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ•‘ โ–ˆโ–ˆโ•‘โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•— โ•šโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ•”โ•โ–ˆโ–ˆโ•‘ +โ•šโ•โ• โ•šโ•โ•โ•šโ•โ• โ•šโ•โ• โ•šโ•โ• โ•šโ•โ•โ•โ•โ•โ•โ•โ•šโ•โ• โ•šโ•โ•โ•šโ•โ•โ•šโ•โ• โ•šโ•โ•โ•šโ•โ•โ•โ•โ•โ•โ• โ•šโ•โ•โ•โ•โ•โ• โ•šโ•โ• + +Tip: you can access the \`theme\` object directly in the console. +`, + 'font-family:monospace;color:#1976d2;font-size:12px;', + ); +} + const pages = [ { pathname: '/getting-started', diff --git a/pages/index.js b/pages/index.js index e3a14f9c6b8017..e5ef1249838e69 100644 --- a/pages/index.js +++ b/pages/index.js @@ -12,6 +12,20 @@ import HomeFooter from 'docs/src/modules/components/HomeFooter'; import AppFrame from 'docs/src/modules/components/AppFrame'; import Link from 'docs/src/modules/components/Link'; import Head from 'docs/src/modules/components/Head'; +import loadScript from 'docs/src/modules/utils/loadScript'; + +let dependenciesLoaded = false; + +function loadDependencies() { + if (dependenciesLoaded) { + return; + } + + dependenciesLoaded = true; + + loadScript('https://buttons.github.io/buttons.js', document.querySelector('head')); + loadScript('https://platform.twitter.com/widgets.js', document.querySelector('head')); +} const styles = theme => ({ root: { @@ -64,17 +78,22 @@ const styles = theme => ({ height: '35vw', maxHeight: 200, }, - steps: { - maxWidth: theme.spacing.unit * 130, - margin: 'auto', - }, - step: { - padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`, - }, - stepIcon: { - marginBottom: theme.spacing.unit, + social: { + backgroundColor: theme.palette.background.paper, + padding: `${theme.spacing.unit * 2}px 0`, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: 20, + boxSizing: 'content-box', + '& span': { + display: 'flex', + marginRight: theme.spacing.unit, + }, + '& a': { + color: theme.palette.background.paper, + }, }, - markdownElement: {}, }); class HomePage extends React.Component { @@ -82,6 +101,8 @@ class HomePage extends React.Component { if (window.location.hash !== '') { window.location.replace(`https://v0.material-ui.com/${window.location.hash}`); } + + loadDependencies(); } render() { @@ -132,6 +153,24 @@ class HomePage extends React.Component {
+
+ + Star + + + Follow + +