From 95a1248f93cf3cd654023f84d1eb4f93d5decd98 Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Tue, 17 Sep 2019 11:28:44 -0700 Subject: [PATCH 1/2] Improve docblocks for links Make it clear external is to be used for an page that opens in a new tab Make wording and ordering consistent between Link and UnstyledLink --- src/components/Link/Link.tsx | 4 ++-- src/utilities/link/types.ts | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index e49e6f98791..534b84664e5 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -14,9 +14,9 @@ export interface LinkProps { id?: string; /** The url to link to */ url?: string; - /** The content to display inside link */ + /** The content to display inside the link */ children?: React.ReactNode; - /** Use for a links that open a different site */ + /** Makes the link open in a new tab */ external?: boolean; /** Makes the link color the same as the current text color and adds an underline */ monochrome?: boolean; diff --git a/src/utilities/link/types.ts b/src/utilities/link/types.ts index b3ed92ef4d1..5ed8d824719 100644 --- a/src/utilities/link/types.ts +++ b/src/utilities/link/types.ts @@ -1,13 +1,13 @@ export interface LinkLikeComponentProps extends React.HTMLProps { - /** A destination to link to */ + /** The url to link to */ url: string; - /** Forces url to open in a new tab */ + /** The content to display inside the link */ + children?: React.ReactNode; + /** Makes the link open in a new tab */ external?: boolean; - /** Tells the browser to download the url instead of opening it. Provides a hint for the downloaded filename if it is a string value. */ + /** Makes the browser to download the url instead of opening it. Provides a hint for the downloaded filename if it is a string value. */ download?: string | boolean; - /** Content to display inside the link */ - children?: React.ReactNode; [key: string]: any; } From ed5b57fcc21c5c8e8a0dc86c87a51f1ab1a47659 Mon Sep 17 00:00:00 2001 From: Ben Scott Date: Tue, 17 Sep 2019 11:36:05 -0700 Subject: [PATCH 2/2] Link README changes --- UNRELEASED.md | 1 + src/components/Link/README.md | 4 ++-- src/utilities/link/types.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index b236ac01deb..a1eef365dcf 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -35,6 +35,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Converted `ResourceList`, `ResourcePicker`, and `Select` examples to functional components ([#2133](https://github.com/Shopify/polaris-react/pull/2133)) - Converted `TextField`, `Toast`, and `TopBar` examples to functional components ([#2135](https://github.com/Shopify/polaris-react/pull/2135)) - Updated the `withContext` section in the [v3 to v4 migration guide](https://github.com/Shopify/polaris-react/blob/master/documentation/guides/migrating-from-v3-to-v4.md) ([#2124](https://github.com/Shopify/polaris-react/pull/2124)) +- Clarify when to use the `external` prop on the `Link` component ([#2153](https://github.com/Shopify/polaris-react/pull/2153)) ### Development workflow diff --git a/src/components/Link/README.md b/src/components/Link/README.md index 878a40b8bc3..761b2f78e80 100644 --- a/src/components/Link/README.md +++ b/src/components/Link/README.md @@ -107,7 +107,7 @@ Monochrome styles will be applied to links rendered within a `Banner`. ### External link -Use for text links that point to a different website. They will open in a new browser tab or window. +Use for text links that should open in a new browser tab (or window, depending on the merchant’s browser settings). Use this only when opening a page in the same tab might disrupt the merchant’s workflow. ```jsx @@ -184,7 +184,7 @@ To provide consistency and clarity: #### External links -The `external` prop adds an icon and a notification that the link opens a new window. Use the `external` prop to make the link open in a new window (or tab, depending on the merchant’s browser settings). Open a page in a new window or tab only when opening a page in the same tab might disrupt the merchant’s workflow. +The `external` prop adds an icon and a notification that the link opens a new tab. Use the `external` prop to make the link open in a new tab (or window, depending on the merchant’s browser settings). Open a page in a new tab only when opening a page in the same tab might disrupt the merchant’s workflow. ### Keyboard support diff --git a/src/utilities/link/types.ts b/src/utilities/link/types.ts index 5ed8d824719..a397fb4c122 100644 --- a/src/utilities/link/types.ts +++ b/src/utilities/link/types.ts @@ -6,7 +6,7 @@ export interface LinkLikeComponentProps children?: React.ReactNode; /** Makes the link open in a new tab */ external?: boolean; - /** Makes the browser to download the url instead of opening it. Provides a hint for the downloaded filename if it is a string value. */ + /** Makes the browser download the url instead of opening it. Provides a hint for the downloaded filename if it is a string value. */ download?: string | boolean; [key: string]: any; }