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 );