[Link] underlined by default and add removeUnderline prop (#3705)

Co-authored-by: Alex Page <alex@alexpage.com.au>

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/DataTable/README.md

@@ -279,7 +279,11 @@ Use to help merchants find relevant, finer grained data sets.
 function DataTableLinkExample() {
   const rows = [
     [
-      <Link url="https://www.example.com" key="emerald-silk-gown">
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="emerald-silk-gown"
+      >
         Emerald Silk Gown
       </Link>,
       '$875.00',
@@ -288,7 +292,11 @@ function DataTableLinkExample() {
       '$122,500.00',
     ],
     [
-      <Link url="https://www.example.com" key="mauve-cashmere-scarf">
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="mauve-cashmere-scarf"
+      >
         Mauve Cashmere Scarf
       </Link>,
       '$230.00',
@@ -297,7 +305,11 @@ function DataTableLinkExample() {
       '$19,090.00',
     ],
     [
-      <Link url="https://www.example.com" key="navy-merino-wool">
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="navy-merino-wool"
+      >
         Navy Merino Wool Blazer with khaki chinos and yellow belt
       </Link>,
       '$445.00',
@@ -338,7 +350,11 @@ function FullDataTableExample() {
 
   const initiallySortedRows = [
     [
-      <Link url="https://www.example.com" key="emerald-silk-gown">
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="emerald-silk-gown"
+      >
         Emerald Silk Gown
       </Link>,
       '$875.00',
@@ -347,7 +363,11 @@ function FullDataTableExample() {
       '$121,500.00',
     ],
     [
-      <Link url="https://www.example.com" key="mauve-cashmere-scarf">
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="mauve-cashmere-scarf"
+      >
         Mauve Cashmere Scarf
       </Link>,
       '$230.00',
@@ -356,7 +376,11 @@ function FullDataTableExample() {
       '$19,090.00',
     ],
     [
-      <Link url="https://www.example.com" key="navy-merino-wool">
+      <Link
+        removeUnderline
+        url="https://www.example.com"
+        key="navy-merino-wool"
+      >
         Navy Merino Wool Blazer with khaki chinos and yellow belt
       </Link>,
       '$445.00',

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

@@ -110,6 +110,31 @@ Use for text links that should open in a new browser tab (or window, depending o
 
 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 to give interactive elements a shape. This allows links to not rely on color from being the only way users can tell if an element is interactive.
+
+<!-- usageblock -->
+
+#### Do
+
+- Remove the link underline when link is repeated in a list or navigation
+- Use underlines for links when used inline content
+
+```jsx
+<p>
+  Learn more about <Link>Fraud Protect</Link>.
+</p>
+```
+
+#### Don’t
+
+- Remove underlines when the user cannot determine it's interactivity
+
+```jsx
+<Link removeUnderline>Learn more about Fraud Protect.</Link>
+```
+
+<!-- end -->
+
 ### Submitting data
 
 Merchants generally expect links to navigate, and not to submit data or take action. If you need a component that doesn’t have a URL associated with it, then use the [button component](https://polaris.shopify.com/components/actions/button) instead.

src/components/Link/tests/Link.test.tsx

@@ -140,4 +140,12 @@ describe('<Link />', () => {
       });
     });
   });
+
+  describe('removesUnderline', () => {
+    it('adds removeUnderline class to the link', () => {
+      const link = mountWithAppProvider(<Link removeUnderline>Test</Link>);
+
+      expect(link.find('button').hasClass('removeUnderline')).toBe(true);
+    });
+  });
 });