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

Move the AutoHideScrollbar to shared components (#33777)

Browse Source 
* First version of shared component

* Refactor as a functional component

* Add unit tests and more documentation

* Fix problem where wrappedRef was used by parent before assignment was performed.

* Use the shared component in app/web

* Clean up unused styling

* Added scrollbar-gutters as default styling in shared component

* Make sure the legacy mx_AutoHideScrollbar is set in app/web

* Updated snapshots

* Removing default style, scrollbar-gutter: stable;

* Updated snapshots

* useRef on wrapperRef to avoid loop in rendering

* scrollbar-width does not propagate

* Add AutoHideScrollbar to RoomListView

* Fix Prettier issue

* Updated snapshots

* Updated snapshot after merge

* Fix Sonar issue
This commit is contained in:
rbondesson
2026-06-11 07:08:24 +00:00
committed by GitHub
parent e9a89d9872
commit 8a21fdb127
39 changed files with 17217 additions and 16801 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
+3 -3
View File
@@ -3,7 +3,7 @@
exports[`MessagePanel should handle large numbers of hidden events quickly 1`] = `
<DocumentFragment>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel cls"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel cls"
tabindex="-1"
>
<div
@@ -22,7 +22,7 @@ exports[`MessagePanel should handle large numbers of hidden events quickly 1`] =
exports[`MessagePanel should handle lots of membership events quickly 1`] = `
<DocumentFragment>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel cls"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel cls"
tabindex="-1"
>
<div
@@ -137,7 +137,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
exports[`MessagePanel should handle lots of room creation events quickly 1`] = `
<DocumentFragment>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel cls"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel cls"
tabindex="-1"
>
<div
apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+15 -15
View File
@@ -137,7 +137,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -333,7 +333,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -738,7 +738,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -1306,7 +1306,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
</div>
</header>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
@@ -1317,7 +1317,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -1376,7 +1376,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
data-layout="group"
>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
@@ -1387,7 +1387,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -1860,7 +1860,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
</div>
</header>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
@@ -1871,7 +1871,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -2344,7 +2344,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
</div>
</header>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
@@ -2355,7 +2355,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -2828,7 +2828,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</div>
</header>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
@@ -3066,7 +3066,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
</div>
</header>
<div
class="mx_AutoHideScrollbar mx_AuxPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
role="region"
tabindex="-1"
>
@@ -3077,7 +3077,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
data-testid="timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
@@ -3665,7 +3665,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
class="mx_TimelineCard_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
apps/web/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap
+1 -1
View File
@@ -103,7 +103,7 @@ exports[`<TabbedView /> renders tabs 1`] = `
id="mx_tabpanel_GENERAL"
>
<div
class="mx_AutoHideScrollbar mx_TabbedView_tabPanelContent"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_TabbedView_tabPanelContent"
tabindex="-1"
>
<div>
apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+2 -2
View File
@@ -63,7 +63,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
</div>
</div>
<div
class="mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
tabindex="-1"
>
<div
@@ -276,7 +276,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
</div>
</div>
<div
class="mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
tabindex="-1"
>
<span
apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+2 -2
View File
@@ -25,7 +25,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
</h1>
</div>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
tabindex="-1"
>
<div
@@ -166,7 +166,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
</h1>
</div>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
tabindex="-1"
>
<div
apps/web/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
+1 -1
View File
@@ -46,7 +46,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div>
apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
+2 -2
View File
@@ -46,7 +46,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<button
@@ -147,7 +147,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<button
apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+3 -3
View File
@@ -46,7 +46,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div
@@ -128,7 +128,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div
@@ -356,7 +356,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div
apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
+3 -3
View File
@@ -42,7 +42,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<header
@@ -781,7 +781,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<header
@@ -1478,7 +1478,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<header
apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+2 -2
View File
@@ -46,7 +46,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div
@@ -348,7 +348,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div
apps/web/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
+2 -2
View File
@@ -46,7 +46,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div
@@ -121,7 +121,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
</button>
</div>
<div
class="mx_AutoHideScrollbar"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
tabindex="-1"
>
<div
apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+1 -1
View File
@@ -90,7 +90,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
</div>
</div>
<div
class="mx_AutoHideScrollbar mx_AddExistingToSpace_content"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AddExistingToSpace_content"
tabindex="-1"
>
<span
apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+1 -1
View File
@@ -54,7 +54,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
</div>
<ul
aria-label="Spaces"
class="mx_AutoHideScrollbar mx_SpaceTreeLevel"
class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_SpaceTreeLevel"
data-rbd-droppable-context-id="0"
data-rbd-droppable-id="top-level-spaces"
role="tree"