[Link] Add a Link component (#14093)

- [x] I have followed (at least) the [PR section of the contributing guide](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md#submitting-a-pull-request). Closes #13861 Closes #14002 Demo: https://deploy-preview-14093--material-ui.netlify.com/style/links/ Potential Todos: - [ ] Make the demo page better - [ ] Demo the inline property on `Typography`
mui · Jan 7, 2019 · f4281a7 · f4281a7
1 parent 7e7570f
commit f4281a7
Show file tree

Hide file tree

Showing 55 changed files with 602 additions and 356 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.7 KB',
+    limit: '96 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
@@ -61,7 +61,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '182 KB',
+    limit: '183 KB',
   },
   {
     name: 'The docs home page',

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ When in doubt, keep your pull requests small. To give a PR the best chance of ge
 
 As with issues, please begin the title with [ComponentName].
 
-When adding new features or modifying existing, please attempt to include tests to confirm the new behaviour. You can read more about our test setup [here](https://github.com/mui-org/material-ui/blob/master/test/README.md).
+When adding new features or modifying existing, please attempt to include tests to confirm the new behaviour. You can read more about our test setup in our test [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
 
 When migrating a component to master, or submitting a new component, please add it to the [lab](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab).
 

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -6,7 +6,6 @@ import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Drawer from '@material-ui/core/Drawer';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
-import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import Hidden from '@material-ui/core/Hidden';
 import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
@@ -38,9 +37,6 @@ const styles = theme => ({
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
-  anchor: {
-    color: theme.palette.text.secondary,
-  },
 });
 
 // eslint-disable-next-line react/prop-types
@@ -102,14 +98,22 @@ function AppDrawer(props) {
         <div className={classes.nav}>
           <div className={classes.toolbarIe11}>
             <div className={classes.toolbar}>
-              <Link className={classes.title} href="/" onClick={onClose}>
-                <Typography variant="h6" color="inherit">
-                  Material-UI
-                </Typography>
+              <Link
+                className={classes.title}
+                href="/"
+                onClick={onClose}
+                variant="h6"
+                color="inherit"
+              >
+                Material-UI
               </Link>
               {process.env.LIB_VERSION ? (
-                <Link className={classes.anchor} href={_rewriteUrlForNextExport('/versions')}>
-                  <Typography variant="caption">{`v${process.env.LIB_VERSION}`}</Typography>
+                <Link
+                  color="textSecondary"
+                  variant="caption"
+                  href={_rewriteUrlForNextExport('/versions')}
+                >
+                  {`v${process.env.LIB_VERSION}`}
                 </Link>
               ) : null}
             </div>

diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
@@ -83,7 +83,7 @@ class AppDrawerNavItem extends React.Component {
         <ListItem className={classes.itemLeaf} disableGutters {...other}>
           <Button
             component={props => (
-              <Link variant="button" activeClassName={classes.active} href={href} {...props} />
+              <Link naked activeClassName={classes.active} href={href} {...props} />
             )}
             className={classNames(classes.buttonLeaf, `depth-${depth}`)}
             disableRipple

diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -2,14 +2,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from 'docs/src/modules/components/Link';
 import marked from 'marked';
 import warning from 'warning';
 import throttle from 'lodash/throttle';
 import EventListener from 'react-event-listener';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { textToHash } from '@material-ui/docs/MarkdownElement/MarkdownElement';
+import Link from 'docs/src/modules/components/Link';
 
 let itemsCollector;
 const renderer = new marked.Renderer();
@@ -163,41 +163,37 @@ class AppTableOfContents extends React.Component {
               Contents
             </Typography>
             <EventListener target="window" onScroll={this.handleScroll} />
-            <ul className={classes.ul}>
+            <Typography component="ul" className={classes.ul}>
               {this.itemsServer.map(item2 => (
                 <li key={item2.text}>
-                  <Typography
+                  <Link
                     color={active === item2.hash ? 'textPrimary' : 'textSecondary'}
+                    href={`#${item2.hash}`}
                     className={classes.item}
-                    component={linkProps => (
-                      <Link {...linkProps} variant="inherit" href={`#${item2.hash}`} />
-                    )}
                   >
                     <span dangerouslySetInnerHTML={{ __html: item2.text }} />
-                  </Typography>
+                  </Link>
                   {item2.children.length > 0 ? (
                     <ul className={classes.ul}>
                       {item2.children.map(item3 => (
                         <li key={item3.text}>
-                          <Typography
+                          <Link
+                            color={active === item3.hash ? 'textPrimary' : 'textSecondary'}
+                            href={`#${item3.hash}`}
                             className={classes.item}
                             style={{
                               paddingLeft: 8 * 2,
                             }}
-                            color={active === item3.hash ? 'textPrimary' : 'textSecondary'}
-                            component={linkProps => (
-                              <Link {...linkProps} variant="inherit" href={`#${item3.hash}`} />
-                            )}
                           >
                             <span dangerouslySetInnerHTML={{ __html: item3.text }} />
-                          </Typography>
+                          </Link>
                         </li>
                       ))}
                     </ul>
                   ) : null}
                 </li>
               ))}
-            </ul>
+            </Typography>
           </React.Fragment>
         ) : null}
       </nav>

diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js
@@ -35,7 +35,9 @@ function AppTheme(props) {
           ❤️
         </span>
         {' by the '}
-        <Link href="/">Material-UI</Link>
+        <Link color="inherit" href="/">
+          Material-UI
+        </Link>
         {' team.'}
       </Typography>
     </React.Fragment>

diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
@@ -41,13 +41,20 @@ function HomeFooter(props) {
           <Grid item xs={12} sm={6}>
             <ul className={classes.list}>
               <li className={classes.listItem}>
-                <Link href="https://github.com/mui-org/material-ui">GitHub</Link>
+                <Link color="inherit" href="https://github.com/mui-org/material-ui">
+                  GitHub
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="https://twitter.com/MaterialUI">Twitter</Link>
+                <Link color="inherit" href="https://twitter.com/MaterialUI">
+                  Twitter
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="https://github.com/mui-org/material-ui/tree/master/examples">
+                <Link
+                  color="inherit"
+                  href="https://github.com/mui-org/material-ui/tree/master/examples"
+                >
                   Examples
                 </Link>
               </li>
@@ -56,21 +63,29 @@ function HomeFooter(props) {
           <Grid item xs={12} sm={6}>
             <ul className={classes.list}>
               <li className={classes.listItem}>
-                <Link href="/style/icons">Icons</Link>
+                <Link color="inherit" href="/style/icons">
+                  Icons
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="/style/color">Color</Link>
+                <Link color="inherit" href="/style/color">
+                  Color
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="/discover-more/team">Team</Link>
+                <Link color="inherit" href="/discover-more/team">
+                  Team
+                </Link>
               </li>
             </ul>
           </Grid>
         </Grid>
       </Typography>
       <Typography className={classes.version}>
         {`Currently v${process.env.LIB_VERSION}. Released under the `}
-        <Link href="https://github.com/mui-org/material-ui/blob/master/LICENSE">MIT License</Link>
+        <Link color="inherit" href="https://github.com/mui-org/material-ui/blob/master/LICENSE">
+          MIT License
+        </Link>
         {'.'}
       </Typography>
     </footer>

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
@@ -130,7 +130,7 @@ function HomeSteps(props) {
         <Divider className={classes.divider} />
         <Button
           component={buttonProps => (
-            <Link variant="button" prefetch href="/getting-started/installation" {...buttonProps} />
+            <Link naked prefetch href="/getting-started/installation" {...buttonProps} />
           )}
         >
           Read installation docs
@@ -164,7 +164,7 @@ function HomeSteps(props) {
         <Divider className={classes.divider} />
         <Button
           component={buttonProps => (
-            <Link variant="button" prefetch href="/getting-started/usage" {...buttonProps} />
+            <Link naked prefetch href="/getting-started/usage" {...buttonProps} />
           )}
         >
           Explore the docs
@@ -188,9 +188,7 @@ function HomeSteps(props) {
         </div>
         <Divider className={classes.divider} />
         <Button
-          component={buttonProps => (
-            <Link variant="button" prefetch href="/premium-themes" {...buttonProps} />
-          )}
+          component={buttonProps => <Link naked prefetch href="/premium-themes" {...buttonProps} />}
         >
           Browse themes
         </Button>