Room list: update the visuals in order to have better contrast (#32421)

* fix(sc): use correct icon size for room list icons

* feat(sc): implement new selection and hover design for room list item

* feat(sc): set room list item height

* chore(sc): add story for long room and message preview

* fix(sc): use correct letter-spacing for room list item

* feat(sc): use new padding for room list filters

* feat(sc): update room list header style

* test(sc): update unit tests

* test(sc): update visual tests

* test: update playwright screenshots

* doc: update figma link in item story

* test: fix sliding sync test

The notification pop up was at the top of the room list filters (less
top padding) and it was unable to click on the People filter.

* chore: fix `VirtuaalizedRoomListView` comment

* test: update playwright screenshot

* fix(sc): add ellipsis on room name

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.module.css

@@ -6,8 +6,13 @@
  */
 
 .header {
-    flex: 0 0 60px;
+    min-height: 60px;
-    padding: 0 var(--cpd-space-3x);
+    padding: 0 var(--cpd-space-4x) 0 var(--cpd-space-3x);
+}
+
+.container {
+    flex: 1;
+    padding-bottom: var(--cpd-space-3x);
 }
 
 .title {

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx

@@ -130,30 +130,33 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
             as="header"
             className={styles.header}
             aria-label={_t("room|context_menu|title")}
-            justify="space-between"
+            align="end"
-            align="center"
             data-testid="room-list-header"
         >
-            <Flex className={styles.title} align="center" gap="var(--cpd-space-1x)">
+            <Flex className={styles.container} justify="space-between" align="center" gap="var(--cpd-space-3x)">
-                <H1 size="sm" title={title}>
+                <Flex className={styles.title} align="center" gap="var(--cpd-space-1x)">
-                    {title}
+                    <H1 size="sm" title={title}>
-                </H1>
+                        {title}
-                {displaySpaceMenu && <SpaceMenuView vm={vm} />}
+                    </H1>
-            </Flex>
+                    {displaySpaceMenu && <SpaceMenuView vm={vm} />}
-            <Flex align="center" gap="var(--cpd-space-2x)">
+                </Flex>
-                <OptionMenuView vm={vm} />
+                <Flex align="center" gap="var(--cpd-space-2x)">
+                    <OptionMenuView vm={vm} />
 
-                {/* If we don't display the compose menu, it means that the user can only send DM */}
+                    {/* If we don't display the compose menu, it means that the user can only send DM */}
-                {displayComposeMenu ? (
+                    {displayComposeMenu ? (
-                    <ComposeMenuView vm={vm} />
+                        <ComposeMenuView vm={vm} />
-                ) : (
+                    ) : (
-                    <IconButton
+                        <IconButton
-                        onClick={(e) => vm.createChatRoom(e.nativeEvent)}
+                            size="28px"
-                        tooltip={_t("action|new_conversation")}
+                            style={{ padding: "4px" }}
-                    >
+                            onClick={(e) => vm.createChatRoom(e.nativeEvent)}
-                        <ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            tooltip={_t("action|new_conversation")}
-                    </IconButton>
+                        >
-                )}
+                            <ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                        </IconButton>
+                    )}
+                </Flex>
             </Flex>
         </Flex>
     );

packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap

@@ -6,123 +6,128 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
     aria-label="Room options"
     class="flex header"
     data-testid="room-list-header"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex title"
+      class="flex container"
-      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: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
-      <h1
+      <div
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="flex title"
-        title="Rooms"
+        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;"
       >
-        Rooms
+        <h1
-      </h1>
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
-      <button
+          title="Rooms"
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Open space menu"
-        class="_icon-button_1215g_8 button"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_0_"
-        role="button"
-        style="--cpd-icon-button-size: 24px; padding: 2px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
         >
-          <svg
+          Rooms
-            fill="currentColor"
+        </h1>
-            height="1em"
+        <button
-            viewBox="0 0 24 24"
+          aria-disabled="false"
-            width="1em"
+          aria-expanded="false"
-            xmlns="http://www.w3.org/2000/svg"
+          aria-haspopup="menu"
-          >
+          aria-label="Open space menu"
-            <path
+          class="_icon-button_1215g_8 button"
-              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+          data-kind="primary"
-            />
+          data-state="closed"
-          </svg>
+          id="radix-_r_0_"
-        </div>
+          role="button"
-      </button>
+          style="--cpd-icon-button-size: 24px; padding: 2px;"
-    </div>
+          tabindex="0"
-    <div
+          type="button"
-      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"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Room Options"
-        aria-labelledby="_r_4_"
-        class="_icon-button_1215g_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_2_"
-        role="button"
-        style="--cpd-icon-button-size: 28px; padding: 4px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
         >
-          <svg
+          <div
-            fill="currentColor"
+            class="_indicator-icon_147l5_17"
-            height="1em"
+            style="--cpd-icon-button-size: 100%;"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              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"
+              fill="currentColor"
-            />
+              height="1em"
-          </svg>
+              viewBox="0 0 24 24"
-        </div>
+              width="1em"
-      </button>
+              xmlns="http://www.w3.org/2000/svg"
-      <button
+            >
-        aria-disabled="false"
+              <path
-        aria-expanded="false"
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-        aria-haspopup="menu"
+              />
-        aria-labelledby="_r_b_"
+            </svg>
-        class="_icon-button_1215g_8"
+          </div>
-        data-kind="primary"
+        </button>
-        data-state="closed"
+      </div>
-        id="radix-_r_9_"
+      <div
-        role="button"
+        class="flex"
-        style="--cpd-icon-button-size: 36px; padding: 6px;"
+        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;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_147l5_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="_r_4_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-_r_2_"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            aria-hidden="true"
+            class="_indicator-icon_147l5_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              fill="currentColor"
-              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"
+              height="1em"
-              fill-rule="evenodd"
+              viewBox="0 0 24 24"
-            />
+              width="1em"
-            <path
+              xmlns="http://www.w3.org/2000/svg"
-              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"
+            >
-            />
+              <path
-          </svg>
+                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"
-        </div>
+              />
-      </button>
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-labelledby="_r_b_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-_r_9_"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              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>
     </div>
   </header>
 </div>
@@ -134,118 +139,123 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
     aria-label="Room options"
     class="flex header"
     data-testid="room-list-header"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex title"
+      class="flex container"
-      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: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
-      <h1
+      <div
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="flex title"
-        title="Rooms"
+        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;"
       >
-        Rooms
+        <h1
-      </h1>
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
-      <button
+          title="Rooms"
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Open space menu"
-        class="_icon-button_1215g_8 button"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_i_"
-        role="button"
-        style="--cpd-icon-button-size: 24px; padding: 2px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
         >
-          <svg
+          Rooms
-            fill="currentColor"
+        </h1>
-            height="1em"
+        <button
-            viewBox="0 0 24 24"
+          aria-disabled="false"
-            width="1em"
+          aria-expanded="false"
-            xmlns="http://www.w3.org/2000/svg"
+          aria-haspopup="menu"
-          >
+          aria-label="Open space menu"
-            <path
+          class="_icon-button_1215g_8 button"
-              d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+          data-kind="primary"
-            />
+          data-state="closed"
-          </svg>
+          id="radix-_r_i_"
-        </div>
+          role="button"
-      </button>
+          style="--cpd-icon-button-size: 24px; padding: 2px;"
-    </div>
+          tabindex="0"
-    <div
+          type="button"
-      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"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Room Options"
-        aria-labelledby="_r_m_"
-        class="_icon-button_1215g_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_k_"
-        role="button"
-        style="--cpd-icon-button-size: 28px; padding: 4px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
         >
-          <svg
+          <div
-            fill="currentColor"
+            class="_indicator-icon_147l5_17"
-            height="1em"
+            style="--cpd-icon-button-size: 100%;"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              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"
+              fill="currentColor"
-            />
+              height="1em"
-          </svg>
+              viewBox="0 0 24 24"
-        </div>
+              width="1em"
-      </button>
+              xmlns="http://www.w3.org/2000/svg"
-      <button
+            >
-        aria-labelledby="_r_r_"
+              <path
-        class="_icon-button_1215g_8"
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-        data-kind="primary"
+              />
-        role="button"
+            </svg>
-        style="--cpd-icon-button-size: 32px;"
+          </div>
-        tabindex="0"
+        </button>
+      </div>
+      <div
+        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;"
       >
-        <div
+        <button
-          class="_indicator-icon_147l5_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="_r_m_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-_r_k_"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            aria-hidden="true"
+            class="_indicator-icon_147l5_17"
-            color="var(--cpd-color-icon-secondary)"
+            style="--cpd-icon-button-size: 100%;"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              fill="currentColor"
-              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"
+              height="1em"
-              fill-rule="evenodd"
+              viewBox="0 0 24 24"
-            />
+              width="1em"
-            <path
+              xmlns="http://www.w3.org/2000/svg"
-              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"
+            >
-            />
+              <path
-          </svg>
+                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"
-        </div>
+              />
-      </button>
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-labelledby="_r_r_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              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>
     </div>
   </header>
 </div>
@@ -257,92 +267,97 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
     aria-label="Room options"
     class="flex header"
     data-testid="room-list-header"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex title"
+      class="flex container"
-      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: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
-      <h1
+      <div
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="flex title"
-        title="Rooms"
+        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;"
       >
-        Rooms
+        <h1
-      </h1>
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
-    </div>
+          title="Rooms"
-    <div
-      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"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Room Options"
-        aria-labelledby="_r_14_"
-        class="_icon-button_1215g_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_12_"
-        role="button"
-        style="--cpd-icon-button-size: 28px; padding: 4px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
         >
-          <svg
+          Rooms
-            fill="currentColor"
+        </h1>
-            height="1em"
+      </div>
-            viewBox="0 0 24 24"
+      <div
-            width="1em"
+        class="flex"
-            xmlns="http://www.w3.org/2000/svg"
+        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;"
-          >
-            <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-labelledby="_r_1b_"
-        class="_icon-button_1215g_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_19_"
-        role="button"
-        style="--cpd-icon-button-size: 36px; padding: 6px;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_147l5_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="_r_14_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-_r_12_"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            aria-hidden="true"
+            class="_indicator-icon_147l5_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              fill="currentColor"
-              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"
+              height="1em"
-              fill-rule="evenodd"
+              viewBox="0 0 24 24"
-            />
+              width="1em"
-            <path
+              xmlns="http://www.w3.org/2000/svg"
-              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"
+            >
-            />
+              <path
-          </svg>
+                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"
-        </div>
+              />
-      </button>
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-labelledby="_r_1b_"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-_r_19_"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              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>
     </div>
   </header>
 </div>

packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx

@@ -45,8 +45,8 @@ export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element {
             title={_t("action|open_menu")}
             align="start"
             trigger={
-                // 36px button with a 24px icon
+                // 28px button with a 20px icon
-                <IconButton size="36px" style={{ padding: "6px" }} tooltip={_t("action|new_conversation")}>
+                <IconButton size="28px" style={{ padding: "4px" }} tooltip={_t("action|new_conversation")}>
                     <ComposeIcon aria-hidden />
                 </IconButton>
             }

packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<ComposeMenuView /> > should match snapshot 1`] = `
     data-state="closed"
     id="radix-_r_0_"
     role="button"
-    style="--cpd-icon-button-size: 36px; padding: 6px;"
+    style="--cpd-icon-button-size: 28px; padding: 4px;"
     tabindex="0"
     type="button"
   >

packages/shared-components/src/room-list/RoomListItemView/RoomListItemMoreOptionsMenu.tsx

@@ -54,6 +54,7 @@ export function RoomListItemMoreOptionsMenu({ vm }: RoomListItemMoreOptionsMenuP
                     tooltip={_t("room_list|room|more_options")}
                     aria-label={_t("room_list|room|more_options")}
                     size="24px"
+                    style={{ padding: "2px" }}
                 >
                     <OverflowHorizontalIcon />
                 </IconButton>

packages/shared-components/src/room-list/RoomListItemView/RoomListItemNotificationMenu.tsx

@@ -51,6 +51,7 @@ export function RoomListItemNotificationMenu({ vm }: RoomListItemNotificationMen
             trigger={
                 <IconButton
                     size="24px"
+                    style={{ padding: "2px" }}
                     tooltip={_t("room_list|notification_options")}
                     aria-label={_t("room_list|notification_options")}
                 >

packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css

@@ -5,15 +5,6 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-/**
- * The RoomListItem has the following structure:
- * button--------------------------------------------------|
- * | <-12px-> container------------------------------------|
- * |          | room avatar <-8px-> content----------------|
- * |          |                      | room_name <- 20px ->|
- * |          |                      | --------------------| <-- border
- * |-------------------------------------------------------|
- */
 .roomListItem {
     /* Remove button default style */
     background: unset;
@@ -21,13 +12,17 @@
     padding: 0;
     text-align: unset;
 
+    /* Needed to position the selected marker */
+    position: relative;
     cursor: pointer;
-    height: 48px;
+    height: 44px;
     width: 100%;
+    /* Gap between items, accounted for in ROOM_LIST_ITEM_HEIGHT */
+    margin-bottom: var(--cpd-space-2x);
 
-    padding-left: var(--cpd-space-3x);
     font: var(--cpd-font-body-md-regular);
-    color: var(--cpd-color-text-primary);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+    color: var(--cpd-color-text-secondary);
 
     /* Hide the menu by default */
     .hoverMenu {
@@ -42,7 +37,16 @@
 .roomListItem[data-state="open"],
 /* When the options and notifications menu are opened */
 .roomListItem:has(.hoverMenu > button[data-state="open"]) {
-    background-color: var(--cpd-color-bg-action-secondary-hovered);
+    color: var(--cpd-color-text-primary);
+
+    .container {
+        background-color: var(--cpd-color-bg-action-tertiary-hovered);
+    }
+
+    /* Preserve selected background on hover/focus/menu-open states */
+    &.selected .container {
+        background-color: var(--cpd-color-bg-action-tertiary-selected);
+    }
 
     .hoverMenu {
         display: flex;
@@ -52,52 +56,57 @@
     .notificationDecoration {
         display: none;
     }
+}
 
-    /**
+.container {
-     * The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
+    flex: 1;
-     * the icon size of the menu is 18px instead of 20px with a different internal padding
+    height: 100%;
-     * We need to use 18px to align the icon with the others icons
+    margin: 0 var(--cpd-space-3x);
-     * 18px is not available in compound spacing
+    padding: 0 var(--cpd-space-2x);
-     */
+    border-radius: 8px;
-    .content {
+    min-width: 0;
-        padding-right: 18px;
-    }
 }
 
 .content {
-    height: 100%;
     flex: 1;
-    /* The border is only under the room name and the future hover menu  */
-    border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
-    box-sizing: border-box;
     min-width: 0;
-    padding-right: var(--cpd-space-5x);
 }
 
 .text {
     min-width: 0;
 }
 
+.ellipsis,
 .roomName {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.messagePreview {
-    font: var(--cpd-font-body-sm-regular);
-    color: var(--cpd-color-text-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .selected {
-    background-color: var(--cpd-color-bg-action-secondary-pressed);
+    .container {
+        background-color: var(--cpd-color-bg-action-tertiary-selected);
+        font: var(--cpd-font-body-md-semibold);
+        color: var(--cpd-color-text-primary);
+    }
+
+    /* Visual marker at the left on the container when the room is selected */
+    .container::before {
+        content: "";
+        position: absolute;
+        /* Marker height is 34px, room list item height is 44px. So position is at 5px and top and bottom */
+        top: 5px;
+        bottom: 5px;
+        left: 0;
+        width: 4px;
+        background-color: var(--cpd-color-bg-accent-rest);
+        border-radius: 0 8px 8px 0;
+    }
 }
 
 .bold .roomName {
     font: var(--cpd-font-body-md-semibold);
+    color: var(--cpd-color-text-primary);
 }
 
 /* Set icon color for hover menu buttons */

packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx

@@ -102,7 +102,7 @@ const meta = {
     parameters: {
         design: {
             type: "figma",
-            url: "https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel?node-id=101-13062",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=10800-21153&t=gFDc2D7TMEffSSCo-0",
         },
     },
 } satisfies Meta<typeof RoomListItemWrapper>;
@@ -112,6 +112,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const LongContent: Story = {
+    args: {
+        name: "Loooooooooooooooooooooooooooooooooooooong name",
+        messagePreview: "Loooooooooooooooooooooooooooooooooooooong preview",
+    },
+};
+
 export const Selected: Story = {
     args: {
         isSelected: true,

packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx

@@ -7,6 +7,7 @@
 
 import React, { type JSX, memo, useEffect, useRef, type ReactNode } from "react";
 import classNames from "classnames";
+import { Text } from "@vector-im/compound-web";
 
 import { Flex } from "../../utils/Flex";
 import { NotificationDecoration, type NotificationDecorationData } from "./NotificationDecoration";
@@ -174,31 +175,33 @@ export const RoomListItemView = memo(function RoomListItemView({
             tabIndex={isFocused ? 0 : -1}
             {...props}
         >
-            {renderAvatar(item.room)}
+            <Flex className={styles.container} gap="var(--cpd-space-3x)" align="center">
-            <Flex className={styles.content} gap="var(--cpd-space-2x)" align="center" justify="space-between">
+                {renderAvatar(item.room)}
-                {/* We truncate the room name when too long. Title here is to show the full name on hover */}
+                <Flex className={styles.content} gap="var(--cpd-space-2x)" align="center" justify="space-between">
-                <div className={styles.text}>
+                    {/* We truncate the room name when too long. Title here is to show the full name on hover */}
-                    <div className={styles.roomName} title={item.name} data-testid="room-name">
+                    <div className={styles.ellipsis}>
-                        {item.name}
+                        <div className={styles.roomName} title={item.name} data-testid="room-name">
-                    </div>
+                            {item.name}
-                    {item.messagePreview && (
-                        <div className={styles.messagePreview} title={item.messagePreview}>
-                            {item.messagePreview}
                         </div>
+                        {item.messagePreview && (
+                            <Text as="div" size="sm" className={styles.ellipsis} title={item.messagePreview}>
+                                {item.messagePreview}
+                            </Text>
+                        )}
+                    </div>
+                    {(item.showMoreOptionsMenu || item.showNotificationMenu) && (
+                        <RoomListItemHoverMenu
+                            showMoreOptionsMenu={item.showMoreOptionsMenu}
+                            showNotificationMenu={item.showNotificationMenu}
+                            vm={vm}
+                        />
                     )}
-                </div>
-                {(item.showMoreOptionsMenu || item.showNotificationMenu) && (
-                    <RoomListItemHoverMenu
-                        showMoreOptionsMenu={item.showMoreOptionsMenu}
-                        showNotificationMenu={item.showNotificationMenu}
-                        vm={vm}
-                    />
-                )}
 
-                {/* aria-hidden because we summarise the unread count/notification status in a11yLabel */}
+                    {/* aria-hidden because we summarise the unread count/notification status in a11yLabel */}
-                <div className={styles.notificationDecoration} aria-hidden={true}>
+                    <div className={styles.notificationDecoration} aria-hidden={true}>
-                    <NotificationDecoration {...item.notification} />
+                        <NotificationDecoration {...item.notification} />
-                </div>
+                    </div>
+                </Flex>
             </Flex>
         </Flex>
     );

packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.module.css

@@ -6,7 +6,7 @@
  */
 
 .roomListPrimaryFilters {
-    padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-2x) var(--cpd-space-3x);
+    padding: 0 var(--cpd-space-4x) var(--cpd-space-5x) var(--cpd-space-3x);
 }
 
 /* Hide filters that are wrapping when collapsed */

packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx

@@ -34,7 +34,7 @@ const {
 const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
     return render(component, {
         wrapper: ({ children }) => (
-            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}>
+            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 52 }}>
                 {children}
             </VirtuosoMockContext.Provider>
         ),

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx

@@ -18,7 +18,7 @@ const { Default } = composeStories(stories);
 const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
     return render(component, {
         wrapper: ({ children }) => (
-            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 48 }}>
+            <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 52 }}>
                 {children}
             </VirtuosoMockContext.Provider>
         ),

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx

@@ -53,8 +53,8 @@ export interface VirtualizedRoomListViewProps {
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
-/** Height of a single room list item in pixels */
+/** Height of a single room list item in pixels (44px item + 8px margin bottom) */
-const ROOM_LIST_ITEM_HEIGHT = 48;
+const ROOM_LIST_ITEM_HEIGHT = 52;
 
 /**
  * Type for context used in ListView

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -71,7 +71,9 @@ test.describe("Sliding Sync", () => {
     });
 
     // Load the user fixture for all tests
-    test.beforeEach(({ user }) => {});
+    test.beforeEach(async ({ app, user }) => {
+        await app.closeNotificationToast();
+    });
 
     test("should render the Rooms list in reverse chronological order by default and allowing sorting A-Z", async ({
         page,