[Link] iteration

polaris-react/src/components/Banner/Banner.scss

@@ -139,6 +139,20 @@
 .ContentWrapper {
   margin-top: calc(-1 * var(--p-space-05));
   flex: 1 1 auto;
+
+  // stylelint-disable selector-no-qualifying-type, selector-max-specificity -- Polaris temporary workaround until
+  // Banner visual styles are updated
+  a[class*='Link'],
+  button[class*='Link'] {
+    color: inherit;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: inherit;
+    }
+  }
+  // stylelint-enable selector-no-qualifying-type, selector-max-specificity
 }
 
 .withinContentContainer {

polaris-react/src/components/Link/Link.stories.tsx

@@ -18,18 +18,9 @@ export function Monochrome() {
   );
 }
 
-export function MonochromeInABanner() {
+export function RemoveUnderline() {
   return (
-    <Banner>
-      Learn more about{' '}
-      <Link url="https://help.shopify.com/manual">fulfilling orders</Link>
-    </Banner>
-  );
-}
-
-export function External() {
-  return (
-    <Link url="https://help.shopify.com/manual" external>
+    <Link url="https://help.shopify.com/manual" removeUnderline>
       Shopify Help Center
     </Link>
   );

polaris-react/src/components/Link/Link.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import {BannerContext} from '../../utilities/banner-context';
 import {classNames} from '../../utilities/css';
 import {UnstyledLink} from '../UnstyledLink';
 import type {Target} from '../../types';
@@ -14,8 +13,6 @@ export interface LinkProps {
   url?: string;
   /** The content to display inside the link */
   children?: React.ReactNode;
-  /** Makes the link open in a new tab */
-  external?: boolean;
   /** Where to display the url */
   target?: Target;
   /** Makes the link color the same as the current text color and adds an underline */
@@ -34,51 +31,41 @@ export function Link({
   url,
   children,
   onClick,
-  external,
   target,
   id,
   monochrome,
   removeUnderline,
   accessibilityLabel,
   dataPrimaryLink,
 }: LinkProps) {
-  return (
-    <BannerContext.Consumer>
-      {(BannerContext) => {
-        const shouldBeMonochrome = monochrome || BannerContext;
-
-        const className = classNames(
-          styles.Link,
-          shouldBeMonochrome && styles.monochrome,
-          removeUnderline && styles.removeUnderline,
-        );
+  const className = classNames(
+    styles.Link,
+    monochrome && styles.monochrome,
+    removeUnderline && styles.removeUnderline,
+  );
 
-        return url ? (
-          <UnstyledLink
-            onClick={onClick}
-            className={className}
-            url={url}
-            external={external}
-            target={target}
-            id={id}
-            aria-label={accessibilityLabel}
-            data-primary-link={dataPrimaryLink}
-          >
-            {children}
-          </UnstyledLink>
-        ) : (
-          <button
-            type="button"
-            onClick={onClick}
-            className={className}
-            id={id}
-            aria-label={accessibilityLabel}
-            data-primary-link={dataPrimaryLink}
-          >
-            {children}
-          </button>
-        );
-      }}
-    </BannerContext.Consumer>
+  return url ? (
+    <UnstyledLink
+      onClick={onClick}
+      className={className}
+      url={url}
+      target={target}
+      id={id}
+      aria-label={accessibilityLabel}
+      data-primary-link={dataPrimaryLink}
+    >
+      {children}
+    </UnstyledLink>
+  ) : (
+    <button
+      type="button"
+      onClick={onClick}
+      className={className}
+      id={id}
+      aria-label={accessibilityLabel}
+      data-primary-link={dataPrimaryLink}
+    >
+      {children}
+    </button>
   );
 }

polaris-react/src/components/Link/tests/Link.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
-import {Banner} from '../../Banner';
 import {UnstyledLink} from '../../UnstyledLink';
 import {Link} from '../Link';
 
@@ -37,20 +36,6 @@ describe('<Link />', () => {
     });
   });
 
-  describe('external link', () => {
-    it('adds target blank and noopener noreferrer if external', () => {
-      const link = mountWithApp(
-        <Link url="https://help.shopify.com/" external>
-          Shopify Help Center
-        </Link>,
-      );
-      const htmlLink = link.find('a');
-
-      expect(htmlLink?.props.target).toBe('_blank');
-      expect(htmlLink?.props.rel).toBe('noopener noreferrer');
-    });
-  });
-
   describe('target', () => {
     it('adds target blank and noopener noreferrer', () => {
       const link = mountWithApp(
@@ -63,62 +48,20 @@ describe('<Link />', () => {
       expect(htmlLink?.props.target).toBe('_blank');
       expect(htmlLink?.props.rel).toBe('noopener noreferrer');
     });
-
-    it('does not override external prop', () => {
-      const link = mountWithApp(
-        <Link url="https://help.shopify.com/" external target="_top">
-          Shopify Help Center
-        </Link>,
-      );
-      const htmlLink = link.find('a');
-
-      expect(htmlLink?.props.target).toBe('_blank');
-      expect(htmlLink?.props.rel).toBe('noopener noreferrer');
-    });
   });
 
   describe('monochrome link', () => {
-    it('outputs a monochrome unstyled link if rendered within a banner', () => {
+    it('outputs a monochrome link', () => {
       const link = mountWithApp(
-        <Banner>
-          <Link url="https://examp.le">Some content</Link>
-        </Banner>,
+        <Link url="https://examp.le" monochrome>
+          Some content
+        </Link>,
       );
 
       expect(link).toContainReactComponent(UnstyledLink, {
         className: expect.stringContaining('monochrome'),
       });
     });
-
-    it('does not output a monochrome unstyled link if it is not rendered within a banner', () => {
-      const link = mountWithApp(
-        <Link url="https://examp.le">Some content</Link>,
-      );
-
-      expect(link).not.toContainReactComponent(UnstyledLink, {
-        className: expect.stringContaining('monochrome'),
-      });
-    });
-
-    it('outputs a monochrome button if rendered within a banner', () => {
-      const button = mountWithApp(
-        <Banner>
-          <Link>Some content</Link>
-        </Banner>,
-      );
-
-      expect(button).toContainReactComponent('button', {
-        className: expect.stringContaining('monochrome'),
-      });
-    });
-
-    it('does not output a monochrome button if it is not rendered within a banner', () => {
-      const button = mountWithApp(<Link>Some content</Link>);
-
-      expect(button).not.toContainReactComponent('button', {
-        className: expect.stringContaining('monochrome'),
-      });
-    });
   });
 
   describe('accessibilityLabel', () => {

polaris.shopify.com/pages/examples/link-external.tsx

@@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function LinkExample() {
   return (
-    <Link url="https://help.shopify.com/manual" external>
+    <Link url="https://help.shopify.com/manual" target="_blank">
       Shopify Help Center
     </Link>
   );