approach n°1

mui · Jan 31, 2019 · 8dfa72c · 8dfa72c
1 parent b1927e3
commit 8dfa72c
Show file tree

Hide file tree

Showing 19 changed files with 126 additions and 286 deletions.
diff --git a/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CollapsedBreadcrumbs.js
@@ -5,7 +5,7 @@ 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 Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
 const styles = theme => ({
@@ -29,27 +29,19 @@ function CollapsedBreadcrumbs(props) {
   return (
     <Paper className={classes.paper}>
       <Breadcrumbs maxItems={2} arial-label="Breadcrumb">
-        <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>
+        <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>
   );

diff --git a/docs/src/pages/lab/breadcrumbs/CustomSeparator.js b/docs/src/pages/lab/breadcrumbs/CustomSeparator.js
@@ -3,7 +3,7 @@ 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 Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
 
@@ -29,49 +29,37 @@ function CustomSeparator(props) {
     <div className={classes.root}>
       <Paper className={classes.paper}>
         <Breadcrumbs separator="›" arial-label="Breadcrumb">
-          <Breadcrumb>
-            <Link color="inherit" href="/" onClick={handleClick}>
-              Material-UI
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb>
-            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
-              Lab
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb color="textPrimary">Breadcrumb</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">
-          <Breadcrumb>
-            <Link color="inherit" href="/" onClick={handleClick}>
-              Material-UI
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb>
-            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
-              Lab
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb color="textPrimary">Breadcrumb</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">
-          <Breadcrumb>
-            <Link color="inherit" href="/" onClick={handleClick}>
-              Material-UI
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb>
-            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
-              Lab
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb color="textPrimary">Breadcrumb</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>

diff --git a/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/CustomizedBreadcrumbs.js
@@ -4,7 +4,6 @@ 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';
@@ -55,30 +54,24 @@ function CustomizedBreadcrumbs(props) {
   return (
     <Paper className={classes.root}>
       <Breadcrumbs arial-label="Breadcrumb">
-        <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>
+        <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>
   );

diff --git a/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/IconBreadcrumbs.js
@@ -2,8 +2,8 @@ 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 Breadcrumb from '@material-ui/lab/Breadcrumb';
 import Link from '@material-ui/core/Link';
 import HomeIcon from '@material-ui/icons/Home';
 import WhatshotIcon from '@material-ui/icons/Whatshot';
@@ -33,22 +33,18 @@ function IconBreadcrumbs(props) {
   return (
     <Paper className={classes.root}>
       <Breadcrumbs arial-label="Breadcrumb">
-        <Breadcrumb>
-          <Link color="inherit" href="/" onClick={handleClick} className={classes.link}>
-            <HomeIcon className={classes.icon} />
-            Material-UI
-          </Link>
-        </Breadcrumb>
-        <Breadcrumb>
-          <Link color="inherit" href="/lab/about/" onClick={handleClick} className={classes.link}>
-            <WhatshotIcon className={classes.icon} />
-            Lab
-          </Link>
-        </Breadcrumb>
-        <Breadcrumb color="textPrimary" className={classes.link}>
+        <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
-        </Breadcrumb>
+        </Typography>
       </Breadcrumbs>
     </Paper>
   );

diff --git a/docs/src/pages/lab/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/RouterBreadcrumbs.js
@@ -9,10 +9,10 @@ import NoSsr from '@material-ui/core/NoSsr';
 import ListItem from '@material-ui/core/ListItem';
 import Collapse from '@material-ui/core/Collapse';
 import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
-import Breadcrumb from '@material-ui/lab/Breadcrumb';
 import MemoryRouter from 'react-router/MemoryRouter';
 import Route from 'react-router/Route';
 import { Link as RouterLink } from 'react-router-dom';
@@ -82,25 +82,21 @@ class RouterBreadcrumbs extends React.Component {
 
                 return (
                   <Breadcrumbs arial-label="Breadcrumb">
-                    <Breadcrumb>
-                      <Link component={RouterLink} color="inherit" to="/">
-                        Home
-                      </Link>
-                    </Breadcrumb>
+                    <Link component={RouterLink} color="inherit" to="/">
+                      Home
+                    </Link>
                     {pathnames.map((value, index) => {
                       const last = index === pathnames.length - 1;
                       const to = `/${pathnames.slice(0, index + 1).join('/')}`;
 
                       return last ? (
-                        <Breadcrumb color="textPrimary" key={to}>
+                        <Typography color="textPrimary" key={to}>
                           {breadcrumbNameMap[to]}
-                        </Breadcrumb>
+                        </Typography>
                       ) : (
-                        <Breadcrumb key={to}>
-                          <Link component={RouterLink} color="inherit" to={to}>
-                            {breadcrumbNameMap[to]}
-                          </Link>
-                        </Breadcrumb>
+                        <Link component={RouterLink} color="inherit" to={to} key={to}>
+                          {breadcrumbNameMap[to]}
+                        </Link>
                       );
                     })}
                   </Breadcrumbs>

diff --git a/docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/lab/breadcrumbs/SimpleBreadcrumbs.js
@@ -2,8 +2,8 @@ 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 Breadcrumb from '@material-ui/lab/Breadcrumb';
 import Link from '@material-ui/core/Link';
 
 const styles = theme => ({
@@ -27,42 +27,32 @@ function SimpleBreadcrumbs(props) {
     <div className={classes.root}>
       <Paper className={classes.paper}>
         <Breadcrumbs arial-label="Breadcrumb">
-          <Breadcrumb>
-            <Link color="inherit" href="/" onClick={handleClick}>
-              Material-UI
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb>
-            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
-              Lab
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb color="textPrimary">Breadcrumb</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 arial-label="Breadcrumb">
-          <Breadcrumb>
-            <Link color="inherit" href="/" onClick={handleClick}>
-              Material-UI
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb>
-            <Link color="inherit" href="/lab/about/" onClick={handleClick}>
-              Lab
-            </Link>
-          </Breadcrumb>
-          <Breadcrumb color="textPrimary">
-            <Link
-              color="inherit"
-              href="/lab/about/breadcrumbs"
-              onClick={handleClick}
-              aria-current="page"
-            >
-              Breadcrumb
-            </Link>
-          </Breadcrumb>
+          <Link color="inherit" href="/" onClick={handleClick}>
+            Material-UI
+          </Link>
+          <Link color="inherit" href="/lab/about/" onClick={handleClick}>
+            Lab
+          </Link>
+          <Link
+            color="textPrimary"
+            href="/lab/about/breadcrumbs"
+            onClick={handleClick}
+            aria-current="page"
+          >
+            Breadcrumb
+          </Link>
         </Breadcrumbs>
       </Paper>
     </div>

diff --git a/docs/src/pages/lab/breadcrumbs/breadcrumbs.md b/docs/src/pages/lab/breadcrumbs/breadcrumbs.md
@@ -1,6 +1,6 @@
 ---
 title: Breadcrumbs React component
-components: Breadcrumbs, Breadcrumb
+components: Breadcrumbs
 ---
 
 # Breadcrumbs

diff --git a/packages/material-ui-lab/src/Breadcrumb/Breadcrumb.d.ts b/packages/material-ui-lab/src/Breadcrumb/Breadcrumb.d.ts