[Link] Refinement

docs/src/modules/components/AppFrame.js

@@ -202,16 +202,16 @@ class AppFrame extends React.Component {
                     </MenuItem>
                   </Menu>
                   <Tooltip title="Edit docs colors" enterDelay={300}>
-                    <IconButton
+                    <Link
                       color="inherit"
                       aria-label="Edit docs colors"
-                      component={Link}
+                      component={IconButton}
                       href="/style/color/#color-tool"
                       data-ga-event-category="AppBar"
                       data-ga-event-action="colors"
                     >
                       <ColorsIcon />
-                    </IconButton>
+                    </Link>
                   </Tooltip>
                   <Tooltip title="Toggle light/dark theme" enterDelay={300}>
                     <IconButton

docs/src/pages/style/links/ButtonLink.js

@@ -7,6 +7,7 @@ export default function ButtonLink() {
   return (
     <Link
       component="button"
+      variant="body2"
       onClick={() => {
         alert("I'm a button.");
       }}

docs/src/pages/style/links/Links.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
 
 const styles = theme => ({
   link: {
@@ -17,7 +18,7 @@ function Links(props) {
   const { classes } = props;
 
   return (
-    <div>
+    <Typography>
       <Link href={dudUrl} className={classes.link}>
         Link
       </Link>
@@ -27,7 +28,7 @@ function Links(props) {
       <Link href={dudUrl} variant="body1" className={classes.link}>
         {'variant="body1"'}
       </Link>
-    </div>
+    </Typography>
   );
 }
 

docs/src/pages/style/links/links.md

@@ -13,23 +13,24 @@ You can leverage its properties.
 
 {{"demo": "pages/style/links/Links.js"}}
 
+However, the link has different default properties than the typography:
+- `color="primary"` as the link needs to stand out.
+- `variant="inherit"` as the link will, most of the time, be used as a child of a Typograpy component.
+
 ## Accessibility
 
-- When providing the content for the link, avoid phrases like "click here" or "go to".
+- When providing the content for the link, avoid generic descriptions like "click here" or "go to".
+Instead, use [specific descriptions](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text).
 - For the best user experience links should stand out from the text on the page.
 - If a link doesn't have a meaningful href, [it should be rendered using a `<button>` element](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md).
 
 {{"demo": "pages/style/links/ButtonLink.js"}}
 
-## Recommendations
+## Security
 
-When you use `target="_blank"` with Links it is recommended to always use `rel="noopener"` or `rel="noreferrer"` when linking to third party content.
+When you use `target="_blank"` with Links it is [recom](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md)[mended](https://developers.google.com/web/tools/lighthouse/audits/noopener) to always set `rel="noopener"` or `rel="noreferrer"` when linking to third party content.
 
-`rel="noopener"` prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
+- `rel="noopener"` prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
 Without this the target page can potentially redirect your page to a malicious URL.
-
-`rel="noreferrer""` has the same effect, but also prevents the Referer header from being sent to the new page.
-
-Removing the referer header will affect analytics. By stripping the referral value, the traffic from these links will be
-misattributed — instead of showing as referral traffic, they will be attributed as “direct” in Google Analytics. Or, if
-you use an alternative analytics application, you may see the visits in a "noreferral" bucket.
+- `rel="noreferrer""` has the same effect, but also prevents the *Referer* header from being sent to the new page.
+⚠️ Removing the referrer header will affect analytics.

packages/material-ui/src/Link/Link.js

@@ -117,11 +117,6 @@ Link.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: componentPropType,
-  /**
-   * The target of the link. You can read about this property on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes)
-   */
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   /**
    * `classes` property applied to the [`Typography`](/api/typography/) element.
    */
@@ -140,7 +135,6 @@ Link.defaultProps = {
   block: false,
   color: 'primary',
   component: 'a',
-  target: '_self',
   underline: 'hover',
   variant: 'inherit',
 };

pages/api/link.md

@@ -23,7 +23,6 @@ import Link from '@material-ui/core/Link';
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'<br></span> | <span class="prop-default">'primary'</span> | The color of the link. |
 | <span class="prop-name">component</span> | <span class="prop-type">componentPropType</span> | <span class="prop-default">'a'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">target</span> | <span class="prop-type">enum:&nbsp;'_self'&nbsp;&#124;<br>&nbsp;'_blank'&nbsp;&#124;<br>&nbsp;'_parent'&nbsp;&#124;<br>&nbsp;'_top'<br></span> | <span class="prop-default">'_self'</span> | The target of the link. You can read about this property on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) |
 | <span class="prop-name">TypographyClasses</span> | <span class="prop-type">object</span> |   | `classes` property applied to the [`Typography`](/api/typography/) element. |
 | <span class="prop-name">underline</span> | <span class="prop-type">enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'hover'&nbsp;&#124;<br>&nbsp;'always'<br></span> | <span class="prop-default">'hover'</span> | Controls when the link should have an underline. |
 | <span class="prop-name">variant</span> | <span class="prop-type">string</span> | <span class="prop-default">'inherit'</span> | Applies the theme typography styles. |