diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5ffd4205bfa824..b2da65f2c263d1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -254,7 +254,7 @@ If you are no familiar with that language, write the demo in JavaScript, a core
#### 4. You are done đ!
-In case you missed something, [we have a real example that can be used as a summary report](https://github.com/mui-org/material-ui/pull/8922/files).
+In case you missed something, [we have a real example that can be used as a summary report](https://github.com/mui-org/material-ui/pull/19582/files).
## Translations
diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md
index 239e562f7f8d57..97657646ccad47 100644
--- a/docs/pages/blog/2019.md
+++ b/docs/pages/blog/2019.md
@@ -25,7 +25,7 @@ The numbers speak for themselves. 2019 was super exciting and made Material-UI o
When we started 2019, we were celebrating the launch of the **first stable release** of the framework and iterating to polish it (looking at the list of breaking changes, v3 is almost identical to v1).
We thought we were almost done, and that we had done the hardest part with the release of the stable version. All we would need to do going forward was to keep up with the Material Design specification and fix a couple of bugs.
-We have quickly realized that we could do way way more. It was just the beginning :D.
+We soon realized that we could do way more. It was just the beginning :D.
Some of the key factors:
- The results of the [2019 Developer Survey](https://medium.com/material-ui/2019-material-ui-developer-survey-results-c9589434bbcf) have highlighted the immense potential for working on advanced components and features, especially for enterprise users.
@@ -61,12 +61,12 @@ We won't rest until we successfully unify these efforts. It's a long term missio
- We have fixed a significant number of [accessibility issues](https://github.com/mui-org/material-ui/issues?q=is%3Aissue+label%3Aaccessibility+is%3Aclosed).
- We have introduced global class names.
- We have migrated the whole codebase to hooks.
-- We have migrated all the demos to TypeScript (while also offering transpiled JS demos).
-- We have introduced [native tree-shaking](/guides/minimizing-bundle-size/) support.
-- We have introduced [built-in localization](/guides/localization/).
-- We have remove a good number of external dependencies and increased the `features/bundle size` density.
-- We have introduced an [icon search page](/components/material-icons/).
-- We have released a [store for Material-UI](https://themes.material-ui.com/).
+- We migrated all the demos to TypeScript (while also offering transpiled JS demos).
+- We introduced [native tree-shaking](/guides/minimizing-bundle-size/) support.
+- We introduced [built-in localization](/guides/localization/).
+- We removed a good number of external dependencies and increased the `features/bundle size` density.
+- We introduced an [icon search page](/components/material-icons/).
+- We released a [store for Material-UI](https://themes.material-ui.com/).
## Looking at 2020
@@ -76,11 +76,11 @@ We will continue in the same direction.
### Survey
The developer survey we ran [last year](/blog/2019-developer-survey-results/) was so insightful that we plan to run it every year.
-It's a great opportunity for us to adjust the strategy and to pause to analyse the outcome of the actions we took in the previous year.
+It's a great opportunity for us to adjust the strategy and to pause to analyze the outcome of the actions we took in the previous year.
### Open source roadmap
-Most of the time we work in the open. Here's our our [public roadmap](/discover-more/roadmap).
+Most of the time we work in the open. Here's our [public roadmap](/discover-more/roadmap).
We plan to release a new major around the end of the year (v5).
We will promote components that are in the lab to the core, migrate to styled-components, and more.
diff --git a/docs/src/pages/company/jobs/jobs.md b/docs/src/pages/company/jobs/jobs.md
index c89b52c96056b5..24a86f58256776 100644
--- a/docs/src/pages/company/jobs/jobs.md
+++ b/docs/src/pages/company/jobs/jobs.md
@@ -2,5 +2,5 @@
Join our team!
-- [Software Engineer](/company/software-engineer/) ⢠Remote or Paris
+- [Senior Software Engineer](/company/software-engineer/) ⢠Remote
We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun by making it simple.
diff --git a/docs/src/pages/company/software-engineer/software-engineer.md b/docs/src/pages/company/software-engineer/software-engineer.md
index 09d14b6eff2339..f2fe239589d1c7 100644
--- a/docs/src/pages/company/software-engineer/software-engineer.md
+++ b/docs/src/pages/company/software-engineer/software-engineer.md
@@ -1,4 +1,4 @@
-# Software Engineer
+# Senior Software Engineer
We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun by making it simple.
@@ -12,17 +12,20 @@ Material-UI started back in 2014 to unify React and Material Design. Today, Mate
## Details of the Role
-- Type of work: Contractor (long mission, full-time, convertible to an employee position)
-- Start date: Immediately
-- Location: Remote (preference for UTC-5 to UTC+4), or Paris
+- Type of work: Contractor (long mission, full-time, convertible to an employee position in the future).
+- Start date: Immediately.
+- Location: Remote (preference for UTC-5 to UTC+4).
+- Level: [Senior Engineer or above](https://open.buffer.com/engineering-career-framework/).
+- We're a remote company, we prefer asynchronous communication over meetings.
+- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us.
## Why weâre hiring
Both our open source products and community, and our premium products are [growing fast](https://www.rank2traffic.com/material-ui.com) and we need talented engineers to keep that going!
-We need help to continue to improve the health of Material-UI open source: make the library easier to use, make it support more use cases, improve performance, make it more accessible, and make it easier to customize. We also need help keeping up with the community, guiding developers to answers, and just generally being a positive presence in the open source community.
+We need help to continue to improve the health of Material-UI open source: make the library easier to use, make it support more use cases, improve performance, make it more accessible, and make it easier to customize to support [in-house design systems](https://medium.com/google-design/state-of-design-systems-2019-ff5f26ada71). We also need help keeping up with the community, guiding developers to answers, and just generally being a positive presence in the open source community.
-We also need to develop our premium content. We have a premium store, and soon an enterprise class offering, starting with the data grid.
+We also need to develop our premium content. We have a store, and soon an enterprise offering, starting with the data grid.
Enterprise features will build on the open source version of the components.
## Why this is interesting
@@ -38,7 +41,7 @@ Depending on the day, youâll:
On the open source side:
- **Help guide architectural decisions**. From modernizing the way we handle styles to building new components, the future of Material-UI is discussed and planned in our public RFCs and issues. Youâll be helping drive these conversations and guiding Material-UI toward the best possible solutions.
-- **Contribute to deep, meaningful refactors and feature releases**. Material-UI is a complex codebase. Components weâve shipped recently, such as the Tree View and Slider have required weeks of dedicated, careful work.
+- **Contribute to deep, meaningful refactors and feature releases**. Material-UI is a complex codebase. Components weâve shipped recently, such as the Tree View, Autocomplete, and Slider have required weeks of dedicated, careful work.
- **Reduce friction**. A large amount of the work on Material-UI is reducing friction and making it easier to use. This might involve careful API design, identifying and fixing top bugs, creating easier to understand error messages, and writing documentation and blog posts about features you ship.
- **Collaborate with the community**. Many small as well as meaningful fixes and features have been contributed by the community. Your role as a core team maintainer is to draw the best out of the community â to inspire those across the world to create and contribute through your reviews of their issues and pull requests.
- **Experiment and play**. Great, unexpected features and heisenbug fixes have come from a number of sources â relentlessly methodical processes of elimination, free-flowing team collaboration, inspiration by adjacent libraries and projects, and difficult-to-explain individual strokes of brilliance. Whatever your preferred style is for creating new things that others might not have thought of, youâll find a welcome home on the team.
@@ -47,6 +50,7 @@ Premium components:
- **Take ownership of features from idea/mockup to live deployment**. Youâll shape and guide the direction of crucial new features, including new components.
- **Ship. Early and often**. Youâll iterate and ship frequently. Youâll have a real impact on the end-user experience and youâll love working on a team that builds stunning UIs and prioritizes delivering real user value as often as possible.
+- **You'll be interacting with our customers** on a regular basis, handling inbound support and feature requests (every developer helps with support).
## Experience you should have
@@ -61,6 +65,7 @@ Premium components:
## Experience it would be nice if you had, but isnât required
+- **Youâve contributed to a design system before**. You have worked on enterprise components in the past, maybe for internal usage in your company. You have built complex and advanced features while making sure the accessibility was fully functional.
- **Youâve maintained an active repository before**. Maybe youâve helped maintain a popular open source repo, or perhaps youâve worked on internal repos that saw contributions from multiple teams. Previous experience with highly active repo workflows is a definite plus for this role.
- **You have used Material-UI before**. You have built a non trivial application with Material-UI in the past. You know the limitations of the library, you know a few areas that could be improved.
- **You have contributed code to Material-UI before**. A history of contributing to Material-UI would be a definite plus.
@@ -81,7 +86,7 @@ The work you would be doing is somewhat unique and idiosyncratic. You probably h
## Benefits for you
-- A competitive compensation.
+- Competitive compensation of up to $120k/year, depending on the profile. Could go higher in the case of an extraordinary match.
- Flexible workplace & hours.
## Apply
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
new file mode 100644
index 00000000000000..2e89be3feb47d1
--- /dev/null
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
+import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
+import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
+import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
+import LaptopIcon from '@material-ui/icons/Laptop';
+import TvIcon from '@material-ui/icons/Tv';
+import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
+import Grid from '@material-ui/core/Grid';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+
+const useStyles = makeStyles(theme => ({
+ toggleContainer: {
+ margin: theme.spacing(2, 0),
+ },
+}));
+
+export default function ToggleButtonNotEmpty() {
+ const [alignment, setAlignment] = React.useState('left');
+ const [formats, setFormats] = React.useState(() => ['phone']);
+
+ const handleFormat = (event, newFormats) => {
+ if (newFormats.length) {
+ setFormats(newFormats);
+ }
+ };
+
+ const handleAlignment = (event, newAlignment) => {
+ if (newAlignment !== null) {
+ setAlignment(newAlignment);
+ }
+ };
+
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
new file mode 100644
index 00000000000000..84d4f742cfef01
--- /dev/null
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
+import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
+import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
+import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
+import LaptopIcon from '@material-ui/icons/Laptop';
+import TvIcon from '@material-ui/icons/Tv';
+import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
+import Grid from '@material-ui/core/Grid';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+
+const useStyles = makeStyles(theme => ({
+ toggleContainer: {
+ margin: theme.spacing(2, 0),
+ },
+}));
+
+export default function ToggleButtonNotEmpty() {
+ const [alignment, setAlignment] = React.useState('left');
+ const [formats, setFormats] = React.useState(() => ['phone']);
+
+ const handleFormat = (event: React.MouseEvent, newFormats: string[]) => {
+ if (newFormats.length) {
+ setFormats(newFormats);
+ }
+ };
+
+ const handleAlignment = (event: React.MouseEvent, newAlignment: string | null) => {
+ if (newAlignment !== null) {
+ setAlignment(newAlignment);
+ }
+ };
+
+ const classes = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.tsx b/docs/src/pages/components/toggle-button/ToggleButtons.tsx
index 7aac56329b171c..909552f11abd2b 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtons.tsx
+++ b/docs/src/pages/components/toggle-button/ToggleButtons.tsx
@@ -21,14 +21,14 @@ const useStyles = makeStyles(theme => ({
}));
export default function ToggleButtons() {
- const [alignment, setAlignment] = React.useState('left');
+ const [alignment, setAlignment] = React.useState('left');
const [formats, setFormats] = React.useState(() => ['bold']);
const handleFormat = (event: React.MouseEvent, newFormats: string[]) => {
setFormats(newFormats);
};
- const handleAlignment = (event: React.MouseEvent, newAlignment: string) => {
+ const handleAlignment = (event: React.MouseEvent, newAlignment: string | null) => {
setAlignment(newAlignment);
};
diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md
index 669b1ad9635a0e..264f54a44b8e34 100644
--- a/docs/src/pages/components/toggle-button/toggle-button.md
+++ b/docs/src/pages/components/toggle-button/toggle-button.md
@@ -21,6 +21,27 @@ Fancy larger or smaller buttons? Use the `size` property.
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+## Enforce value set
+
+If you want to enforce at least one button to be active, you can adapt your handleChange
+function.
+
+```jsx
+const handleFormat = (event, newFormats) => {
+ if (newFormats.length) {
+ setFormats(newFormats);
+ }
+};
+
+const handleAlignment = (event, newAlignment) => {
+ if (newAlignment !== null) {
+ setAlignment(newAlignment);
+ }
+};
+```
+
+{{"demo": "pages/components/toggle-button/ToggleButtonNotEmpty.js"}}
+
## Standalone toggle button
{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
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 1f22ea29f501c5..ced7de90345e0f 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects.md
@@ -21,6 +21,11 @@ You didn't find the design assets your team is looking for? Let us know!
- [Unsplash](https://unsplash.com): đˇ A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
- [unDraw](https://undraw.co/): đ Like Unsplash but for amazing vector illustrations.
+## IDE Tools
+
+- [Material-UI Snippets](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets) VSCode extension providing snippets.
+- [Material-UI Codemorphs](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-codemorphs) VSCode extension providing codemods.
+
## Components
This is a collection of third-party projects that extend Material-UI.
@@ -31,8 +36,7 @@ This is a collection of third-party projects that extend Material-UI.
### Tables
-- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features.
-They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. It supports many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more).
- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
- [tubular-react](https://github.com/unosquare/tubular-react): A Material-UI table with local or remote data-source. Featuring filtering, sorting, free-text search, export to CSV locally, and aggregations.
diff --git a/docs/src/pages/guides/typescript/typescript.md b/docs/src/pages/guides/typescript/typescript.md
index c7e279a18a4d21..c2b1255eb85ff3 100644
--- a/docs/src/pages/guides/typescript/typescript.md
+++ b/docs/src/pages/guides/typescript/typescript.md
@@ -242,7 +242,8 @@ And a custom theme factory with additional defaulted options:
**./styles/createMyTheme**:
```ts
-import createMuiTheme, { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
export default function createMyTheme(options: ThemeOptions) {
return createMuiTheme({
diff --git a/examples/create-react-app-with-typescript/README.md b/examples/create-react-app-with-typescript/README.md
index dae9e16e542a17..3f33515bb08429 100644
--- a/examples/create-react-app-with-typescript/README.md
+++ b/examples/create-react-app-with-typescript/README.md
@@ -16,6 +16,10 @@ npm install
npm start
```
+or:
+
+[](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript)
+
## The idea behind the example
This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with [TypeScript](https://github.com/Microsoft/TypeScript).
diff --git a/examples/create-react-app/README.md b/examples/create-react-app/README.md
index f5ef94947f136e..f25c2121ba3a9a 100644
--- a/examples/create-react-app/README.md
+++ b/examples/create-react-app/README.md
@@ -16,6 +16,10 @@ npm install
npm start
```
+or:
+
+[](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app)
+
## The idea behind the example
This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app).
diff --git a/examples/gatsby-theme/README.md b/examples/gatsby-theme/README.md
index b333a585faf49a..d6d6b7cde2d187 100644
--- a/examples/gatsby-theme/README.md
+++ b/examples/gatsby-theme/README.md
@@ -16,6 +16,10 @@ npm install
npm run develop
```
+or:
+
+[](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/gatsby-theme)
+
## The idea behind the example
The is an alternative example to [`/examples/gatsby`](https://github.com/mui-org/material-ui/tree/master/examples/gatsby) leveraging [gatsby-theme-material-ui](https://github.com/hupe1980/gatsby-theme-material-ui/tree/master/packages/gatsby-theme-material-ui).
diff --git a/examples/gatsby/README.md b/examples/gatsby/README.md
index 8f5db246d195bd..c33012385abee1 100644
--- a/examples/gatsby/README.md
+++ b/examples/gatsby/README.md
@@ -16,6 +16,10 @@ npm install
npm run develop
```
+or:
+
+[](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/gatsby)
+
## The idea behind the example
[Gatsby](https://github.com/gatsbyjs/gatsby) is a static site generator for React.
diff --git a/examples/nextjs-with-typescript/README.md b/examples/nextjs-with-typescript/README.md
index 5f76d1fba833c4..b5a784f7d68eb0 100644
--- a/examples/nextjs-with-typescript/README.md
+++ b/examples/nextjs-with-typescript/README.md
@@ -16,12 +16,9 @@ npm install
npm run dev
```
-or
+or:
-```sh
-yarn
-yarn dev
-```
+[](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/nextjs-with-typescript)
## The idea behind the example
diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md
index 7eeed9745b4da2..4af9c80dc28152 100644
--- a/examples/nextjs/README.md
+++ b/examples/nextjs/README.md
@@ -16,6 +16,10 @@ npm install
npm run dev
```
+or:
+
+[](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/nextjs)
+
## The idea behind the example
[Next.js](https://github.com/zeit/next.js) is a framework for server-rendered React apps.
diff --git a/examples/ssr/README.md b/examples/ssr/README.md
index 0dc0baa4894ee8..7d8a354a201751 100644
--- a/examples/ssr/README.md
+++ b/examples/ssr/README.md
@@ -15,6 +15,9 @@ Install it and run:
npm install
npm run start
```
+or:
+
+[](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/ssr)
## The idea behind the example
diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.d.ts b/packages/material-ui/src/MobileStepper/MobileStepper.d.ts
index 026d5307aa124d..fe9250a76480ca 100644
--- a/packages/material-ui/src/MobileStepper/MobileStepper.d.ts
+++ b/packages/material-ui/src/MobileStepper/MobileStepper.d.ts
@@ -6,9 +6,9 @@ import { LinearProgressProps } from '../LinearProgress';
export interface MobileStepperProps
extends StandardProps {
activeStep?: number;
- backButton: React.ReactElement;
+ backButton: React.ReactNode;
LinearProgressProps?: Partial;
- nextButton: React.ReactElement;
+ nextButton: React.ReactNode;
position?: 'bottom' | 'top' | 'static';
steps: number;
variant?: 'text' | 'dots' | 'progress';
diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/packages/material-ui/src/Typography/Typography.d.ts
index 8a38a5685c62c5..763b1c9879904b 100644
--- a/packages/material-ui/src/Typography/Typography.d.ts
+++ b/packages/material-ui/src/Typography/Typography.d.ts
@@ -58,7 +58,9 @@ export type TypographyClassKey =
| 'gutterBottom'
| 'paragraph'
| 'colorInherit'
+ | 'colorPrimary'
| 'colorSecondary'
+ | 'colorTextPrimary'
| 'colorTextSecondary'
| 'colorError'
| 'displayInline'