sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Add CSS cascade layers for Compound, shared components, and app/web styles (#33302)

Browse Source 
* Layer Compound and shared component CSS

* Layer app theme CSS

* Remove !important flags from ActionBarView

* Remove unnecessary !important statements from shared components

* Avoid dead code errors for *.pcss just because layer is specified after @import url

* Remove unnecessary !important styling

* Override Banner defaults in RoomStatusBarView

* Updated snaps

* Updated snaps

* Fix styling of media body in app/web

* Fix styling for Compound anchors

* Fix styling issues in app/web

* More styling fixes

* Fix a problem extracting css for HTMLExport

* Revert changes

* Fix for theme styling

* Add test to improve coverage

* Prettier

* Fix styling issues

* Add data-kind attribute to avoid global styling override

* Update screenshot that now is correct

* Revert data-kind attribute

* Handle LinkPreview styling in .pcss

* Fix flaky test: Avoid racing the lazy-loaded ManageEventIndexDialog

* Take care of review comments

* Updated snaps

* Updated snaps again after merge

* Remove !important from RoomStatusBar
This commit is contained in:
rbondesson
2026-04-30 11:54:49 +00:00
committed by GitHub
parent f2d355bb2c
commit b0ee6f5323
46 changed files with 350 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+2 -2
View File
@@ -237,7 +237,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_content_n7ud0_38"
>
<p
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_1xryk_24"
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_mcq5y_24"
id="_r_1cl_"
>
Could not start a chat with this user
@@ -247,7 +247,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="_actions_n7ud0_61"
>
<button
class="_button_1nw83_8 _primaryAction_1xryk_20 _has-icon_1nw83_60"
class="_button_1nw83_8 _primaryAction_mcq5y_20 _has-icon_1nw83_60"
data-kind="primary"
data-size="md"
role="button"
apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+8 -8
View File
@@ -89,13 +89,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -236,13 +236,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -298,13 +298,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
@@ -342,13 +342,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
<div
aria-label="Message Actions"
aria-live="off"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ax4y_8"
class="_flex_4dswl_9 mx_ThreadActionBar mx_HistoryActionBar _toolbar_1ksun_8"
role="toolbar"
style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<button
aria-label="Remove"
class="_button_1nw83_8 _toolbar_item_1ax4y_14"
class="_button_1nw83_8 _toolbar_item_1ksun_14"
data-kind="tertiary"
data-presentation="label"
data-size="md"
apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap
+3 -3
View File
@@ -3,7 +3,7 @@
exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder when showFileInfo is true 1`] = `
<div>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
@@ -44,7 +44,7 @@ exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder whe
exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when showFileInfo is true 1`] = `
<div>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
@@ -82,7 +82,7 @@ exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when
exports[`MBodyFactory renderMBody renders download button for m.file in file rendering type 1`] = `
<div>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
data-type="download"
apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
+2 -2
View File
@@ -93,7 +93,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
</div>
<a
aria-live="off"
class="mx_MessageTimestamp _content_kc5mt_8"
class="mx_MessageTimestamp _content_1r034_8"
href="https://matrix.to/#/!room:server/undefined"
>
Thu, Jan 15, 1970, 06:56
@@ -300,7 +300,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
exports[`<MImageBody/> should render MFileBody for svg with no thumbnail 1`] = `
<DocumentFragment>
<span
class="_content_f1s5h_8 mx_MFileBody"
class="_content_1t2mx_8 mx_MFileBody"
>
<div
class="mx_MediaBody _mediaBody_rgndh_8"
apps/web/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap
+4 -4
View File
@@ -3,13 +3,13 @@
exports[`<RoomListSearch /> renders 1`] = `
<DocumentFragment>
<div
class="_flex_4dswl_9 _view_z7ks9_8"
class="_flex_4dswl_9 _view_zk0ja_8"
data-testid="room-list-search"
role="search"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<button
class="_button_1nw83_8 _search_z7ks9_16 _has-icon_1nw83_60"
class="_button_1nw83_8 _search_zk0ja_16 _has-icon_1nw83_60"
data-kind="secondary"
data-size="md"
id="room-list-search-button"
@@ -29,11 +29,11 @@ exports[`<RoomListSearch /> renders 1`] = `
/>
</svg>
<span
class="_flex_4dswl_9 _search_container_z7ks9_29"
class="_flex_4dswl_9 _search_container_zk0ja_28"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
class="_search_text_z7ks9_41"
class="_search_text_zk0ja_40"
>
Search
</span>