From 44f7513373b01b98619b862880bb142418da3931 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sun, 9 Feb 2020 00:23:33 +0000
Subject: [PATCH 1/8] [docs] Revamp the notifications

---
 docs/notifications.json                      |   9 +-
 docs/src/modules/components/AppFrame.js      |   2 +-
 docs/src/modules/components/Notifications.js | 133 +++++++++++++------
 docs/translations/translations.json          |   1 +
 4 files changed, 98 insertions(+), 47 deletions(-)

diff --git a/docs/notifications.json b/docs/notifications.json
index d8bf795b7aad00..658252a9cb18a0 100644
--- a/docs/notifications.json
+++ b/docs/notifications.json
@@ -1,15 +1,18 @@
 [
   {
     "id": 27,
+    "title": "Tweet tweet!",
     "text": "You can <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI\">follow us on Twitter</a> to receive exclusive tips and updates about Material-UI and the React ecosystem."
   },
   {
     "id": 35,
-    "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" data-ga-event-category=\"l10n\" data-ga-event-action=\"notification\" data-ga-event-label=\"zh\" href=\"https://translate.material-ui.com/\">帮助 Material-UI 将文档翻译成中文</a>. 🇨🇳",
+    "title": "Let's translate!",
+    "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" data-ga-event-category=\"l10n\" data-ga-event-action=\"notification\" data-ga-event-label=\"zh\" href=\"https://translate.material-ui.com/\">帮助 Material-UI 将文档翻译成中文</a>. 🇨🇳",
     "userLanguage": "zh"
   },
   {
     "id": 47,
-    "text": "New blog post: <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://medium.com/material-ui/2019-in-review-and-beyond-34f85e29926\">2019 in review and beyond</a>."
+    "title": "New blog post",
+    "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://medium.com/material-ui/2019-in-review-and-beyond-34f85e29926\">2019 in review and beyond</a>. 2019 was a great year for Material-UI. It puts us on an exciting path to solve even greater challenges in the coming years!"
   }
-]
+]
\ No newline at end of file
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index b9beb7520cbc44..304fc23609a2a5 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -204,7 +204,6 @@ function AppFrame(props) {
       <MuiLink color="secondary" className={classes.skipNav} href="#main-content">
         {t('skipToContent')}
       </MuiLink>
-      <Notifications />
       <MarkdownLinks />
       <AppBar className={appBarClassName}>
         <Toolbar>
@@ -320,6 +319,7 @@ function AppFrame(props) {
               )}
             </IconButton>
           </Tooltip>
+          <Notifications />
           <Tooltip title={t('github')} enterDelay={300}>
             <IconButton
               edge="end"
diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index b5bb4439e406e1..913046d365d951 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -2,11 +2,25 @@
 import 'isomorphic-fetch';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import Button from '@material-ui/core/Button';
-import { useRouter } from 'next/router';
-import Snackbar from '@material-ui/core/Snackbar';
+import { makeStyles } from '@material-ui/core/styles';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import Tooltip from '@material-ui/core/Tooltip';
+import NoSsr from '@material-ui/core/NoSsr';
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import Menu from '@material-ui/core/Menu';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
 import sleep from 'modules/waterfall/sleep';
 import { getCookie } from 'docs/src/modules/utils/helpers';
+import notifications from '../../../notifications.json';
+
+const useStyles = makeStyles(theme => ({
+  menu: {
+    maxWidth: theme.spacing(40),
+  },
+}));
 
 function getLastSeenNotification() {
   const seen = getCookie('lastSeenNotification');
@@ -15,6 +29,10 @@ function getLastSeenNotification() {
 
 let messages = null;
 
+if (process.env.NODE_ENV !== 'production') {
+  messages = notifications;
+}
+
 async function getMessages() {
   try {
     if (!messages) {
@@ -32,43 +50,47 @@ async function getMessages() {
 }
 
 export default function Notifications() {
-  const [open, setOpen] = React.useState(false);
-  const [message, setMessage] = React.useState({});
-  const { route } = useRouter();
+  const classes = useStyles();
+  const [messageList, setMessageList] = React.useState([]);
+  const [unseenNotificationsCount, setUnseenNotificationsCount] = React.useState(0);
+  const [notificationsMenu, setNotificationsMenu] = React.useState(null);
   const t = useSelector(state => state.options.t);
   const userLanguage = useSelector(state => state.options.userLanguage);
 
+  const handleNotificationsMenuClick = event => {
+    setNotificationsMenu(event.currentTarget);
+    setUnseenNotificationsCount(0);
+    document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`;
+  };
+
+  const handleNotificationsMenuClose = event => {
+    setNotificationsMenu(null);
+  };
+
   const handleMessage = () => {
     const lastSeen = getLastSeenNotification();
-    const unseenMessages = messages.filter(message2 => {
-      if (message2.id <= lastSeen) {
-        return false;
-      }
 
+    const userMessages = messages.filter(message => {
       if (
-        message2.userLanguage &&
-        message2.userLanguage !== userLanguage &&
-        message2.userLanguage !== navigator.language.substring(0, 2)
+        message.userLanguage &&
+        message.userLanguage !== userLanguage &&
+        message.userLanguage !== navigator.language.substring(0, 2)
       ) {
         return false;
       }
-
-      if (message2.route && message2.route !== route) {
-        return false;
-      }
-
       return true;
     });
 
-    if (unseenMessages.length > 0) {
-      setMessage(unseenMessages[0]);
-      setOpen(true);
+    const unseenCount = userMessages.reduce(
+      (count, message) => (message.id > lastSeen ? count + 1 : count),
+      0,
+    );
+
+    if (unseenCount > 0) {
+      setUnseenNotificationsCount(unseenCount);
     }
-  };
 
-  const handleClose = () => {
-    setOpen(false);
-    document.cookie = `lastSeenNotification=${message.id};path=/;max-age=31536000`;
+    setMessageList(userMessages.reverse());
   };
 
   React.useEffect(() => {
@@ -89,25 +111,50 @@ export default function Notifications() {
     return () => {
       active = false;
     };
-  }, [route]);
+  }, []);
 
   return (
-    <Snackbar
-      key={message.id}
-      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      ContentProps={{ 'aria-describedby': 'notification-message' }}
-      message={
-        <span id="notification-message" dangerouslySetInnerHTML={{ __html: message.text }} />
-      }
-      action={
-        <Button size="small" color="secondary" onClick={handleClose}>
-          {t('close')}
-        </Button>
-      }
-      open={open}
-      autoHideDuration={20e3}
-      onClose={handleClose}
-      onExited={handleMessage}
-    />
+    <React.Fragment>
+      <Tooltip title={t('notifications')} enterDelay={300}>
+        <IconButton
+          color="inherit"
+          aria-owns={notificationsMenu ? 'notifications-menu' : undefined}
+          aria-haspopup="true"
+          aria-label={t('notifications')}
+          onClick={handleNotificationsMenuClick}
+          data-ga-event-category="AppBar"
+          data-ga-event-action="notifications"
+        >
+          <Badge color="secondary" badgeContent={unseenNotificationsCount}>
+            <NotificationsIcon />
+          </Badge>
+        </IconButton>
+      </Tooltip>
+      <NoSsr>
+        <Menu
+          id="notifications-menu"
+          anchorEl={notificationsMenu}
+          open={Boolean(notificationsMenu)}
+          onClose={handleNotificationsMenuClose}
+        >
+          {messageList.map((message, index) => (
+            <div key={message.id} className={classes.menu}>
+              <ListItem alignItems="flex-start">
+                <ListItemText
+                  primary={message.title}
+                  secondary={
+                    <span
+                      id="notification-message"
+                      dangerouslySetInnerHTML={{ __html: message.text }}
+                    />
+                  }
+                />
+              </ListItem>
+              {index < messageList.length - 1 ? <Divider /> : null}
+            </div>
+          ))}
+        </Menu>
+      </NoSsr>
+    </React.Fragment>
   );
 }
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 00557e6e00826c..fbb9d5b04c6731 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -5,6 +5,7 @@
   "useDarkTheme": "Use dark theme",
   "toggleTheme": "Toggle light/dark theme",
   "toggleRTL": "Toggle right-to-left/left-to-right",
+  "notifications": "Notifications",
   "github": "GitHub repository",
   "strapline": "React components for faster and easier web development. Build your own design system, or start with Material Design.",
   "getStarted": "Get Started",

From 0059be2b2b3d80e16caa0bd72c5f5c3ab70a286b Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sun, 9 Feb 2020 00:51:40 +0000
Subject: [PATCH 2/8] lint

---
 docs/src/modules/components/Notifications.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 913046d365d951..d9524d87e6e9af 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -63,7 +63,7 @@ export default function Notifications() {
     document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`;
   };
 
-  const handleNotificationsMenuClose = event => {
+  const handleNotificationsMenuClose = () => {
     setNotificationsMenu(null);
   };
 

From 1b90165302bbd99d3566d150608f6a5b32f5bbc2 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sun, 9 Feb 2020 20:51:49 +0000
Subject: [PATCH 3/8] Use popper

---
 docs/src/modules/components/Notifications.js | 98 +++++++++++++-------
 1 file changed, 66 insertions(+), 32 deletions(-)

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index d9524d87e6e9af..6d90ba6a34e9ba 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -8,7 +8,11 @@ import Tooltip from '@material-ui/core/Tooltip';
 import NoSsr from '@material-ui/core/NoSsr';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
-import Menu from '@material-ui/core/Menu';
+import Popper from '@material-ui/core/Popper';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
@@ -17,7 +21,7 @@ import { getCookie } from 'docs/src/modules/utils/helpers';
 import notifications from '../../../notifications.json';
 
 const useStyles = makeStyles(theme => ({
-  menu: {
+  list: {
     maxWidth: theme.spacing(40),
   },
 }));
@@ -53,18 +57,29 @@ export default function Notifications() {
   const classes = useStyles();
   const [messageList, setMessageList] = React.useState([]);
   const [unseenNotificationsCount, setUnseenNotificationsCount] = React.useState(0);
-  const [notificationsMenu, setNotificationsMenu] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [tooltipOpen, setTooltipOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
   const t = useSelector(state => state.options.t);
   const userLanguage = useSelector(state => state.options.userLanguage);
 
-  const handleNotificationsMenuClick = event => {
-    setNotificationsMenu(event.currentTarget);
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+    setTooltipOpen(false);
     setUnseenNotificationsCount(0);
     document.cookie = `lastSeenNotification=${messageList[0].id};path=/;max-age=31536000`;
   };
 
-  const handleNotificationsMenuClose = () => {
-    setNotificationsMenu(null);
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setTooltipOpen(!open);
+  };
+
+  const handleTooltipClose = () => {
+    setTooltipOpen(false);
   };
 
   const handleMessage = () => {
@@ -115,13 +130,20 @@ export default function Notifications() {
 
   return (
     <React.Fragment>
-      <Tooltip title={t('notifications')} enterDelay={300}>
+      <Tooltip
+        open={tooltipOpen}
+        onOpen={handleTooltipOpen}
+        onClose={handleTooltipClose}
+        title={t('notifications')}
+        enterDelay={300}
+      >
         <IconButton
           color="inherit"
-          aria-owns={notificationsMenu ? 'notifications-menu' : undefined}
+          ref={anchorRef}
+          aria-controls={open ? 'notifications-popup' : undefined}
           aria-haspopup="true"
           aria-label={t('notifications')}
-          onClick={handleNotificationsMenuClick}
+          onClick={handleToggle}
           data-ga-event-category="AppBar"
           data-ga-event-action="notifications"
         >
@@ -131,29 +153,41 @@ export default function Notifications() {
         </IconButton>
       </Tooltip>
       <NoSsr>
-        <Menu
-          id="notifications-menu"
-          anchorEl={notificationsMenu}
-          open={Boolean(notificationsMenu)}
-          onClose={handleNotificationsMenuClose}
+        <Popper
+          id="notifications-popup"
+          anchorEl={anchorRef.current}
+          open={open}
+          placement="bottom-end"
+          transition
+          disablePortal
         >
-          {messageList.map((message, index) => (
-            <div key={message.id} className={classes.menu}>
-              <ListItem alignItems="flex-start">
-                <ListItemText
-                  primary={message.title}
-                  secondary={
-                    <span
-                      id="notification-message"
-                      dangerouslySetInnerHTML={{ __html: message.text }}
-                    />
-                  }
-                />
-              </ListItem>
-              {index < messageList.length - 1 ? <Divider /> : null}
-            </div>
-          ))}
-        </Menu>
+          {({ TransitionProps }) => (
+            <Grow style={{ transformOrigin: 'top right' }} {...TransitionProps}>
+              <ClickAwayListener onClickAway={handleClose}>
+                <Paper>
+                  <List className={classes.list}>
+                    {messageList.map((message, index) => (
+                      <React.Fragment>
+                        <ListItem key={message.id} alignItems="flex-start">
+                          <ListItemText
+                            primary={message.title}
+                            secondary={
+                              <span
+                                id="notification-message"
+                                dangerouslySetInnerHTML={{ __html: message.text }}
+                              />
+                            }
+                          />
+                        </ListItem>
+                        {index < messageList.length - 1 ? <Divider /> : null}
+                      </React.Fragment>
+                    ))}
+                  </List>
+                </Paper>
+              </ClickAwayListener>
+            </Grow>
+          )}
+        </Popper>
       </NoSsr>
     </React.Fragment>
   );

From 265e8382a8920089f1d3912dd26256654269b0ee Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Sun, 9 Feb 2020 21:06:37 +0000
Subject: [PATCH 4/8] Use primary text

---
 docs/src/modules/components/Notifications.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 6d90ba6a34e9ba..5b785021f51f20 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -177,6 +177,7 @@ export default function Notifications() {
                                 dangerouslySetInnerHTML={{ __html: message.text }}
                               />
                             }
+                            secondaryTypographyProps={{ color: 'textPrimary' }}
                           />
                         </ListItem>
                         {index < messageList.length - 1 ? <Divider /> : null}

From 04ed92d63c79e57568ddf8ff97a1e927a581a195 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 10 Feb 2020 16:26:18 +0100
Subject: [PATCH 5/8] fix transition and warning

---
 docs/src/modules/components/Notifications.js | 73 ++++++++++----------
 1 file changed, 35 insertions(+), 38 deletions(-)

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 5b785021f51f20..1ab8b831a54fea 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -5,7 +5,6 @@ import { useSelector } 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 NoSsr from '@material-ui/core/NoSsr';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
 import Popper from '@material-ui/core/Popper';
@@ -152,44 +151,42 @@ export default function Notifications() {
           </Badge>
         </IconButton>
       </Tooltip>
-      <NoSsr>
-        <Popper
-          id="notifications-popup"
-          anchorEl={anchorRef.current}
-          open={open}
-          placement="bottom-end"
-          transition
-          disablePortal
-        >
-          {({ TransitionProps }) => (
-            <Grow style={{ transformOrigin: 'top right' }} {...TransitionProps}>
-              <ClickAwayListener onClickAway={handleClose}>
-                <Paper>
-                  <List className={classes.list}>
-                    {messageList.map((message, index) => (
-                      <React.Fragment>
-                        <ListItem key={message.id} alignItems="flex-start">
-                          <ListItemText
-                            primary={message.title}
-                            secondary={
-                              <span
-                                id="notification-message"
-                                dangerouslySetInnerHTML={{ __html: message.text }}
-                              />
-                            }
-                            secondaryTypographyProps={{ color: 'textPrimary' }}
-                          />
-                        </ListItem>
-                        {index < messageList.length - 1 ? <Divider /> : null}
-                      </React.Fragment>
-                    ))}
-                  </List>
-                </Paper>
-              </ClickAwayListener>
+      <Popper
+        id="notifications-popup"
+        anchorEl={anchorRef.current}
+        open={open}
+        placement="bottom-end"
+        transition
+        disablePortal
+      >
+        {({ TransitionProps }) => (
+          <ClickAwayListener onClickAway={handleClose}>
+            <Grow in={open} {...TransitionProps}>
+              <Paper style={{ transformOrigin: 'top right' }}>
+                <List className={classes.list}>
+                  {messageList.map((message, index) => (
+                    <React.Fragment key={index}>
+                      <ListItem key={message.id} alignItems="flex-start">
+                        <ListItemText
+                          primary={message.title}
+                          secondary={
+                            <span
+                              id="notification-message"
+                              dangerouslySetInnerHTML={{ __html: message.text }}
+                            />
+                          }
+                          secondaryTypographyProps={{ color: 'textPrimary' }}
+                        />
+                      </ListItem>
+                      {index < messageList.length - 1 ? <Divider /> : null}
+                    </React.Fragment>
+                  ))}
+                </List>
+              </Paper>
             </Grow>
-          )}
-        </Popper>
-      </NoSsr>
+          </ClickAwayListener>
+        )}
+      </Popper>
     </React.Fragment>
   );
 }

From 89f2960329ad83c0c4745e8f3d635833350fc57a Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Mon, 10 Feb 2020 19:01:37 +0000
Subject: [PATCH 6/8] better button aria-label

---
 docs/src/modules/components/Notifications.js | 4 ++--
 docs/translations/translations.json          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 1ab8b831a54fea..79bdbbcfdc5cba 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -141,10 +141,10 @@ export default function Notifications() {
           ref={anchorRef}
           aria-controls={open ? 'notifications-popup' : undefined}
           aria-haspopup="true"
-          aria-label={t('notifications')}
+          aria-label={t('toggleNotifications')}
           onClick={handleToggle}
           data-ga-event-category="AppBar"
-          data-ga-event-action="notifications"
+          data-ga-event-action="toggleNotifications"
         >
           <Badge color="secondary" badgeContent={unseenNotificationsCount}>
             <NotificationsIcon />
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index fbb9d5b04c6731..5c4e040134862a 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -5,7 +5,7 @@
   "useDarkTheme": "Use dark theme",
   "toggleTheme": "Toggle light/dark theme",
   "toggleRTL": "Toggle right-to-left/left-to-right",
-  "notifications": "Notifications",
+  "toggleNotifications": "Toggle notifications panel",
   "github": "GitHub repository",
   "strapline": "React components for faster and easier web development. Build your own design system, or start with Material Design.",
   "getStarted": "Get Started",

From 2e4228954cba007ce233a8cd98ce80f984e66d81 Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Mon, 10 Feb 2020 22:11:03 +0000
Subject: [PATCH 7/8] add overflow, add dates

---
 docs/notifications.json                      |  2 ++
 docs/src/modules/components/Notifications.js | 28 ++++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/docs/notifications.json b/docs/notifications.json
index 0f77c18f1e1d7b..b017e3209c7ab9 100644
--- a/docs/notifications.json
+++ b/docs/notifications.json
@@ -7,11 +7,13 @@
   },
   {
     "id": 47,
+    "date": "2020-01-25",
     "title": "New blog post",
     "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://medium.com/material-ui/2019-in-review-and-beyond-34f85e29926\">2019 in review and beyond</a>. 2019 was a great year for Material-UI. It puts us on an exciting path to solve even greater challenges in the coming years!"
   },
   {
     "id": 48,
+    "date": "2020-02-08",
     "title": "Material-UI is hiring",
     "text": "We're looking for <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://material-ui.com/company/software-engineer/\">a senior software developer</a> to join the team."
   }
diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index 79bdbbcfdc5cba..f504fb9919ed45 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -20,8 +20,17 @@ import { getCookie } from 'docs/src/modules/utils/helpers';
 import notifications from '../../../notifications.json';
 
 const useStyles = makeStyles(theme => ({
+  paper: {
+    transformOrigin: 'top right',
+  },
   list: {
     maxWidth: theme.spacing(40),
+    maxHeight: theme.spacing(40),
+    overflow: 'auto',
+  },
+  listItem: {
+    display: 'flex',
+    flexDirection: 'column',
   },
 }));
 
@@ -133,7 +142,7 @@ export default function Notifications() {
         open={tooltipOpen}
         onOpen={handleTooltipOpen}
         onClose={handleTooltipClose}
-        title={t('notifications')}
+        title={t('toggleNotifications')}
         enterDelay={300}
       >
         <IconButton
@@ -162,11 +171,20 @@ export default function Notifications() {
         {({ TransitionProps }) => (
           <ClickAwayListener onClickAway={handleClose}>
             <Grow in={open} {...TransitionProps}>
-              <Paper style={{ transformOrigin: 'top right' }}>
+              <Paper className={classes.paper}>
                 <List className={classes.list}>
                   {messageList.map((message, index) => (
-                    <React.Fragment key={index}>
-                      <ListItem key={message.id} alignItems="flex-start">
+                    <React.Fragment key={message.id}>
+                      <ListItem alignItems="flex-start" className={classes.listItem}>
+                        {message.date && (
+                          <ListItemText
+                            secondary={new Date(message.date).toLocaleDateString('en-US', {
+                              year: 'numeric',
+                              month: 'long',
+                              day: 'numeric',
+                            })}
+                          />
+                        )}
                         <ListItemText
                           primary={message.title}
                           secondary={
@@ -178,7 +196,7 @@ export default function Notifications() {
                           secondaryTypographyProps={{ color: 'textPrimary' }}
                         />
                       </ListItem>
-                      {index < messageList.length - 1 ? <Divider /> : null}
+                      {index < messageList.length - 1 ? <Divider variant="middle" /> : null}
                     </React.Fragment>
                   ))}
                 </List>

From 9f7287e1bedeb8cd1880ab0316a31724db283dff Mon Sep 17 00:00:00 2001
From: Matthew Brookes <github@nospam.33m.co>
Date: Mon, 10 Feb 2020 22:25:35 +0000
Subject: [PATCH 8/8] remove default role from popper

---
 docs/src/modules/components/Notifications.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/modules/components/Notifications.js b/docs/src/modules/components/Notifications.js
index f504fb9919ed45..8009907f076e62 100644
--- a/docs/src/modules/components/Notifications.js
+++ b/docs/src/modules/components/Notifications.js
@@ -167,6 +167,7 @@ export default function Notifications() {
         placement="bottom-end"
         transition
         disablePortal
+        role={undefined}
       >
         {({ TransitionProps }) => (
           <ClickAwayListener onClickAway={handleClose}>