diff --git a/UNRELEASED.md b/UNRELEASED.md index a24f0942629..5fba9efeaf7 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -4,6 +4,8 @@ ### Enhancements +- Add `external` prop to `ResourceList` [#2408](https://github.com/Shopify/polaris-react/pull/2408) + ### Bug fixes - Fixed an issue which caused HSL colors to not display in Edge ((#2418)[https://github.com/Shopify/polaris-react/pull/2418]) diff --git a/src/components/ResourceItem/ResourceItem.tsx b/src/components/ResourceItem/ResourceItem.tsx index c3260c22327..ddb11a3daf2 100644 --- a/src/components/ResourceItem/ResourceItem.tsx +++ b/src/components/ResourceItem/ResourceItem.tsx @@ -48,6 +48,8 @@ export interface BaseProps { sortOrder?: number; /** URL for the resource’s details page (required unless onClick is provided) */ url?: string; + /** Allows url to open in a new tab */ + external?: boolean; /** Callback when clicked (required if url is omitted) */ onClick?(id?: string): void; /** Content for the details area */ @@ -130,6 +132,7 @@ class BaseResourceItem extends React.Component { const { children, url, + external, media, shortcutActions, ariaControls, @@ -280,6 +283,7 @@ class BaseResourceItem extends React.Component { aria-label={ariaLabel} className={styles.Link} url={url} + external={external} tabIndex={tabIndex} id={this.overlayId} /> diff --git a/src/components/ResourceItem/tests/ResourceItem.test.tsx b/src/components/ResourceItem/tests/ResourceItem.test.tsx index afaf55ed81e..fbdda144802 100644 --- a/src/components/ResourceItem/tests/ResourceItem.test.tsx +++ b/src/components/ResourceItem/tests/ResourceItem.test.tsx @@ -69,6 +69,7 @@ describe('', () => { }; const url = 'http://test-link.com'; + const external = false; const ariaLabel = 'View Item'; describe('accessibilityLabel', () => { @@ -215,6 +216,48 @@ describe('', () => { }); }); + describe('external', () => { + it('renders an with undefined external prop', () => { + const element = mountWithAppProvider( + + + , + ); + + expect(element.find(UnstyledLink).prop('external')).toBeUndefined(); + }); + + it('renders an with external set to true', () => { + const element = mountWithAppProvider( + + + , + ); + + expect(element.find(UnstyledLink).prop('external')).toBe(true); + }); + + it('renders an with external set to false', () => { + const element = mountWithAppProvider( + + + , + ); + + expect(element.find(UnstyledLink).prop('external')).toBe(false); + }); + }); + describe('id', () => { it('is used on the content node and for the description of a link', () => { const item = mountWithAppProvider(