[Link] underlined by default and add removeUnderline prop

[ashwinnarayanan2001]

WHY are these changes introduced?

These changes are introduced after discussions regarding if the link component should be underline by default (#3697), and if color alone is able to convey controls (https://github.com/Shopify/polaris-ux/issues/455). It was determined that making the link component underline by default makes the component more accessible when color is the only way to convey a link is interactive. It was also determined that it would be easier to add a 'removeUnderline' prop if the underline was not required, as opposed to adding an underline prop every time.

Fixes Shopify/polaris-ux#455

WHAT is this pull request doing?

This pull request makes the link component underline by default, and adds a 'removeUnderline' prop that removes the underline on the link.

This screenshot shows the Link component, which is underline by default.

This screenshot shows the Link component when the removeUnderline prop is added.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page, Link} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Link url="https://help.shopify.com/manual">Link default</Link>
    </Page>
  );
}

import React from 'react';

import {Page, Link} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Link url="https://help.shopify.com/manual" removeUnderline>
        No underline
      </Link>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟡 This pull request modifies 6 files and might impact 5 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:

All files potentially affected (total: 5)

• /src/components/Link/Link.tsx
• /src/components/TopBar/components/Menu/components/Message/Message.tsx
• /src/components/TopBar/components/Menu/Menu.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

📄 src/components/DataTable/README.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Link/Link.scss (total: 5)

Files potentially affected (total: 5)

• /src/components/Link/Link.tsx
• /src/components/TopBar/components/Menu/components/Message/Message.tsx
• /src/components/TopBar/components/Menu/Menu.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

🧩 src/components/Link/Link.tsx (total: 4)

Files potentially affected (total: 4)

• /src/components/TopBar/components/Menu/components/Message/Message.tsx
• /src/components/TopBar/components/Menu/Menu.tsx
• /src/components/TopBar/components/UserMenu/UserMenu.tsx
• /src/components/TopBar/TopBar.tsx

📄 src/components/Link/README.md (total: 0)

Files potentially affected (total: 0)

🧩 src/components/Link/tests/Link.test.tsx (total: 0)

Files potentially affected (total: 0)

[alex-page]

This is in a good starting place, happy to finesse the content in iterations.