From 079b9cbea8e8f194b8e7e2558a1fef54fac6a150 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 28 Aug 2021 10:01:16 +0200 Subject: [PATCH] next iteration --- docs/pages/blog/material-ui-is-now-mui.js | 7 + docs/pages/blog/material-ui-is-now-mui.md | 99 ++++ docs/pages/blog/{mui-v5.js => mui-core-v5.js} | 2 +- docs/pages/blog/mui-core-v5.md | 518 ++++++++++++++++++ docs/pages/blog/mui-v5.md | 212 ------- .../blog/material-ui-is-now-mui/card.png | Bin 0 -> 116503 bytes .../blog/material-ui-is-now-mui/old-new.png | Bin 0 -> 5670 bytes .../blog/material-ui-is-now-mui/palette.png | Bin 0 -> 39847 bytes .../blog/material-ui-is-now-mui/products.png | Bin 0 -> 45961 bytes docs/public/static/blog/mui-core-v5/card.png | Bin 0 -> 187989 bytes .../static/blog/mui-core-v5/masonry.png | Bin 0 -> 47278 bytes docs/public/static/blog/mui-core-v5/stack.png | Bin 0 -> 27468 bytes 12 files changed, 625 insertions(+), 213 deletions(-) create mode 100644 docs/pages/blog/material-ui-is-now-mui.js create mode 100644 docs/pages/blog/material-ui-is-now-mui.md rename docs/pages/blog/{mui-v5.js => mui-core-v5.js} (75%) create mode 100644 docs/pages/blog/mui-core-v5.md delete mode 100644 docs/pages/blog/mui-v5.md create mode 100644 docs/public/static/blog/material-ui-is-now-mui/card.png create mode 100644 docs/public/static/blog/material-ui-is-now-mui/old-new.png create mode 100644 docs/public/static/blog/material-ui-is-now-mui/palette.png create mode 100644 docs/public/static/blog/material-ui-is-now-mui/products.png create mode 100644 docs/public/static/blog/mui-core-v5/card.png create mode 100644 docs/public/static/blog/mui-core-v5/masonry.png create mode 100644 docs/public/static/blog/mui-core-v5/stack.png diff --git a/docs/pages/blog/material-ui-is-now-mui.js b/docs/pages/blog/material-ui-is-now-mui.js new file mode 100644 index 00000000000000..da631003aabc92 --- /dev/null +++ b/docs/pages/blog/material-ui-is-now-mui.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './material-ui-is-now-mui.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/material-ui-is-now-mui.md b/docs/pages/blog/material-ui-is-now-mui.md new file mode 100644 index 00000000000000..4940594530b74e --- /dev/null +++ b/docs/pages/blog/material-ui-is-now-mui.md @@ -0,0 +1,99 @@ +--- +title: Material-UI is now MUI +description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products. +date: 2021-09-15T00:00:00.000Z +authors: ['oliviertassinari', 'danilo-leal', 'mbrookes'] +card: true +--- + +Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products. + +- Material-UI: the organization is now called [**MUI**](https://github.com/mui-org/). +- Material-UI: the MIT React library is now called [**MUI Core**](https://github.com/mui-org/material-ui). +- Material-UI X: the set of advanced React components is now called [**MUI X**](https://github.com/mui-org/material-ui-x). + +The new identity matches with the increase scope of our focus. + +## The origin + +Material-UI started as a React implementation of the Material Design guidelines in 2014. +The goal was simple, to empower the React developers to use Material Design. +The community [loved it](https://news.ycombinator.com/item?id=8582439) and was craving for more, so we kept building. + +We have made it smooth for the community to contribute. +We started actively reviewing pull requests and guiding issues. +Things started to really take off with [the release of v1](/blog/material-ui-v1-is-out/) in 2018. +The frontend community was actively migrating to React and in desperate need to move fast. + +Before we realized it, we had grown into the most popular React UI components library. +We were heavily used and customized to build: customer-facing applications, internal tools, and mobile-hybrid applications. + +## A larger focus + +In our last survey, [60% fewer](/blog/2020-developer-survey-results/#comparison-with-last-year) developers were complaining about improving Material Design implementation than they did a year before. +At the same time, 400% more developers were struggling to customize the components. + +It's the context in which we started working on v5 in 2019. +Our primary focus was to revamp the **customization DX**. +It had become clear that design and DX were key to unlock the next stage of growth. + +The release of this rebranding matches with the release of v5.0.0. +It's a big deal. +The new branding aligns with the increase of the company's area of focus. + +Our ultimate goal is to become the most effective and efficient tool to build UIs while making it accessible to the many. + +## Our new brand + +Let's dig in. + +### A new name + +We are breaking the strong association with Material Design. +We have seen too many people confusing Material-UI with a Google effort or a synonym of Material Design. + +We are now called **MUI**, it stands for **M**aterials to Build **UI**s. +and is pronounced [/ɛmjuːaɪ/](http://ipa-reader.xyz/?text=%C9%9Bmju%CB%90a%C9%AA). + +It's shorter, it distinguishes ourselves, it's already how many people abbreviate us. +More importantly, it prepares the release of unstyled/headless components, a second design system to complement Material Design, and more. + +### A new domain name + +A new name wouldn't resonate without a new domain name. +We have moved home from https://material-ui.com/ to https://mui.com/, an 3 domain laters domain. + +### New logos + +The logo of the company is evolving: + +- We have reduced the emphasis on the smart 3D perspective. It's a step away from the notion of elevation in Material Design with a single color. +- We have rebalanced the proportions and equilibrium of the letters. +- We have added a slight border-radius to soften the angles. + + + +We are introducing logos for each of our products: + + + +### New package names + +The package names have changed in v5, which is a **breaking change**, you can find more details in the release notes. +The npm organization name has moved from @material-ui to [@mui](https://www.npmjs.com/org/mui). + +### A new website & documentation + +We used this opportunity to tell a different story about the company and its products, positioning us in a broader space. +We better explain and share what we do and who we are. +We have created a custom brand identity, away from Material Design. +For instance, you will find this custom color palette: + + + +[Head to the new website](/). +Note that these changes are **not** impacting the design of the components released under the `@mui/material` npm package. + +## The path ahead + +Most of this update has been rolled out, we will fix inconsistencies as we spot them. diff --git a/docs/pages/blog/mui-v5.js b/docs/pages/blog/mui-core-v5.js similarity index 75% rename from docs/pages/blog/mui-v5.js rename to docs/pages/blog/mui-core-v5.js index a78dd1fa6df2ae..58964ba574b46e 100644 --- a/docs/pages/blog/mui-v5.js +++ b/docs/pages/blog/mui-core-v5.js @@ -1,6 +1,6 @@ import * as React from 'react'; import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './mui-v5.md?@material-ui/markdown'; +import { docs } from './mui-core-v5.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md new file mode 100644 index 00000000000000..247477c4a518e9 --- /dev/null +++ b/docs/pages/blog/mui-core-v5.md @@ -0,0 +1,518 @@ +--- +title: Introducing MUI Core v5.0 +description: MUI Core v5.0 is out 🎉 +date: 2021-09-15T00:00:00.000Z +authors: ['mbrookes', 'eps1lon', 'mnajdova', 'michaldudak', 'siriwatknp'] +card: true +--- + +After over 400 days of development and over 40 canary releases, we are excited to introduce MUI Core v5.0.0! +This release features some major highlights: + +- [High-level goals for v5](#high-level-goals-for-v5) +- [Improved customizability](#improved-customizability) + - [Migration from JSS to emotion](#migration-from-jss-to-emotion) + - [The sx prop](#the-sx-prop) + - [Dynamic props](#dynamic-props) + - [Global class names](#global-class-names) + - [Base components (alpha)](#base-components-alpha) +- [Improved DX](#improved-dx) +- [A new product line: X](#a-new-product-line-x) +- [New components](#new-components) + - [Improved Grid](#improved-grid) + - [More Material Design icons](#more-material-design-icons) + - [Stack](#stack) + - [Promotion from the lab](#promotion-from-the-lab) + - [New in the lab](#new-in-the-lab) +- [A new branding](#a-new-branding) +- [v4 migration](#v4-migration) +- [Design kits](#design-kits) +- [What's next?](#whats-next) + +## High-level goals for v5 + +In our last survey, [60% fewer](/blog/2020-developer-survey-results/#comparison-with-last-year) developers were complaining about improving Material Design implementation than they did a year before. +At the same time, 400% more developers were struggling to customize the components. + +It's the context in which we started working on v5 in 2019. +Our primary focus was to revamp the **customization DX**. +It had become clear that design and DX were key to unlock the next stage of growth. + +At the same time, the last major iteration on the library was done with MUI v4, released [2.5 years ago](/blog/material-ui-v4-is-out/). +It's a long period not to innovate. +We have approached v5 by focusing on the value it would deliver **long term**. +For instance, we have stopped all development in v4 as soon as we started to work on v5. +We have taken the liberty to introduce breaking changes anytime we have identified a long term potential. + +You can find the initial RFC plan for v5 in [issue #20012](https://github.com/mui-org/material-ui/issues/20012). + +## Improved customizability + +### Migration from JSS to emotion + +The first step we took to improve the customization experience was to rethink the styling solution from a blank page. + +If you have been following us for a long time, you have probably noticed that we have iterated, a lot, on the styling solution in 7 years. +We have started with Less, then inline-style, then JSS, and now emotion. Why change it again? We went on solving the following **problems**: + +1. The React community is settling on `styled` as the **most popular** CSS-in-JS API. We have used popularity as a proxy for "best". + +```jsx +const StyledDiv = styled('div')({ + color: 'red', +}); + +// or +const StyledDiv = styled.div` + color: red; +`; +``` + +

Codesandbox

+ +You can find it on [styled-components](https://styled-components.com/), [emotion](https://emotion.sh/docs/styled), [goober](https://goober.js.org/), [stitches](https://stitches.dev/docs/api#styled), or [linaria](https://linaria.dev/). +While MUI is compatible with any styling solution (as long as the styles have more specificity, e.g. Tailwind CSS), many developers still felt the need to learn something new: the [`makeStyles`](/styles/basics/#hook-api) API. + +2. Our React integration with JSS (`@mui/styles`) is **too slow** to unlock the next layer of customization DX we aim for. + The static CSS generation using v4 was fast enough, even [faster](https://codesandbox.io/s/nb05w?file=/src/App.js) than emotion. + However, the dynamic style generation was too slow to be used in production. We would have needed to reimplement it. +3. Many developers were advocating for MUI to [migrate to styled-components](https://github.com/mui-org/material-ui/issues/6115). + It would mean giving up on the custom React JSS wrapper we maintain. + From our experience, maintaining a custom styling solution takes a considerable amount of time. Is it the best use of our time? + +After [exploring](https://github.com/mui-org/material-ui/issues/22342) many different options. +We settled on what we believe is a great tradeoff to **solve** the above issues: + +1. We have made `styled` the lowest level primitive to add styles. + This API is already known by many. +2. We have defined a common interface with concrete implementations: + + - `@mui/styled-engine`: implemented with emotion (default). + - `@mui/styled-engine-sc`: implemented with styled-components + - If you are using a different styled engine, feel free to contribute a wrapper. For instance, there is [one attempt with goober](https://github.com/mui-org/material-ui/pull/27776), a library obsessing on bundle size (3kB gzipped). + + This allows developers to swap between different styled engines. For instance, styled-components users do no longer need to bundle emotion **and** styled-component, nor do they need to configure the server-side rendering for each. + How does the [swap works](/guides/styled-engine/#how-to-switch-to-styled-components)? The same way it does from React to Preact. + +3. We have started to [sponsor](https://opencollective.com/emotion) emotion with a $1,000/month grant. It's in our best interest to help ensure the library keeps pushing the envelope, staying state of the art in a competitive space. + +The first immediate benefit was at the **performance** level. the `` component is [x5-x10 more performant](https://codesandbox.io/s/zlh5w?file=/src/App.js) in v5, compared to v4. + +We would like to thanks all the community contributors that made the migration of the components and documentation possible in [#24405](https://github.com/mui-org/material-ui/issues/24405) and [#16947](https://github.com/mui-org/material-ui/issues/16947) @natac13, @vicasas, @mngu, @kodai3, @xs9627, @povilass, @duganbrett, @vinyldarkscratch, and more. +It was a major undertaking! + +Going forward, developers can either keep using JSS with the legacy `@mui/styles` packagenon trivial +[or migrate](/guides/migration-v4/#migrate-makestyles-to-emotion). +We recommend the latter to match the core components. + +### The `sx` prop + +While the `styled` API is great to style complex components or to create highly reused components, there are cases where it's overkill. +We started to [explore](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df) this **problem** three years ago with the introduction of the `` component to solve: + +1. **Switching context** wastes time. + The styled API forces to constantly jump between the usage of the styled components and where they are defined. + Could we move the style descriptions right where we need them? +2. **Naming things** is hard. + Have you ever found yourself struggling to find a good name for a styled component? + Could we remove the need to create and name yet another component? +3. **Enforcing consistency** in UIs is hard. + This is especially true when more than one person is building the application, as there has to be some coordination amongst members of the team regarding the choice of design tokens and how they are used, what parts of the theme structure should be used with what CSS properties, and so on. + +In v5, we have pushed the solution one step further with the `sx` prop. +The prop is now available on **all** the components thanks to the migration away from JSS. +It exposes as a superset of the CSS API, the normal CSS properties, shorthands, and media query helpers. + +For instance, you can add two vertical margin units with: + +```jsx +// add margin: 16px 0px; + +``` + +

Codesandbox

+ +Developers seem to already [love it](https://twitter.com/AnsonLowZF/status/1397034690771443715). +You can find a [side-by-side comparison](/system/basics/#why-use-the-system) of `styled` vs. `sx` in the documentation to determine when you want to use the prop. +Find where your cursor is. Some developers use it for everything, others with parsimony. + +The four components categorized as CSS utilities: Box, Grid, Typography, and Stack also expose a subset of the `sx` prop as flat props, for instance: + +```jsx + +``` + +

Codesandbox

+ +See the [API tradeoff](/system/basics/#api-tradeoff) section of the documentation for why not all the components accept these flat props. + +### Dynamic props + +React is about composition. Developers can import one component, extend it, and re-export the wrapper. +It's how developers have extended our core components up until v4. However: + +1. Each time you create a new component, it's another import option for your team. + Now, you have to enforce that the right component is imported. +2. Adding a new `color="success"` prop to a Button component requires non-trivial CSS customizations. + How do you ensure that all the styles (hover, focus, focus-visible) are consistent with the other built-in colors? +3. It adds a boilerplate. + +It's why v5 comes with the capability to extend the built-in behavior of the components; right from the theme. +It was one of the most upvoted GitHub issues: [#13875](https://github.com/mui-org/material-ui/issues/13875). +In practice, the change makes the MUI Core components extendable placeholders. + +**First**, you can use the [existing style mapping](/customization/palette/#adding-new-colors) of the components. +For instance, you can add a new neutral color to lette. The Button computes the right derivative colors. + +```jsx +import { createTheme, Button } from '@mui/material'; + +// 1. Extend the theme. +const theme = createTheme({ + palette: { + neutral: { + main: '#d79b4a', + }, + }, +}); + +// 2. Notify TypeScript about the new color in the palette +declare module '@mui/material/styles' { + interface Palette { + neutral: Palette['primary']; + } + interface PaletteOptions { + neutral: PaletteOptions['primary']; + } +} + +// 3. Update the Button's color prop options +declare module '@mui/material/Button' { + interface ButtonPropsColorOverrides { + neutral: true; + } +} + +// 4. Profit + +``` + +

Codesandbox

+ +### Global class names + +In v3, we heard how frustrating using the `classes` prop API correctly can sometimes be. +In v4, we made [a step](/blog/material-ui-v4-is-out/#customization) toward adding global class names. +They are present, as long as no more than one ThemeProvider is used. + +v5 double down on this direction by always adding global class names on the host DOM nodes. +These class names are available for customizing the child elements. +It can simplify the customization of complex components. + +For instance, compare these tree options to turn the input outlined border color red: + +```tsx +import TextField from '@mui/material/TextField'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import { styled } from '@mui/material/styles'; + +// Option 1: global class +const CustomizedTextField1 = styled(TextField)({ + '& .MuiOutlinedInput-notchedOutline': { + borderColor: 'red', + }, +}); + +// Option 2: global class + const +const CustomizedTextField2 = styled(TextField)({ + [`& .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'red', + }, +}); + +// Option 3: classes prop (before) +const CustomizedTextField3 = styled((props) => ( + +))({ + '& .foo': { + borderColor: 'red', + }, +}) as typeof TextField; +``` + +

Codesandbox

+ +Option 1 is the simplest but if you want more type safety and do not use a magic string (`MuiOutlinedInput-notchedOutline`), you can use Option 2. + +### Base components (alpha) + +While hooks were high-risk experimentation when React released them in 2018, they are now ubiquitous. +This is a great opportunity for MUI to expose more flexibility: headless components. + +A key reason why developers pick MUI is to be able to build UIs faster. +When they depend on us, they make a tradeoff. +They estimate that applying new styles on top of the Material Design components will be faster than creating components from scratch or picking another library. +They estimate that it will be performant enough, and they won't miss too much freedom. + +This tradeoff work **really well** when having a small, constrained engineering team or a large team building internal (/secondary) tools. +But what about the medium/large size engineering team that works on ambitious projects? Shouldn't they have a better option than building the components from scratch to not include Material Design and maximize freedom? + +This is this problem that our team started working on. +We are isolating the logic of the Material Design components into hooks and unstyled components. +While the effort is still in alpha, you can already find the first building blocks in the `@mui/base` package. + +For instance, it's featuring: + +- [Autocomplete](/components/autocomplete/#useautocomplete) +- [Button](/components/buttons/#unstyled) +- [Modal](/components/modal/#unstyled) +- [Pagination](/components/pagination/#usepagination) +- [Slider](/components/slider/#unstyled) +- [Switch](/components/switches/#unstyled-switches) + +```jsx +const CustomButton = React.forwardRef(function CustomButton( + props: ButtonUnstyledProps, + ref: React.ForwardedRef, +) { + const { children } = props; + const { active, disabled, focusVisible, getRootProps } = useButton({ + ...props, + ref, + component: CustomButtonRoot, + }); + + const classes = { + active, + disabled, + focusVisible, + }; + + return ( + + {children} + + ); +}); +``` + +

Codesandbox

+ +We discuss the effort in [#6218](https://github.com/mui-org/material-ui/issues/6218). +You can use [#27170](https://github.com/mui-org/material-ui/issues/27170) to follow our progress. + +## Improved DX + +### Smaller demos in the docs + +- Covered a bit in https://material-ui.com/blog/2021-q1-update/ + +### Props descriptions in IntelliSense + +- Already a bit covered in https://material-ui.com/blog/2020-q2-update/ + +### Migration from Enzyme to Testing Library + +- The value? Makes it easier for developers to copy the source, and maintainers to make sure the components are easy to test + +### TypeScript migration + +- Share our progress https://github.com/mui-org/material-ui/issues/15984 +- Covered a bit in https://material-ui.com/blog/2020-q3-update/ +- The value? Helps keeping the types as accurate as possible + +### Strict Mode support + +- Docs, test, etc. now runs in StrictMode +- Warn that `@material-ui/styles` is not compatible + +## A new product line: X + +- What are the new product separation +- What this product line is about +- Why does it even exist +- Present the new Data Grid component, hopefully, released as v5.0.0 at the same time. + +## New components + +This release comes with eight new components! + +### Improved Grid + +The development of the Grid was mostly put on hold for the last 3 years, blocked by the size of the statically generated CSS with JSS. +The [migration to emotion](#migration-from-jss-to-emotion) has unlocked the following, frequently requested, changes: + +We have added support for [row & column](/components/grid/#row-amp-column-spacing) spacing: + +```jsx + +``` + +We have added support for [responsive values](/components/grid/#responsive-values) on all the props: + +```jsx + +``` + +We have added support for a different [number of columns](/components/grid/#columns) than 12: + +```jsx + +``` + +We have added an alternative implementation that uses [CSS grid](/components/grid/#css-grid-layout): + +```jsx + + + xs=8 + + + xs=4 + + + xs=4 + + + xs=8 + + +``` + +### More Material Design icons + +The Material Design team at Google has released 600 new icons in five different themes since we released v4. +We have made them [available](/components/material-icons/) in the `@mui/icons-material` package. + +### Stack + +We have introduced a new `` component. +It handles one-dimensional layouts, it's similar to how Figma handles auto-layout. + + + +> Note that you might already be using `` to solve the same problem. +> However [browser support](https://caniuse.com/flexbox-gap) for the flexbox `gap` CSS property is lacking in Safari. + +You can find [more details](/components/stack/) in the documentation. + +### Promotion from the lab + +We have promoted six component from the lab, after over two years iterating on feedback: + +- [Autocomplete](/components/autocomplete/) +- [Pagination](/components/pagination/) +- [Rating](/components/rating/) +- [Skeleton](/components/skeleton/) +- [Speed Dial](/components/speed-dial/) +- [Toggle Buttons](/components/toggle-button/) + +### New in the lab + +The lab hosts the incubator components that are not yet ready to move to the core. +The main difference between the lab and the core is how the components are versioned. +Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](/versions/#release-frequency). + +The following components are now available in the lab: + +- [LoadingButton](/components/buttons/#loading-buttons). It does what you would expect. It renders the `Button` in a loading/pending state. +- [TrapFocus](/components/trap-focus/). This component traps the focus within a DOM node. For instance, it's used by the Modal for accessibility reasons. +- [Masonry](/components/masonry/). One great use case for this component is when using the `Grid` component leads to wasting space. It's frequently used in dashboards. + + + +### Date pickers + +- Transfer of ownership from third-party to mui-org. + +### Data Grid + +- See next section +- Covered a bit in https://material-ui.com/blog/2020-q3-update/ + +## Change on the supported platforms + +- Updated TypeScript version +- Updated node.js version +- Updated React's version +- Updated browsers support. Stop all work on IE 11, but specific IE 11 will only be removed in v6. + Moving IE 11 to a different bundle has allowed saving [-6kB](https://github.com/mui-org/material-ui/pull/22814#issuecomment-700995216) overall. + +## v4 migration + +- The high-level changes required +- Installation +- ⚓️ We have introduced a new release line: v4.x.x-deprecations.x. This release line is kept in sync with the latest version of v4 and includes actionable deprecations to ease the migration to v5. +- The codemod, covered a bit in https://material-ui.com/blog/2021-q2-update/ +- The migration guide + +## Design kits + +## What's next? + +- Start covering the growth of v4, and its inertia, https://material-ui.com/blog/2020-q3-update/ +- These efforts are sustainable, echos back to https://material-ui.com/blog/material-ui-v4-is-out/#premium-themes-store-%E2%9C%A8 + +### A public roadmap + +It's new, link core and x roadmaps. + +### Core + +- Unstyled +- Joy + +### X + +- Data grid + +## A new branding + +Material-UI **is now MUI**! Head to the [dedicated blog post](/blog/material-ui-is-now-mui/) to learn more. + +## Thank you + +Finally, one last thank you to everyone who's contributed to MUI v5. +The whole team is very excited about this release! It's just the beginning. +We will keep working hard on delivering the best possible React UI components while making it accessible to the many. diff --git a/docs/pages/blog/mui-v5.md b/docs/pages/blog/mui-v5.md deleted file mode 100644 index 8bb63a334d5ab5..00000000000000 --- a/docs/pages/blog/mui-v5.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: MUI v5.0 -description: MUI v5.0 is out 🎉 -date: 2021-09-15T00:00:00.000Z -authors: ['mbrookes', 'eps1lon', 'mnajdova', 'michaldudak', 'siriwatknp'] -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](#v4-migration) -- [Design kits](#design-kits) -- [What's next?](#whats-next) - -## A new branding - -- I wonder if we shouldn't 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 https://github.com/mui-org/material-ui/issues/22342 -- 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` -- We have started 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) -- The community seems to love it https://twitter.com/AnsonLowZF/status/1397034690771443715 - -### 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 -