[core] Batch small changes (#20823)

mui · Apr 29, 2020 · d798533 · d798533
1 parent 0ce7487
commit d798533
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 108 deletions.
diff --git a/docs/notifications.json b/docs/notifications.json
@@ -14,11 +14,5 @@
     "date": "2020-03-30",
     "title": "Sketch",
     "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI/status/1244519729978437633\">Introducing Material-UI for Sketch</a>. Today, we’re excited to introduce the Sketch symbols 💎 for Material-UI."
-  },
-  {
-    "id": 50,
-    "date": "2020-04-07",
-    "title": "Developer Survey",
-    "text": "Help shape the future of Material-UI.<br />🙏<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://forms.gle/TYWRdvgyZs4AhZNv8\">Please fill the survey.</a>"
   }
 ]
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -37,7 +37,7 @@ function useFirstRender() {
   return firstRenderRef.current;
 }
 
-acceptLanguage.languages(['en', 'zh']);
+acceptLanguage.languages(['en', 'zh', 'pt']);
 
 function loadCrowdin() {
   window._jipt = [];

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -13,7 +13,7 @@ const styles = (theme) => ({
       position: 'absolute',
     },
     '& pre': {
-      margin: theme.spacing(3, 0),
+      margin: theme.spacing(3, 'auto'),
       padding: theme.spacing(2),
       backgroundColor: '#272c34',
       direction: 'ltr',

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
@@ -5,6 +5,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { makeStyles } from '@material-ui/core/styles';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import Tooltip from '@material-ui/core/Tooltip';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
 import Typography from '@material-ui/core/Typography';
@@ -32,16 +33,16 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
   },
+  loading: {
+    display: 'flex',
+    justifyContent: 'center',
+    margin: theme.spacing(1, 0),
+  },
   divider: {
     margin: theme.spacing(1, 0),
   },
 }));
 
-function getLastSeenNotification() {
-  const seen = getCookie('lastSeenNotification');
-  return seen === '' ? 0 : parseInt(seen, 10);
-}
-
 export default function Notifications() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
@@ -53,34 +54,34 @@ export default function Notifications() {
   const messages = useSelector((state) => state.notifications.messages);
   const lastSeen = useSelector((state) => state.notifications.lastSeen);
 
-  const messageList = (messages || [])
-    .filter((message) => {
-      if (
-        message.userLanguage &&
-        message.userLanguage !== userLanguage &&
-        message.userLanguage !== navigator.language.substring(0, 2)
-      ) {
-        return false;
-      }
-      return true;
-    })
-    .reverse();
-
-  const unseenNotificationsCount = messageList.reduce(
-    (count, message) => (message.id > lastSeen ? count + 1 : count),
-    0,
-  );
+  const messageList = messages
+    ? messages
+        .filter((message) => {
+          if (
+            message.userLanguage &&
+            message.userLanguage !== userLanguage &&
+            message.userLanguage !== navigator.language.substring(0, 2)
+          ) {
+            return false;
+          }
+          return true;
+        })
+        .reverse()
+    : null;
 
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
     setTooltipOpen(false);
-    dispatch({
-      type: ACTION_TYPES.NOTIFICATIONS_CHANGE,
-      payload: {
-        lastSeen: messageList[0].id,
-      },
-    });
-    document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`;
+
+    if (messageList && messageList.length > 0) {
+      dispatch({
+        type: ACTION_TYPES.NOTIFICATIONS_CHANGE,
+        payload: {
+          lastSeen: messageList[0].id,
+        },
+      });
+      document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`;
+    }
   };
 
   React.useEffect(() => {
@@ -104,11 +105,14 @@ export default function Notifications() {
       }
 
       if (active) {
+        const seen = getCookie('lastSeenNotification');
+        const lastSeenNotification = seen === '' ? 0 : parseInt(seen, 10);
+
         dispatch({
           type: ACTION_TYPES.NOTIFICATIONS_CHANGE,
           payload: {
             messages: newMessages || [],
-            lastSeen: getLastSeenNotification(),
+            lastSeen: lastSeenNotification,
           },
         });
       }
@@ -142,7 +146,17 @@ export default function Notifications() {
           data-ga-event-category="AppBar"
           data-ga-event-action="toggleNotifications"
         >
-          <Badge color="secondary" badgeContent={unseenNotificationsCount}>
+          <Badge
+            color="secondary"
+            badgeContent={
+              messageList
+                ? messageList.reduce(
+                    (count, message) => (message.id > lastSeen ? count + 1 : count),
+                    0,
+                  )
+                : 0
+            }
+          >
             <NotificationsIcon />
           </Badge>
         </IconButton>
@@ -165,31 +179,37 @@ export default function Notifications() {
             <Grow in={open} {...TransitionProps}>
               <Paper className={classes.paper}>
                 <List className={classes.list}>
-                  {messageList.map((message, index) => (
-                    <React.Fragment key={message.id}>
-                      <ListItem alignItems="flex-start" className={classes.listItem}>
-                        <Typography gutterBottom>{message.title}</Typography>
-                        <Typography gutterBottom variant="body2">
-                          <span
-                            id="notification-message"
-                            dangerouslySetInnerHTML={{ __html: message.text }}
-                          />
-                        </Typography>
-                        {message.date && (
-                          <Typography variant="caption" color="textSecondary">
-                            {new Date(message.date).toLocaleDateString('en-US', {
-                              year: 'numeric',
-                              month: 'long',
-                              day: 'numeric',
-                            })}
+                  {messageList ? (
+                    messageList.map((message, index) => (
+                      <React.Fragment key={message.id}>
+                        <ListItem alignItems="flex-start" className={classes.listItem}>
+                          <Typography gutterBottom>{message.title}</Typography>
+                          <Typography gutterBottom variant="body2">
+                            <span
+                              id="notification-message"
+                              dangerouslySetInnerHTML={{ __html: message.text }}
+                            />
                           </Typography>
-                        )}
-                      </ListItem>
-                      {index < messageList.length - 1 ? (
-                        <Divider className={classes.divider} />
-                      ) : null}
-                    </React.Fragment>
-                  ))}
+                          {message.date && (
+                            <Typography variant="caption" color="textSecondary">
+                              {new Date(message.date).toLocaleDateString('en-US', {
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric',
+                              })}
+                            </Typography>
+                          )}
+                        </ListItem>
+                        {index < messageList.length - 1 ? (
+                          <Divider className={classes.divider} />
+                        ) : null}
+                      </React.Fragment>
+                    ))
+                  ) : (
+                    <div className={classes.loading}>
+                      <CircularProgress size={32} />
+                    </div>
+                  )}
                 </List>
               </Paper>
             </Grow>

diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md
@@ -45,7 +45,11 @@ The component has two states that can be controlled:
 
 ## Free solo
 
-Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a **search box** with suggestions, e.g. Google search or react-autowhatever.
+Set `freeSolo` to true so the textbox can contain any arbitrary value.
+
+### Search input
+
+The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever.
 
 {{"demo": "pages/components/autocomplete/FreeSolo.js"}}
 

diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md
@@ -106,32 +106,6 @@ The computed font size by the browser follows this mathematical equation:
 
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
 
-### HTML font size
-
-You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/).
-An `htmlFontSize` theme property is provided for this use case,
-which tells Material-UI what the font-size on the `<html>` element is.
-This is used to adjust the `rem` value so the calculated font-size always match the specification.
-
-```js
-const theme = createMuiTheme({
-  typography: {
-    // Tell Material-UI what's the font-size on the html element is.
-    htmlFontSize: 10,
-  },
-});
-```
-
-```css
-html {
-  font-size: 62.5%; /* 62.5% of 16px = 10px */
-}
-```
-
-_You need to apply the above CSS on the html element of this page to see the below demo rendered correctly_
-
-{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-
 ### Responsive font sizes
 
 The typography variants properties map directly to the generated CSS.
@@ -172,6 +146,35 @@ theme = responsiveFontSizes(theme);
 
 To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
 
+### HTML font size
+
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/).
+
+> ⚠️ Changing the font size can harm accessibility ♿️. Most browsers agreed on the default size of 16 pixels, but the user can change it. For instance, someone with an impaired vision could have set their browser’s default font size to something larger.
+
+An `htmlFontSize` theme property is provided for this use case,
+which tells Material-UI what the font-size on the `<html>` element is.
+This is used to adjust the `rem` value so the calculated font-size always match the specification.
+
+```js
+const theme = createMuiTheme({
+  typography: {
+    // Tell Material-UI what's the font-size on the html element is.
+    htmlFontSize: 10,
+  },
+});
+```
+
+```css
+html {
+  font-size: 62.5%; /* 62.5% of 16px = 10px */
+}
+```
+
+*You need to apply the above CSS on the html element of this page to see the below demo rendered correctly*
+
+{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
+
 ## Variants
 
 The typography object comes with [13 variants](/components/typography/#component) by default:

diff --git a/docs/src/pages/getting-started/learn/learn.md b/docs/src/pages/getting-started/learn/learn.md
@@ -25,6 +25,8 @@ Here are some recommended resources, some of which are free.
 
 ### Free
 
+- **Introduction to Material-UI**: a series of videos covering all the important Material-UI components.
+  - 📹 [The videos](https://www.youtube.com/watch?v=pHclLuRolzE&list=PLQg6GaokU5CwiVmsZ0d_9Zsg_DnIP_xwr)
 - **Meet Material-UI — your new favorite user interface library**: a blog post that guides you in building a Todo MVC while covering some important concepts of Material-UI.
   - 📝 [The blog post](https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c)
 - **Learn React & Material-UI**: a series of videos covering all the important Material-UI components.

diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js
@@ -6,12 +6,10 @@ import TextField from '@material-ui/core/TextField';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { zhCN } from '@material-ui/core/locale';
 
-const theme = createMuiTheme({}, zhCN);
-
 export default function Locales() {
   return (
     <div>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={(outerTheme) => createMuiTheme(outerTheme, zhCN)}>
         <TablePagination
           count={20}
           rowsPerPage={10}

diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx
@@ -6,12 +6,10 @@ import TextField from '@material-ui/core/TextField';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { zhCN } from '@material-ui/core/locale';
 
-const theme = createMuiTheme({}, zhCN);
-
 export default function Locales() {
   return (
     <div>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={(outerTheme) => createMuiTheme(outerTheme, zhCN)}>
         <TablePagination
           count={20}
           rowsPerPage={10}

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -232,9 +232,12 @@ export default function useAutocomplete(props) {
     resetInputValue(null, value);
   }, [value, resetInputValue]);
 
-  const { current: isOpenControlled } = React.useRef(openProp != null);
-  const [openState, setOpenState] = React.useState(false);
-  const open = isOpenControlled ? openProp : openState;
+  const [open, setOpenState] = useControlled({
+    controlled: openProp,
+    default: false,
+    name: componentName,
+    state: 'open',
+  });
 
   const inputValueIsSelectedValue =
     !multiple && value != null && inputValue === getOptionLabel(value);
@@ -461,25 +464,23 @@ export default function useAutocomplete(props) {
       return;
     }
 
+    setOpenState(true);
+
     if (onOpen) {
       onOpen(event);
     }
-    if (!isOpenControlled) {
-      setOpenState(true);
-    }
   };
 
   const handleClose = (event, reason) => {
     if (!open) {
       return;
     }
 
+    setOpenState(false);
+
     if (onClose) {
       onClose(event, reason);
     }
-    if (!isOpenControlled) {
-      setOpenState(false);
-    }
   };
 
   const handleValue = (event, newValue, reason, details) => {

diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -79,7 +79,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) {
       focusable="false"
       viewBox={viewBox}
       color={htmlColor}
-      aria-hidden={titleAccess ? undefined : 'true'}
+      aria-hidden={titleAccess ? undefined : true}
       role={titleAccess ? 'img' : undefined}
       ref={ref}
       {...other}

diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.test.js b/packages/material-ui/src/SvgIcon/SvgIcon.test.js
@@ -47,7 +47,7 @@ describe('<SvgIcon />', () => {
   it('renders children by default', () => {
     const wrapper = shallow(<SvgIcon>{path}</SvgIcon>);
     expect(wrapper.contains(path)).to.equal(true);
-    expect(wrapper.props()['aria-hidden']).to.equal('true');
+    expect(wrapper.props()['aria-hidden']).to.equal(true);
   });
 
   describe('prop: titleAccess', () => {