nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Release announcement for new room list (#30675)

Browse Source 
* Release announcement for new room list

* Update snapshots

* Update release announcement tests

* worryingly large snapshot update

* Remove the pinned message release anncounement

* Hopefully fix e2e tests

add missing e2e screenshot and remove one for removed test

* Remove unused i18n strings

* Fix screenshot

* Try straight on the quick settings button

* unused import

* update snapshots

* Fix settings location
This commit is contained in:
David Baker
2025-09-03 16:25:49 +01:00
committed by GitHub
parent 09fe9281a5
commit cba341f824
17 changed files with 769 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

422
test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
View File

@@ -10,13 +10,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
>
<div
class="mx_BaseCard_header"
data-floating-ui-inert=""
>
<div
class="mx_BaseCard_header_spacer"
/>
<button
aria-labelledby="«rq»"
aria-labelledby="«re»"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -48,7 +47,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
>
<header
class="mx_RoomSummaryCard_container"
data-floating-ui-inert=""
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -174,7 +172,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</header>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -186,7 +183,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
<div
aria-checked="false"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitemcheckbox"
>
@@ -214,7 +210,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
<input
aria-hidden="true"
class="_input_19o42_24"
id="«rv»"
id="«rj»"
role="switch"
type="checkbox"
/>
@@ -225,7 +221,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</div>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -263,14 +258,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -314,7 +307,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -353,86 +345,52 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
/>
</svg>
</button>
<div
aria-controls="«r12»"
aria-describedby="«r12»"
aria-expanded="true"
aria-haspopup="dialog"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
fill-rule="evenodd"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Pinned messages
</span>
<svg
aria-hidden="true"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
0
</span>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r14»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
fill-rule="evenodd"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Pinned messages
</span>
<svg
aria-hidden="true"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
0
</span>
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="menuitem"
>
@@ -470,7 +428,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -508,14 +465,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -553,7 +508,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -591,7 +545,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -629,7 +582,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -670,14 +622,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
@@ -773,7 +723,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
>
<div
class="mx_BaseCard_header"
data-floating-ui-inert=""
>
<div
class="mx_BaseCard_header_spacer"
@@ -811,7 +760,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
>
<header
class="mx_RoomSummaryCard_container"
data-floating-ui-inert=""
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -899,7 +847,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</header>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -911,7 +858,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
<div
aria-checked="false"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitemcheckbox"
>
@@ -950,7 +896,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</div>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -988,14 +933,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1039,7 +982,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1078,86 +1020,52 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
</svg>
</button>
<div
aria-controls="«r8»"
aria-describedby="«r8»"
aria-expanded="true"
aria-haspopup="dialog"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
fill-rule="evenodd"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Pinned messages
</span>
<svg
aria-hidden="true"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
0
</span>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«ra»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
fill-rule="evenodd"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Pinned messages
</span>
<svg
aria-hidden="true"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
0
</span>
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="menuitem"
>
@@ -1195,7 +1103,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1233,14 +1140,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1278,7 +1183,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1316,7 +1220,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1354,7 +1257,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1395,14 +1297,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
@@ -1498,13 +1398,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
>
<div
class="mx_BaseCard_header"
data-floating-ui-inert=""
>
<div
class="mx_BaseCard_header_spacer"
/>
<button
aria-labelledby="«rd»"
aria-labelledby="«r7»"
class="_icon-button_1pz9o_8"
data-kind="secondary"
data-testid="base-card-close-button"
@@ -1536,7 +1435,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
>
<header
class="mx_RoomSummaryCard_container"
data-floating-ui-inert=""
>
<span
class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -1662,7 +1560,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</header>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -1674,7 +1571,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<div
aria-checked="false"
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitemcheckbox"
>
@@ -1702,7 +1598,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
<input
aria-hidden="true"
class="_input_19o42_24"
id="«ri»"
id="«rc»"
role="switch"
type="checkbox"
/>
@@ -1713,7 +1609,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</div>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1751,14 +1646,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1802,7 +1695,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1841,86 +1733,52 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
/>
</svg>
</button>
<div
aria-controls="«rl»"
aria-describedby="«rl»"
aria-expanded="true"
aria-haspopup="dialog"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
fill-rule="evenodd"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Pinned messages
</span>
<svg
aria-hidden="true"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
0
</span>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«rn»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
<svg
aria-hidden="true"
class="_icon_dyt4i_50"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
fill-rule="evenodd"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
>
Pinned messages
</span>
<svg
aria-hidden="true"
class="_nav-hint_dyt4i_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
width="8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
/>
</svg>
<span
class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
>
0
</span>
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-kind="primary"
role="menuitem"
>
@@ -1958,7 +1816,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -1996,14 +1853,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2041,7 +1896,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2079,7 +1933,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2117,7 +1970,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"
data-floating-ui-inert=""
data-kind="primary"
role="menuitem"
>
@@ -2158,14 +2010,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
</button>
<div
class="_separator_7ckbw_8"
data-floating-ui-inert=""
data-kind="primary"
data-orientation="horizontal"
role="separator"
/>
<div
class="mx_RoomSummaryCard_bottomOptions"
data-floating-ui-inert=""
>
<button
class="_item_dyt4i_8 _interactive_dyt4i_26"

834
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
View File

@@ -10,6 +10,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -25,7 +26,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«rc»"
id="radix-«rm»"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@@ -54,76 +55,117 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
class="flex"
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
aria-disabled="false"
<div
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«rg»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«re»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«ru»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rs»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rl»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
</div>
<div
aria-controls="«r15»"
aria-describedby="«r15»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r17»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r19»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
@@ -139,6 +181,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -154,7 +197,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«ro»"
id="radix-«r1c»"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@@ -183,70 +226,111 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
class="flex"
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
aria-disabled="false"
<div
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«rs»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rq»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r1k»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r1i»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
<button
aria-label="Start chat"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
</div>
<div
aria-controls="«r1r»"
aria-describedby="«r1r»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-label="Start chat"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r1t»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
@@ -262,6 +346,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -306,76 +391,117 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
class="flex"
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
aria-disabled="false"
<div
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r4»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r8»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r6»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r9»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
</div>
<div
aria-controls="«rf»"
aria-describedby="«rf»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«rh»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«rj»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
@@ -391,6 +517,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -406,7 +533,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
data-kind="primary"
data-state="closed"
id="radix-«r28»"
id="radix-«r3q»"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@@ -435,76 +562,117 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
class="flex"
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
aria-disabled="false"
<div
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r2c»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2a»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r42»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r40»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2h»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
</div>
<div
aria-controls="«r49»"
aria-describedby="«r49»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r4b»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r4d»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>
@@ -520,6 +688,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
>
<div
class="flex mx_RoomListHeaderView_title"
data-floating-ui-inert=""
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<h1
@@ -532,76 +701,117 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
class="flex"
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
aria-disabled="false"
<div
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r2m»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2k»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="«r4m»"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r4k»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r2r»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
/>
</svg>
</div>
</button>
</div>
<div
aria-controls="«r4t»"
aria-describedby="«r4t»"
aria-expanded="true"
aria-haspopup="dialog"
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
data-floating-ui-inert=""
>
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-«r4v»"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
type="button"
>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_zr2a0_17"
style="--cpd-icon-button-size: 100%;"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
<svg
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
fill-rule="evenodd"
/>
<path
d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
</svg>
</div>
</button>
</div>
<span
aria-hidden="true"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="-1"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
<span
aria-owns="«r51»"
data-floating-ui-inert=""
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
data-floating-ui-focus-guard=""
data-type="outside"
role="button"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
tabindex="0"
/>
</div>
</header>
</DocumentFragment>

3
test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap
View File

@@ -3,7 +3,8 @@
exports[`QuickSettingsButton should render the quick settings button in expanded mode 1`] = `
<DocumentFragment>
<div
aria-expanded="true"
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Quick settings"
class="mx_AccessibleButton mx_QuickSettingsButton expanded"
role="button"

1
test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View File

@@ -264,6 +264,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
</div>
<div
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Quick settings"
class="mx_AccessibleButton mx_QuickSettingsButton"
role="button"