Skip to content

fix: Remove underline from trailing whitespace in external links #3709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: Remove underline from trailing whitespace in external links #3709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4c1cc5
fix: Remove underline from trailing whitespace in external links
xyos Jul 31, 2025
ad348b7
Merge branch 'main' into fix-link-underline
xyos Aug 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/link/internal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,6 @@ const InternalLink = React.forwardRef(
{children}
{external && (
<span className={styles['icon-wrapper']}>
&nbsp;
<span
className={styles.icon}
aria-label={renderedExternalIconAriaLabel}
Expand Down
5 changes: 5 additions & 0 deletions src/link/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,11 @@

.icon-wrapper {
white-space: nowrap;
/* Add non-breaking space for consistent spacing */
&::before {
content: '\a0';
display: inline-block;
}
}

.icon {
Expand Down
4 changes: 2 additions & 2 deletions src/pie-chart/__integ__/with-links.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/top-navigation/__integ__/top-navigation.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
})
);
Expand Down Expand Up @@ -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');
})
);
});
Expand Down
Loading