Update IconButton colors (#30124)

* 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
@@ -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;"
@@ -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;"
@@ -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"
@@ -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"
@@ -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;"