Skip to content

Fix Compound Link elements not having an underline. #31583

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

Merged
Half-Shot merged 8 commits into from
Jan 5, 2026
Merged

Fix Compound Link elements not having an underline. #31583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d51d2e8
Do not alter text-decoration if an <a> tag is a Link.
Half-Shot Dec 19, 2025
f617e5d
Update screenshots
Half-Shot Dec 19, 2025
70ffe04
update compound web to 8.3.4
Half-Shot Jan 2, 2026
74f81c8
Update snaps
Half-Shot Jan 2, 2026
5001d3b
Merge remote-tracking branch 'origin/develop' into hs/prevent-overrid…
Half-Shot Jan 2, 2026
2a632e3
Update alllllll the snaps
Half-Shot Jan 2, 2026
d2f0040
update screenshots
Half-Shot Jan 2, 2026
0c57636
Merge branch 'develop' into hs/prevent-overriding-compound-links
Half-Shot Jan 2, 2026
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
"@sentry/browser": "^10.0.0",
"@types/png-chunks-extract": "^1.0.2",
"@vector-im/compound-design-tokens": "6.4.3",
"@vector-im/compound-web": "^8.3.1",
"@vector-im/compound-web": "^8.3.4",
"@vector-im/matrix-wysiwyg": "2.40.0",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",
Expand Down
4 changes: 2 additions & 2 deletions packages/shared-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
},
"dependencies": {
"@element-hq/element-web-module-api": "^1.8.0",
"@vector-im/compound-design-tokens": "^6.3.0",
"@vector-im/compound-design-tokens": "^6.4.3",
"classnames": "^2.5.1",
"counterpart": "^0.18.6",
"lodash": "^4.17.21",
Expand Down Expand Up @@ -93,6 +93,6 @@
},
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
"peerDependencies": {
"@vector-im/compound-web": "^8.2.5"
"@vector-im/compound-web": "^8.3.4"
}
}
14 changes: 7 additions & 7 deletions packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
class="actions"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="primary"
data-size="sm"
role="button"
Expand All @@ -55,7 +55,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
Withdraw verification
</button>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -92,7 +92,7 @@ exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
class="actions"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -138,7 +138,7 @@ exports[`AvatarWithDetails renders a critical banner 1`] = `
class="actions"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -188,7 +188,7 @@ exports[`AvatarWithDetails renders a default banner 1`] = `
class="actions"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -239,7 +239,7 @@ exports[`AvatarWithDetails renders a info banner 1`] = `
class="actions"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -285,7 +285,7 @@ exports[`AvatarWithDetails renders a success banner 1`] = `
class="actions"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down
2 changes: 1 addition & 1 deletion ...rc/composer/HistoryVisibleBannerView/__snapshots__/HistoryVisibleBannerView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ exports[`HistoryVisibleBannerView renders a history visible banner 1`] = `
class="actions"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down
18 changes: 9 additions & 9 deletions ...omponents/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`RoomListSearchView Storybook snapshots renders the default state 1`] =
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_187yx_8 search _has-icon_187yx_57"
class="_button_13vu4_8 search _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
id="room-list-search-button"
Expand Down Expand Up @@ -44,7 +44,7 @@ exports[`RoomListSearchView Storybook snapshots renders the default state 1`] =
</button>
<button
aria-label="Explore rooms"
class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -76,7 +76,7 @@ exports[`RoomListSearchView Storybook snapshots renders with all buttons visible
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_187yx_8 search _has-icon_187yx_57"
class="_button_13vu4_8 search _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
id="room-list-search-button"
Expand Down Expand Up @@ -111,7 +111,7 @@ exports[`RoomListSearchView Storybook snapshots renders with all buttons visible
</button>
<button
aria-label="Open dial pad"
class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="sm"
role="button"
Expand All @@ -132,7 +132,7 @@ exports[`RoomListSearchView Storybook snapshots renders with all buttons visible
</button>
<button
aria-label="Explore rooms"
class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -164,7 +164,7 @@ exports[`RoomListSearchView Storybook snapshots renders with dial pad button 1`]
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_187yx_8 search _has-icon_187yx_57"
class="_button_13vu4_8 search _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
id="room-list-search-button"
Expand Down Expand Up @@ -199,7 +199,7 @@ exports[`RoomListSearchView Storybook snapshots renders with dial pad button 1`]
</button>
<button
aria-label="Open dial pad"
class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="sm"
role="button"
Expand All @@ -220,7 +220,7 @@ exports[`RoomListSearchView Storybook snapshots renders with dial pad button 1`]
</button>
<button
aria-label="Explore rooms"
class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -252,7 +252,7 @@ exports[`RoomListSearchView Storybook snapshots renders without explore button 1
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_187yx_8 search _has-icon_187yx_57"
class="_button_13vu4_8 search _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
id="room-list-search-button"
Expand Down
8 changes: 4 additions & 4 deletions packages/shared-components/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2031,10 +2031,10 @@
resolved "https://registry.yarnpkg.com/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz#538b1e103bf8d9864e7b85cc96fa8d6fb6c40777"
integrity sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==

"@vector-im/compound-design-tokens@^6.3.0":
version "6.4.2"
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.4.2.tgz#29189d6480c8ccf09ce143cb4618fb13a56a7583"
integrity sha512-LHLGZgnatH3mQXn9TF+m/SUinPS2nKvuCT/r2AQ7HAgEIG/S/Ck6e/iV4IFQLSZnd9gU0RlMsLkP2UQ/AKUEBA==
"@vector-im/compound-design-tokens@^6.4.3":
version "6.4.3"
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.4.3.tgz#f8a98308650e841ffba6ca0820055e2bfe2b8af1"
integrity sha512-Zyqag2QCAfpRipLHSX/LEXj6OGFgBpilMQvNdr3a0iXeGASfkM3HZGid077kMRp9lvyHiQfPIs1BdllENwDSNQ==

"@vitest/[email protected]":
version "3.2.4"
Expand Down
Binary file modified ...ading/feature-detection.spec.ts/unsupported-browser-CompatibilityView-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...apshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 11 additions & 4 deletions res/themes/light/css/_mods.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,15 @@
background-color: transparent !important;
}

a:hover,
a:link,
a:visited {
text-decoration: none;
/*
data-kind is used by the Compound <Link> component and therefore does not override them.
This is horrible, but will get less horrible when links in the app are replaced with
<Link>.
*/
a:not([data-kind]) {
&:hover,
Copy link
Member Author

@Half-Shot Half-Shot Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

while I'm here, I was struggling to really figure out what this is doing. I hate that we perform blanket CSS changes links across the app, but I think this can only now be fixed by replacing our bare tags with proper components.

&:link,
&:visited {
text-decoration: none;
}
}
10 changes: 5 additions & 5 deletions test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_187yx_8 _has-icon_187yx_57"
class="_button_13vu4_8 _has-icon_13vu4_60"
data-kind="secondary"
data-size="sm"
role="button"
Expand Down Expand Up @@ -143,7 +143,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<a
class="_button_187yx_8 _has-icon_187yx_57"
class="_button_13vu4_8 _has-icon_13vu4_60"
data-kind="secondary"
data-size="lg"
href="https://packages.element.io/desktop/install/macos/Element.dmg"
Expand All @@ -167,7 +167,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
Mac
</a>
<a
class="_button_187yx_8 _has-icon_187yx_57"
class="_button_13vu4_8 _has-icon_13vu4_60"
data-kind="secondary"
data-size="lg"
href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
Expand All @@ -189,7 +189,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
Windows (64-bit)
</a>
<a
class="_button_187yx_8 _has-icon_187yx_57"
class="_button_13vu4_8 _has-icon_13vu4_60"
data-kind="secondary"
data-size="lg"
href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
Expand All @@ -211,7 +211,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
Windows (ARM 64-bit)
</a>
<a
class="_button_187yx_8 _has-icon_187yx_57"
class="_button_13vu4_8 _has-icon_13vu4_60"
data-kind="secondary"
data-size="lg"
href="https://element.io/download#linux"
Expand Down
2 changes: 1 addition & 1 deletion test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1018,7 +1018,7 @@ exports[`RoomView invites renders an invite room 1`] = `
Decline
</div>
<button
class="_button_187yx_8 _destructive_187yx_107"
class="_button_13vu4_8 _destructive_13vu4_110"
data-kind="tertiary"
data-size="lg"
role="button"
Expand Down
12 changes: 6 additions & 6 deletions test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
class="mx_EncryptionCard_buttons"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="primary"
data-size="lg"
role="button"
Expand All @@ -119,7 +119,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
Use another device
</button>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="lg"
role="button"
Expand All @@ -128,7 +128,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
Can't confirm?
</button>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="tertiary"
data-size="lg"
role="button"
Expand Down Expand Up @@ -279,7 +279,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
class="mx_EncryptionCard_buttons"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="primary"
data-size="lg"
role="button"
Expand All @@ -288,7 +288,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
Use recovery key
</button>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="lg"
role="button"
Expand All @@ -297,7 +297,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
Can't confirm?
</button>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="tertiary"
data-size="lg"
role="button"
Expand Down
4 changes: 2 additions & 2 deletions ...it-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
class="mx_EncryptionCard_buttons"
>
<button
class="_button_187yx_8 mx_Dialog_nonDialogButton _has-icon_187yx_57"
class="_button_13vu4_8 mx_Dialog_nonDialogButton _has-icon_13vu4_60"
data-kind="primary"
data-size="lg"
role="button"
Expand All @@ -97,7 +97,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
Continue to account
</button>
<button
class="_button_187yx_8 mx_Dialog_nonDialogButton"
class="_button_13vu4_8 mx_Dialog_nonDialogButton"
data-kind="tertiary"
data-size="lg"
role="button"
Expand Down
4 changes: 2 additions & 2 deletions ...nit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
class="mx_EncryptionCard_buttons"
>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="primary"
data-size="lg"
role="button"
Expand All @@ -68,7 +68,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
Go to Settings
</button>
<button
class="_button_187yx_8"
class="_button_13vu4_8"
data-kind="secondary"
data-size="lg"
role="button"
Expand Down
Loading
Loading