nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages 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
30 changed files with 202 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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"