Update to compound-web 9.0.1 (#33095)

* Update to compound-web 9.0.1

There are a couple of breaking changes in v9, leading to the changes in
`BugReportDialog` and `EncryptionCard`.

Most of these updates, however, are snapshot updates, due to changes in the CSS
class names in compound web (which happens due to updates in the CSS content in
those classes; `postcss-modules` generates class names based on the hash of the
CSS).

* update playwright screenshots
This commit is contained in:
Richard van der Hoff
2026-04-13 10:16:34 +00:00
committed by GitHub
parent 17efc81f0b
commit eef8cad229
64 changed files with 307 additions and 291 deletions
@@ -172,7 +172,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
Add extensions
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -187,7 +187,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
>
<span
aria-label="Avatar"
class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
class="_avatar_7h2br_8 mx_BaseAvatar mx_WidgetAvatar"
data-color="1"
data-testid="avatar-img"
data-type="round"
@@ -196,7 +196,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
>
<img
alt=""
class="_image_zysgz_43"
class="_image_7h2br_43"
data-type="round"
height="24px"
loading="lazy"
@@ -240,7 +240,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
>
<span
aria-label="Avatar"
class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
class="_avatar_7h2br_8 mx_BaseAvatar mx_WidgetAvatar"
data-color="1"
data-testid="avatar-img"
data-type="round"
@@ -249,7 +249,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
>
<img
alt=""
class="_image_zysgz_43"
class="_image_7h2br_43"
data-type="round"
height="24px"
loading="lazy"
@@ -141,7 +141,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
>
<div>
<span
class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_7h2br_55"
data-color="3"
data-testid="avatar-img"
data-type="round"
@@ -211,7 +211,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
</div>
</div>
<div
class="_separator_cqpyv_8 mx_PinnedMessagesCard_Separator"
class="_separator_13qwf_8 mx_PinnedMessagesCard_Separator"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -222,7 +222,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
>
<div>
<span
class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_7h2br_55"
data-color="3"
data-testid="avatar-img"
data-type="round"
@@ -369,7 +369,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
>
<div>
<span
class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_7h2br_55"
data-color="3"
data-testid="avatar-img"
data-type="round"
@@ -439,7 +439,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
</div>
</div>
<div
class="_separator_cqpyv_8 mx_PinnedMessagesCard_Separator"
class="_separator_13qwf_8 mx_PinnedMessagesCard_Separator"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -450,7 +450,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
>
<div>
<span
class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_7h2br_55"
data-color="3"
data-testid="avatar-img"
data-type="round"
@@ -49,7 +49,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
class="mx_RoomSummaryCard_container"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="1"
data-testid="avatar-img"
data-type="round"
@@ -181,9 +181,9 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
style="--mx-box-flex: 1;"
>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="medium"
data-size="md"
rel="noreferrer noopener"
>
<p
@@ -196,7 +196,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</section>
</header>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -283,7 +283,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -490,7 +490,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -647,7 +647,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -788,7 +788,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
class="mx_RoomSummaryCard_container"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="1"
data-testid="avatar-img"
data-type="round"
@@ -878,9 +878,9 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
style="--mx-box-flex: 1;"
>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="medium"
data-size="md"
rel="noreferrer noopener"
>
<p
@@ -893,7 +893,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</section>
</header>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -980,7 +980,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -1187,7 +1187,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -1344,7 +1344,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -1485,7 +1485,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
class="mx_RoomSummaryCard_container"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="1"
data-testid="avatar-img"
data-type="round"
@@ -1617,9 +1617,9 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
style="--mx-box-flex: 1;"
>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="medium"
data-size="md"
rel="noreferrer noopener"
>
<p
@@ -1632,7 +1632,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</section>
</header>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -1719,7 +1719,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -1926,7 +1926,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -2083,7 +2083,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</svg>
</button>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -61,7 +61,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
<button
aria-label="Profile picture"
aria-live="off"
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="3"
data-testid="avatar-img"
data-type="round"
@@ -363,7 +363,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
<button
aria-label="Profile picture"
aria-live="off"
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="3"
data-testid="avatar-img"
data-type="round"
@@ -14,7 +14,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
<button
aria-label="Profile picture"
aria-live="off"
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="3"
data-testid="avatar-img"
data-type="round"