From 693c1a4ad8398abf2f878d58b258674feb4f7ca2 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 24 Apr 2023 14:29:15 -0700 Subject: [PATCH 01/13] Update `Link` component --- polaris-react/src/components/Link/Link.scss | 14 ++- polaris-react/src/components/Link/Link.tsx | 88 ++++++++----------- .../src/components/Link/tests/Link.test.tsx | 82 ++++------------- 3 files changed, 62 insertions(+), 122 deletions(-) diff --git a/polaris-react/src/components/Link/Link.scss b/polaris-react/src/components/Link/Link.scss index f32ea18b66c..bf0aab83b6a 100644 --- a/polaris-react/src/components/Link/Link.scss +++ b/polaris-react/src/components/Link/Link.scss @@ -10,12 +10,12 @@ font-size: inherit; font-weight: inherit; color: var(--p-color-text-interactive); - text-decoration: underline; + text-decoration: none; cursor: pointer; &:hover { color: var(--p-color-text-interactive-hover); - text-decoration: none; + text-decoration: underline; } &:focus:not(:active) { @@ -47,7 +47,7 @@ } } -.monochrome { +.currentColor { color: inherit; &:hover, @@ -57,10 +57,6 @@ } } -.removeUnderline { - text-decoration: none; - - &:hover { - text-decoration: underline; - } +.underline { + text-decoration: underline; } diff --git a/polaris-react/src/components/Link/Link.tsx b/polaris-react/src/components/Link/Link.tsx index 1535ff01456..915e4cfa02e 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'; @@ -11,17 +10,17 @@ export interface LinkProps { /** ID for the link */ id?: string; /** The url to link to */ - url?: string; + href?: 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 */ - monochrome?: boolean; - /** Removes text decoration underline to the link*/ - removeUnderline?: boolean; + /** Sets the link color the same as the current text color */ + tone?: 'current-color' | 'critical'; + /** Sets text decoration underline on the link + * @default 'hover' + */ + underline?: 'always' | 'hover' | 'none'; /** Callback when a link is clicked */ onClick?(): void; /** Descriptive text to be read to screenreaders */ @@ -31,54 +30,45 @@ export interface LinkProps { } export function Link({ - url, + href, children, onClick, - external, target, id, - monochrome, - removeUnderline, accessibilityLabel, dataPrimaryLink, + tone, + underline, }: LinkProps) { - return ( - - {(BannerContext) => { - const shouldBeMonochrome = monochrome || BannerContext; - - const className = classNames( - styles.Link, - shouldBeMonochrome && styles.monochrome, - removeUnderline && styles.removeUnderline, - ); + const className = classNames( + styles.Link, + tone === 'current-color' && styles.currentColor, + tone === 'critical' && styles.critical, + underline === 'always' && styles.underline, + ); - return url ? ( - - {children} - - ) : ( - - ); - }} - + return href ? ( + + {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..6497137be30 100644 --- a/polaris-react/src/components/Link/tests/Link.test.tsx +++ b/polaris-react/src/components/Link/tests/Link.test.tsx @@ -8,7 +8,7 @@ import {Link} from '../Link'; describe('', () => { it('calls onClick when clicking', () => { const spy = jest.fn(); - const link = mountWithApp(); + const link = mountWithApp(); link.find('a')!.trigger('onClick'); expect(spy).toHaveBeenCalled(); }); @@ -19,7 +19,7 @@ describe('', () => { }); it('renders an anchor if a url is provided', () => { - const link = mountWithApp(); + const link = mountWithApp(); expect(link).toContainReactComponentTimes('a', 1); }); @@ -32,41 +32,15 @@ describe('', () => { it('is passed down to an underlying UnstyledLink', () => { const id = 'MyID'; - const link = mountWithApp(); + const link = mountWithApp(); expect(link).toContainReactComponent(UnstyledLink, {id}); }); }); - 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( - - Shopify Help Center - , - ); - const htmlLink = link.find('a'); - - 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 , ); @@ -78,45 +52,25 @@ describe('', () => { }); 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'), + className: expect.stringContaining('currentColor'), }); }); - it('outputs a monochrome button if rendered within a banner', () => { + it('outputs a monochrome button', () => { const button = mountWithApp( - - Some content - , + 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'), + className: expect.stringContaining('currentColor'), }); }); }); @@ -138,7 +92,7 @@ describe('', () => { const link = mountWithApp( , ); @@ -149,12 +103,12 @@ describe('', () => { }); }); - describe('removesUnderline', () => { - it('adds removeUnderline class to the link', () => { - const link = mountWithApp(Test); + describe('underline always', () => { + it('adds underline class to the link', () => { + const link = mountWithApp(Test); expect(link).toContainReactComponent('button', { - className: expect.stringContaining('removeUnderline'), + className: expect.stringContaining('underline'), }); }); }); @@ -162,7 +116,7 @@ describe('', () => { describe('dataPrimaryLink', () => { it('adds data-primary-link attribute to the link', () => { const link = mountWithApp( - + Test , ); From c41348ebd648ad971fa62a63b551c651f53ab175 Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 25 Apr 2023 09:14:15 -0700 Subject: [PATCH 02/13] Add `language` prop to `Link` --- polaris-react/src/components/Link/Link.tsx | 8 ++++++++ .../src/components/Link/tests/Link.test.tsx | 13 +++++++++++++ 2 files changed, 21 insertions(+) diff --git a/polaris-react/src/components/Link/Link.tsx b/polaris-react/src/components/Link/Link.tsx index 915e4cfa02e..deb4e569ad1 100644 --- a/polaris-react/src/components/Link/Link.tsx +++ b/polaris-react/src/components/Link/Link.tsx @@ -27,6 +27,11 @@ export interface LinkProps { accessibilityLabel?: string; /** Indicates whether or not the link is the primary navigation link when rendered inside of an `IndexTable.Row` */ dataPrimaryLink?: boolean; + /** + * Indicate the text language. Useful when the text is in a different language than the rest of the page. + * It will allow assistive technologies such as screen readers to invoke the correct pronunciation. + * [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label) */ + language?: string; } export function Link({ @@ -39,6 +44,7 @@ export function Link({ dataPrimaryLink, tone, underline, + language, }: LinkProps) { const className = classNames( styles.Link, @@ -56,6 +62,7 @@ export function Link({ id={id} aria-label={accessibilityLabel} data-primary-link={dataPrimaryLink} + lang={language} > {children} @@ -67,6 +74,7 @@ export function Link({ id={id} aria-label={accessibilityLabel} data-primary-link={dataPrimaryLink} + lang={language} > {children} diff --git a/polaris-react/src/components/Link/tests/Link.test.tsx b/polaris-react/src/components/Link/tests/Link.test.tsx index 6497137be30..99e29d8476e 100644 --- a/polaris-react/src/components/Link/tests/Link.test.tsx +++ b/polaris-react/src/components/Link/tests/Link.test.tsx @@ -136,4 +136,17 @@ describe('', () => { expect(link).toContainReactComponent('button', selector); }); }); + + describe('language', () => { + it('language is passed down', () => { + const link = mountWithApp( + + Centre d'aide Shopify + , + ); + const htmlLink = link.find('a'); + + expect(htmlLink?.props.lang).toBe('fr'); + }); + }); }); From b7a544c6f6782da2ac7e3e4838b643c98e51f3fd Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 25 Apr 2023 09:24:57 -0700 Subject: [PATCH 03/13] Update `Link` prop --- .../TopBar/components/Menu/components/Message/Message.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx index df8a4a7e6da..6c2dc21aebf 100644 --- a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx @@ -46,7 +46,7 @@ export function Message({

{description}

- {linkContent} + {linkContent}