alternative version

mui · Jan 24, 2019 · d7174d7 · d7174d7
1 parent d5a4b17
commit d7174d7
Show file tree

Hide file tree

Showing 21 changed files with 338 additions and 353 deletions.
diff --git a/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js
@@ -1,13 +1,21 @@
+/* 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 Breadcrumb from '@material-ui/lab/Breadcrumb';
+import Link from '@material-ui/core/Link';
+import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 
 const styles = theme => ({
   root: {
-    padding: theme.spacing.unit,
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  paper: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
   },
 });
 
@@ -17,14 +25,31 @@ function handleClick() {
 
 function CollapsedBreadcrumbs(props) {
   const { classes } = props;
+
   return (
-    <Paper className={classes.root}>
-      <Breadcrumbs maxItems={2}>
-        <Breadcrumb label="Home" onClick={handleClick} />
-        <Breadcrumb label="Catalog" onClick={handleClick} />
-        <Breadcrumb label="Accessories" onClick={handleClick} />
-        <Breadcrumb label="New Collection" onClick={handleClick} />
-        <Breadcrumb label="Belts" active />
+    <Paper className={classes.paper}>
+      <Breadcrumbs maxItems={2} arial-label="Breadcrumb navigation">
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            Home
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            Catalog
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            Accessories
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick}>
+            New Collection
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb color="textPrimary">Belts</Breadcrumb>
       </Breadcrumbs>
     </Paper>
   );

diff --git a/docs/src/pages/lab/breadcrumbs/CustomSeparator.js b/docs/src/pages/lab/breadcrumbs/CustomSeparator.js
@@ -0,0 +1,86 @@
+/* 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 Breadcrumb from '@material-ui/lab/Breadcrumb';
+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() {
+  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 navigation">
+          <Breadcrumb>
+            <Link color="inherit" href="#" onClick={handleClick}>
+              Material-UI
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb>
+            <Link color="inherit" href="#" onClick={handleClick}>
+              Lab
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb color="textPrimary">Breadcrumb</Breadcrumb>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper className={classes.paper}>
+        <Breadcrumbs separator="-" arial-label="Breadcrumb navigation">
+          <Breadcrumb>
+            <Link color="inherit" href="#" onClick={handleClick}>
+              Material-UI
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb>
+            <Link color="inherit" href="#" onClick={handleClick}>
+              Lab
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb color="textPrimary">Breadcrumb</Breadcrumb>
+        </Breadcrumbs>
+      </Paper>
+      <br />
+      <Paper className={classes.paper}>
+        <Breadcrumbs separator={<NavigateNextIcon />} arial-label="Breadcrumb navigation">
+          <Breadcrumb>
+            <Link color="inherit" href="#" onClick={handleClick}>
+              Material-UI
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb>
+            <Link color="inherit" href="#" onClick={handleClick}>
+              Lab
+            </Link>
+          </Breadcrumb>
+          <Breadcrumb color="textPrimary">Breadcrumb</Breadcrumb>
+        </Breadcrumbs>
+      </Paper>
+    </div>
+  );
+}
+
+CustomSeparator.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomSeparator);
diff --git a/docs/src/pages/lab/breadcrumbs/CustomSeparatorComponent.js b/docs/src/pages/lab/breadcrumbs/CustomSeparatorComponent.js
diff --git a/docs/src/pages/lab/breadcrumbs/CustomSeparatorText.js b/docs/src/pages/lab/breadcrumbs/CustomSeparatorText.js
diff --git a/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js
@@ -1,9 +1,12 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
 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 Breadcrumb from '@material-ui/lab/Breadcrumb';
 import Chip from '@material-ui/core/Chip';
 import Avatar from '@material-ui/core/Avatar';
 import HomeIcon from '@material-ui/icons/Home';
@@ -13,13 +16,8 @@ const styles = theme => ({
   root: {
     padding: theme.spacing.unit,
   },
-  separator: {
-    marginLeft: -theme.spacing.unit / 2,
-    marginRight: -theme.spacing.unit / 2,
-  },
   chip: {
     backgroundColor: theme.palette.grey[100],
-    // fontSize: theme.typography.pxToRem(13),
     height: 24,
     color: theme.palette.grey[800],
     fontWeight: theme.typography.fontWeightRegular,
@@ -54,25 +52,34 @@ const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
 
 function CustomizedBreadcrumbs(props) {
   const { classes } = props;
+
   return (
     <Paper className={classes.root}>
-      <Breadcrumbs>
-        <StyledBreadcrumb
-          label="Home"
-          avatar={
-            <Avatar className={classes.avatar}>
-              <HomeIcon />
-            </Avatar>
-          }
-          onClick={handleClick}
-        />
-        <StyledBreadcrumb label="Catalog" onClick={handleClick} />
-        <StyledBreadcrumb
-          label="Accessories"
-          deleteIcon={<ExpandMoreIcon />}
-          onClick={handleClick}
-          onDelete={handleClick}
-        />
+      <Breadcrumbs arial-label="Breadcrumb navigation">
+        <Breadcrumb>
+          <StyledBreadcrumb
+            component="a"
+            href="#"
+            label="Home"
+            avatar={
+              <Avatar className={classes.avatar}>
+                <HomeIcon />
+              </Avatar>
+            }
+            onClick={handleClick}
+          />
+        </Breadcrumb>
+        <Breadcrumb>
+          <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
+        </Breadcrumb>
+        <Breadcrumb>
+          <StyledBreadcrumb
+            label="Accessories"
+            deleteIcon={<ExpandMoreIcon />}
+            onClick={handleClick}
+            onDelete={handleClick}
+          />
+        </Breadcrumb>
       </Breadcrumbs>
     </Paper>
   );

diff --git a/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js
@@ -1,16 +1,27 @@
+/* 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 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';
 
 const styles = theme => ({
   root: {
-    padding: theme.spacing.unit,
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+  },
+  link: {
+    display: 'flex',
+  },
+  icon: {
+    marginRight: theme.spacing.unit / 2,
+    width: 20,
+    height: 20,
   },
 });
 
@@ -22,10 +33,25 @@ function IconBreadcrumbs(props) {
   const { classes } = props;
   return (
     <Paper className={classes.root}>
-      <Breadcrumbs>
-        <Breadcrumb label="Home" icon={<HomeIcon />} onClick={handleClick} />
-        <Breadcrumb label="Settings" icon={<SettingsIcon />} onClick={handleClick} />
-        <Breadcrumb label="Users" icon={<GroupIcon />} active />
+      <Breadcrumbs arial-label="Breadcrumb navigation">
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick} className={classes.link}>
+            <HomeIcon className={classes.icon} />
+            Home
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" onClick={handleClick} className={classes.link}>
+            <SettingsIcon className={classes.icon} />
+            Settings
+          </Link>
+        </Breadcrumb>
+        <Breadcrumb>
+          <Link color="inherit" href="#" className={classes.link}>
+            <GroupIcon className={classes.icon} />
+            Users
+          </Link>
+        </Breadcrumb>
       </Breadcrumbs>
     </Paper>
   );