diff --git a/README.md b/README.md index 4cf79f0c8762be..b9a3d65aaa7ae3 100644 --- a/README.md +++ b/README.md @@ -44,28 +44,22 @@ yarn add @material-ui/core Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead. -## Supporting Material-UI +## Who sponsors Material-UI? -Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development helped by the support of these awesome [backers](https://material-ui.com/discover-more/backers/). If you'd like to join them, please consider: -- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari). -- [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui). +### Diamond 💎 -#### What's the difference between Patreon and OpenCollective? +*3/3 slots available* -Funds donated via Patreon directly support [Olivier Tassinari](https://github.com/oliviertassinari)'s work on Material-UI. -Funds donated via OpenCollective are managed transparently and will be used for compensating work and expenses for core team members. -Your name/logo will receive proper recognition and exposure by donating on either platform. +Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. +Please contact us at diamond@material-ui.com to subscribe to this tier. -### Gold Sponsors - -Gold Sponsors are those who have pledged $500/month and more to Material-UI. +### Gold 🏆 via [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc + tidelift + bitsrc

via [OpenCollective](https://opencollective.com/material-ui) @@ -75,6 +69,8 @@ via [OpenCollective](https://opencollective.com/material-ui) crosswordsolver

+Gold Sponsors are those who have pledged $500/month and more to Material-UI. + ### There is more! See the full list of [our backers](https://material-ui.com/discover-more/backers/). @@ -138,34 +134,6 @@ Please read the [changelog](https://github.com/mui-org/material-ui/releases). The future plans and high priority features and enhancements can be found in the [roadmap](https://material-ui.com/discover-more/roadmap/) file. -## Thanks - -Material-UI is only made possible thanks to these great services that sponsor our core infrastructure: - -[](https://github.com/) - -GitHub allows us to host the Git repository. - -[](https://circleci.com/) - -CircleCI allows us to run the test suite. - -[](https://www.netlify.com/) - -Netlify allows us to distribute the documentation. - -[](https://crowdin.com/) - -CrowdIn allows us to translate the documentation. - -[](https://www.browserstack.com/) - -BrowserStack allows us to test in real browsers. - -[](https://codecov.io/) - -CodeCov allows us to monitor the test coverage. - ## License This project is licensed under the terms of the diff --git a/docs/notifications.json b/docs/notifications.json index 9dcc81475948e6..455a4cc4e8da2e 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -7,9 +7,5 @@ "id": 35, "text": "Let's translate! 帮助 Material-UI 将文档翻译成中文. 🇨🇳", "userLanguage": "zh" - }, - { - "id": 46, - "text": "Material-UI v4.5.2 is out 🎉" } ] diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 3db98d9d9ddb28..ca21fa3cd69988 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -52,7 +52,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | ListboxComponent | elementType | 'ul' | The component used to render the listbox. | | loading | bool | false | If `true`, the component is in a loading state. | | loadingText | node | 'Loading…' | Text to display when in a loading state. | -| multiple | bool | false | If true, `value` must be an array and the menu will support multiple selections. | +| multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | | noOptionsText | node | 'No options' | Text to display when there are no options. | | onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* null | | onClose | func | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | diff --git a/docs/pages/api/chip.md b/docs/pages/api/chip.md index 61575f159a1ae4..a5dd3d1fcdd4f5 100644 --- a/docs/pages/api/chip.md +++ b/docs/pages/api/chip.md @@ -27,7 +27,7 @@ Chips represent complex entities in small blocks, such as a contact. | avatar | element | | Avatar element. | | children | unsupportedProp | | This prop isn't supported. Use the `component` prop if you need to change the children structure. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| clickable | bool | | If true, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. | +| clickable | bool | | If `true`, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. | | color | 'default'
| 'primary'
| 'secondary' | 'default' | The color of the component. It supports those theme colors that make sense for this component. | | component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. | | deleteIcon | element | | Override the default delete icon element. Shown only if `onDelete` is set. | diff --git a/docs/pages/api/hidden.md b/docs/pages/api/hidden.md index 3d6075cd73e4ee..4b618e9433c26e 100644 --- a/docs/pages/api/hidden.md +++ b/docs/pages/api/hidden.md @@ -27,17 +27,17 @@ Responsively hides children based on the selected implementation. | children | node | | The content of the component. | | implementation | 'js'
| 'css' | 'js' | Specify which implementation to use. 'js' is the default, 'css' works better for server-side rendering. | | initialWidth | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl' | | You can use this prop when choosing the `js` implementation with server-side rendering.
As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width.
For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint | -| lgDown | bool | false | If true, screens this size and down will be hidden. | -| lgUp | bool | false | If true, screens this size and up will be hidden. | -| mdDown | bool | false | If true, screens this size and down will be hidden. | -| mdUp | bool | false | If true, screens this size and up will be hidden. | +| lgDown | bool | false | If `true`, screens this size and down will be hidden. | +| lgUp | bool | false | If `true`, screens this size and up will be hidden. | +| mdDown | bool | false | If `true`, screens this size and down will be hidden. | +| mdUp | bool | false | If `true`, screens this size and up will be hidden. | | only | 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
| Array<'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'> | | Hide the given breakpoint(s). | -| smDown | bool | false | If true, screens this size and down will be hidden. | -| smUp | bool | false | If true, screens this size and up will be hidden. | -| xlDown | bool | false | If true, screens this size and down will be hidden. | -| xlUp | bool | false | If true, screens this size and up will be hidden. | -| xsDown | bool | false | If true, screens this size and down will be hidden. | -| xsUp | bool | false | If true, screens this size and up will be hidden. | +| smDown | bool | false | If `true`, screens this size and down will be hidden. | +| smUp | bool | false | If `true`, screens this size and up will be hidden. | +| xlDown | bool | false | If `true`, screens this size and down will be hidden. | +| xlUp | bool | false | If `true`, screens this size and up will be hidden. | +| xsDown | bool | false | If `true`, screens this size and down will be hidden. | +| xsUp | bool | false | If `true`, screens this size and up will be hidden. | The component cannot hold a ref. diff --git a/docs/pages/api/select.md b/docs/pages/api/select.md index 0a5bb77a733084..226b202613b095 100644 --- a/docs/pages/api/select.md +++ b/docs/pages/api/select.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoWidth | bool | false | If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input. | +| autoWidth | bool | false | If `true`, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input. | | children | node | | The option elements to populate the select with. Can be some `MenuItem` when `native` is false and `option` when `native` is true.
⚠️The `MenuItem` elements **must** be direct descendants when `native` is false. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | defaultValue | any | | The default element value. Use when the component is not controlled. | @@ -35,7 +35,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | labelId | string | | The idea of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value. | | labelWidth | number | 0 | The label width to be used on OutlinedInput. This prop is required when the `variant` prop is `outlined`. | | MenuProps | object | | Props applied to the [`Menu`](/api/menu/) element. | -| multiple | bool | false | If true, `value` must be an array and the menu will support multiple selections. | +| multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | | native | bool | false | If `true`, the component will be using a native `select` element. | | onChange | func | | Callback function fired when a menu item is selected.

**Signature:**
`function(event: object, child?: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (any).
*child:* The react element that was selected when `native` is `false` (default). | | onClose | func | | Callback fired when the component requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | diff --git a/docs/pages/api/snackbar.md b/docs/pages/api/snackbar.md index 81de9e06a880aa..aeb93bae57da72 100644 --- a/docs/pages/api/snackbar.md +++ b/docs/pages/api/snackbar.md @@ -41,7 +41,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | onExit | func | | Callback fired before the transition is exiting. | | onExited | func | | Callback fired when the transition has exited. | | onExiting | func | | Callback fired when the transition is exiting. | -| open | bool | | If true, `Snackbar` is open. | +| open | bool | | If `true`, `Snackbar` is open. | | resumeHideDuration | number | | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` prop isn't specified, it does nothing. If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. | | TransitionComponent | elementType | Grow | The component used for the transition. | | transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | diff --git a/docs/pages/discover-more/backers.js b/docs/pages/discover-more/backers.js index d633feb5a23db6..09319595a6b9df 100644 --- a/docs/pages/discover-more/backers.js +++ b/docs/pages/discover-more/backers.js @@ -10,5 +10,5 @@ const reqSource = require.context( const reqPrefix = 'pages/discover-more/backers'; export default function Page() { - return ; + return ; } diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 4440bff11eb99b..a411f5cb72ccf4 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -81,30 +81,38 @@ function Ad(props) { const [carbonOut, setCarbonOut] = React.useState(null); const [codeFundOut, setCodeFundOut] = React.useState(null); - const checkAdblock = React.useCallback((attempt = 1) => { - if (document.querySelector('.cf-wrapper') || document.querySelector('#carbonads')) { + const checkAdblock = React.useCallback( + (attempt = 1) => { if ( - document.querySelector('#carbonads a') && - document.querySelector('#carbonads a').getAttribute('href') === - 'https://material-ui-next.com/discover-more/backers' + document.querySelector('.cf-wrapper') || + document.querySelector('#carbonads') || + codeFundOut || + carbonOut ) { - setCarbonOut(true); + if ( + document.querySelector('#carbonads a') && + document.querySelector('#carbonads a').getAttribute('href') === + 'https://material-ui-next.com/discover-more/backers' + ) { + setCarbonOut(true); + } + + setAdblock(false); + return; } - setAdblock(false); - return; - } - - if (attempt < 30) { - timerAdblock.current = setTimeout(() => { - checkAdblock(attempt + 1); - }, 500); - } + if (attempt < 30) { + timerAdblock.current = setTimeout(() => { + checkAdblock(attempt + 1); + }, 500); + } - if (attempt > 6) { - setAdblock(true); - } - }, []); + if (attempt > 6) { + setAdblock(true); + } + }, + [codeFundOut, carbonOut], + ); React.useEffect(() => { if (disable) { @@ -151,7 +159,7 @@ function Ad(props) { if (carbonOut || codeFundOut) { children = ; minHeight = 'auto'; - } else if (random >= 0.5) { + } else if (random >= 0.55) { children = ; } else { children = ; diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index 963c71fc28b453..22cf2b3f5624fb 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -5,6 +5,7 @@ import { useSelector } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; import List from '@material-ui/core/List'; import Drawer from '@material-ui/core/Drawer'; +import Box from '@material-ui/core/Box'; import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'; import Divider from '@material-ui/core/Divider'; import Hidden from '@material-ui/core/Hidden'; @@ -29,7 +30,7 @@ function PersistScroll(props) { const activeBox = activeElement.getBoundingClientRect(); - if (savedScrollTop === null || activeBox.top - savedScrollTop < 0) { + if (savedScrollTop !== null || activeBox.top < savedScrollTop) { // Center the selected item in the list container. activeElement.scrollIntoView(); // Fix a Chrome issue, reset the tabbable ring back to the top of the document. @@ -161,7 +162,9 @@ function AppDrawer(props) { - + + + {renderNavItems({ props, pages, activePage, depth: 0, t })} ); diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index 7f64f5336aca60..e32069e18c5ae4 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -4,10 +4,12 @@ import PropTypes from 'prop-types'; import marked from 'marked'; import throttle from 'lodash/throttle'; import clsx from 'clsx'; +import Box from '@material-ui/core/Box'; import { useSelector } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import textToHash from 'docs/src/modules/utils/textToHash'; +import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors'; import Link from 'docs/src/modules/components/Link'; const useStyles = makeStyles(theme => ({ @@ -255,6 +257,9 @@ export default function AppTableOfContents(props) { ) : null} + + + ); } diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index 443ce3cb0bbc19..aebebf5956aa93 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -1,6 +1,5 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import Box from '@material-ui/core/Box'; import { useSelector } from 'react-redux'; import { makeStyles } from '@material-ui/core/styles'; import AddIcon from '@material-ui/icons/Add'; @@ -39,7 +38,7 @@ export default function DiamondSponsors() { const t = useSelector(state => state.options.t); return ( - +
{t('diamondSponsors')} @@ -48,10 +47,10 @@ export default function DiamondSponsors() { className={classes.placeholder} rel="noopener noreferrer" target="_blank" - href="https://www.patreon.com/oliviertassinari" + href="/discover-more/backers/#diamond" > - +
); } diff --git a/docs/src/modules/components/HomeQuickWord.js b/docs/src/modules/components/HomeQuickWord.js index 888891804f0c04..92c3c31388e1ed 100644 --- a/docs/src/modules/components/HomeQuickWord.js +++ b/docs/src/modules/components/HomeQuickWord.js @@ -7,16 +7,11 @@ import NoSsr from '@material-ui/core/NoSsr'; import Link from 'docs/src/modules/components/Link'; const backers = [ - { - href: 'https://www.creative-tim.com/?partner=104080', - alt: 'creative-tim', - title: 'Creative Tim — Premium Themes', - }, { href: 'https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage', alt: 'tidelift', - title: 'Tidelift — Get Professionally Supported Material-UI', + title: 'Tidelift — Enterprise-ready open source software', }, { href: 'https://bit.dev', diff --git a/docs/src/modules/components/backers.md b/docs/src/modules/components/backers.md index d7eb210b494f5f..a52f62e4eb11e4 100644 --- a/docs/src/modules/components/backers.md +++ b/docs/src/modules/components/backers.md @@ -1,19 +1,21 @@ -

Supporting Material-UI

+

Material-UI's sponsors

-Material-UI is an MIT-licensed open source project. -It's an independent project with ongoing development made possible entirely -thanks to the support of these awesome [backers](/discover-more/backers/). +The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. -### Gold Sponsors +### Diamond 💎 -Gold Sponsors are those who have pledged $500/month and more to Material-UI. +*3/3 slots available* + +Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. +Please contact us at diamond@material-ui.com to subscribe to this tier. + +### Gold 🏆 via [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc + tidelift + bitsrc

via [OpenCollective](https://opencollective.com/material-ui) @@ -23,6 +25,8 @@ via [OpenCollective](https://opencollective.com/material-ui) crosswordsolver

+Gold Sponsors are those who have pledged $500/month and more to Material-UI. + ### There are more! See the full list of [our backers](/discover-more/backers/). diff --git a/docs/src/pages/discover-more/backers/backers.md b/docs/src/pages/discover-more/backers/backers.md index d6be6d979e344e..00987b9307a0e5 100644 --- a/docs/src/pages/discover-more/backers/backers.md +++ b/docs/src/pages/discover-more/backers/backers.md @@ -1,27 +1,24 @@ # Sponsors & Backers -

Support Material-UI’s development through donations.

+

Support Material-UI core’s development through crowdfunding.

-Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development helped by the support of these awesome backers. If you'd like to join them, please consider: +The core of Material-UI is a crowd-funded open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. -- [Become a backer or sponsor on Patreon](https://www.patreon.com/oliviertassinari). -- [Become a backer or sponsor on OpenCollective](https://opencollective.com/material-ui). +## Material-UI's sponsors -#### What's the difference between Patreon and OpenCollective? +### Diamond 💎 -Funds donated via Patreon directly support [Olivier Tassinari](https://github.com/oliviertassinari)'s work on Material-UI. -Funds donated via OpenCollective are managed transparently and will be used for compensating work and expenses for core team members. -Your name/logo will receive proper recognition and exposure by donating on either platform. +*3/3 slots available* -## Gold Sponsors +Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. +Please contact us at diamond@material-ui.com to subscribe to this tier. -Gold Sponsors are those who have pledged $500/month and more to Material-UI. +### Gold 🏆 via [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift + tidelift bitsrc

@@ -32,48 +29,33 @@ via [OpenCollective](https://opencollective.com/material-ui) crosswordsolver

-## Silver Sponsors +Gold Sponsors are those who have pledged $500/month and more to Material-UI. -Silver Sponsors are those who have pledged $250/month to $500/month to Material-UI. +### Silver via [Patreon](https://www.patreon.com/oliviertassinari) via [OpenCollective](https://opencollective.com/material-ui)

- Silver Sponsors + Silver Sponsors

-## Bronze Sponsors +Silver Sponsors are those who have pledged $250/month to $500/month to Material-UI. -Bronze Sponsors are those who have pledged $100/month to $250/month to Material-UI. +### Bronze via [Patreon](https://www.patreon.com/oliviertassinari) via [OpenCollective](https://opencollective.com/material-ui)

- Bronze Sponsors + Bronze Sponsors

-## Backers - -via [Patreon](https://www.patreon.com/oliviertassinari) +Bronze Sponsors are those who have pledged $100/month to $250/month to Material-UI. -| ♥️ | ♥️ | ♥️ | ♥️ | ♥️ | -|---|---|---|---|---| -| Olivier Baumann | Linus Gubenis | Scott Fortmann-Roe | Yosmany García Alfonso | cocoanton | -| Hong Yuan | Lucas Nascimento | the-noob | Thomas Hermann | Diana-Alina Olaru | -| Daniel Faust | David Langheiter | LocalMonero | Adam Wells | Vincent Bouzeran | -| Ashwin Hegde | Eric Schultz | Conor Dunk | Jerome Wilson | Greenlink | -| Jolse Maginnis | asmeikal | David Auffret | Naresh Bhatia | Henk van Hest | -| Avétis KAZARIAN | Withinpixels | SIM KIM SIA | Renaud Bompuis | Yaron Malin | -| Arvanitis Panagiotis | Jesse Weigel | Bogdan Mihai Nicolae | Dung Tran | Kyle Pennell | -| Kai Mit Pansen | Eric Nagy | Karens Grigorjancs | Mohamed Turco | Haroun Serang | -| Antonio Seveso | Ali Akhavan | Bruno Winck | Alessandro Annini | Victor Irzak | -| Manuel U Grullon | Skaronator | Peter James | Vincz | Micah Davidson | -| Nelson Batalha | Daniel Woss | Michael Staub | Scott Fortmann-Roe | Markus Wüstenberg | -| Anthony Mezzolesta | Julien Vallini | Johan Eliasson | Tomasz Szkodziński | Joseph Dillman | +### Backers via [OpenCollective](https://opencollective.com/material-ui) @@ -81,9 +63,55 @@ via [OpenCollective](https://opencollective.com/material-ui) Backers

-## Why? +## FAQ + +#### Why is Material-UI a "crowd-funded open-source project"? + +The core of Material-UI is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To make Material-UI a project that users can rely on for years to come, it needs to be well directed and financially sustainable. + +The absolute best way to support Material-UI’s ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving Material-UI core, which you and other Material-UI users then benefit from. + +#### How is sponsorship money spent? + +Sponsorship money is used to fund software development, testing, documentation, and releases of the Material-UI software suite. + +#### Is sponsorship required to use Material-UI? + +Users are not legally required to give back to the Material-UI project, but it is in their interest to do so. + +By significantly reducing the amount of work needed to achieve business goals and reducing running costs, Material-UI results in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization. + +#### What's the difference between Patreon and OpenCollective? + +Funds received via Patreon or other forms, directly support [Olivier Tassinari](https://github.com/oliviertassinari) and the core team mission. +The funds go to a for-profit entity that employs some of the core team members. + +Funds donated via OpenCollective are managed transparently and aimed to sustain the MIT core of Material-UI. Material-UI benefits from the Open Collective's fiscal sponsorship (hosted as a non-profit), in exchange for 10% of the donations. + +## Services + +These great services sponsor Material-UI's core infrastructure: + +- [](https://github.com/) + +GitHub allows us to host the Git repository. + +- [](https://circleci.com/) + +CircleCI allows us to run the test suite. + +- [](https://www.netlify.com/) + +Netlify allows us to distribute the documentation. + +- [](https://crowdin.com/) + +CrowdIn allows us to translate the documentation. + +- [](https://www.browserstack.com/) + +BrowserStack allows us to test in real browsers. -If you run a business and are using Material-UI in a revenue-generating product, it makes business sense to sponsor Material-UI development: **it ensures the project that your product relies on stays healthy and actively maintained**. -It can also help your exposure in the Material-UI community and makes it easier to attract Material-UI developers. +- [](https://codecov.io/) -If you are an individual user and have enjoyed the productivity of using Material-UI, consider donating as a sign of appreciation. +CodeCov allows us to monitor the test coverage. diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md index 7b66b773c4825b..1d1561dd7c8d16 100644 --- a/docs/src/pages/discover-more/related-projects/related-projects.md +++ b/docs/src/pages/discover-more/related-projects/related-projects.md @@ -10,6 +10,7 @@ Feel free to submit a pull request to add another project; it will be accepted i - **Sketch**: [Material Theme Editor](https://material.io/resources/theme-editor/) for Material Design made by Google. - **Figma**: [Figma UI Kit](https://material.5ly.co/) for Material-UI made by Fively Team. +- **Framer**: [Framer X Kit](https://packages.framer.com/package/material-ui/material-ui) for Material-UI. You didn't find the design assets your team is looking for? Let us know! diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js index 5a1e64f4d2f7e4..40618b1af9d398 100644 --- a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js +++ b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js @@ -3,6 +3,7 @@ import clsx from 'clsx'; import { makeStyles } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Drawer from '@material-ui/core/Drawer'; +import Box from '@material-ui/core/Box'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import List from '@material-ui/core/List'; @@ -191,8 +192,10 @@ export default function Dashboard() { + + + - ); diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js index 51ce85738dfed1..89dab37dc3197c 100644 --- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js +++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js @@ -33,6 +33,7 @@ const useStyles = makeStyles(theme => ({ image: { backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', + backgroundColor: theme.palette.grey[50], backgroundSize: 'cover', backgroundPosition: 'center', }, diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index fa82cf57cb7f2b..b417f5c2fbb009 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -10,7 +10,7 @@ const StyledButton = styled.button` padding: 8px 12px; border: 1px solid; cursor: pointer; - outline: none; + outline: 0; border-radius: ${theme.shape.borderRadius}px; color: ${theme.palette.primary.contrastText}; background-color: ${theme.palette.primary.main}; diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index fa82cf57cb7f2b..b417f5c2fbb009 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -10,7 +10,7 @@ const StyledButton = styled.button` padding: 8px 12px; border: 1px solid; cursor: pointer; - outline: none; + outline: 0; border-radius: ${theme.shape.borderRadius}px; color: ${theme.palette.primary.contrastText}; background-color: ${theme.palette.primary.main}; diff --git a/examples/gatsby/plugins/gatsby-plugin-top-layout/index.js b/examples/gatsby/plugins/gatsby-plugin-top-layout/index.js deleted file mode 100644 index c3d6dffd2a1708..00000000000000 --- a/examples/gatsby/plugins/gatsby-plugin-top-layout/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// Workaround for https://github.com/gatsbyjs/gatsby/issues/19150 -// no-op diff --git a/packages/material-ui-benchmark/src/styles.js b/packages/material-ui-benchmark/src/styles.js index 965b1b5ba897bc..d61a0d9d7e88b6 100644 --- a/packages/material-ui-benchmark/src/styles.js +++ b/packages/material-ui-benchmark/src/styles.js @@ -24,7 +24,7 @@ align-items: center; justify-content: center; position: relative; background-color: transparent; -outline: none; +outline: 0; border: 0; margin: 0; border-radius: 0; diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 522553ba8ac737..9295ef9735a6e1 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -132,22 +132,20 @@ export type AutocompleteClassKey = | 'focused' | 'tag' | 'inputRoot' - | 'inputRootOutlined' - | 'inputRootFilled' | 'input' | 'inputFocused' | 'clearIndicator' | 'clearIndicatorDirty' | 'popupIndicator' | 'popupIndicatorOpen' - | 'popup' + | 'popper' + | 'popperDisablePortal' | 'paper' | 'listbox' - | 'option' | 'loading' | 'noOptions' + | 'option' | 'groupLabel' - | 'popperDisablePortal' | 'groupUl'; export default function Autocomplete(props: AutocompleteProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 8073709bdc0c00..22556a9e390908 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -115,7 +115,7 @@ export const styles = theme => ({ alignItems: 'center', cursor: 'pointer', paddingTop: 6, - outline: 'none', + outline: '0', // Remove grey highlight WebkitTapHighlightColor: 'transparent', paddingBottom: 6, @@ -521,7 +521,7 @@ Autocomplete.propTypes = { */ loadingText: PropTypes.node, /** - * If true, `value` must be an array and the menu will support multiple selections. + * If `true`, `value` must be an array and the menu will support multiple selections. */ multiple: PropTypes.bool, /** diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts index d2531d84167d22..1671e2f4658afd 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts @@ -112,7 +112,7 @@ export interface UseAutocompleteProps { */ inputValue?: string; /** - * If true, `value` must be an array and the menu will support multiple selections. + * If `true`, `value` must be an array and the menu will support multiple selections. */ multiple?: boolean; /** diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 77fbd3cd6974a8..2bdc11a27d4116 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -891,7 +891,7 @@ useAutocomplete.propTypes = { */ includeInputInList: PropTypes.bool, /** - * If true, `value` must be an array and the menu will support multiple selections. + * If `true`, `value` must be an array and the menu will support multiple selections. */ multiple: PropTypes.bool, /** diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index f528fcbe2ab23a..70ea4c0b6c1e9a 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -431,7 +431,7 @@ Chip.propTypes = { */ className: PropTypes.string, /** - * If true, the chip will appear clickable, and will raise when pressed, + * If `true`, the chip will appear clickable, and will raise when pressed, * even if the onClick prop is not defined. * If false, the chip will not be clickable, even if onClick prop is defined. * This can be used, for example, diff --git a/packages/material-ui/src/Hidden/Hidden.js b/packages/material-ui/src/Hidden/Hidden.js index 7a23cf556dc3c0..ad135318dde943 100644 --- a/packages/material-ui/src/Hidden/Hidden.js +++ b/packages/material-ui/src/Hidden/Hidden.js @@ -84,19 +84,19 @@ Hidden.propTypes = { */ initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ lgDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ lgUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ mdDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ mdUp: PropTypes.bool, /** @@ -107,27 +107,27 @@ Hidden.propTypes = { PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])), ]), /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ smDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ smUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ xlDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ xlUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ xsDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ xsUp: PropTypes.bool, }; diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js index 289464b68fd539..0d1c84adbdc657 100644 --- a/packages/material-ui/src/Hidden/HiddenCss.js +++ b/packages/material-ui/src/Hidden/HiddenCss.js @@ -97,19 +97,19 @@ HiddenCss.propTypes = { */ implementation: PropTypes.oneOf(['js', 'css']), /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ lgDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ lgUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ mdDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ mdUp: PropTypes.bool, /** @@ -120,27 +120,27 @@ HiddenCss.propTypes = { PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])), ]), /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ smDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ smUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ xlDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ xlUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ xsDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ xsUp: PropTypes.bool, }; diff --git a/packages/material-ui/src/Hidden/HiddenJs.js b/packages/material-ui/src/Hidden/HiddenJs.js index 02326c2846ea8c..081d7126bf4169 100644 --- a/packages/material-ui/src/Hidden/HiddenJs.js +++ b/packages/material-ui/src/Hidden/HiddenJs.js @@ -78,19 +78,19 @@ HiddenJs.propTypes = { */ initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ lgDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ lgUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ mdDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ mdUp: PropTypes.bool, /** @@ -101,11 +101,11 @@ HiddenJs.propTypes = { PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])), ]), /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ smDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ smUp: PropTypes.bool, /** @@ -114,19 +114,19 @@ HiddenJs.propTypes = { */ width: PropTypes.string.isRequired, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ xlDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ xlUp: PropTypes.bool, /** - * If true, screens this size and down will be hidden. + * If `true`, screens this size and down will be hidden. */ xsDown: PropTypes.bool, /** - * If true, screens this size and up will be hidden. + * If `true`, screens this size and up will be hidden. */ xsUp: PropTypes.bool, }; diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js index 4ac2b5dba95f6e..df92490cff0efc 100644 --- a/packages/material-ui/src/Select/Select.js +++ b/packages/material-ui/src/Select/Select.js @@ -98,7 +98,7 @@ const Select = React.forwardRef(function Select(props, ref) { Select.propTypes = { /** - * If true, the width of the popover will automatically be set according to the items inside the + * If `true`, the width of the popover will automatically be set according to the items inside the * menu, otherwise it will be at least the width of the select input. */ autoWidth: PropTypes.bool, @@ -157,7 +157,7 @@ Select.propTypes = { */ MenuProps: PropTypes.object, /** - * If true, `value` must be an array and the menu will support multiple selections. + * If `true`, `value` must be an array and the menu will support multiple selections. */ multiple: PropTypes.bool, /** diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js index 080cfbd675dfc4..497319e78a9a97 100644 --- a/packages/material-ui/src/Select/SelectInput.js +++ b/packages/material-ui/src/Select/SelectInput.js @@ -382,7 +382,7 @@ SelectInput.propTypes = { */ autoFocus: PropTypes.bool, /** - * If true, the width of the popover will automatically be set according to the items inside the + * If `true`, the width of the popover will automatically be set according to the items inside the * menu, otherwise it will be at least the width of the select input. */ autoWidth: PropTypes.bool, @@ -431,7 +431,7 @@ SelectInput.propTypes = { */ MenuProps: PropTypes.object, /** - * If true, `value` must be an array and the menu will support multiple selections. + * If `true`, `value` must be an array and the menu will support multiple selections. */ multiple: PropTypes.bool, /** diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 5bf3e555e0110f..6693a2868ba3c4 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -359,7 +359,7 @@ Snackbar.propTypes = { */ onMouseLeave: PropTypes.func, /** - * If true, `Snackbar` is open. + * If `true`, `Snackbar` is open. */ open: PropTypes.bool, /** diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index 244d76eb1855e0..4df6b5efc34c73 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -121,7 +121,7 @@ export default function createPalette(palette) { console.error( [ `Material-UI: the contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, - 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', + 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast', ].join('\n'), ); diff --git a/packages/material-ui/src/styles/createPalette.test.js b/packages/material-ui/src/styles/createPalette.test.js index 7197b33a8b6092..1ce229b05126f9 100644 --- a/packages/material-ui/src/styles/createPalette.test.js +++ b/packages/material-ui/src/styles/createPalette.test.js @@ -458,7 +458,7 @@ describe('createPalette()', () => { assert.strictEqual(consoleErrorMock.callCount(), 1); assert.include( consoleErrorMock.args()[0][0], - 'falls below the WACG recommended absolute minimum contrast ratio of 3:1', + 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1', ); }); });