refactor

mui · Jan 4, 2019 · f9e9051 · f9e9051
1 parent 5345fbe
commit f9e9051
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 174 deletions.
diff --git a/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js
@@ -18,15 +18,15 @@ function handleClick() {
 function MoreBreadcrumbs(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 />
-        </Breadcrumbs>
-      </Paper>
+    <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 />
+      </Breadcrumbs>
+    </Paper>
   );
 }
 

diff --git a/docs/src/pages/lab/breadcrumbs/CustomSeparatorComponent.js b/docs/src/pages/lab/breadcrumbs/CustomSeparatorComponent.js
@@ -4,7 +4,6 @@ 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 NavigateNextIcon from '@material-ui/icons/NavigateNext';
 
 const styles = theme => ({
@@ -20,15 +19,13 @@ function handleClick() {
 function CustomSeparatorComponent(props) {
   const { classes } = props;
   return (
-      <Paper className={classes.root}>
-        <Breadcrumbs
-          separator={<NavigateNextIcon className={classes.separator} />}
-        >
-          <Breadcrumb label="Material-UI" onClick={handleClick} />
-          <Breadcrumb label="Component Demos" onClick={handleClick} />
-          <Breadcrumb label="Breadcrumb" active />
-        </Breadcrumbs>
-      </Paper>
+    <Paper className={classes.root}>
+      <Breadcrumbs separator={<NavigateNextIcon className={classes.separator} />}>
+        <Breadcrumb label="Material-UI" onClick={handleClick} />
+        <Breadcrumb label="Component Demos" onClick={handleClick} />
+        <Breadcrumb label="Breadcrumb" active />
+      </Breadcrumbs>
+    </Paper>
   );
 }
 

diff --git a/...ages/lab/breadcrumbs/StyledBreadcrumbs.js → .../lab/breadcrumbs/CustomizedBreadcrumbs.js b/...ages/lab/breadcrumbs/StyledBreadcrumbs.js → .../lab/breadcrumbs/CustomizedBreadcrumbs.js
@@ -9,7 +9,6 @@ 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';
-
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 const styles = theme => ({
@@ -50,40 +49,36 @@ function CustomBreadcrumb({ classes, className, ...rest }) {
 
 const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
 
-function MoreBreadcrumbs(props) {
+function CustomizedBreadcrumbs(props) {
   const { classes } = props;
   return (
-      <Paper className={classes.root}>
-        <Breadcrumbs>
-          <Breadcrumb
-            label="Home"
-            avatar={
-              <Avatar className={classes.avatar}>
-                <HomeIcon />
-              </Avatar>
-            }
-            component={StyledBreadcrumb}
-            onClick={handleClick}
-          />
-          <Breadcrumb
-            label="Catalog"
-            component={StyledBreadcrumb}
-            onClick={handleClick}
-          />
-          <Breadcrumb
-            label="Accessories"
-            deleteIcon={<ExpandMoreIcon />}
-            onClick={handleClick}
-            onDelete={handleClick}
-            component={StyledBreadcrumb}
-          />
-        </Breadcrumbs>
-      </Paper>
+    <Paper className={classes.root}>
+      <Breadcrumbs>
+        <Breadcrumb
+          label="Home"
+          avatar={
+            <Avatar className={classes.avatar}>
+              <HomeIcon />
+            </Avatar>
+          }
+          component={StyledBreadcrumb}
+          onClick={handleClick}
+        />
+        <Breadcrumb label="Catalog" component={StyledBreadcrumb} onClick={handleClick} />
+        <Breadcrumb
+          label="Accessories"
+          deleteIcon={<ExpandMoreIcon />}
+          onClick={handleClick}
+          onDelete={handleClick}
+          component={StyledBreadcrumb}
+        />
+      </Breadcrumbs>
+    </Paper>
   );
 }
 
-MoreBreadcrumbs.propTypes = {
+CustomizedBreadcrumbs.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(MoreBreadcrumbs);
+export default withStyles(styles)(CustomizedBreadcrumbs);
diff --git a/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js
@@ -21,21 +21,13 @@ function handleClick() {
 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>
-      </Paper>
+    <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>
+    </Paper>
   );
 }
 

diff --git a/docs/src/pages/lab/breadcrumbs/MoreBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/MoreBreadcrumbs.js
@@ -92,9 +92,7 @@ function MoreBreadcrumbs(props) {
       </Paper>
 
       <Paper className={classes.paper}>
-        <Breadcrumbs
-          separator={<NavigateNextIcon className={classes.separator} />}
-        >
+        <Breadcrumbs separator={<NavigateNextIcon className={classes.separator} />}>
           <Breadcrumb label="Material-UI" onClick={handleClick} />
           <Breadcrumb label="Component Demos" onClick={handleClick} />
           <Breadcrumb label="Breadcrumb" active />
@@ -103,16 +101,8 @@ function MoreBreadcrumbs(props) {
 
       <Paper className={classes.paper}>
         <Breadcrumbs>
-          <Breadcrumb
-            label="Home"
-            icon={<HomeIcon />}
-            onClick={handleClick}
-          />
-          <Breadcrumb
-            label="Settings"
-            icon={<SettingsIcon />}
-            onClick={handleClick}
-          />
+          <Breadcrumb label="Home" icon={<HomeIcon />} onClick={handleClick} />
+          <Breadcrumb label="Settings" icon={<SettingsIcon />} onClick={handleClick} />
           <Breadcrumb label="Users" icon={<GroupIcon />} active />
         </Breadcrumbs>
       </Paper>
@@ -139,11 +129,7 @@ function MoreBreadcrumbs(props) {
             component={StyledBreadcrumb}
             onClick={handleClick}
           />
-          <Breadcrumb
-            label="Catalog"
-            component={StyledBreadcrumb}
-            onClick={handleClick}
-          />
+          <Breadcrumb label="Catalog" component={StyledBreadcrumb} onClick={handleClick} />
           <Breadcrumb
             label="Accessories"
             deleteIcon={<ExpandMoreIcon />}

diff --git a/docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs.js
@@ -18,13 +18,13 @@ function handleClick() {
 function SimpleBreadcrumbs(props) {
   const { classes } = props;
   return (
-      <Paper className={classes.root}>
-        <Breadcrumbs>
-          <Breadcrumb label="Material-UI" onClick={handleClick} />
-          <Breadcrumb label="Component Demos" onClick={handleClick} />
-          <Breadcrumb label="Breadcrumb" active />
-        </Breadcrumbs>
-      </Paper>
+    <Paper className={classes.root}>
+      <Breadcrumbs>
+        <Breadcrumb label="Material-UI" onClick={handleClick} />
+        <Breadcrumb label="Component Demos" onClick={handleClick} />
+        <Breadcrumb label="Breadcrumb" active />
+      </Breadcrumbs>
+    </Paper>
   );
 }
 

diff --git a/docs/src/pages/lab/breadcrumbs/breadcrumbs.md b/docs/src/pages/lab/breadcrumbs/breadcrumbs.md
@@ -27,6 +27,10 @@ components: Breadcrumbs, Breadcrumb
 
 {{"demo": "pages/lab/breadcrumbs/CollapsedBreadcrumbs.js"}}
 
-## Styled Breadcrumbs
+## Customized Breadcrumbs
 
-{{"demo": "pages/lab/breadcrumbs/StyledBreadcrumbs.js"}}
+If you have been reading the [overrides documentation page](/customization/overrides/)
+but you are not confident jumping in,
+here is one example of how you can change the badge position.
+
+{{"demo": "pages/lab/breadcrumbs/CustomizedBreadcrumbs.js"}}
diff --git a/packages/material-ui-lab/src/Breadcrumb/Breadcrumb.js b/packages/material-ui-lab/src/Breadcrumb/Breadcrumb.js
@@ -27,11 +27,11 @@ const styles = theme => ({
     fontWeight: theme.typography.fontWeightMedium,
   },
   gutters: {
-    paddingLeft: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
+    paddingLeft: 8,
+    paddingRight: 8,
   },
   icon: {
-    marginRight: theme.spacing.unit / 2,
+    marginRight: 4,
     width: height / 1.2,
     height: height / 1.2,
     color:

diff --git a/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui-lab/src/Breadcrumbs/Breadcrumbs.js
@@ -1,4 +1,4 @@
-import React, { Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
@@ -19,25 +19,13 @@ const styles = theme => ({
     height,
     lineHeight: `${height}px`,
     color: theme.palette.grey[400],
-    marginLeft: theme.spacing.unit / 2,
-    marginRight: theme.spacing.unit / 2,
-    paddingLeft: theme.spacing.unit / 4,
-    paddingRight: theme.spacing.unit / 4,
+    marginLeft: 4,
+    marginRight: 4,
+    paddingLeft: 2,
+    paddingRight: 2,
   },
 });
 
-function DefaultSeparator(props) {
-  const { className, separatorText } = props;
-  return (
-    <div className={className}>{separatorText}</div>
-  );
-}
-
-DefaultSeparator.propTypes = {
-  className: PropTypes.object.isRequired,
-  separatorText: PropTypes.string.isRequired,
-};
-
 class Breadcrumbs extends React.PureComponent {
   state = {
     expanded: false,
@@ -58,7 +46,7 @@ class Breadcrumbs extends React.PureComponent {
         });
       }
     }
-    return <DefaultSeparator {...props} />;
+    return <div {...props} />;
   }
 
   expand(e) {
@@ -113,7 +101,7 @@ class Breadcrumbs extends React.PureComponent {
   }
 
   renderAllItems() {
-    const allNonEmptyItems = Children.toArray(this.props.children);
+    const allNonEmptyItems = React.Children.toArray(this.props.children);
     return allNonEmptyItems.map(child => React.cloneElement(child, {}));
   }
 
@@ -134,7 +122,7 @@ class Breadcrumbs extends React.PureComponent {
     return (
       <div className={classes.root} {...rest}>
         {this.state.expanded ||
-        (maxItems && Children.toArray(children).length <= maxItems)
+        (maxItems && React.Children.toArray(children).length <= maxItems)
           ? this.insertSeparators(this.renderAllItems())
           : this.insertSeparators(this.renderItemsBeforeAndAfter())}
       </div>
@@ -146,10 +134,7 @@ Breadcrumbs.propTypes = {
   /**
    * A single `Breadcrumb` or an array of `Breadcrumb`s.
    */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css-api) below for more details.
@@ -184,10 +169,9 @@ Breadcrumbs.propTypes = {
 };
 
 Breadcrumbs.defaultProps = {
-  children: null,
-  maxItems: defaultMaxItems,
-  itemsBeforeCollapse: 1,
   itemsAfterCollapse: 1,
+  itemsBeforeCollapse: 1,
+  maxItems: defaultMaxItems,
   separatorText: '/',
 };