diff --git a/docs/pages/blog/mui-v5.js b/docs/pages/blog/mui-v5.js new file mode 100644 index 00000000000000..a78dd1fa6df2ae --- /dev/null +++ b/docs/pages/blog/mui-v5.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './mui-v5.md?@material-ui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/mui-v5.md b/docs/pages/blog/mui-v5.md new file mode 100644 index 00000000000000..a1165cc2c04a65 --- /dev/null +++ b/docs/pages/blog/mui-v5.md @@ -0,0 +1,201 @@ +--- +title: MUI v5.0 +description: MUI v5.0 is out 🎉 +date: 2021-09-15T00:00:00.000Z +authors: ['oliviertassinari', 'mbrookes', 'eps1lon', 'mnajdova'] +card: true +--- + +After over 400 days of development and over 40 canary releases, we are excited to introduce MUI v5.0.0! +This release features: + +- ? depending on timing and strategy [A new branding](#a-new-branding) +- [High-level goals for v5](#high-level-goals-for-v5) +- [Improved customizability](#improved-customizability) +- [New components](#new-components) +- [A new product line: X](#a-new-product-line-x) +- [Improved DX](#improved-dx) +- [v4 migration](#the-migration-from-v4) +- [Design kits](#design-kits) +- [What's next?](#whats-next) + +## A new branding + +- We might want to have a second blog post for this 🤔 +- v5 is the biggest major we have released to date, e.g. more work went into it than v1. +- A new branding to shift developers's perception on the library, encourage them to update their previous perception on it. makeStyles -> styled + sx + dynamic theme is meant to be **major** a DX improvement. +- e.g. https://blog.getbootstrap.com/2021/05/05/bootstrap-5/#new-logo + +## High-level goals for v5 + +Give the backstory to the developers, make us accountable for spending 1 year+ on a major + breaking changes and not on improving the v4 they already use. + +- Link the RFC with the initial plan https://github.com/mui-org/material-ui/issues/20012 +- What v5 is mostly about: solve the pain reported in https://material-ui.com/blog/2020-developer-survey-results/. in the end, it was mostly about customizability. + +## Improved customizability + + +### Migration from JSS to emotion + +- Settle on the name, emotion vs. Emotion +- Explain the problem, the solution +- Like the extensive research that Marija did +- Thanks community members that helped to make the migration of the codebase happen, it was long and fastidous +- Explain what's the migration path for JSS: `@material-ui/styles` +- Start sponsoring emotion $1,000/month + +### The `sx` prop + +- Explain the problem, the solution +- Also available as flatten props https://material-ui.com/blog/2021-q1-update/. +- Explain why no support of flatten on all the components (a popular request) + +### Dynamic props + +- Explain the problem, the solution +- Covered a bit in https://material-ui.com/blog/2020-q3-update/, https://material-ui.com/blog/2021-q1-update/ + +```jsx +const theme = createMuiTheme({ + components: { + MuiButton: { + variants: [ +``` + +```jsx +import { createMuiTheme, Button } from '@material-ui/core'; + +// 1. Extend the theme. +const theme = createMuiTheme({ + palette: { + neutral: { + main: '#5c6ac4', + }, + }, +}); + +// 2. Notify TypeScript about the new color in the palette +declare module '@material-ui/core/styles' { + interface Palette { + neutral: Palette['primary']; + } + interface PaletteOptions { + neutral: PaletteOptions['primary']; + } +} + +// 3. Profit +