Update compound and use subtleBackground

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

package.json

@@ -81,7 +81,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^5.2.3",
+        "@vector-im/compound-web": "^5.4.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/crypto/crypto.spec.ts

@@ -227,7 +227,7 @@ test.describe("Cryptography", function () {
         await verify(page, bob);
 
         // Assert that verified icon is rendered
-        await page.getByRole("button", { name: "Room members" }).click();
+        await page.getByTestId("base-card-back-button").click();
         await page.locator(".mx_RightPanelTabs").getByText("Info").click();
         await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
 

playwright/e2e/crypto/event-shields.spec.ts

@@ -132,7 +132,7 @@ test.describe("Cryptography", function () {
             // wait for the logout to propagate. Workaround for https://github.com/vector-im/element-web/issues/26263 by repeatedly closing and reopening Bob's user info.
             async function awaitOneDevice(iterations = 1) {
                 const rightPanel = page.locator(".mx_RightPanel");
-                await rightPanel.getByRole("button", { name: "Room members" }).click();
+                await rightPanel.getByTestId("base-card-back-button").click();
                 await rightPanel.getByText("Bob").click();
                 const sessionCountText = await rightPanel
                     .locator(".mx_UserInfo_devices")

playwright/e2e/read-receipts/index.ts

@@ -538,7 +538,7 @@ class Helpers {
         const threadPanel = this.page.locator(".mx_ThreadPanel");
         await expect(threadPanel).toBeVisible();
         await threadPanel.evaluate(($panel) => {
-            const $button = $panel.querySelector<HTMLElement>('.mx_BaseCard_back[aria-label="Threads"]');
+            const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');
             // If the Threads back button is present then click it - the
             // threads button can open either threads list or thread panel
             if ($button) {

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

@@ -106,7 +106,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_FilePanel")).toBeVisible();
             await expect(page.locator(".mx_FilePanel_empty")).toBeVisible();
 
-            await page.getByRole("button", { name: "Room information" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await checkRoomSummaryCard(page, ROOM_NAME);
         });
 
@@ -120,7 +120,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
-            await page.getByRole("button", { name: "Room members" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
 
             await page.locator(".mx_RightPanelTabs").getByText("Info").click();
@@ -145,7 +145,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
             await expect(page.locator(".mx_SpaceScopeHeader").getByText(SPACE_NAME)).toBeVisible();
 
-            await page.getByRole("button", { name: "Back" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
         });
     });

playwright/e2e/threads/threads.spec.ts

@@ -433,7 +433,7 @@ test.describe("Threads", () => {
         await textbox.press("Enter");
         await expect(locator.locator(".mx_EventTile_last").getByText("Hello Mr. User")).toBeAttached();
         // Close thread
-        await locator.getByRole("button", { name: "Close" }).click();
+        await locator.getByTestId("base-card-close-button").click();
 
         // Open existing thread
         locator = page
@@ -486,7 +486,7 @@ test.describe("Threads", () => {
             await textbox.press("Enter");
             await expect(threadPanel.locator(".mx_EventTile_last").getByText(threadMessage)).toBeVisible();
             // Close thread
-            await threadPanel.getByRole("button", { name: "Close" }).click();
+            await threadPanel.getByTestId("base-card-close-button").click();
         };
 
         await sendMessage("Hello Mr. Bot");

src/components/views/right_panel/BaseCard.tsx

@@ -91,7 +91,13 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
             };
             const label = backLabelForPhase(prevCard.phase) ?? _t("action|back");
             backButton = (
-                <IconButton size="28px" data-testid="base-card-back-button" onClick={onBackClick} tooltip={label}>
+                <IconButton
+                    size="28px"
+                    data-testid="base-card-back-button"
+                    onClick={onBackClick}
+                    tooltip={label}
+                    subtleBackground
+                >
                     <ChevronLeftIcon />
                 </IconButton>
             );
@@ -106,6 +112,7 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
                     onClick={onClose}
                     ref={closeButtonRef}
                     tooltip={closeLabel ?? _t("action|close")}
+                    subtleBackground
                 >
                     <CloseIcon />
                 </IconButton>

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -30,7 +30,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           />
         </div>
         <button
-          class="_icon-button_rijzz_17"
+          class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
           data-testid="base-card-close-button"
           role="button"
           style="--cpd-icon-button-size: 28px;"

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -83,7 +83,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         Profile
       </p>
       <button
-        class="_icon-button_rijzz_17"
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -247,7 +247,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         Profile
       </p>
       <button
-        class="_icon-button_rijzz_17"
+        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"

yarn.lock

@@ -2107,6 +2107,14 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.0"
 
+"@radix-ui/react-progress@^1.0.3":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-progress/-/react-progress-1.1.0.tgz#28c267885ec154fc557ec7a66cb462787312f7e2"
+  integrity sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==
+  dependencies:
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-roving-focus@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
@@ -2957,16 +2965,17 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^5.2.3":
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-5.2.3.tgz#feab8ae7623cfaa243b9be69325e1696bfa1a09c"
-  integrity sha512-KU5vAgNIFBzRHfCRK5dGAhxjrfkrUXeOYzDUNc2QjEnqGaUR3RM4c53sw0Ga1oHbOeAWoUGId+ptH3ewPdUTAQ==
+"@vector-im/compound-web@^5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-5.4.0.tgz#b95262197199c11931a8c6f5269514eb9461f187"
+  integrity sha512-+EPbr8HzlGEWSePEcPs2iQEBnjXvHGWK177SKF8IO2C7Z2Ygddxa2VTQ7oqtrUfgT+NB5IBTLyXV4Nx7FLgmMA==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@floating-ui/react-dom" "^2.0.8"
     "@radix-ui/react-context-menu" "^2.1.5"
     "@radix-ui/react-dropdown-menu" "^2.0.6"
     "@radix-ui/react-form" "^0.0.3"
+    "@radix-ui/react-progress" "^1.0.3"
     "@radix-ui/react-separator" "^1.0.3"
     "@radix-ui/react-slot" "^1.0.2"
     "@radix-ui/react-tooltip" "^1.0.6"