[Link] Underline by default and add removeUnderline prop

UNRELEASED.md

@@ -4,6 +4,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Breaking changes
 
+- `Link` is underlined by default, added `removeUnderline` prop to remove underline ([#3705](https://github.com/Shopify/polaris-react/pull/3705))
 - Remove `light` property from `Tooltip` as it now defaults to a light background ([#3846](https://github.com/Shopify/polaris-react/pull/3846))
 - Made `title` property required in `Modal` for accessibility label, added `hideTitle` property ([#3803](https://github.com/Shopify/polaris-react/pull/3803))
 - Added required `ariaLabel` property in `Sheet` ([#3852](https://github.com/Shopify/polaris-react/pull/3852))

src/components/Link/Link.scss

@@ -9,18 +9,17 @@
   border: 0;
   font-size: inherit;
   color: var(--p-interactive);
-  text-decoration: none;
+  text-decoration: underline;
   cursor: pointer;
 
   &:hover {
     color: var(--p-interactive-hovered);
-    text-decoration: underline;
+    text-decoration: none;
   }
 
   &:focus {
     $chrome-default-outline: rgba(0, 103, 244, 0.247) auto rem(4.5px);
     outline: var(--p-override-none);
-    text-decoration: underline;
   }
 
   &:focus:not(:active) {
@@ -30,7 +29,6 @@
   &:active {
     position: relative;
     color: var(--p-interactive-pressed);
-    text-decoration: underline;
 
     &::before {
       content: '';
@@ -68,11 +66,14 @@
 
 .monochrome {
   color: inherit;
-  text-decoration: underline;
 
   &:hover,
   &:focus,
   &:active {
     color: inherit;
   }
 }
+
+.removeUnderline {
+  text-decoration: none;
+}

src/components/Link/Link.tsx

@@ -20,6 +20,8 @@ export interface LinkProps {
   external?: boolean;
   /** Makes the link color the same as the current text color and adds an underline */
   monochrome?: boolean;
+  /** Removes text decoration underline to the link*/
+  removeUnderline?: boolean;
   /** Callback when a link is clicked */
   onClick?(): void;
   /** Descriptive text to be read to screenreaders */
@@ -33,6 +35,7 @@ export function Link({
   external,
   id,
   monochrome,
+  removeUnderline,
   accessibilityLabel,
 }: LinkProps) {
   const i18n = useI18n();
@@ -63,6 +66,7 @@ export function Link({
         const className = classNames(
           styles.Link,
           shouldBeMonochrome && styles.monochrome,
+          removeUnderline && styles.removeUnderline,
         );
 
         return url ? (

src/components/Link/README.md

@@ -53,6 +53,10 @@ If the existing link styles don’t meet the needs of your project, then use the
 
 The link component should follow the content guidelines for [links](https://polaris.shopify.com/content/actionable-language#section-links).
 
+## Link underlines
+
+<!-- Add some content here -->
+
 ---
 
 ## Examples
@@ -108,7 +112,33 @@ Use for text links that should open in a new browser tab (or window, depending o
 
 <!-- content-for: web -->
 
-Use the `url` prop to give the link component a valid `href` value. This allows the element to be identified as a link to assistive technologies and gives it default keyboard support.
+The Link component is underlined by default since it is accessible in most situations when color is the only way to convey a link is interactive.
+
+<!-- Information for link underlines -->
+
+<!-- usageblock -->
+
+#### Do
+
+- Make links clear and predictable
+- Link the text of a sentence that describes where merchants go when they select the link
+
+```jsx
+<p>
+  Learn more about<Link>Fraud Protect</Link>.
+</p>
+```
+
+#### Don’t
+
+- Use "click here" or "here" as link text
+- Link the entire sentence
+
+```jsx
+<Link>Learn more about Fraud Protect.</Link>
+```
+
+<!-- end -->
 
 ### Submitting data