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

New room list: fix spacing and padding (#29607)

Browse Source 
* fix(menu): reduce gap between button and button size

* fix(notification decoration): increase gap between icons

* fix(room list item): different right padding depending on the menu, notification decoration and the regular case

* test: update snapshots

* test(e2e): update snapshots
This commit is contained in:
Florian Duros
2025-03-28 11:21:31 +01:00
committed by GitHub
parent fac982811c
commit 6ae11dab52
16 changed files with 49 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
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"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
type="button"
@@ -72,7 +72,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
type="button"
@@ -119,7 +119,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room2"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
type="button"
@@ -166,7 +166,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room3"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
type="button"
@@ -213,7 +213,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room4"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
type="button"
@@ -260,7 +260,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room5"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
type="button"
@@ -307,7 +307,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room6"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
type="button"
@@ -354,7 +354,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room7"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
type="button"
@@ -401,7 +401,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room8"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
type="button"
@@ -448,7 +448,7 @@ exports[`<RoomList /> should render a room list 1`] = `
<button
aria-label="Open room room9"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
role="gridcell"
style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
type="button"

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-1x); --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-0-5x); --mx-flex-wrap: nowrap;"
>
<button
aria-disabled="false"
@@ -16,7 +16,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
data-state="closed"
id="radix-:r0:"
role="button"
style="--cpd-icon-button-size: 32px;"
style="--cpd-icon-button-size: 24px;"
tabindex="0"
type="button"
>

4
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_selected"
class="mx_RoomListItemView mx_RoomListItemView_empty mx_RoomListItemView_selected"
type="button"
>
<div
@@ -55,7 +55,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListItemView"
class="mx_RoomListItemView mx_RoomListItemView_empty"
type="button"
>
<div

14
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-1x); --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-1-5x); --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-1x); --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-1-5x); --mx-flex-wrap: nowrap;"
>
<span
class="_unread-counter_1ibqq_8"
@@ -37,7 +37,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-1x); --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-1-5x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-accent-primary)"
@@ -64,7 +64,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-1x); --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-1-5x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-tertiary)"
@@ -89,7 +89,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-1x); --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-1-5x); --mx-flex-wrap: nowrap;"
>
<span
class="_unread-counter_1ibqq_8"
@@ -105,7 +105,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-1x); --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-1-5x); --mx-flex-wrap: nowrap;"
>
<div
class="_unread-counter_1ibqq_8"
@@ -119,7 +119,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-1x); --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-1-5x); --mx-flex-wrap: nowrap;"
>
<svg
fill="var(--cpd-color-icon-critical-primary)"