Update RoomSummaryCard navigation links

cypress/e2e/crypto/crypto.spec.ts

@@ -116,7 +116,7 @@ const verify = function (this: CryptoTestContext) {
     const bobsVerificationRequestPromise = waitForVerificationRequest(this.bob);
 
     openRoomInfo().within(() => {
-        cy.findByRole("button", { name: /People \d/ }).click(); // \d is the number of the room members
+        cy.findByRole("menuitem", { name: "People" }).click();
         cy.findByText("Bob").click();
         cy.findByRole("button", { name: "Verify" }).click();
         cy.findByRole("button", { name: "Start Verification" }).click();

cypress/e2e/invite/invite-dialog.spec.ts

@@ -47,16 +47,8 @@ describe("Invite dialog", function () {
         // Open the room info panel
         cy.findByRole("button", { name: "Room info" }).click();
 
-        cy.get(".mx_RightPanel").within(() => {
-            // Click "People" button on the panel
-            // Regex pattern due to the string of "mx_BaseCard_Button_sublabel"
-            cy.findByRole("button", { name: /People/ }).click();
-        });
-
         cy.get(".mx_BaseCard").within(() => {
-            // Click "Invite to this room" button
-            // Regex pattern due to "mx_MemberList_invite span::before"
-            cy.findByRole("button", { name: /Invite to this room/ }).click();
+            cy.findByRole("menuitem", { name: "Invite" }).click();
         });
 
         cy.get(".mx_InviteDialog_other").within(() => {

cypress/e2e/lazy-loading/lazy-loading.spec.ts

@@ -121,7 +121,7 @@ describe("Lazy Loading", () => {
         });
 
         cy.get(".mx_RoomSummaryCard").within(() => {
-            cy.findByRole("button", { name: /People \d/ }).click(); // \d represents the number of the room members
+            cy.findByRole("menuitem", { name: "People" }).click(); // \d represents the number of the room members
         });
     }
 

cypress/e2e/polls/pollHistory.spec.ts

@@ -77,7 +77,7 @@ describe("Poll history", () => {
     function openPollHistory(): void {
         cy.findByRole("button", { name: "Room info" }).click();
         cy.get(".mx_RoomSummaryCard").within(() => {
-            cy.findByRole("button", { name: "Poll history" }).click();
+            cy.findByRole("menuitem", { name: "Poll history" }).click();
         });
     }
 

cypress/e2e/right-panel/file-panel.spec.ts

@@ -61,7 +61,7 @@ describe("FilePanel", () => {
 
         // Open the file panel
         viewRoomSummaryByName(ROOM_NAME);
-        cy.get(".mx_RoomSummaryCard_icon_files").click();
+        cy.findByRole("menuitem", { name: "Files" }).click();
         cy.get(".mx_FilePanel").should("have.length", 1);
     });
 

cypress/e2e/right-panel/right-panel.spec.ts

@@ -103,21 +103,21 @@ describe("RightPanel", () => {
         it("should handle viewing export chat", () => {
             viewRoomSummaryByName(ROOM_NAME);
 
-            cy.findByRole("button", { name: "Export chat" }).click();
+            cy.findByRole("menuitem", { name: "Export Chat" }).click();
             cy.get(".mx_ExportDialog").should("have.length", 1);
         });
 
         it("should handle viewing share room", () => {
             viewRoomSummaryByName(ROOM_NAME);
 
-            cy.findByRole("button", { name: "Share room" }).click();
+            cy.findByRole("menuitem", { name: "Copy link" }).click();
             cy.get(".mx_ShareDialog").should("have.length", 1);
         });
 
         it("should handle viewing room settings", () => {
             viewRoomSummaryByName(ROOM_NAME);
 
-            cy.findByRole("button", { name: "Room settings" }).click();
+            cy.findByRole("menuitem", { name: "Settings" }).click();
             cy.get(".mx_RoomSettingsDialog").should("have.length", 1);
             cy.get(".mx_Dialog_title").within(() => {
                 cy.findByText("Room Settings - " + ROOM_NAME).should("exist");
@@ -127,7 +127,7 @@ describe("RightPanel", () => {
         it("should handle viewing files", () => {
             viewRoomSummaryByName(ROOM_NAME);
 
-            cy.findByRole("button", { name: "Files" }).click();
+            cy.findByRole("menuitem", { name: "Files" }).click();
             cy.get(".mx_FilePanel").should("have.length", 1);
             cy.get(".mx_FilePanel_empty").should("have.length", 1);
 
@@ -138,8 +138,7 @@ describe("RightPanel", () => {
         it("should handle viewing room member", () => {
             viewRoomSummaryByName(ROOM_NAME);
 
-            // \d represents the number of the room members inside mx_BaseCard_Button_sublabel
-            cy.findByRole("button", { name: /People \d/ }).click();
+            cy.findByRole("menuitem", { name: "People" }).click();
             cy.get(".mx_MemberList").should("have.length", 1);
 
             getMemberTileByName(NAME).click();

package.json

@@ -70,7 +70,7 @@
         "@sentry/tracing": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^0.0.7",
-        "@vector-im/compound-web": "0.6.3",
+        "@vector-im/compound-web": "0.8.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

res/css/views/right_panel/_BaseCard.pcss

@@ -158,11 +158,18 @@ limitations under the License.
 .mx_BaseCard_close {
     flex-shrink: 0;
     position: relative;
+    // @TODO(kerrya) background colours here are not semantic
+    // these buttons to be replaced with IconButton after secondary variant is added
+    // https://github.com/vector-im/compound/issues/279
     background-color: var(--cpd-color-bg-subtle-secondary);
     width: var(--BaseCard_header-button-size);
     height: var(--BaseCard_header-button-size);
     border-radius: 50%;
 
+    &:hover {
+        background-color: var(--cpd-color-bg-subtle-primary);
+    }
+
     &::before {
         content: "";
         position: absolute;

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_RoomSummaryCard {
     .mx_RoomSummaryCard_container {
         text-align: center;
-        margin-top: $spacing-20;
+        margin: $spacing-20 var(--cpd-space-4x) 0;
     }
 
     .mx_RoomSummaryCard_roomName,
@@ -29,10 +29,6 @@ limitations under the License.
         overflow: hidden;
     }
 
-    .mx_RoomSummaryCard_roomName {
-        margin: $spacing-12 0 $spacing-4;
-    }
-
     .mx_RoomSummaryCard_alias {
         text-overflow: ellipsis;
     }
@@ -203,42 +199,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_RoomSummaryCard_icon_people::before {
-    mask-image: url("$(res)/img/element-icons/room/members.svg");
-}
-
-.mx_RoomSummaryCard_icon_files::before {
-    mask-image: url("$(res)/img/element-icons/room/files.svg");
-}
-
-.mx_RoomSummaryCard_icon_pins::before {
-    mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
-}
-
-.mx_RoomSummaryCard_icon_threads::before {
-    mask-image: url("$(res)/img/element-icons/message/thread.svg");
-}
-
-.mx_RoomSummaryCard_icon_share::before {
-    mask-image: url("$(res)/img/element-icons/room/share.svg");
-}
-
-.mx_RoomSummaryCard_icon_settings::before {
-    mask-image: url("$(res)/img/element-icons/settings.svg");
-}
-
-.mx_RoomSummaryCard_icon_export::before {
-    mask-image: url("$(res)/img/element-icons/export.svg");
-}
-
-.mx_RoomSummaryCard_icon_poll::before {
-    mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
-}
-
-.mx_RoomSummaryCard_icon_search::before {
-    mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
-}
-
 .mx_RoomSummaryCard_searchBtn {
     background: var(--cpd-color-bg-canvas-default);
     color: var(--cpd-color-icon-primary);
@@ -248,9 +208,12 @@ limitations under the License.
     height: 36px;
     padding: var(--cpd-space-2x);
     cursor: pointer;
-    transition: all 0.3s ease;
 
     &:hover {
         background: var(--cpd-color-bg-subtle-primary);
     }
 }
+
+.mx_RoomSummaryCard_roomName {
+    margin: $spacing-12 0 $spacing-4;
+}

src/components/views/context_menus/RoomContextMenu.tsx

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React, { useContext } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
 import IconizedContextMenu, {
@@ -30,7 +29,6 @@ import { ButtonEvent } from "../elements/AccessibleButton";
 import { DefaultTagID, TagID } from "../../../stores/room-list/models";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import dis from "../../../dispatcher/dispatcher";
-import RoomListActions from "../../../actions/RoomListActions";
 import { EchoChamber } from "../../../stores/local-echo/EchoChamber";
 import { RoomNotifState } from "../../../RoomNotifs";
 import Modal from "../../../Modal";
@@ -52,6 +50,7 @@ import { SdkContextClass } from "../../../contexts/SDKContext";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
 import { DeveloperToolsOption } from "./DeveloperToolsOption";
+import { tagRoom } from "../../../utils/room/tagRoom";
 
 interface IProps extends IContextMenuProps {
     room: Room;
@@ -333,15 +332,7 @@ const RoomContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) {
-            const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
-            const isApplied = RoomListStore.instance.getTagsForRoom(room).includes(tagId);
-            const removeTag = isApplied ? tagId : inverseTag;
-            const addTag = isApplied ? null : tagId;
-            dis.dispatch(RoomListActions.tagRoom(cli, room, removeTag, addTag, 0));
-        } else {
-            logger.warn(`Unexpected tag ${tagId} applied to ${room.roomId}`);
-        }
+        tagRoom(room, tagId);
 
         const action = getKeyBindingsManager().getAccessibilityAction(ev as React.KeyboardEvent);
         switch (action) {