Remove external link icon and update docs

.changeset/giant-llamas-type.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Removed external link icon from the Link components external prop and updated Link documentation

polaris-react/locales/cs.json

@@ -32,7 +32,6 @@
       "checkbox": "zaškrtávací pole",
       "undo": "Vrátit zpět",
       "cancel": "Zrušit",
-      "newWindowAccessibilityHint": "(otevře nové okno)",
       "clear": "Vymazat",
       "close": "Zavřít",
       "submit": "Odeslat",

polaris-react/locales/da.json

@@ -32,7 +32,6 @@
       "checkbox": "afkrydsningsfelt",
       "undo": "Fortryd",
       "cancel": "Annuller",
-      "newWindowAccessibilityHint": "(åbner et nyt vindue)",
       "clear": "Ryd",
       "close": "Luk",
       "submit": "Send",

polaris-react/locales/de.json

@@ -32,7 +32,6 @@
       "checkbox": "Kontrollkästchen",
       "undo": "Rückgängig machen",
       "cancel": "Abbrechen",
-      "newWindowAccessibilityHint": "(öffnet ein neues Fenster)",
       "clear": "Löschen",
       "close": "Schließen",
       "submit": "Senden",

polaris-react/locales/en.json

@@ -40,7 +40,6 @@
       "checkbox": "checkbox",
       "undo": "Undo",
       "cancel": "Cancel",
-      "newWindowAccessibilityHint": "(opens a new window)",
       "clear": "Clear",
       "close": "Close",
       "submit": "Submit",

polaris-react/locales/es.json

@@ -32,7 +32,6 @@
       "checkbox": "casilla de verificación",
       "undo": "Deshacer",
       "cancel": "Cancelar",
-      "newWindowAccessibilityHint": "(abre una nueva ventana)",
       "clear": "Borrar",
       "close": "Cerrar",
       "submit": "Enviar",

polaris-react/locales/fi.json

@@ -32,7 +32,6 @@
       "checkbox": "valintaruutu",
       "undo": "Peru",
       "cancel": "Peruuta",
-      "newWindowAccessibilityHint": "(avaa uuden ikkunan)",
       "clear": "Tyhjennä",
       "close": "Sulje",
       "submit": "Lähetä",

polaris-react/locales/fr.json

@@ -32,7 +32,6 @@
       "checkbox": "case à cocher",
       "undo": "Annuler",
       "cancel": "Annuler",
-      "newWindowAccessibilityHint": "(ouvre une nouvelle fenêtre)",
       "clear": "Effacer",
       "close": "Fermer",
       "submit": "Soumettre",

polaris-react/locales/it.json

@@ -32,7 +32,6 @@
       "checkbox": "casella di spunta",
       "undo": "Annulla",
       "cancel": "Annulla",
-      "newWindowAccessibilityHint": "(apre una nuova finestra)",
       "clear": "Rimuovi",
       "close": "Chiudi",
       "submit": "Invia",

polaris-react/locales/ja.json

@@ -32,7 +32,6 @@
       "checkbox": "チェックボックス",
       "undo": "元に戻す",
       "cancel": "キャンセル",
-      "newWindowAccessibilityHint": "(新しいウィンドウを開く)",
       "clear": "クリア",
       "close": "閉じる",
       "submit": "送信",

polaris-react/locales/ko.json

@@ -32,7 +32,6 @@
       "checkbox": "확인란",
       "undo": "실행 취소",
       "cancel": "취소",
-      "newWindowAccessibilityHint": "(새 창에서 열림)",
       "clear": "지우기",
       "close": "닫기",
       "submit": "제출",

polaris-react/locales/nb.json

@@ -32,7 +32,6 @@
       "checkbox": "avmerkingsboks",
       "undo": "Angre",
       "cancel": "Avbryt",
-      "newWindowAccessibilityHint": "(åpner et nytt vindu)",
       "clear": "Fjern",
       "close": "Lukk",
       "submit": "Send inn",

polaris-react/locales/nl.json

@@ -32,7 +32,6 @@
       "checkbox": "selectievakje",
       "undo": "Ongedaan maken",
       "cancel": "Annuleren",
-      "newWindowAccessibilityHint": "(opent een nieuw venster)",
       "clear": "Wissen",
       "close": "Sluiten",
       "submit": "Indienen",

polaris-react/locales/pl.json

@@ -32,7 +32,6 @@
       "checkbox": "pole wyboru",
       "undo": "Cofnij",
       "cancel": "Anuluj",
-      "newWindowAccessibilityHint": "(otwiera nowe okno)",
       "clear": "Wyczyść",
       "close": "Zamknij",
       "submit": "Prześlij",

polaris-react/locales/pt-BR.json

@@ -32,7 +32,6 @@
       "checkbox": "caixa de seleção",
       "undo": "Desfazer",
       "cancel": "Cancelar",
-      "newWindowAccessibilityHint": "(abre uma nova janela)",
       "clear": "Limpar",
       "close": "Fechar",
       "submit": "Enviar",

polaris-react/locales/pt-PT.json

@@ -32,7 +32,6 @@
       "checkbox": "caixa de verificação",
       "undo": "Anular",
       "cancel": "Cancelar",
-      "newWindowAccessibilityHint": "(abre uma nova janela)",
       "clear": "Limpar",
       "close": "Fechar",
       "submit": "Submeter",

polaris-react/locales/sv.json

@@ -32,7 +32,6 @@
       "checkbox": "kryssruta",
       "undo": "Ångra",
       "cancel": "Avbryt",
-      "newWindowAccessibilityHint": "(öppnar ett nytt fönster)",
       "clear": "Rensa",
       "close": "Stäng",
       "submit": "Skicka",

polaris-react/locales/th.json

@@ -32,7 +32,6 @@
       "checkbox": "ช่องทำเครื่องหมาย",
       "undo": "เลิกทำ",
       "cancel": "ยกเลิก",
-      "newWindowAccessibilityHint": "(เปิดหน้าต่างใหม่)",
       "clear": "ล้าง",
       "close": "ปิด",
       "submit": "ส่ง",

polaris-react/locales/tr.json

@@ -32,7 +32,6 @@
       "checkbox": "onay kutusu",
       "undo": "Geri al",
       "cancel": "İptal et",
-      "newWindowAccessibilityHint": "(yeni bir pencere açar)",
       "clear": "Temizle",
       "close": "Kapat",
       "submit": "Gönder",

polaris-react/locales/vi.json

@@ -32,7 +32,6 @@
       "checkbox": "hộp kiểm",
       "undo": "Hoàn tác",
       "cancel": "Hủy",
-      "newWindowAccessibilityHint": "(mở một cửa sổ mới)",
       "clear": "Xóa",
       "close": "Đóng",
       "submit": "Gửi",

polaris-react/locales/zh-CN.json

@@ -32,7 +32,6 @@
       "checkbox": "复选框",
       "undo": "撤销",
       "cancel": "取消",
-      "newWindowAccessibilityHint": "（打开新窗口）",
       "clear": "清除",
       "close": "关闭",
       "submit": "提交",

polaris-react/locales/zh-TW.json

@@ -32,7 +32,6 @@
       "checkbox": "核取方塊",
       "undo": "復原",
       "cancel": "取消",
-      "newWindowAccessibilityHint": "(開啟新視窗)",
       "clear": "清除",
       "close": "關閉",
       "submit": "提交",

polaris-react/src/components/Link/Link.scss

@@ -46,24 +46,6 @@
   }
 }
 
-.IconLockup {
-  @include recolor-icon(currentColor);
-  display: inline;
-  white-space: nowrap;
-
-  &::before {
-    content: '\2060';
-  }
-}
-
-.IconLayout {
-  display: inline-flex;
-
-  &::before {
-    content: '\2060';
-  }
-}
-
 .monochrome {
   color: inherit;
 

polaris-react/src/components/Link/Link.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import {ExternalSmallMinor} from '@shopify/polaris-icons';
 
 import {BannerContext} from '../../utilities/banner-context';
 import {classNames} from '../../utilities/css';
-import {useI18n} from '../../utilities/i18n';
 import {UnstyledLink} from '../UnstyledLink';
-import {Icon} from '../Icon';
 
 import styles from './Link.scss';
 
@@ -41,26 +38,6 @@ export function Link({
   accessibilityLabel,
   dataPrimaryLink,
 }: LinkProps) {
-  const i18n = useI18n();
-  let childrenMarkup = children;
-
-  if (external && typeof children === 'string') {
-    const iconLabel = i18n.translate(
-      'Polaris.Common.newWindowAccessibilityHint',
-    );
-
-    childrenMarkup = (
-      <>
-        {children}
-        <span className={styles.IconLockup}>
-          <span className={styles.IconLayout}>
-            <Icon accessibilityLabel={iconLabel} source={ExternalSmallMinor} />
-          </span>
-        </span>
-      </>
-    );
-  }
-
   return (
     <BannerContext.Consumer>
       {(BannerContext) => {
@@ -82,7 +59,7 @@ export function Link({
             aria-label={accessibilityLabel}
             data-primary-link={dataPrimaryLink}
           >
-            {childrenMarkup}
+            {children}
           </UnstyledLink>
         ) : (
           <button
@@ -93,7 +70,7 @@ export function Link({
             aria-label={accessibilityLabel}
             data-primary-link={dataPrimaryLink}
           >
-            {childrenMarkup}
+            {children}
           </button>
         );
       }}

polaris-react/src/components/Link/tests/Link.test.tsx

@@ -3,8 +3,6 @@ import {mountWithApp} from 'tests/utilities';
 
 import {Banner} from '../../Banner';
 import {UnstyledLink} from '../../UnstyledLink';
-import {Icon} from '../../Icon';
-import en from '../../../../locales/en.json';
 import {Link} from '../Link';
 
 describe('<Link />', () => {
@@ -40,35 +38,16 @@ describe('<Link />', () => {
   });
 
   describe('external link', () => {
-    it('has a trailing icon', () => {
+    it('adds target blank and noopener noreferrer if external', () => {
       const link = mountWithApp(
         <Link url="https://help.shopify.com/" external>
           Shopify Help Center
         </Link>,
       );
-      expect(link).toContainReactComponent(Icon);
-    });
-
-    it('informs screen readers that it opens in a new window', () => {
-      const link = mountWithApp(
-        <Link url="https://help.shopify.com/" external>
-          Shopify Help Center
-        </Link>,
-      );
-      const hintText = en.Polaris.Common.newWindowAccessibilityHint;
+      const htmlLink = link.find('a');
 
-      expect(link).toContainReactComponent(Icon, {
-        accessibilityLabel: hintText,
-      });
-    });
-
-    it('doesn’t have a trailing icon for non-string children', () => {
-      const link = mountWithApp(
-        <Link url="https://help.shopify.com/" external>
-          <span>Shopify Help Center</span>
-        </Link>,
-      );
-      expect(link).not.toContainReactComponent(Icon);
+      expect(htmlLink?.props.target).toBe('_blank');
+      expect(htmlLink?.props.rel).toBe('noopener noreferrer');
     });
   });
 

polaris-react/src/components/Navigation/components/Item/Item.tsx

@@ -6,7 +6,6 @@ import React, {
   ReactNode,
   useCallback,
 } from 'react';
-import {ExternalMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../../../utilities/css';
 import {NavigationContext} from '../../context';
@@ -142,20 +141,6 @@ export function Item({
     </div>
   ) : null;
 
-  const externalIconLabel = i18n.translate(
-    'Polaris.Common.newWindowAccessibilityHint',
-  );
-
-  const externalLinkIconMarkup = external ? (
-    <div className={styles.ExternalIcon}>
-      <Icon
-        accessibilityLabel={externalIconLabel}
-        source={ExternalMinor}
-        color="base"
-      />
-    </div>
-  ) : null;
-
   let badgeMarkup: ReactNode = null;
   if (isNew) {
     badgeMarkup = (
@@ -343,7 +328,6 @@ export function Item({
           )}
         >
           {itemContentMarkup}
-          {externalLinkIconMarkup}
         </UnstyledLink>
         {secondaryActionMarkup}
       </div>