refactor

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

Hide file tree

Showing 10 changed files with 84 additions and 151 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
@@ -19,10 +19,10 @@ 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,
   },
 });
 

diff --git a/pages/lab/breadcrumbs.js b/pages/lab/breadcrumbs.js
@@ -1,59 +1,18 @@
+import 'docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
 import React from 'react';
-import withRoot from 'docs/src/modules/components/withRoot';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
-const req = require.context('markdown', true, /.md$/);
+const req = require.context('docs/src/pages/lab/breadcrumbs', false, /\.md|\.js$/);
+const reqSource = require.context(
+  '!raw-loader!../../docs/src/pages/lab/breadcrumbs',
+  false,
+  /\.js$/,
+);
+const reqPrefix = 'pages/lab/breadcrumbs';
 
-function Page(props) {
-  return (
-    <MarkdownDocs
-      markdown={req(`./breadcrumbs${props.lang}.md`)}
-      demos={{
-        'pages/lab/breadcrumbs/SimpleBreadcrumbs.js': {
-          js: require('docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs'), 'utf8')
-`,
-        },
-        'pages/lab/breadcrumbs/CustomSeparatorText.js': {
-        js: require('docs/src/pages/lab/breadcrumbs/CustomSeparatorText').default,
-        raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/breadcrumbs/CustomSeparatorText'), 'utf8')
-`,
-      },
-        'pages/lab/breadcrumbs/CustomSeparatorComponent.js': {
-          js: require('docs/src/pages/lab/breadcrumbs/CustomSeparatorComponent').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/breadcrumbs/CustomSeparatorComponent'), 'utf8')
-`,
-        },
-        'pages/lab/breadcrumbs/IconBreadcrumbs.js': {
-          js: require('docs/src/pages/lab/breadcrumbs/IconBreadcrumbs').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/breadcrumbs/IconBreadcrumbs'), 'utf8')
-`,
-        },
-        'pages/lab/breadcrumbs/CollapsedBreadcrumbs.js': {
-          js: require('docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs'), 'utf8')
-`,
-        },
-        'pages/lab/breadcrumbs/StyledBreadcrumbs.js': {
-          js: require('docs/src/pages/lab/breadcrumbs/StyledBreadcrumbs').default,
-          raw: preval`
-module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/lab/breadcrumbs/StyledBreadcrumbs'), 'utf8')
-`,
-        },
-      }}
-    />
-  );
+function Page() {
+  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
 }
 
-export default withRoot(Page);
+export default Page;