diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss
index d4f24795599..43b7c7cf65a 100644
--- a/polaris-react/src/components/Banner/Banner.scss
+++ b/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 {
diff --git a/polaris-react/src/components/Link/Link.stories.tsx b/polaris-react/src/components/Link/Link.stories.tsx
index a35fb7ad4d8..8ef0af48cd4 100644
--- a/polaris-react/src/components/Link/Link.stories.tsx
+++ b/polaris-react/src/components/Link/Link.stories.tsx
@@ -18,18 +18,9 @@ export function Monochrome() {
);
}
-export function MonochromeInABanner() {
+export function RemoveUnderline() {
return (
-
- Learn more about{' '}
- fulfilling orders
-
- );
-}
-
-export function External() {
- return (
-
+
Shopify Help Center
);
diff --git a/polaris-react/src/components/Link/Link.tsx b/polaris-react/src/components/Link/Link.tsx
index 1535ff01456..03d60b78e2b 100644
--- a/polaris-react/src/components/Link/Link.tsx
+++ b/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,7 +31,6 @@ export function Link({
url,
children,
onClick,
- external,
target,
id,
monochrome,
@@ -42,43 +38,34 @@ export function Link({
accessibilityLabel,
dataPrimaryLink,
}: LinkProps) {
- return (
-
- {(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 ? (
-
- {children}
-
- ) : (
-
- );
- }}
-
+ return url ? (
+
+ {children}
+
+ ) : (
+
);
}
diff --git a/polaris-react/src/components/Link/tests/Link.test.tsx b/polaris-react/src/components/Link/tests/Link.test.tsx
index 4f67a6c7b17..871db86d55b 100644
--- a/polaris-react/src/components/Link/tests/Link.test.tsx
+++ b/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('', () => {
});
});
- describe('external link', () => {
- it('adds target blank and noopener noreferrer if external', () => {
- const link = mountWithApp(
-
- Shopify Help Center
- ,
- );
- 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('', () => {
expect(htmlLink?.props.target).toBe('_blank');
expect(htmlLink?.props.rel).toBe('noopener noreferrer');
});
-
- it('does not override external prop', () => {
- const link = mountWithApp(
-
- Shopify Help Center
- ,
- );
- 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(
-
- Some content
- ,
+
+ Some content
+ ,
);
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(
- Some content,
- );
-
- expect(link).not.toContainReactComponent(UnstyledLink, {
- className: expect.stringContaining('monochrome'),
- });
- });
-
- it('outputs a monochrome button if rendered within a banner', () => {
- const button = mountWithApp(
-
- Some content
- ,
- );
-
- 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(Some content);
-
- expect(button).not.toContainReactComponent('button', {
- className: expect.stringContaining('monochrome'),
- });
- });
});
describe('accessibilityLabel', () => {
diff --git a/polaris.shopify.com/pages/examples/link-external.tsx b/polaris.shopify.com/pages/examples/link-external.tsx
index 696ecab6939..3acf9dc2a5b 100644
--- a/polaris.shopify.com/pages/examples/link-external.tsx
+++ b/polaris.shopify.com/pages/examples/link-external.tsx
@@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
function LinkExample() {
return (
-
+
Shopify Help Center
);