Remove external link icon and update docs #6518

sarahill · 2022-07-05T23:01:43Z

WHY are these changes introduced?

Fixes #6413

Updates the documentation for Links on polaris.shopify.com
Removes the external link icon from the Link's external property

External link example

New guidance in best practices

WHAT is this pull request doing?

Removed external link icon and logic
Updated examples and descriptions for default and external links on polaris.shoify.com
Added best practices guidance for external links

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page, FooterHelp, Link} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
        <FooterHelp>
            Learn more about <Link url="https://help.shopify.com/manual" external>orders</Link>
        </FooterHelp>
    </Page>
  );
}

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

github-actions · 2022-07-05T23:05:31Z

size-limit report 📦

Path	Size
polaris-react-cjs	199.16 KB (-0.08% 🔽)
polaris-react-esm	132.96 KB (-0.31% 🔽)
polaris-react-esnext	188.15 KB (-0.25% 🔽)
polaris-react-css	41.77 KB (-0.1% 🔽)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

chloerice

Thanks for tackling this @sarahill!! The guidance you added for this is excellent 🙌🏽 🚀 Just made a few non-blocking copy suggestions.

polaris.shopify.com/content/components/link/index.md

Co-authored-by: Chloe Rice <[email protected]>

…laris into external-link-updates

jjgali

Left one tiny comment—looks fantastic!

jjgali · 2022-08-11T16:21:51Z

polaris.shopify.com/content/components/link/index.md

+
+Avoid using the [external link icon](/icons?icon=ExternalMinor&q=exter), as it can add unnecessary visual load inside a sentence or when accompanied by other content. Instead, add clarity to external links through clear link text and predictable placement of the link in a merchant’s workflow.
+
+Edge case: External icons should not be used as an indicator that a new tab or window will be opened. However, they may be used sparingly in features where symbols help merchants scan and pick from a list of several kinds of navigation options, like the admin's global search results.


Should this be “External link icons”?

Good question. The icon name is "external" so that's why we'd went with that but they are just used for external links right now. The thing that is a little confusing is that the "Promote" icon looks an awful like the external icon 🤔
http://localhost:3000/icons?icon=ExternalSmallMinor&q=external

A gotcha—if that's the icon name, then that makes sense! I thought it was “external link icon” based on line 63. Also, I think the link may be broken on that same line. Looks like the end of the URL got cut off.

polaris.shopify.com/content/components/link/index.md

emily-broughton · 2022-08-11T19:21:07Z

A few small comments:

"Links should be indicated as external..." wondering if "indicated" makes you think of indicating with the icon. What would "External links should be used when merchants are:"
Change "Edge cases: External icons should not be used as an indicator..." to "Edge cases: External icon should not be used to indicate a new tab or window is being opened."

polaris.shopify.com/content/components/link/index.md

sarahill · 2022-08-11T20:10:52Z

@emily-broughton I made the changes you suggested! Thank you 👏

emily-broughton

Looks good to me!

sarahill added 2 commits July 5, 2022 15:59

Remove external link icon and update docs

cc88db3

Update external link example

f87f0e0

sarahill added 2 commits July 5, 2022 21:09

Merge branch 'main' into external-link-updates

b12fff3

Merge branch 'main' into external-link-updates

881aa50

sarahill added 🤖Skip Changelog Causes CI to ignore changelog update check. Feature request Documentation labels Jul 8, 2022

alex-page force-pushed the main branch 7 times, most recently from a3a40bb to 0281d22 Compare July 14, 2022 05:31

sarahill and others added 15 commits July 14, 2022 17:37

Merge branch 'main' into external-link-updates

84eb318

update link guidance

725e636

update external link

2f0e342

Merge branch 'main' into external-link-updates

e4307d3

Merge branch 'main' into external-link-updates

ea62544

Version Packages (#6694)

07eb9b9

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Merge branch 'main' into external-link-updates

1b35759

Merge branch 'main' into external-link-updates

d1374a9

remove external link icon logic and tests

9162cbd

updating docs and removing external link icon references

e095872

Merge branch 'main' into external-link-updates

41e9bbe

remove external icon reference

f46765d

fix typo

751895a

Merge branch 'main' into external-link-updates

72cd19f

Merge branch 'main' into external-link-updates

10c6b25

sarahill requested a review from chloerice August 8, 2022 16:12

Merge branch 'main' into external-link-updates

9622954

chloerice approved these changes Aug 10, 2022

View reviewed changes

sarahill changed the title ~~[WIP] Remove external link icon and update docs~~ Remove external link icon and update docs Aug 11, 2022

sarahill and others added 8 commits August 10, 2022 19:51

Update polaris.shopify.com/content/components/link/index.md

b5a83bf

Co-authored-by: Chloe Rice <[email protected]>

Update polaris.shopify.com/content/components/link/index.md

6e8d50b

Co-authored-by: Chloe Rice <[email protected]>

Update polaris.shopify.com/content/components/link/index.md

c60046f

Co-authored-by: Chloe Rice <[email protected]>

Update polaris.shopify.com/content/components/link/index.md

a6a844f

Co-authored-by: Chloe Rice <[email protected]>

Merge branch 'main' into external-link-updates

d1b4f86

Merge branch 'external-link-updates' of https://github.com/Shopify/po…

63d7fb9

…laris into external-link-updates

update dont example image

36081eb

Merge branch 'main' into external-link-updates

96de7d8

jjgali approved these changes Aug 11, 2022

View reviewed changes

Merge branch 'main' into external-link-updates

85775f0

sarahill commented Aug 11, 2022

View reviewed changes

polaris.shopify.com/content/components/link/index.md Outdated Show resolved Hide resolved

Update polaris.shopify.com/content/components/link/index.md

3b56dd4

sarahill commented Aug 11, 2022

View reviewed changes

polaris.shopify.com/content/components/link/index.md Outdated Show resolved Hide resolved

sarahill commented Aug 11, 2022

View reviewed changes

polaris.shopify.com/content/components/link/index.md Outdated Show resolved Hide resolved

sarahill added 2 commits August 11, 2022 13:10

Update polaris.shopify.com/content/components/link/index.md

b4b40de

Update polaris.shopify.com/content/components/link/index.md

05d5608

Merge branch 'main' into external-link-updates

402b769

selenehinkley added the Contribution label Aug 11, 2022

emily-broughton approved these changes Aug 11, 2022

View reviewed changes

sarahill merged commit 8f51592 into main Aug 11, 2022

sarahill deleted the external-link-updates branch August 11, 2022 20:32

github-actions bot mentioned this pull request Aug 11, 2022

Version Packages #6888

Merged

henryyi mentioned this pull request Dec 7, 2022

[Navigation] support multiple secondary actions for Navigation Item #7817

Merged

5 tasks

chloerice removed the Contribution label Mar 28, 2023


		Avoid using the [external link icon](/icons?icon=ExternalMinor&q=exter), as it can add unnecessary visual load inside a sentence or when accompanied by other content. Instead, add clarity to external links through clear link text and predictable placement of the link in a merchant’s workflow.

		Edge case: External icons should not be used as an indicator that a new tab or window will be opened. However, they may be used sparingly in features where symbols help merchants scan and pick from a list of several kinds of navigation options, like the admin's global search results.

Remove external link icon and update docs #6518

Remove external link icon and update docs #6518

Uh oh!

Conversation

sarahill commented Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

github-actions bot commented Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

chloerice left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jjgali left a comment

Choose a reason for hiding this comment

Uh oh!

jjgali Aug 11, 2022

Choose a reason for hiding this comment

Uh oh!

sarahill Aug 11, 2022

Choose a reason for hiding this comment

Uh oh!

jjgali Aug 11, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

emily-broughton commented Aug 11, 2022

Uh oh!

Uh oh!

Uh oh!

sarahill commented Aug 11, 2022

Uh oh!

emily-broughton left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sarahill commented Jul 5, 2022 •

edited

Loading

github-actions bot commented Jul 5, 2022 •

edited

Loading