From 262f50c3f2448801ec6420acd74850115e7611d9 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 10 May 2023 09:55:34 -0700 Subject: [PATCH 1/6] Update Link.tsx --- polaris-react/src/components/Link/Link.tsx | 68 +++++++++------------- 1 file changed, 28 insertions(+), 40 deletions(-) diff --git a/polaris-react/src/components/Link/Link.tsx b/polaris-react/src/components/Link/Link.tsx index 1535ff01456..927a3ed48fd 100644 --- a/polaris-react/src/components/Link/Link.tsx +++ b/polaris-react/src/components/Link/Link.tsx @@ -14,8 +14,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 +32,6 @@ export function Link({ url, children, onClick, - external, target, id, monochrome, @@ -42,43 +39,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} + + ) : ( + ); } From 2a18d874a95df3ac5034de4f2d9338ef805b9202 Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 10 May 2023 10:19:44 -0700 Subject: [PATCH 2/6] Update `Link` stories and tests --- .../src/components/Link/Link.stories.tsx | 13 +--- polaris-react/src/components/Link/Link.tsx | 1 - .../src/components/Link/tests/Link.test.tsx | 65 ++----------------- 3 files changed, 6 insertions(+), 73 deletions(-) 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 927a3ed48fd..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'; 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', () => { From aa02afa6651e2c5aecc89b3990bba9e4ec12af1b Mon Sep 17 00:00:00 2001 From: aveline Date: Wed, 10 May 2023 10:28:18 -0700 Subject: [PATCH 3/6] Links in Banners should be monochrome --- polaris-react/src/components/Banner/Banner.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss index d4f24795599..85fc2c29a79 100644 --- a/polaris-react/src/components/Banner/Banner.scss +++ b/polaris-react/src/components/Banner/Banner.scss @@ -139,6 +139,17 @@ .ContentWrapper { margin-top: calc(-1 * var(--p-space-05)); flex: 1 1 auto; + + a[class^='Link'], + button[class^='Link'] { + color: inherit; + + &:hover, + &:focus, + &:active { + color: inherit; + } + } } .withinContentContainer { From 446ed5257814ffd243d5007fb03d378932120478 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 11 May 2023 10:38:02 -0700 Subject: [PATCH 4/6] Update link-external.tsx --- polaris.shopify.com/pages/examples/link-external.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ); From e6e48d946ad7569425922bc5c5d469cb4141d421 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 11 May 2023 11:41:55 -0700 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=91=95=20address=20linter=20errors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- polaris-react/src/components/Banner/Banner.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss index 85fc2c29a79..1fa52972364 100644 --- a/polaris-react/src/components/Banner/Banner.scss +++ b/polaris-react/src/components/Banner/Banner.scss @@ -140,6 +140,8 @@ 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; @@ -150,6 +152,7 @@ color: inherit; } } + // stylelint-enable selector-no-qualifying-type, selector-max-specificity } .withinContentContainer { From 0a4317c82b99b8d6f4996faec0cdac108641d735 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 15 May 2023 08:19:02 -0700 Subject: [PATCH 6/6] Adjust selector --- polaris-react/src/components/Banner/Banner.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Banner/Banner.scss b/polaris-react/src/components/Banner/Banner.scss index 1fa52972364..43b7c7cf65a 100644 --- a/polaris-react/src/components/Banner/Banner.scss +++ b/polaris-react/src/components/Banner/Banner.scss @@ -142,8 +142,8 @@ // stylelint-disable selector-no-qualifying-type, selector-max-specificity -- Polaris temporary workaround until // Banner visual styles are updated - a[class^='Link'], - button[class^='Link'] { + a[class*='Link'], + button[class*='Link'] { color: inherit; &:hover,