mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-15 15:41:10 +01:00
Code Issues Projects Releases Wiki Activity

Update IconButton colors (#30124)

Browse Source 
* chore: update `@vector-im/compound-web` to 8.0.0

* refactor(IconButton): use `kind="secondary"` instead of `subtleBackground` props

* test: update snapshots

* fix: force color on room header toggle

* fix: TAC button color

* test(e2e): update release announcement screenshot
This commit is contained in:
Florian Duros 2025-06-13 10:28:43 +02:00 committed by GitHub
parent 0f0f904cb0
commit 1e3fd9d3aa
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
30 changed files with 202 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -93,7 +93,7 @@
"@types/png-chunks-extract": "^1.0.2",
"@types/react-virtualized": "^9.21.30",
"@vector-im/compound-design-tokens": "^4.0.0",
"@vector-im/compound-web": "^7.11.0",
"@vector-im/compound-web": "^8.0.0",
"@vector-im/matrix-wysiwyg": "2.38.3",
"@zxcvbn-ts/core": "^3.0.4",
"@zxcvbn-ts/language-common": "^3.0.4",

BIN
playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-All-new-pinned-messages-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

4
res/css/structures/_ThreadsActivityCentre.pcss
View File

@ -49,12 +49,12 @@
&:hover,
&:hover .mx_ThreadsActivityCentreButton_Icon {
background-color: $quaternary-content;
color: $primary-content;
fill: $primary-content;
}
}
& .mx_ThreadsActivityCentreButton_Icon {
color: $secondary-content;
fill: $secondary-content;
}
}

2
res/css/views/rooms/_RoomHeader.pcss
View File

@ -103,5 +103,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomHeader .mx_RoomHeader_toggled {
color: var(--cpd-color-icon-accent-primary);
fill: var(--cpd-color-icon-accent-primary);
}

4
src/components/views/right_panel/BaseCard.tsx
View File

@ -76,7 +76,7 @@ const BaseCard: React.FC<IProps> = ({
data-testid="base-card-back-button"
onClick={onBackClick}
tooltip={label}
subtleBackground
kind="secondary"
>
<ChevronLeftIcon />
</IconButton>
@ -92,7 +92,7 @@ const BaseCard: React.FC<IProps> = ({
onClick={onClose ?? closeRightPanel}
ref={closeButtonRef}
tooltip={closeLabel ?? _t("action|close")}
subtleBackground
kind="secondary"
>
<CloseIcon />
</IconButton>

4
src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx
View File

@ -39,7 +39,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX
>
{displayChevron && (
<IconButton
subtleBackground={true}
kind="secondary"
aria-expanded={isExpanded}
aria-controls={id}
className="mx_RoomListPrimaryFilters_IconButton"
@ -47,7 +47,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX
size="28px"
onClick={() => setIsExpanded((_expanded) => !_expanded)}
>
<ChevronDownIcon color="var(--cpd-color-icon-secondary)" />
<ChevronDownIcon />
</IconButton>
)}
<Flex

3
test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
View File

@ -20,7 +20,8 @@ exports[`FilePanel renders empty state 1`] = `
</div>
<button
aria-labelledby="«r0»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"

84
test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
View File

@ -48,7 +48,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -75,7 +76,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="«rg9»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -100,7 +102,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
<button
aria-label="Threads"
aria-labelledby="«rge»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -126,7 +129,8 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
<button
aria-label="Room info"
aria-labelledby="«rgj»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -263,7 +267,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -290,7 +295,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="«rh7»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -315,7 +321,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
<button
aria-label="Threads"
aria-labelledby="«rhc»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -341,7 +348,8 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
<button
aria-label="Room info"
aria-labelledby="«rhh»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -564,7 +572,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -591,7 +600,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="«rbt»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -616,7 +626,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Threads"
aria-labelledby="«rc2»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -642,7 +653,8 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<button
aria-label="Room info"
aria-labelledby="«rc7»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -942,7 +954,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -969,7 +982,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
aria-disabled="false"
aria-label="Voice call"
aria-labelledby="«re3»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -994,7 +1008,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Threads"
aria-labelledby="«re8»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1020,7 +1035,8 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<button
aria-label="Room info"
aria-labelledby="«red»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1401,7 +1417,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<button
aria-disabled="true"
aria-label="There's no one here to call"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1428,7 +1445,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
aria-disabled="true"
aria-label="There's no one here to call"
aria-labelledby="«r2h»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1453,7 +1471,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<button
aria-label="Threads"
aria-labelledby="«r2m»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1479,7 +1498,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<button
aria-label="Room info"
aria-labelledby="«r2r»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1609,7 +1629,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<button
aria-disabled="true"
aria-label="There's no one here to call"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1636,7 +1657,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
aria-disabled="true"
aria-label="There's no one here to call"
aria-labelledby="«r2h»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1661,7 +1683,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<button
aria-label="Threads"
aria-labelledby="«r2m»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1687,7 +1710,8 @@ exports[`RoomView should not display the timeline when the room encryption is lo
<button
aria-label="Room info"
aria-labelledby="«r2r»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -1990,7 +2014,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
<button
aria-label="Chat"
aria-labelledby="«r7c»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -2016,7 +2041,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
<button
aria-label="Threads"
aria-labelledby="«r7h»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -2042,7 +2068,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
<button
aria-label="Room info"
aria-labelledby="«r7m»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -2145,7 +2172,8 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
</div>
<button
aria-labelledby="«r84»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"

6
test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
View File

@ -7,7 +7,8 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
>
<button
aria-labelledby="«r0»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -45,7 +46,8 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
>
<button
aria-labelledby="«r6»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"

3
test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View File

@ -32,7 +32,8 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
</div>
<button
aria-labelledby="«r0»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"

3
test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
View File

@ -20,7 +20,8 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
</div>
<button
aria-labelledby="«r0»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"

6
test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
View File

@ -20,7 +20,8 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
</div>
<button
aria-labelledby="«r0»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -120,7 +121,8 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
</div>
<button
aria-labelledby="«r6»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"

21
test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
View File

@ -20,7 +20,8 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
</div>
<button
aria-labelledby="«re»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -101,7 +102,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
</div>
<button
aria-labelledby="«rk»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -167,7 +169,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open menu"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rv»"
role="button"
@ -245,7 +248,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open menu"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r16»"
role="button"
@ -322,7 +326,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
</div>
<button
aria-labelledby="«rt2»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -388,7 +393,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open menu"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rtd»"
role="button"
@ -466,7 +472,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open menu"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rtk»"
role="button"

15
test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
View File

@ -17,7 +17,8 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
/>
<button
aria-labelledby="«rq»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -126,7 +127,8 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</span>
</p>
<button
class="_icon-button_m2erp_8 mx_RoomSummaryCard_topic_chevron"
class="_icon-button_1pz9o_8 mx_RoomSummaryCard_topic_chevron"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
@ -775,7 +777,8 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
<button
aria-labelledby="«r0»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -1496,7 +1499,8 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
/>
<button
aria-labelledby="«rd»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -1605,7 +1609,8 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</span>
</p>
<button
class="_icon-button_m2erp_8 mx_RoomSummaryCard_topic_chevron"
class="_icon-button_1pz9o_8 mx_RoomSummaryCard_topic_chevron"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 24px;"
tabindex="0"

6
test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View File

@ -20,7 +20,8 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</div>
<button
aria-labelledby="«r6i»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -306,7 +307,8 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
</div>
<button
aria-labelledby="«r6s»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"

12
test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
View File

@ -45,7 +45,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
<button
aria-disabled="true"
aria-label="There's no one here to call"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -72,7 +73,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
aria-disabled="true"
aria-label="There's no one here to call"
aria-labelledby="«r1dt»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -97,7 +99,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
<button
aria-label="Threads"
aria-labelledby="«r1e2»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -123,7 +126,8 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
<button
aria-label="Room info"
aria-labelledby="«r1e7»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"

3
test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
View File

@ -4,8 +4,9 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
<button
aria-label="Chat"
aria-labelledby="«r6»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-indicator="default"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"

42
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
View File

@ -22,7 +22,8 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open space menu"
class="_icon-button_m2erp_8 mx_SpaceMenu_button"
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«rc»"
role="button"
@ -59,7 +60,8 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«rg»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«re»"
role="button"
@ -90,7 +92,8 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rl»"
role="button"
@ -148,7 +151,8 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open space menu"
class="_icon-button_m2erp_8 mx_SpaceMenu_button"
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«ro»"
role="button"
@ -185,7 +189,8 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«rs»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rq»"
role="button"
@ -213,7 +218,8 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
</button>
<button
aria-label="New message"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -268,7 +274,8 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open space menu"
class="_icon-button_m2erp_8 mx_SpaceMenu_button"
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«r0»"
role="button"
@ -305,7 +312,8 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r4»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2»"
role="button"
@ -336,7 +344,8 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r9»"
role="button"
@ -394,7 +403,8 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open space menu"
class="_icon-button_m2erp_8 mx_SpaceMenu_button"
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«r28»"
role="button"
@ -431,7 +441,8 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r2c»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2a»"
role="button"
@ -462,7 +473,8 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2h»"
role="button"
@ -526,7 +538,8 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r2m»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2k»"
role="button"
@ -557,7 +570,8 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2r»"
role="button"

12
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
View File

@ -12,7 +12,8 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="«r2»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r0»"
role="button"
@ -43,7 +44,8 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="«r9»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r7»"
role="button"
@ -87,7 +89,8 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
aria-haspopup="menu"
aria-label="More Options"
aria-labelledby="«ri»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rg»"
role="button"
@ -118,7 +121,8 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
aria-haspopup="menu"
aria-label="Notification options"
aria-labelledby="«rp»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rn»"
role="button"

3
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap
View File

@ -8,7 +8,8 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r2»"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r0»"
role="button"

6
test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View File

@ -35,7 +35,8 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open menu"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r5»"
role="button"
@ -111,7 +112,8 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Open menu"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rd»"
role="button"

6
test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
View File

@ -20,7 +20,8 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
</div>
<button
aria-labelledby="«r0»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"
@ -94,7 +95,8 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
</div>
<button
aria-labelledby="«r6»"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
role="button"
style="--cpd-icon-button-size: 28px;"

6
test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
View File

@ -241,7 +241,8 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
<button
aria-label="Delete"
aria-labelledby="«r2f»"
class="_icon-button_m2erp_8 _destructive_m2erp_74"
class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -518,7 +519,8 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
<button
aria-label="Delete"
aria-labelledby="«r17»"
class="_icon-button_m2erp_8 _destructive_m2erp_74"
class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"

21
test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
View File

@ -7,7 +7,8 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -108,7 +109,8 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
</div>
<button
aria-label="Copy"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -167,7 +169,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -300,7 +303,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -455,7 +459,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -571,7 +576,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -672,7 +678,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
</div>
<button
aria-label="Copy"
class="_icon-button_m2erp_8"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"

3
test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
View File

@ -7,7 +7,8 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"

12
test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
View File

@ -7,7 +7,8 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -189,7 +190,8 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -371,7 +373,8 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"
@ -556,7 +559,8 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"

3
test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
View File

@ -178,7 +178,8 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
>
<button
aria-label="Back"
class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
class="_icon-button_1pz9o_8"
data-kind="secondary"
role="button"
style="--cpd-icon-button-size: 28px;"
tabindex="0"

3
test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View File

@ -234,7 +234,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
aria-haspopup="menu"
aria-label="Threads"
aria-labelledby="«r12»"
class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
data-kind="primary"
data-state="closed"
id="radix-«r10»"
role="button"

6
test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
View File

@ -151,7 +151,8 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
aria-haspopup="menu"
aria-label="Threads"
aria-labelledby="«rq»"
class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
data-kind="primary"
data-state="open"
id="radix-«ro»"
role="button"
@ -487,7 +488,8 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
aria-haspopup="menu"
aria-label="Threads"
aria-labelledby="«ra»"
class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
data-kind="primary"
data-state="closed"
id="radix-«r8»"
role="button"

8
yarn.lock
View File

@ -3836,10 +3836,10 @@
resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.2.tgz#27363d26446eaa21880ab126fa51fec112e6fd86"
integrity sha512-y13bhPyJ5OzbGRl21F6+Y2adrjyK+mu67yKTx+o8MfmIpJzMSn4KkHZtcujMquWSh0e5ZAufsnk4VYvxbSpr1A==
"@vector-im/compound-web@^7.11.0":
version "7.11.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.11.0.tgz#b7c466e64089320b41f8eaf6f2b30950e9692ca2"
integrity sha512-lRxXUOQJHdBswhykpNs/J/cBW4fPY1qbwyDexlWxX5zCVAYiuMCWo2tI+Y7/SK4tNbDr7nwoTDRh4H9CO1L5LQ==
"@vector-im/compound-web@^8.0.0":
version "8.0.0"
resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.0.0.tgz#1eeaf54c253730752393d0e5e7c8cd81030b80af"
integrity sha512-VAwCGl0KMjN+qEKflnQOB1LidSsxSDiczEWka1IGKj52EzrNOfY0wlfCs73v+H84zUanYKlgOwnQgWU5at9Q/w==
dependencies:
"@floating-ui/react" "^0.27.0"
"@radix-ui/react-context-menu" "^2.2.1"