From f2b2db24431ffb09073e40bafc92845e787e261e Mon Sep 17 00:00:00 2001
From: Jairo Suarez <jairosp@amazon.com>
Date: Thu, 31 Jul 2025 16:02:52 +0200
Subject: [PATCH 1/3] fix: Remove underline from trailing whitespace in
 external links

Removes the non-breaking space that caused underlines to appear below
trailing whitespace between external icon and link text. Replaces it
with margin-inline-start.

AWSUI-60840
---
 src/link/internal.tsx                               | 1 -
 src/link/styles.scss                                | 5 +++++
 src/pie-chart/__integ__/with-links.test.ts          | 4 ++--
 src/top-navigation/__integ__/top-navigation.test.ts | 4 ++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/link/internal.tsx b/src/link/internal.tsx
index ee42ec13ab..8493a5d020 100644
--- a/src/link/internal.tsx
+++ b/src/link/internal.tsx
@@ -194,7 +194,6 @@ const InternalLink = React.forwardRef(
         {children}
         {external && (
           <span className={styles['icon-wrapper']}>
-            &nbsp;
             <span
               className={styles.icon}
               aria-label={renderedExternalIconAriaLabel}
diff --git a/src/link/styles.scss b/src/link/styles.scss
index 5a327ce573..1602fe8467 100644
--- a/src/link/styles.scss
+++ b/src/link/styles.scss
@@ -73,6 +73,11 @@
 
 .icon-wrapper {
   white-space: nowrap;
+  /* Add non-breaking space for consistent spacing */
+  &::before {
+    content: '\a0';
+    display: inline-block;
+  }
 }
 
 .icon {
diff --git a/src/pie-chart/__integ__/with-links.test.ts b/src/pie-chart/__integ__/with-links.test.ts
index 7f3b4c5a4a..a583d956e7 100644
--- a/src/pie-chart/__integ__/with-links.test.ts
+++ b/src/pie-chart/__integ__/with-links.test.ts
@@ -20,8 +20,8 @@ describe('Pie chart with links in key-value pairs', () => {
         const expectedFocusedText =
           linksIn === 'keys'
             ? // The external link icon adds an extra space at the end
-              'Popularity '
-            : '50% ';
+              'Popularity'
+            : '50%';
         await page.click('#focus-target');
         await page.keys(['Tab']); // Focus the chart
         await page.keys(['Enter']); // Focus the first chart segment
diff --git a/src/top-navigation/__integ__/top-navigation.test.ts b/src/top-navigation/__integ__/top-navigation.test.ts
index c59aeb5087..159ebf485b 100644
--- a/src/top-navigation/__integ__/top-navigation.test.ts
+++ b/src/top-navigation/__integ__/top-navigation.test.ts
@@ -32,7 +32,7 @@ describe('Top navigation', () => {
       'renders utilities with text',
       setupTest(pageWidth, async page => {
         await expect(page.getText(wrapper.findUtility(1).toSelector())).resolves.toBe('New thing');
-        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs ');
+        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs');
         await expect(page.getText(wrapper.findUtility(4).toSelector())).resolves.toBe('John Doe');
       })
     );
@@ -66,7 +66,7 @@ describe('Top navigation', () => {
         await expect(page.getText(wrapper.findUtility(1).toSelector())).resolves.toBe('New thing');
 
         // Docs shouldn't be collapsed because it doesn't have an icon.
-        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs ');
+        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs');
       })
     );
   });

From 504ce782ab71301c91557a03de4518ad11fe4355 Mon Sep 17 00:00:00 2001
From: Avinash Dwarapu <dwaraa@amazon.com>
Date: Thu, 7 May 2026 16:38:59 +0200
Subject: [PATCH 2/3] Use unicode word joiner trick

---
 src/link/internal.tsx | 1 +
 src/link/styles.scss  | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/link/internal.tsx b/src/link/internal.tsx
index 8493a5d020..dd4f18646c 100644
--- a/src/link/internal.tsx
+++ b/src/link/internal.tsx
@@ -194,6 +194,7 @@ const InternalLink = React.forwardRef(
         {children}
         {external && (
           <span className={styles['icon-wrapper']}>
+            &#8288;
             <span
               className={styles.icon}
               aria-label={renderedExternalIconAriaLabel}
diff --git a/src/link/styles.scss b/src/link/styles.scss
index 1602fe8467..5c806198bc 100644
--- a/src/link/styles.scss
+++ b/src/link/styles.scss
@@ -73,13 +73,14 @@
 
 .icon-wrapper {
   white-space: nowrap;
+}
+
+.icon {
+  display: inline-block;
+
   /* Add non-breaking space for consistent spacing */
   &::before {
     content: '\a0';
     display: inline-block;
   }
 }
-
-.icon {
-  display: inline-block;
-}

From e70fa807c98728c44670fb72b08299acf2e7a466 Mon Sep 17 00:00:00 2001
From: Avinash Dwarapu <dwaraa@amazon.com>
Date: Thu, 7 May 2026 17:12:35 +0200
Subject: [PATCH 3/3] Use &#xFEFF; to work better with analytics trim logic.

---
 src/link/internal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/link/internal.tsx b/src/link/internal.tsx
index dd4f18646c..adb964a855 100644
--- a/src/link/internal.tsx
+++ b/src/link/internal.tsx
@@ -194,7 +194,7 @@ const InternalLink = React.forwardRef(
         {children}
         {external && (
           <span className={styles['icon-wrapper']}>
-            &#8288;
+            &#xFEFF;
             <span
               className={styles.icon}
               aria-label={renderedExternalIconAriaLabel}