Move EventTileBubble to shared components (#31911)

* Move EventTileBubble to shared components as is

* Added documentation and updated stories and unit tests

* Move 'global' element web css to _common.pcss

* Adding playwright snapshots

* Updated comments

* Added legacy mx_MessageTimestamp class and updated snapshots

* Regenerate snapshots with correct hash

* Changes to css and removed timestamp from properties after review.

* Update screenshot for room-list and fix flaky CI playwright test.

* Blur the play button before matching screenshots

* Changed to button focused instead of blur for consistancy

* Stabilize play button appearance in CI (disabled due to decoding)

* Force play button appearance in CI (disabled due to decoding)

* Add comments on playwright test changes.
Change from React.RefObject<any> to Ref<HTMLDivElement> in EncryptionEvent.tsx

* Update playwright/e2e/composer/CIDER.spec.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright/e2e/composer/CIDER.spec.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Update playwright/e2e/crypto/toasts.spec.ts

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
rbondesson
2026-02-03 15:37:57 +01:00
committed by GitHub
parent eb909f1090
commit a1be203683
76 changed files with 463 additions and 180 deletions

View File

@@ -61,7 +61,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
</div>
</li>
<div
class="mx_EventTileBubble mx_HistoryTile"
class="_container_sq5fu_8 mx_EventTileBubble mx_HistoryTile"
>
<svg
fill="currentColor"
@@ -75,7 +75,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
/>
</svg>
<div
class="mx_EventTileBubble_title"
class="_title_sq5fu_34"
>
You can't see earlier messages
</div>

View File

@@ -152,7 +152,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent"
class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent"
>
<svg
color="var(--cpd-color-icon-critical-primary)"
@@ -167,12 +167,12 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
/>
</svg>
<div
class="mx_EventTileBubble_title"
class="_title_sq5fu_34"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
class="_subtitle_sq5fu_35"
>
<span>
@@ -342,7 +342,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent"
class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent"
>
<svg
color="var(--cpd-color-icon-critical-primary)"
@@ -357,12 +357,12 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
/>
</svg>
<div
class="mx_EventTileBubble_title"
class="_title_sq5fu_34"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
class="_subtitle_sq5fu_35"
>
<span>
@@ -717,7 +717,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
style="height: 400px;"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
>
<svg
fill="currentColor"
@@ -731,12 +731,12 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
/>
</svg>
<div
class="mx_EventTileBubble_title"
class="_title_sq5fu_34"
>
Encryption enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
class="_subtitle_sq5fu_35"
>
Messages in this chat will be end-to-end encrypted.
</div>

View File

@@ -3,7 +3,7 @@
exports[`<RoomPredecessorTile /> Renders as expected 1`] = `
<DocumentFragment>
<div
class="mx_EventTileBubble mx_CreateEvent"
class="_container_sq5fu_8 mx_EventTileBubble mx_CreateEvent"
>
<svg
fill="currentColor"
@@ -17,12 +17,12 @@ exports[`<RoomPredecessorTile /> Renders as expected 1`] = `
/>
</svg>
<div
class="mx_EventTileBubble_title"
class="_title_sq5fu_34"
>
This room is a continuation of another conversation.
</div>
<div
class="mx_EventTileBubble_subtitle"
class="_subtitle_sq5fu_35"
>
<a
href="https://matrix.to/#/old_room_id/$tombstone_event_id"