[docs] Replace alert with console.info (#18316)

mui · Nov 11, 2019 · db6ed0d · db6ed0d
1 parent 575776f
commit db6ed0d
Show file tree

Hide file tree

Showing 26 changed files with 34 additions and 44 deletions.
diff --git a/docs/src/pages/components/.eslintrc.js b/docs/src/pages/components/.eslintrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   rules: {
     // useful for interactions feedback
-    'no-alert': 'off',
+    'no-console': ['off', { allow: ['info'] }],
     // not very friendly to prop forwarding
     'react/jsx-handler-names': 'off',
   },

diff --git a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.js
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CollapsedBreadcrumbs() {

diff --git a/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/CollapsedBreadcrumbs.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CollapsedBreadcrumbs() {

diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.js b/docs/src/pages/components/breadcrumbs/CustomSeparator.js
@@ -18,7 +18,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CustomSeparator() {

diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx b/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function CustomSeparator() {

diff --git a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.js
@@ -24,7 +24,7 @@ const StyledBreadcrumb = withStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 const useStyles = makeStyles(theme => ({

diff --git a/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/CustomizedBreadcrumbs.tsx
@@ -24,7 +24,7 @@ const StyledBreadcrumb = withStyles((theme: Theme) => ({
 
 function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 const useStyles = makeStyles((theme: Theme) =>

diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.js
@@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function IconBreadcrumbs() {

diff --git a/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/IconBreadcrumbs.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function IconBreadcrumbs() {

diff --git a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
 
 function handleClick(event) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function SimpleBreadcrumbs() {

diff --git a/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/SimpleBreadcrumbs.tsx
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
   event.preventDefault();
-  alert('You clicked a breadcrumb.');
+  console.info('You clicked a breadcrumb.');
 }
 
 export default function SimpleBreadcrumbs() {

diff --git a/docs/src/pages/components/buttons/SplitButton.js b/docs/src/pages/components/buttons/SplitButton.js
@@ -18,7 +18,7 @@ export default function SplitButton() {
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
   const handleClick = () => {
-    alert(`You clicked ${options[selectedIndex]}`);
+    console.info(`You clicked ${options[selectedIndex]}`);
   };
 
   const handleMenuItemClick = (event, index) => {

diff --git a/docs/src/pages/components/buttons/SplitButton.tsx b/docs/src/pages/components/buttons/SplitButton.tsx
@@ -18,7 +18,7 @@ export default function SplitButton() {
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
   const handleClick = () => {
-    alert(`You clicked ${options[selectedIndex]}`);
+    console.info(`You clicked ${options[selectedIndex]}`);
   };
 
   const handleMenuItemClick = (

diff --git a/docs/src/pages/components/chips/Chips.js b/docs/src/pages/components/chips/Chips.js
@@ -20,11 +20,11 @@ export default function Chips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/chips/Chips.tsx b/docs/src/pages/components/chips/Chips.tsx
@@ -22,11 +22,11 @@ export default function Chips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js
@@ -27,11 +27,6 @@ export default function ChipsArray() {
   ]);
 
   const handleDelete = chipToDelete => () => {
-    if (chipToDelete.label === 'React') {
-      alert('Why would you want to delete React?! :)');
-      return;
-    }
-
     setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
   };
 
@@ -49,7 +44,7 @@ export default function ChipsArray() {
             key={data.key}
             icon={icon}
             label={data.label}
-            onDelete={handleDelete(data)}
+            onDelete={data.label === 'React' ? undefined : handleDelete(data)}
             className={classes.chip}
           />
         );

diff --git a/docs/src/pages/components/chips/ChipsArray.tsx b/docs/src/pages/components/chips/ChipsArray.tsx
@@ -34,11 +34,6 @@ export default function ChipsArray() {
   ]);
 
   const handleDelete = (chipToDelete: ChipData) => () => {
-    if (chipToDelete.label === 'React') {
-      alert('Why would you want to delete React?! :)');
-      return;
-    }
-
     setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
   };
 
@@ -56,7 +51,7 @@ export default function ChipsArray() {
             key={data.key}
             icon={icon}
             label={data.label}
-            onDelete={handleDelete(data)}
+            onDelete={data.label === 'React' ? undefined : handleDelete(data)}
             className={classes.chip}
           />
         );

diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -47,7 +47,7 @@ function ChipsPlayground(props) {
   };
 
   const handleDeleteExample = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const colorToCode = color !== 'default' ? `color="${color}" ` : '';

diff --git a/docs/src/pages/components/chips/OutlinedChips.js b/docs/src/pages/components/chips/OutlinedChips.js
@@ -20,11 +20,11 @@ export default function OutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/chips/OutlinedChips.tsx b/docs/src/pages/components/chips/OutlinedChips.tsx
@@ -22,11 +22,11 @@ export default function OutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/chips/SmallChips.js b/docs/src/pages/components/chips/SmallChips.js
@@ -20,11 +20,11 @@ export default function SmallChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/chips/SmallChips.tsx b/docs/src/pages/components/chips/SmallChips.tsx
@@ -22,11 +22,11 @@ export default function SmallChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/chips/SmallOutlinedChips.js b/docs/src/pages/components/chips/SmallOutlinedChips.js
@@ -20,11 +20,11 @@ export default function SmallOutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/chips/SmallOutlinedChips.tsx b/docs/src/pages/components/chips/SmallOutlinedChips.tsx
@@ -22,11 +22,11 @@ export default function SmallOutlinedChips() {
   const classes = useStyles();
 
   const handleDelete = () => {
-    alert('You clicked the delete icon.');
+    console.info('You clicked the delete icon.');
   };
 
   const handleClick = () => {
-    alert('You clicked the Chip.');
+    console.info('You clicked the Chip.');
   };
 
   return (

diff --git a/docs/src/pages/components/links/ButtonLink.js b/docs/src/pages/components/links/ButtonLink.js
@@ -8,7 +8,7 @@ export default function ButtonLink() {
       component="button"
       variant="body2"
       onClick={() => {
-        alert("I'm a button.");
+        console.info("I'm a button.");
       }}
     >
       Button Link

diff --git a/docs/src/pages/components/links/ButtonLink.tsx b/docs/src/pages/components/links/ButtonLink.tsx
@@ -8,7 +8,7 @@ export default function ButtonLink() {
       component="button"
       variant="body2"
       onClick={() => {
-        alert("I'm a button.");
+        console.info("I'm a button.");
       }}
     >
       Button Link