docs/pages/blog/2021-q2-update.md
This update covers our progress over the last three months. It also covers what we aim to achieve in the months ahead.
Here are the most significant improvements since March 2021.
π₯ We've made enough progress to ship v5.0.0-beta.0. Here are a few statistics to give an idea of the effort that went into it:
π©βπ€ We have rolled out the new style engine to all the components.
The community provided invaluable assistance in completing this effort.
In v5, we have standardized on the styled() API as the styling foundation we build on top of, and introduced the the sx prop for one-off customizations.
The styled() API is loved by the community, and implemented by a number of styling libraries: styled-components, emotion, stitches, goober, etc. It allows us to support them all with adapters.
βοΈ We added a codemod CLI and 17 transformations (so far) to automatically migrate codebases from v4 to v5. If you're not familiar with what a codemod is, check out Effective Refactoring with Codemods by Edd Yerburgh.
π We have updated the style of the Slider to better match the Material Design guidelines, and kept a similar style as before under size="small":
<a href="https://mui.com/material-ui/react-slider/#sizes"></a>
β¨ The new style engine has unlocked problems on the Grid component that we couldn't solve before with JSS:
We have added support for row & column spacing:
<Grid container rowSpacing={1} columnSpacing={2} />
We have added support for responsive values on all the props:
<Grid container spacing={{ xs: 2, md: 3 }} />
We have added support for a different number of columns than 12:
<Grid container columns={16}>
We have added an alternative implementation that uses CSS grid:
<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
<Box gridColumn="span 8">
<Item>xs=8</Item>
</Box>
<Box gridColumn="span 4">
<Item>xs=4</Item>
</Box>
<Box gridColumn="span 4">
<Item>xs=4</Item>
</Box>
<Box gridColumn="span 8">
<Item>xs=8</Item>
</Box>
</Box>
π We have improved the accessibility of the Link component:
<a href="https://mui.com/material-ui/react-link/"> </a> <p class="blog-description">The underline helps to differentiate links in sentences.</p>We have primarily focused on the data grid components, fixing a lot of bugs.
The date picker is at the border between the core component and advanced components realms.
components prop for customizability, etc.π¨ We have continued to work on breaking changes to reach a stable version. We think that the component is good enough for use in production (and many developers already are using it), but we want to get the public API right before committing to a stable release.
βοΈ We have added support for the cell edit mode.
<video autoplay muted loop playsinline width="1684" height="782"> <source src="/static/blog/2021-q2-update/cell-edit.mp4" type="video/mp4" /> </video>π We have focused on fixing bugs and regressions to ensure early users have a great experience with the component. This was done instead of taking on ambitious new features. We want our users to be able to adopt new features as fast as we build them.
π We have added support for a built-in single select column type:
<p class="blog-description">the <a href="https://codesandbox.io/p/sandbox/material-demo-forked-iuyo5?file=/demo.js">CodeSandbox</a></p>and the boolean column type.
π We have improved the performance. Client-side sorting and filtering are 2-3x faster on large data sets. We have improved the UX when scrolling. We have added memo logic on the render cell's parent, and worked on its effectiveness to reduce the re-rendering of custom cells. We have identified more opportunities to improve the performance that we will prioritize later.
π We have worked on providing more reference documentation. We are semi-automatically generating it from the TypeScript source definitions, with the descriptions.
For instance, you can now find all the properties available of the GridColDef.
β‘οΈ We have fixed support for components that use portals, like Select and Autocomplete, in the cell editing mode.
π We have accepted many new built-in locales (+15) from the community, after the introduction of the feature in Q1.
Designers have a great sense of detail. We have polished the kit, using all the feedback that we could get. We have also introduced support for a dark mode! We have worked on making the design kit close to the React components. This reduces miscommunications between designers and developers.
We have fixed performance issues and polished the kit.
We have added support of a dark mode and polished the kit.
In the first quarter, we focused on introducing a handbook to share our culture and to help solve the N(N-1)/2 communication channels problem that comes with a larger team.
This quarter, we took on a new initiative to help us solve three problems:
After considering different alternatives, we are going with the OKR methodology.
We have welcomed four new members to the company π’:
Jun, leads the implementation of a second design system.
MichaΕ leads the initiative around the unstyled components.
Danilo, a Lead Designer to raise our design game.
Flavien, an engineer with previous experience building design systems and a complex 2D JavaScript rendering engine. He's helping us take on bolder problems on the advanced components (X team), starting with the data grid.
We are also hiring for various roles! If you're interested in joining us, check out our jobs page.
We'll do our best, no guarantee!
We have the following objectives:
@mui/base. MichaΕ has recently added support for the Switch.
You can follow our progress in the umbrella issue.