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

New room list: rework spacing of room list item (#29965)

Browse Source 
* feat: rework spacing of room list item

* test: update snapshot

* test(e2e): regenerate room list panel screenshots

* test(e2e): regenerate room list screenshots

* test(e2e): update filter screenshot
This commit is contained in:
Florian Duros
2025-05-16 14:29:52 +02:00
committed by GitHub
parent 4dcde7ec7a
commit b56b0f2bd0
29 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
View File

@@ -25,7 +25,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room0"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
tabindex="0"
@@ -56,7 +56,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -77,7 +77,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
tabindex="-1"
@@ -108,7 +108,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -129,7 +129,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room2"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
tabindex="-1"
@@ -160,7 +160,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -181,7 +181,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room3"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
tabindex="-1"
@@ -212,7 +212,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -233,7 +233,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room4"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
tabindex="-1"
@@ -264,7 +264,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -285,7 +285,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room5"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
tabindex="-1"
@@ -316,7 +316,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -337,7 +337,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room6"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
tabindex="-1"
@@ -368,7 +368,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -389,7 +389,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room7"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
tabindex="-1"
@@ -420,7 +420,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -441,7 +441,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room8"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
tabindex="-1"
@@ -472,7 +472,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -493,7 +493,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room9"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
tabindex="-1"
@@ -524,7 +524,7 @@ exports[`<RoomList /> should render a room list 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"

4
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
<DocumentFragment>
<div
class="mx_Flex mx_RoomListItemMenuView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
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;"
>
<button
aria-disabled="false"
@@ -79,7 +79,7 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
<DocumentFragment>
<div
class="mx_Flex mx_RoomListItemMenuView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
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;"
>
<button
aria-disabled="false"

18
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
<button
aria-label="Open room room1"
aria-selected="true"
class="mx_RoomListItemView mx_RoomListItemView_empty mx_RoomListItemView_selected"
class="mx_RoomListItemView mx_RoomListItemView_selected"
tabindex="-1"
type="button"
>
@@ -34,7 +34,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -60,7 +60,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_notification_decoration"
class="mx_RoomListItemView"
tabindex="-1"
type="button"
>
@@ -89,7 +89,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -108,7 +108,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
aria-hidden="true"
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<span
class="_unread-counter_9mg0k_8"
@@ -127,7 +127,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
tabindex="-1"
type="button"
>
@@ -156,7 +156,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"
@@ -182,7 +182,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView mx_RoomListItemView_empty"
class="mx_RoomListItemView"
tabindex="-1"
type="button"
>
@@ -211,7 +211,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
</span>
<div
class="mx_Flex mx_RoomListItemView_content"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
>
<div
class="mx_RoomListItemView_text"

16
test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`<NotificationDecoration /> should render the activity decoration 1`] =
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<div
class="_unread_1k06b_8"
@@ -21,7 +21,7 @@ exports[`<NotificationDecoration /> should render the invitation decoration 1`]
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-accent-primary)"
@@ -43,7 +43,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-accent-primary)"
@@ -70,7 +70,7 @@ exports[`<NotificationDecoration /> should render the muted decoration 1`] = `
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-tertiary)"
@@ -95,7 +95,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<span
class="_unread-counter_9mg0k_8"
@@ -111,7 +111,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<div
class="_unread-counter_9mg0k_8"
@@ -125,7 +125,7 @@ exports[`<NotificationDecoration /> should render the unset message decoration 1
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-critical-primary)"
@@ -147,7 +147,7 @@ exports[`<NotificationDecoration /> should render the video decoration 1`] = `
<div
class="mx_Flex"
data-testid="notification-decoration"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-accent-primary)"