1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37753],{1580:(n,e,a)=>{"use strict";a.r(e),a.d(e,{default:()=>i});var t=a(80384),s=a(21842);let o={en:{description:"An update on our mission for Q1 2021.",location:"/docs/pages/blog/2021-q1-update.md",rendered:['<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="error-icon" viewBox="0 0 20 20">\n<path fill-rule="evenodd" d="M2 7.4v5.2a2 2 0 0 0 .586 1.414l3.4 3.4A2 2 0 0 0 7.4 18h5.2a2 2 0 0 0 1.414-.586l3.4-3.4A2 2 0 0 0 18 12.6V7.4a2 2 0 0 0-.586-1.414l-3.4-3.4A2 2 0 0 0 12.6 2H7.4a2 2 0 0 0-1.414.586l-3.4 3.4A2 2 0 0 0 2 7.4Zm11.03-.43a.75.75 0 0 1 0 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 1.06-1.06L10 8.94l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="warning-icon" viewBox="0 0 20 20">\n<path d="M2.33 17a.735.735 0 0 1-.665-.375.631.631 0 0 1-.094-.375.898.898 0 0 1 .115-.396L9.353 3.062a.621.621 0 0 1 .281-.27.85.85 0 0 1 .729 0 .622.622 0 0 1 .281.27l7.667 12.792c.07.125.108.257.114.396a.63.63 0 0 1-.093.375.842.842 0 0 1-.271.27.728.728 0 0 1-.394.105H2.33Zm7.664-2.5c.211 0 .39-.072.536-.214a.714.714 0 0 0 .218-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.531-.22.736.736 0 0 0-.536.215.714.714 0 0 0-.219.531c0 .212.072.39.215.536.143.146.32.219.531.219Zm0-2.5c.211 0 .39-.072.536-.216a.72.72 0 0 0 .218-.534v-2.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.531-.216.734.734 0 0 0-.536.216.72.72 0 0 0-.219.534v2.5c0 .212.072.39.215.534a.72.72 0 0 0 .531.216Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="success-icon" viewBox="0 0 20 20">\n<path d="m8.938 10.875-1.25-1.23a.718.718 0 0 0-.521-.228.718.718 0 0 0-.521.229.73.73 0 0 0 0 1.062l1.77 1.771c.153.153.327.23.521.23a.718.718 0 0 0 .521-.23l3.896-3.896a.73.73 0 0 0 0-1.062.718.718 0 0 0-.52-.23.718.718 0 0 0-.521.23l-3.376 3.354ZM10 18a7.796 7.796 0 0 1-3.104-.625 8.065 8.065 0 0 1-2.552-1.719 8.064 8.064 0 0 1-1.719-2.552A7.797 7.797 0 0 1 2 10c0-1.111.208-2.15.625-3.115a8.064 8.064 0 0 1 4.27-4.26A7.797 7.797 0 0 1 10 2c1.111 0 2.15.208 3.115.625a8.096 8.096 0 0 1 4.26 4.26C17.792 7.851 18 8.89 18 10a7.797 7.797 0 0 1-.625 3.104 8.066 8.066 0 0 1-4.26 4.271A7.774 7.774 0 0 1 10 18Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="info-icon" viewBox="0 0 20 20">\n<path d="M9.996 14c.21 0 .39-.072.535-.216a.72.72 0 0 0 .219-.534v-3.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.532-.216.734.734 0 0 0-.535.216.72.72 0 0 0-.219.534v3.5c0 .213.071.39.214.534a.72.72 0 0 0 .532.216Zm0-6.5c.21 0 .39-.071.535-.214a.714.714 0 0 0 .219-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.532-.219.736.736 0 0 0-.535.214.714.714 0 0 0-.219.532c0 .21.071.39.214.535.143.146.32.219.532.219Zm.01 10.5a7.81 7.81 0 0 1-3.11-.625 8.065 8.065 0 0 1-2.552-1.719 8.066 8.066 0 0 1-1.719-2.551A7.818 7.818 0 0 1 2 9.99c0-1.104.208-2.14.625-3.105a8.066 8.066 0 0 1 4.27-4.26A7.818 7.818 0 0 1 10.009 2a7.75 7.75 0 0 1 3.106.625 8.083 8.083 0 0 1 4.26 4.265A7.77 7.77 0 0 1 18 9.994a7.81 7.81 0 0 1-.625 3.11 8.066 8.066 0 0 1-1.719 2.552 8.083 8.083 0 0 1-2.546 1.719 7.77 7.77 0 0 1-3.104.625Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="copied-icon" viewBox="0 0 24 24">\n<path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="copy-icon" viewBox="0 0 24 24">\n<path d="M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" />\n+</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
1\n<symbol id="anchor-link-icon" viewBox="0 0 12 6">\n<path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="comment-link-icon" viewBox="0 0 24 24">\n<path d="M22.8481 4C22.8481 2.9 21.9481 2 20.8481 2H4.84814C3.74814 2 2.84814 2.9 2.84814 4V16C2.84814 17.1 3.74814 18 4.84814 18H18.8481L22.8481 22V4ZM16.8481 11H13.8481V14C13.8481 14.55 13.3981 15 12.8481 15C12.2981 15 11.8481 14.55 11.8481 14V11H8.84814C8.29814 11 7.84814 10.55 7.84814 10C7.84814 9.45 8.29814 9 8.84814 9H11.8481V6C11.8481 5.45 12.2981 5 12.8481 5C13.3981 5 13.8481 5.45 13.8481 6V9H16.8481C17.3981 9 17.8481 9.45 17.8481 10C17.8481 10.55 17.3981 11 16.8481 11Z" />\n</symbol>\n</svg>','<p>This update covers our progress over the last three months, and what we aim to achieve in the months ahead.</p>\n<h2 id="product"><a href="#product" class="title-link-to-anchor">Product<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="product"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Here are the most significant improvements since December 2020.</p>\n<h3 id="core-components"><a href="#core-components" class="title-link-to-anchor">Core components<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="core-components"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><ul>\n<li><p>\uD83D\uDC69â\uD83C\uDFA4 We have worked on rolling out and scaling the new <strong>styling engine</strong> to all the components.\nAt this point, we have migrated 129 out of 167 components to emotion/styled-components.\nMost of the components left to be migrated are in the lab.\nWe are almost done! You can subscribe to <a href="https://github.com/mui/material-ui/issues/24405">material-ui#24405</a> to be notified once finished.\nThe community has provided invaluable assistance.</p>\n</li>\n<li><p>\uD83D\uDCDA To complement the migration of the components, we have worked on the migration of the code examples in the documentation,\nfavoring the <code>sx</code> prop where possible.\nWhen a component needs to render styles based on the provided props, we have used the <code>styled</code> API.\nEffectively, <code>makeStyle</code> and <code>withStyles</code> have been removed from the demos (we will deprecate these modules later on).\nYou can subscribe to <a href="https://github.com/mui/material-ui/issues/16947">material-ui#16947</a> to be notified once finished.</p>\n</li>\n<li><p>\uD83D\uDCDA We have used the update of the documentation as an opportunity to break down the demos into smaller <strong>single-focus</strong> ones, with inline previews.\nFor instance:</p>\n<img src="/static/blog/2021-q1-update/docs-before.png" alt="" style="width: 526px; margin-top: 16px;" /><p class="blog-description">Before</p><p>was turned into multiple chunks, among them:</p>\n<img src="/static/blog/2021-q1-update/docs-after.png" alt="" style="width: 525px; margin-top: 16px;" /><p class="blog-description">After</p>\n</li>\n<li><p>\uD83E\uDD5E We have introduced a new <code><Stack></code> component.\nIt handles one-dimensional layouts.\nIt allows working around the lack of browser support for the flexbox <code>gap</code> CSS property (<a href="https://caniuse.com/flexbox-gap">no support</a> in Safari).</p>\n<img src="/static/blog/2021-q1-update/stack.png" alt="" style="width: 502px; margin-bottom: 16px;" /><p>You can find <a href="https://mui.com/material-ui/react-stack/">more details</a> in the documentation.</p>\n</li>\n<li><p>\uD83C\uDFA8 We have improved the support for custom colors and variants.\nThis is <a href="https://github.com/mui/material-ui/issues/13875">one</a> of the most upvoted issues in the GitHub issue tracker.\nThe migration to the new style engine allows us to fully rely on dynamic styles.\nDevelopers can now do the following:</p>\n</li>\n</ul>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token keyword">
1import</span> <span class="token punctuation">{</span> createMuiTheme<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@mui/material\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 1. Extend the theme.</span>\n<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createMuiTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">palette</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">neutral</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">\'#5c6ac4\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 2. Notify TypeScript about the new color in the palette</span>\ndeclare module <span class="token string">\'@mui/material/styles\'</span> <span class="token punctuation">{</span>\n <span class="token keyword">interface</span> <span class="token class-name">Palette</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">neutral</span><span class="token operator">:</span> Palette<span class="token punctuation">[</span><span class="token string">\'primary\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token keyword">interface</span> <span class="token class-name">PaletteOptions</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">neutral</span><span class="token operator">:</span> PaletteOptions<span class="token punctuation">[</span><span class="token string">\'primary\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token comment">// 3. Profit</span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<p>This new feature removes the need to create a wrapper component.</p>\n<ul>\n<li><p>\uD83D\uDCCD We have synchronized the icons with the latest update of the Material Design icons.<br />\nGoogle has moved its icons to a new location: <a href="https://fonts.google.com/icons">https://fonts.google.com/icons</a>.\nAt the same time, they have increased the number of provided icons from 6,500 to 8,500.\nYou can find all these icons under the <code>@mui/icons-material</code> package.</p>\n</li>\n<li><p>\uD83E\uDDB4 We have migrated a couple of components to the <code>@mui/base</code> package.\nThe aim of the package is to host the unstyled and headless (hooks) components.\nSo far, you can only find:</p>\n<ul>\n<li>Backdrop</li>\n<li>Badge</li>\n<li>Focus trap</li>\n<li>Modal</li>\n<li>Slider</li>\n</ul>\n<p>We are synchronizing the development of the Base package with the creation of the second theme (and not v5).</p>\n</li>\n<li><p>\uD83D\uDEE0 We added a subset of MUI\xa0System as flattened props to the CSS utility components (Box, Typography, Stack, and Grid).\nWe initially didn't plan to do so but reversed on hearing the feedback from the community.\nIn addition to using the <code>sx</code> prop, you can now do, for example:</p>\n</li>\n</ul>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">display</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Typography</span></span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text.secondary<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Stack</span></span> <span class="token attr-name">mt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Grid</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success.main<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<p>Note that with the other components, only the <code>sx</code> prop is available.</p>\n<ul>\n<li>âï¸ We have introduced a new release line: <code>v4.x.x-deprecations.x</code>.\nThis release line is kept in sync with the latest version of v4 and includes actionable deprecations to ease the migration to v5.</li>\n</ul>\n<h3 id="advanced-components"><a href="#advanced-components" class="title-link-to-anchor">Advanced components<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="advanced-components"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>We have primarily focused on the data grid components, fixing a lot of bugs, but also delivering new features.</p>\n<h4>Date Picker</h4><p>The date picker is at the border between the advanced components and the design system realms.</p>\n<ul>\n<li>\uD83D\uDCDA We have fixed the generation of the API pages.\nWe now document all the props supported by the public pickers components, for example <a href="https://mui.com/api/date-picker/">DatePicker</a>.</li>\n<li>âï¸ We have mostly focused on addressing the technical debt present in the picker components (ported from <code>@materal-ui/pickers</code>).</li>\n</ul>\n<h4>Data Grid</h4><ul>\n<li><p>\uD83D\uDD04 We have started to bring support for <a href="/x/react-data-grid/row-updates/#infinite-loading">lazy-loading</a>.</p>\n</li>\n<li><p>
1â¬ï¸ We have introduced support for <a href="/x/react-data-grid/export/#csv-export">CSV export</a>.</p>\n<img src="/static/blog/2021-q1-update/csv-export.png" alt="" style="width: 523px; margin-bottom: 16px;" />\n</li>\n<li><p>â¿ï¸ We have fixed a couple of accessibility issues (more in progress).</p>\n</li>\n<li><p>\uD83C\uDF0F We have introduced support for <a href="/x/react-data-grid/localization/">custom locales</a>.</p>\n</li>\n<li><p>\uD83D\uDEA8 We have started to work on breaking changes to reach a stable state.</p>\n</li>\n<li><p>\uD83D\uDCBE We have extended the support of @mui/material to handle v4 and v5 at the same time.\nIn the future, we might desynchronize the release version of <em>mui/material-ui</em> and <em>mui/mui-x</em>.\nFor MUI\xa0X, we will likely need to release breaking changes at a higher frequency: every six months.</p>\n</li>\n<li><p>\uD83C\uDF9B We have added a column selector.</p>\n<img src="/static/blog/2021-q1-update/column-selector.png" alt="" style="width: 518px; margin-bottom: 16px;" /></li>\n</ul>\n<h3 id="design-kits"><a href="#design-kits" class="title-link-to-anchor">Design Kits<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="design-kits"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><h4>Figma</h4><p>We have migrated all the components to leverage the <a href="https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants">Figma variants feature</a>.\nWe have also taken this as an opportunity to polish the components:</p>\n<ul>\n<li>Improve the use of auto-layout</li>\n<li>Fix theme design token usage</li>\n<li>Add the Autocomplete component</li>\n</ul>\n<h4>Adobe XD</h4><p>We have made Adobe XD available with a first release.</p>\n<h4>Sketch</h4><p>We have redesigned most of the components from scratch to make sure all components show their CSS properties using inspection tools such as <a href="https://www.sketch.com/blog/2020/01/29/introducing-cloud-inspector-free-developer-handoff-in-the-browser/">Sketch Cloud Inspect tool</a>.</p>\n<h2 id="company"><a href="#company" class="title-link-to-anchor">Company<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="company"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><h3 id="handbook"><a href="#handbook" class="title-link-to-anchor">Handbook<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="handbook"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>The most important change inside the organization is the introduction of a company Handbook.\nThe company is distributed and operates across different time zones.\nPer the nature of our operation, and at the pace we are growing, we needed an effective and efficient way to share the organizational processes and culture.\nPer our transparency value, all the sections of the Handbook that don't contain sensitive information are <a href="https://mui-org.notion.site">publicly available</a>.</p>\n<p>This Handbook is the single <strong>source of truth</strong>. It's meant to be updated by any team member, to stay in sync with how we do things.</p>\n<h3 id="growth-between-q4-2020-and-q1-2021"><a href="#growth-between-q4-2020-and-q1-2021" class="title-link-to-anchor">Growth between Q4 2020 and Q1 2021<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="growth-between-q4-2020-and-q1-2021"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><ul>\n<li><p>\uD83D\uDCE6 From 6.4M to 8.6M downloads per month on npm.<br />\nIt seems that React keeps taking market share in the frontend ecosystem;\nit's growing faster than Vue or Angular.\nMost indicators point to it: <a href="https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular">Stack\xa0Overflow questions</a>, <a href="https://bestofjs.org/projects?sort=monthly">stars</a>, <a href="https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue">downloads</a>, <a href="https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org">Traffic on the documentation</a>.\nOur strategy to focus on React only seems to be paying off.</p>\n</li>\n<li><p>âï¸ From 63.8k to 67.2k stars, leave us yours <a href="https://github.com/mui/material-ui">\uD83C\uDF1F</a>.\nWe have seen a significant influx of stars this quarter.</p>\n</li>\n<li><p>\uD83D\uDC68â\uD83D\uDC69â\uD83D\uDC67â\uD83D\uDC66 From 2,052 to 2,141 contributors on GitHub. We add on average one new contributor every day.</p>\n</li>\n<li><p>\uD83D\uDCB0 Grew gross revenue at +4%/week on average during the peri
1od.</p>\n</li>\n<li><p>\uD83C\uDFE2 We have welcomed one new member to MUI: <a href="/blog/matheus-wichman-joining/">Matheus</a>.</p>\n</li>\n</ul>\n<h2 id="our-roadmap-intent-for-q2-2021"><a href="#our-roadmap-intent-for-q2-2021" class="title-link-to-anchor">Our roadmap intent for Q2 2021<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="our-roadmap-intent-for-q2-2021"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>We'll do our best, no guarantee!</p>\n<h3 id="company-2"><a href="#company-2" class="title-link-to-anchor">Company<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="company-2"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>We have almost signed with <strong>four</strong> new people to join the team this quarter (waiting for their notice period).\nWe will welcome our first designer and a frontend developer to collaborate with him on a second theme.\nThe two others will strengthen 1. the core components and 2. the advanced components teams.\nWe will cross the ten-person milestone in the coming weeks (11).</p>\n<p>We have the following objectives:</p>\n<ul>\n<li>Finish the implementation of the rebranding. A preview, the <a href="/about/">about</a> and <a href="/pricing/">pricing</a> pages.</li>\n<li>Onboard the new members and scale our processes as we double the size of the organization this quarter.</li>\n</ul>\n<h3 id="core-components-2"><a href="#core-components-2" class="title-link-to-anchor">Core components<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="core-components-2"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><ul>\n<li>\uD83D\uDE80 Get v5-beta (no more breaking changes) out! The development of this new version started almost a year ago. It's time to aim for the stable release.</li>\n<li>\uD83D\uDCC5 Start handling the issues with the date picker reported by developers.</li>\n<li>\uD83D\uDDD3 Execute on all the items of the <a href="https://github.com/orgs/mui/projects/23/views/12">public roadmap</a>.</li>\n<li>â Please upvote <a href="https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc">GitHub issues</a> if you want us to focus on a specific problem. The number of \uD83D\uDC4D helps us to prioritize.</li>\n</ul>\n<h3 id="advanced-components-2"><a href="#advanced-components-2" class="title-link-to-anchor">Advanced components<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="advanced-components-2"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><ul>\n<li>âï¸ Release the Data Grid cell edit feature we have been working on for the last two months. <a href="https://deploy-preview-1287--material-ui-x.netlify.app/components/data-grid/editing/">A preview</a>.</li>\n<li>\uD83D\uDCC5 Start dedicating time to the date range picker.</li>\n<li>\uD83D\uDDD3 Execute on all the items in the <a href="https://github.com/orgs/mui/projects/35">public roadmap</a>.</li>\n<li>â Please upvote <a href="https://github.com/mui/mui-x/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc">GitHub issues</a> if you want us to focus on a specific problem. The number of \uD83D\uDC4D helps us to prioritize.</li>\n</ul>\n<h3 id="design-kits-2"><a href="#design-kits-2" class="title-link-to-anchor">Design Kits<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="design-kits-2"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><ul>\n<li>Release an update with the new Material Design icons on Figma, Adobe XD, Sketch.</li>\n<li>Figma, continue to polish the kit as our most important one.</li>\n<li>Adobe XD, improve the performance of the kit.</li>\n<li>Collect more users' feedback to identify the biggest improvement opportunities.</li>\n</ul>\n'],toc:[{text:"Product",level:2,hash:"product",children:[{text:"Core components",level:3,hash:"core-components"},{text:"Advanced components",level:3,hash:"advanced-components"},{text:"Design Kits",level:3,hash:"design-kits"}]},{text:"Company",level:2,hash:"company",children:[{text:"Handbook",level:3,hash:"handbook"},{text:"Growth between Q4 2020 and Q1 2021",level:3,hash:"growth-between-q4-202
10-and-q1-2021"}]},{text:"Our roadmap intent for Q2 2021",level:2,hash:"our-roadmap-intent-for-q2-2021",children:[{text:"Company",level:3,hash:"company-2"},{text:"Core components",level:3,hash:"core-components-2"},{text:"Advanced components",level:3,hash:"advanced-components-2"},{text:"Design Kits",level:3,hash:"design-kits-2"}]}],title:"Q1 2021 Update",headers:{title:"Q1 2021 Update",description:"An update on our mission for Q1 2021.",date:"2021-04-12T00:00:00.000Z",authors:["oliviertassinari"],tags:["Company"],manualCard:"true",components:[],hooks:[]}}};function i(){return(0,t.jsx)(s.A,{docs:o})}},75900:(n,e,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/2021-q1-update",function(){return a(1580)}])}},n=>{n.O(0,[5730,77240,99480,92241,82929,91149,65061,21842,90636,46593,38792],()=>n(n.s=75900)),_N_E=n.O()}]); 2//# sourceMappingURL=2021-q1-update-443988b0955d1c34.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.