Move the AutoHideScrollbar to shared components (#33777)

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