matt & seb reviews

mui · Jan 30, 2019 · 7cff225 · 7cff225
1 parent 3d58b03
commit 7cff225
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 34 deletions.
diff --git a/docs/src/modules/components/MarkdownLinks.js b/docs/src/modules/components/MarkdownLinks.js
@@ -16,6 +16,7 @@ async function handleClick(event) {
 
   // Ignore click for new tab / new window behavior
   if (
+    event.defaultPrevented ||
     event.metaKey ||
     event.ctrlKey ||
     event.shiftKey ||

diff --git a/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js
@@ -18,8 +18,9 @@ const styles = theme => ({
   },
 });
 
-function handleClick() {
-  alert('You clicked a Breadcrumb.'); // eslint-disable-line no-alert
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
 function CollapsedBreadcrumbs(props) {

diff --git a/docs/src/pages/lab/breadcrumbs/CustomSeparator.js b/docs/src/pages/lab/breadcrumbs/CustomSeparator.js
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
@@ -19,8 +17,9 @@ const styles = theme => ({
   },
 });
 
-function handleClick() {
-  alert('You clicked a Breadcrumb.'); // eslint-disable-line no-alert
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
 function CustomSeparator(props) {
@@ -31,12 +30,12 @@ function CustomSeparator(props) {
       <Paper className={classes.paper}>
         <Breadcrumbs separator="›" arial-label="Breadcrumb navigation">
           <Breadcrumb>
-            <Link color="inherit" href="#" onClick={handleClick}>
+            <Link color="inherit" href="/" onClick={handleClick}>
               Material-UI
             </Link>
           </Breadcrumb>
           <Breadcrumb>
-            <Link color="inherit" href="#" onClick={handleClick}>
+            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
               Lab
             </Link>
           </Breadcrumb>
@@ -47,12 +46,12 @@ function CustomSeparator(props) {
       <Paper className={classes.paper}>
         <Breadcrumbs separator="-" arial-label="Breadcrumb navigation">
           <Breadcrumb>
-            <Link color="inherit" href="#" onClick={handleClick}>
+            <Link color="inherit" href="/" onClick={handleClick}>
               Material-UI
             </Link>
           </Breadcrumb>
           <Breadcrumb>
-            <Link color="inherit" href="#" onClick={handleClick}>
+            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
               Lab
             </Link>
           </Breadcrumb>
@@ -61,14 +60,17 @@ function CustomSeparator(props) {
       </Paper>
       <br />
       <Paper className={classes.paper}>
-        <Breadcrumbs separator={<NavigateNextIcon />} arial-label="Breadcrumb navigation">
+        <Breadcrumbs
+          separator={<NavigateNextIcon fontSize="small" />}
+          arial-label="Breadcrumb navigation"
+        >
           <Breadcrumb>
-            <Link color="inherit" href="#" onClick={handleClick}>
+            <Link color="inherit" href="/" onClick={handleClick}>
               Material-UI
             </Link>
           </Breadcrumb>
           <Breadcrumb>
-            <Link color="inherit" href="#" onClick={handleClick}>
+            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
               Lab
             </Link>
           </Breadcrumb>

diff --git a/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js
@@ -33,8 +33,9 @@ const styles = theme => ({
   },
 });
 
-function handleClick() {
-  alert('You clicked a Breadcrumb.'); // eslint-disable-line no-alert
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
 function CustomBreadcrumb(props) {

diff --git a/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
@@ -8,8 +6,8 @@ import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
 import Breadcrumb from '@material-ui/lab/Breadcrumb';
 import Link from '@material-ui/core/Link';
 import HomeIcon from '@material-ui/icons/Home';
-import SettingsIcon from '@material-ui/icons/Settings';
-import GroupIcon from '@material-ui/icons/Group';
+import WhatshotIcon from '@material-ui/icons/Whatshot';
+import GrainIcon from '@material-ui/icons/Grain';
 
 const styles = theme => ({
   root: {
@@ -25,8 +23,9 @@ const styles = theme => ({
   },
 });
 
-function handleClick() {
-  alert('You clicked a Breadcrumb.'); // eslint-disable-line no-alert
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
 function IconBreadcrumbs(props) {
@@ -35,22 +34,20 @@ function IconBreadcrumbs(props) {
     <Paper className={classes.root}>
       <Breadcrumbs arial-label="Breadcrumb navigation">
         <Breadcrumb>
-          <Link color="inherit" href="#" onClick={handleClick} className={classes.link}>
+          <Link color="inherit" href="/" onClick={handleClick} className={classes.link}>
             <HomeIcon className={classes.icon} />
-            Home
+            Material-UI
           </Link>
         </Breadcrumb>
         <Breadcrumb>
-          <Link color="inherit" href="#" onClick={handleClick} className={classes.link}>
-            <SettingsIcon className={classes.icon} />
-            Settings
+          <Link color="inherit" href="/lab/about/" onClick={handleClick} className={classes.link}>
+            <WhatshotIcon className={classes.icon} />
+            Lab
           </Link>
         </Breadcrumb>
-        <Breadcrumb>
-          <Link color="inherit" href="#" className={classes.link}>
-            <GroupIcon className={classes.icon} />
-            Users
-          </Link>
+        <Breadcrumb color="textPrimary" className={classes.link}>
+          <GrainIcon className={classes.icon} />
+          Breadcrumb
         </Breadcrumb>
       </Breadcrumbs>
     </Paper>

diff --git a/docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs.js
@@ -12,18 +12,23 @@ const styles = theme => ({
   },
 });
 
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
 function SimpleBreadcrumbs(props) {
   const { classes } = props;
   return (
     <Paper className={classes.root}>
       <Breadcrumbs arial-label="Breadcrumb navigation">
         <Breadcrumb>
-          <Link color="inherit" href="/">
+          <Link color="inherit" href="/" onClick={handleClick}>
             Material-UI
           </Link>
         </Breadcrumb>
         <Breadcrumb>
-          <Link color="inherit" href="/lab/about/">
+          <Link color="inherit" href="/lab/about/" onClick={handleClick}>
             Lab
           </Link>
         </Breadcrumb>

diff --git a/docs/src/pages/lab/breadcrumbs/breadcrumbs.md b/docs/src/pages/lab/breadcrumbs/breadcrumbs.md
@@ -13,6 +13,15 @@ components: Breadcrumbs, Breadcrumb
 
 ## Custom separator
 
+The seperator can be any valid React node.
+In the following examples, we are using `"›"`, `"-"` and
+
+```jsx
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+// …
+seperator={<NavigateNextIcon fontSize="small" />}
+```
+
 {{"demo": "pages/lab/breadcrumbs/CustomSeparator.js"}}
 
 ## Breadcrumbs with icons

diff --git a/packages/material-ui-lab/src/Breadcrumbs/BreadcrumbSeparator.js b/packages/material-ui-lab/src/Breadcrumbs/BreadcrumbSeparator.js
@@ -7,9 +7,9 @@ const styles = theme => ({
   root: {
     color: theme.palette.grey[400],
     display: 'flex',
+    userSelect: 'none',
     marginLeft: 8,
     marginRight: 8,
-    userSelect: 'none',
   },
 });