polish

Author: oliviertassinari

docs/src/modules/components/Demo.js

@@ -172,10 +172,7 @@ function Demo(props) {
   const [snackbarOpen, setSnackbarOpen] = React.useState(false);
   const [snackbarMessage, setSnackbarMessage] = React.useState(undefined);
 
-  const handleClose = (event, reason) => {
-    if (reason === 'clickaway') {
-      return;
-    }
+  const handleSnackbarClose = () => {
     setSnackbarOpen(false);
   };
 
@@ -190,7 +187,7 @@ function Demo(props) {
     }
   };
 
-  const handleClickCodeSandbox = () => {
+  const handleCodeSandboxClick = () => {
     const demoConfig = getDemoConfig(demoData);
     const parameters = compress({
       files: {
@@ -225,29 +222,25 @@ function Demo(props) {
   };
 
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const handleClickMore = event => {
+  const handleMoreClick = event => {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleCloseMore = () => {
+  const handleMoreClose = () => {
     setAnchorEl(null);
   };
 
-  const handleClickCopy = async () => {
+  const handleCopyClick = async () => {
     try {
       await copy(demoData.raw);
       setSnackbarMessage(t('copiedSource'));
       setSnackbarOpen(true);
     } finally {
-      handleCloseMore();
+      handleMoreClose();
     }
   };
 
-  const handleClickGithub = () => {
-    window.open(demoData.githubLocation);
-  };
-
-  const handleClickStackBlitz = () => {
+  const handleStackBlitzClick = () => {
     const demoConfig = getDemoConfig(demoData);
     const form = document.createElement('form');
     form.method = 'POST';
@@ -265,7 +258,7 @@ function Demo(props) {
     document.body.appendChild(form);
     form.submit();
     document.body.removeChild(form);
-    handleCloseMore();
+    handleMoreClose();
   };
 
   const showSourceHint = demoHovered && !sourceHintSeen;
@@ -293,7 +286,7 @@ function Demo(props) {
       setSnackbarMessage(t('copiedSourceLink'));
       setSnackbarOpen(true);
     } finally {
-      handleCloseMore();
+      handleMoreClose();
     }
   };
 
@@ -306,7 +299,7 @@ function Demo(props) {
     }
   }, [demoName]);
 
-  const handleClickCodeOpen = () => {
+  const handleCodeOpenClick = () => {
     document.cookie = `sourceHintSeen=true;path=/;max-age=31536000`;
     setCodeOpen(open => !open);
     setSourceHintSeen(setSourceHintSeen(true));
@@ -374,7 +367,7 @@ function Demo(props) {
                   data-ga-event-category="demo"
                   data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="expand"
-                  onClick={handleClickCodeOpen}
+                  onClick={handleCodeOpenClick}
                   color={demoHovered ? 'primary' : 'default'}
                 >
                   <CodeIcon fontSize="small" />
@@ -391,7 +384,7 @@ function Demo(props) {
                     data-ga-event-category="demo"
                     data-ga-event-label={demoOptions.demo}
                     data-ga-event-action="codesandbox"
-                    onClick={handleClickCodeSandbox}
+                    onClick={handleCodeSandboxClick}
                   >
                     <EditIcon fontSize="small" />
                   </IconButton>
@@ -407,13 +400,13 @@ function Demo(props) {
                   data-ga-event-category="demo"
                   data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="copy"
-                  onClick={handleClickCopy}
+                  onClick={handleCopyClick}
                 >
                   <FileCopyIcon fontSize="small" />
                 </IconButton>
               </Tooltip>
               <IconButton
-                onClick={handleClickMore}
+                onClick={handleMoreClick}
                 aria-owns={anchorEl ? 'demo-menu-more' : undefined}
                 aria-haspopup="true"
                 aria-label={t('seeMore')}
@@ -424,7 +417,7 @@ function Demo(props) {
                 id="demo-menu-more"
                 anchorEl={anchorEl}
                 open={Boolean(anchorEl)}
-                onClose={handleCloseMore}
+                onClose={handleMoreClose}
                 getContentAnchorEl={null}
                 anchorOrigin={{
                   vertical: 'top',
@@ -439,7 +432,11 @@ function Demo(props) {
                   data-ga-event-category="demo"
                   data-ga-event-label={demoOptions.demo}
                   data-ga-event-action="github"
-                  onClick={handleClickGithub}
+                  component="a"
+                  href={demoData.githubLocation}
+                  target="_blank"
+                  rel="noopener nofollow"
+                  onClick={handleMoreClose}
                 >
                   {t('viewGitHub')}
                 </MenuItem>
@@ -448,7 +445,7 @@ function Demo(props) {
                     data-ga-event-category="demo"
                     data-ga-event-label={demoOptions.demo}
                     data-ga-event-action="stackblitz"
-                    onClick={handleClickStackBlitz}
+                    onClick={handleStackBlitzClick}
                   >
                     {t('stackblitz')}
                   </MenuItem>
@@ -483,7 +480,7 @@ function Demo(props) {
       <Snackbar
         open={snackbarOpen}
         autoHideDuration={3000}
-        onClose={handleClose}
+        onClose={handleSnackbarClose}
         message={snackbarMessage}
       />
     </div>

docs/src/pages/components/alert/TransitionAlerts.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function TransitionAlerts() {
+export default function ActionAlerts() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(true);
 
@@ -40,7 +40,6 @@ export default function TransitionAlerts() {
         </Alert>
       </Collapse>
       <Button
-        disabled={open}
         variant="outlined"
         onClick={() => {
           setOpen(true);

docs/src/pages/components/alert/TransitionAlerts.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export default function TransitionAlerts() {
+export default function ActionAlerts() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(true);
 
@@ -42,7 +42,6 @@ export default function TransitionAlerts() {
         </Alert>
       </Collapse>
       <Button
-        disabled={open}
         variant="outlined"
         onClick={() => {
           setOpen(true);

docs/translations/translations.json

@@ -65,10 +65,10 @@
   "codesandbox": "Edit in CodeSandbox",
   "seeMore": "See more",
   "copySource": "Copy the source",
-  "copiedSource": "The source code has been copied",
+  "copiedSource": "The source code has been copied.",
   "copySourceLinkJS": "Copy link to JavaScript source",
   "copySourceLinkTS": "Copy link to TypeScript source",
-  "copiedSourceLink": "Link to the source code has been copied",
+  "copiedSourceLink": "Link to the source code has been copied.",
   "stackblitz": "Edit in StackBlitz (JS only)",
   "headTitle": "Material-UI: A popular React UI framework",
   "emojiLove": "Love",