iterate more

mui · Aug 22, 2021 · acbbf1e · acbbf1e
1 parent 0036bb2
commit acbbf1e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 32 deletions.
diff --git a/docs/pages/blog/mui-v5.md b/docs/pages/blog/mui-v5.md
@@ -2,7 +2,7 @@
 title: MUI v5.0
 description: MUI v5.0 is out 🎉
 date: 2021-09-15T00:00:00.000Z
-authors: ['oliviertassinari', 'mbrookes', 'eps1lon', 'mnajdova']
+authors: ['mbrookes', 'eps1lon', 'mnajdova', 'michaldudak', 'siriwatknp']
 card: true
 ---
 
@@ -21,7 +21,7 @@ This release features:
 
 ## A new branding
 
-- We might want to have a second blog post for this 🤔
+- 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
@@ -35,21 +35,21 @@ Give the backstory to the developers, make us accountable for spending 1 year+ o
 
 ## 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
+- 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`
-- Start sponsoring emotion $1,000/month
+- 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
 
@@ -100,7 +100,7 @@ declare module '@material-ui/core/styles' {
 ## Support of multiple adapters
 
 - styled-components
-- ask for help on goober
+- ask for help on goober https://github.com/mui-org/material-ui/pull/27776
 
 ## New components
 
@@ -110,6 +110,8 @@ declare module '@material-ui/core/styles' {
 
 ### Promotion of components from the Lab to the Core
 
+- Covered a bit in https://material-ui.com/blog/2020/
+
 ### Stack
 
 - Covered a bit in https://material-ui.com/blog/2021-q1-update/
@@ -120,7 +122,7 @@ declare module '@material-ui/core/styles' {
 
 ### TrapFocus
 
-Covered a bit in https://material-ui.com/blog/2020-q3-update/.
+- Covered a bit in https://material-ui.com/blog/2020-q3-update/.
 
 ### Date pickers
 
@@ -142,15 +144,17 @@ Covered a bit in https://material-ui.com/blog/2020-q3-update/.
 - Why does it even exist
 - Present the new Data Grid component, hopefully, released as v5.0.0 at the same time.
 
-##
-
-## Updated browsers support
+## Change on the supported platforms
 
-- Stop all work on IE 11, but specific IE 11 will only be removed in v6.
+- 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.
 
 ## Improved DX
 
-### More focused demos in the docs
+### Smaller demos in the docs
 
 - Covered a bit in https://material-ui.com/blog/2021-q1-update/
 
@@ -203,5 +207,6 @@ It's new, link core and x roadmaps.
 
 ## Thank you
 
-Finally, one last thank you to everyone who's contributed to Material-UI v4. 
-I'm so excited about this release! It's just the beginning. We will keep working hard on delivering the best possible React UI framework components.
+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/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme, styled } from '@material-ui/core/styles';
 import { withStyles } from '@material-ui/styles';
 import Head from 'docs/src/modules/components/Head';
 import AppFrame from 'docs/src/modules/components/AppFrame';
@@ -9,7 +9,6 @@ import { useRouter } from 'next/router';
 import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import Avatar from '@material-ui/core/Avatar';
-import Stack from '@material-ui/core/Stack';
 import AppFooter from 'docs/src/modules/components/AppFooter';
 import { exactProp } from '@material-ui/utils';
 import MarkdownElement from './MarkdownElement';
@@ -31,6 +30,18 @@ const authors = {
     name: 'Marija Najdova',
     github: 'mnajdova',
   },
+  michaldudak: {
+    name: 'Michał Dudak',
+    github: 'michaldudak',
+  },
+  siriwatknp: {
+    name: 'Siriwat Kunaporn',
+    github: 'siriwatknp',
+  },
+  'danilo-leal': {
+    name: 'Danilo Leal',
+    github: 'danilo-leal',
+  },
 };
 
 const styles = (theme) => ({
@@ -75,17 +86,22 @@ const styles = (theme) => ({
     color: theme.palette.text.secondary,
     ...theme.typography.body2,
   },
-  avatar: {
-    display: 'flex',
-    alignItems: 'center',
-    paddingBottom: theme.spacing(5),
-    fontWeight: theme.typography.fontWeightMedium,
-    '& .MuiAvatar-root': {
-      marginRight: theme.spacing(1),
-    },
-  },
 });
 
+const AuthorContainer = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(3),
+}));
+
+const AuthorItem = styled('div')(({ theme }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  padding: theme.spacing(0, 1, 2),
+  fontWeight: theme.typography.fontWeightMedium,
+  '& .MuiAvatar-root': {
+    marginRight: theme.spacing(1),
+  },
+}));
+
 function TopLayoutBlog(props) {
   const { classes, docs } = props;
   const { description, rendered, title, headers } = docs.en;
@@ -129,14 +145,17 @@ function TopLayoutBlog(props) {
               <MarkdownElement>
                 <h1>{headers.title}</h1>
               </MarkdownElement>
-              <Stack direction="row" spacing={3}>
+              <AuthorContainer>
                 {headers.authors.map((author) => (
-                  <div key={author} className={classes.avatar}>
-                    <Avatar src={`https://github.com/${authors[author].github}.png`} />
-                    <Typography>{authors[author].name}</Typography>
-                  </div>
+                  <AuthorItem key={author}>
+                    <Avatar
+                      sx={{ width: 36, height: 36 }}
+                      src={`https://github.com/${authors[author].github}.png`}
+                    />
+                    <Typography variant="body2">{authors[author].name}</Typography>
+                  </AuthorItem>
                 ))}
-              </Stack>
+              </AuthorContainer>
             </React.Fragment>
           ) : null}
           {rendered.map((chunk, index) => {