[lab] Add a Breadcrumb component (#14084)

* WIP Breadcrumbs * refactor * Simplify component prop rendering * Simplify Breadcrumbs, fix prop comment order * Update for @eps1lon's review * Standardise classNames * prettier * yarn docs:api * Move BreadcrumbSeparator component to its own file * Further simplification * Mark BreadcrumbCollapsed as internal * Fix Olivier's feeback, fix other issues * Stub out the tests, add tests for Breadcrumb * Alternative version * matt review * matt & seb reviews * matt & seb reviews * seb review * Alternative n°1
mui · Feb 1, 2019 · 674c523 · 674c523
1 parent 35bebb3
commit 674c523
Show file tree

Hide file tree

Showing 33 changed files with 961 additions and 12 deletions.
diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
@@ -15,7 +15,6 @@ function NextWrapper(props) {
   return (
     <NextLink href={href} prefetch={prefetch}>
       <a
-        data-next="true"
         onClick={onClick}
         className={classNames(className, {
           [activeClassName]: router.pathname === href && activeClassName,

diff --git a/docs/src/modules/components/MarkdownLinks.js b/docs/src/modules/components/MarkdownLinks.js
@@ -8,14 +8,14 @@ async function handleClick(event) {
   if (
     activeElement.nodeName !== 'A' ||
     activeElement.getAttribute('target') === '_blank' ||
-    activeElement.getAttribute('data-next') === 'true' ||
     activeElement.getAttribute('href').indexOf('/') !== 0
   ) {
     return;
   }
 
   // Ignore click for new tab / new window behavior
   if (
+    event.defaultPrevented ||
     event.metaKey ||
     event.ctrlKey ||
     event.shiftKey ||

diff --git a/docs/src/pages/guides/composition/ComponentProperty.js b/docs/src/pages/guides/composition/ComponentProperty.js
@@ -26,7 +26,7 @@ const styles = theme => ({
 });
 
 class ListItemLink extends React.Component {
-  renderLink = itemProps => <Link to={this.props.to} {...itemProps} data-next="true" />;
+  renderLink = itemProps => <Link to={this.props.to} {...itemProps} />;
 
   render() {
     const { icon, primary } = this.props;
@@ -51,7 +51,7 @@ function ListItemLinkShorthand(props) {
   const { primary, to } = props;
   return (
     <li>
-      <ListItem button component={Link} to={to} data-next="true">
+      <ListItem button component={Link} to={to}>
         <ListItemText primary={primary} />
       </ListItem>
     </li>

diff --git a/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js
@@ -0,0 +1,54 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+
+const styles = theme => ({
+  root: {
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  paper: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CollapsedBreadcrumbs(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.paper}>
+      <Breadcrumbs maxItems={2} arial-label="Breadcrumb">
+        <Link color="inherit" href="#" onClick={handleClick}>
+          Home
+        </Link>
+        <Link color="inherit" href="#" onClick={handleClick}>
+          Catalog
+        </Link>
+        <Link color="inherit" href="#" onClick={handleClick}>
+          Accessories
+        </Link>
+        <Link color="inherit" href="#" onClick={handleClick}>
+          New Collection
+        </Link>
+        <Typography color="textPrimary">Belts</Typography>
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+CollapsedBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CollapsedBreadcrumbs);
diff --git a/docs/src/pages/lab/breadcrumbs/CustomSeparator.js b/docs/src/pages/lab/breadcrumbs/CustomSeparator.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
+
+const styles = theme => ({
+  root: {
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  paper: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CustomSeparator(props) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <Breadcrumbs separator="›" arial-label="Breadcrumb">
+          <Link color="inherit" href="/" onClick={handleClick}>
+            Material-UI
+          </Link>
+          <Link color="inherit" href="/lab/about/" onClick={handleClick}>
+            Lab
+          </Link>
+          <Typography color="textPrimary">Breadcrumb</Typography>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper className={classes.paper}>
+        <Breadcrumbs separator="-" arial-label="Breadcrumb">
+          <Link color="inherit" href="/" onClick={handleClick}>
+            Material-UI
+          </Link>
+          <Link color="inherit" href="/lab/about/" onClick={handleClick}>
+            Lab
+          </Link>
+          <Typography color="textPrimary">Breadcrumb</Typography>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper className={classes.paper}>
+        <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} arial-label="Breadcrumb">
+          <Link color="inherit" href="/" onClick={handleClick}>
+            Material-UI
+          </Link>
+          <Link color="inherit" href="/lab/about/" onClick={handleClick}>
+            Lab
+          </Link>
+          <Typography color="textPrimary">Breadcrumb</Typography>
+        </Breadcrumbs>
+      </Paper>
+    </div>
+  );
+}
+
+CustomSeparator.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomSeparator);
diff --git a/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { emphasize } from '@material-ui/core/styles/colorManipulator';
+import Paper from '@material-ui/core/Paper';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Chip from '@material-ui/core/Chip';
+import Avatar from '@material-ui/core/Avatar';
+import HomeIcon from '@material-ui/icons/Home';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+const styles = theme => ({
+  root: {
+    padding: theme.spacing.unit,
+  },
+  chip: {
+    backgroundColor: theme.palette.grey[100],
+    height: 24,
+    color: theme.palette.grey[800],
+    fontWeight: theme.typography.fontWeightRegular,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.grey[300],
+    },
+    '&:active': {
+      boxShadow: theme.shadows[1],
+      backgroundColor: emphasize(theme.palette.grey[300], 0.12),
+    },
+  },
+  avatar: {
+    background: 'none',
+    marginRight: -theme.spacing.unit * 1.5,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function CustomBreadcrumb(props) {
+  const { classes, ...rest } = props;
+  return <Chip className={classes.chip} {...rest} />;
+}
+
+CustomBreadcrumb.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
+
+function CustomizedBreadcrumbs(props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <Breadcrumbs arial-label="Breadcrumb">
+        <StyledBreadcrumb
+          component="a"
+          href="#"
+          label="Home"
+          avatar={
+            <Avatar className={classes.avatar}>
+              <HomeIcon />
+            </Avatar>
+          }
+          onClick={handleClick}
+        />
+        <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
+        <StyledBreadcrumb
+          label="Accessories"
+          deleteIcon={<ExpandMoreIcon />}
+          onClick={handleClick}
+          onDelete={handleClick}
+        />
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+CustomizedBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedBreadcrumbs);
diff --git a/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Link from '@material-ui/core/Link';
+import HomeIcon from '@material-ui/icons/Home';
+import WhatshotIcon from '@material-ui/icons/Whatshot';
+import GrainIcon from '@material-ui/icons/Grain';
+
+const styles = theme => ({
+  root: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+  },
+  link: {
+    display: 'flex',
+  },
+  icon: {
+    marginRight: theme.spacing.unit / 2,
+    width: 20,
+    height: 20,
+  },
+});
+
+function handleClick(event) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
+
+function IconBreadcrumbs(props) {
+  const { classes } = props;
+  return (
+    <Paper className={classes.root}>
+      <Breadcrumbs arial-label="Breadcrumb">
+        <Link color="inherit" href="/" onClick={handleClick} className={classes.link}>
+          <HomeIcon className={classes.icon} />
+          Material-UI
+        </Link>
+        <Link color="inherit" href="/lab/about/" onClick={handleClick} className={classes.link}>
+          <WhatshotIcon className={classes.icon} />
+          Lab
+        </Link>
+        <Typography color="textPrimary" className={classes.link}>
+          <GrainIcon className={classes.icon} />
+          Breadcrumb
+        </Typography>
+      </Breadcrumbs>
+    </Paper>
+  );
+}
+
+IconBreadcrumbs.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(IconBreadcrumbs);