From d335a307bb63ed8032d0ffeb175a95ff957165b4 Mon Sep 17 00:00:00 2001 From: Will Hunt <2072976+Half-Shot@users.noreply.github.com> Date: Mon, 27 Apr 2026 13:54:00 +0100 Subject: [PATCH] Update compound-web to 9.3.0 and update Buttons from "sm" to "md". (#3926) * Update compound-web to 9.3.0 and update Buttons from "sm" to "md". * Clean up the liast bits * Update snaps too * fix test, need to dismiss a new dialog --------- Co-authored-by: Valere --- package.json | 2 +- playwright/widget/test-helpers.ts | 17 +++++++++++++++++ pnpm-lock.yaml | 10 +++++----- src/RTCConnectionStats.tsx | 4 ++-- src/button/Button.tsx | 12 ++++++------ src/button/InviteButton.tsx | 2 +- src/button/ReactionToggleButton.tsx | 2 +- .../ReactionToggleButton.test.tsx.snap | 10 +++++----- src/components/CallFooter.tsx | 2 +- src/input/AvatarInputField.tsx | 4 ++-- src/room/EarpieceOverlay.tsx | 2 +- src/room/LobbyView.tsx | 2 +- .../GroupCallErrorBoundary.test.tsx.snap | 18 +++++++++--------- .../__snapshots__/InCallView.test.tsx.snap | 12 ++++++------ 14 files changed, 58 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index a6601382..f2548099 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "@typescript-eslint/parser": "^8.31.0", "@use-gesture/react": "^10.2.11", "@vector-im/compound-design-tokens": "^10.0.0", - "@vector-im/compound-web": "^9.0.0", + "@vector-im/compound-web": "^9.3.0", "@vitejs/plugin-react": "^4.0.1", "@vitest/coverage-v8": "^4.0.18", "babel-plugin-transform-vite-meta-env": "^1.0.3", diff --git a/playwright/widget/test-helpers.ts b/playwright/widget/test-helpers.ts index b47588ce..9167412e 100644 --- a/playwright/widget/test-helpers.ts +++ b/playwright/widget/test-helpers.ts @@ -122,6 +122,7 @@ export class TestHelpers { await this.maybeDismissBrowserNotSupportedToast(page); await this.maybeDismissServiceWorkerWarningToast(page); + await this.maybeDismissBackupChat(page); await TestHelpers.setDevToolElementCallDevUrl(page); @@ -170,6 +171,22 @@ export class TestHelpers { } } + private static async maybeDismissBackupChat(page: Page): Promise { + const toast = page + .locator(".mx_Toast_toast") + .getByText("Back up your chats"); + + try { + await expect(toast).toBeVisible({ timeout: 700 }); + await page + .locator(".mx_Toast_toast") + .getByRole("button", { name: "Dismiss" }) + .click(); + } catch { + // toast not visible, continue as normal + } + } + public static async maybeDismissKeyBackupToast(page: Page): Promise { const toast = page .locator(".mx_Toast_toast") diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ce574ca3..84f0a087 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -148,8 +148,8 @@ importers: specifier: ^10.0.0 version: 10.1.0(@types/react@19.2.14)(react@19.2.5) '@vector-im/compound-web': - specifier: ^9.0.0 - version: 9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5) + specifier: ^9.3.0 + version: 9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5) '@vitejs/plugin-react': specifier: ^4.0.1 version: 4.7.0(vite@8.0.8(@types/node@24.12.2)(esbuild@0.27.7)(jiti@2.6.1)(sass@1.99.0)(terser@5.46.1)(yaml@2.8.3)) @@ -3105,8 +3105,8 @@ packages: react: optional: true - '@vector-im/compound-web@9.2.0': - resolution: {integrity: sha512-jHbABGEQ2yqNtm5xRIkklQs198VEfSk9AJQolI+e4WSJ0xg8Ozyv9t9KIuKQAmjdSV9aow5G6hDE861XB6DQgw==} + '@vector-im/compound-web@9.3.0': + resolution: {integrity: sha512-Elu4Uw8RbfP6JaudQYkVibALYT6qpwubqfKhteTxIPWBWzSYM+P5T+B1uX+ra+grNcXwXUt2xfMxpqYQsAHgYA==} peerDependencies: '@fontsource/inconsolata': ^5 '@fontsource/inter': ^5 @@ -9596,7 +9596,7 @@ snapshots: '@types/react': 19.2.14 react: 19.2.5 - '@vector-im/compound-web@9.2.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)': + '@vector-im/compound-web@9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.0(@types/react@19.2.14)(react@19.2.5))(react-dom@19.2.5(react@19.2.5))(react@19.2.5)': dependencies: '@floating-ui/react': 0.27.19(react-dom@19.2.5(react@19.2.5))(react@19.2.5) '@fontsource/inconsolata': 5.2.8 diff --git a/src/RTCConnectionStats.tsx b/src/RTCConnectionStats.tsx index f62a1e4d..ea9df3f5 100644 --- a/src/RTCConnectionStats.tsx +++ b/src/RTCConnectionStats.tsx @@ -87,7 +87,7 @@ export const RTCConnectionStats: FC = ({
); diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx index 39804a5f..c71642e9 100644 --- a/src/button/ReactionToggleButton.tsx +++ b/src/button/ReactionToggleButton.tsx @@ -173,7 +173,7 @@ export interface ReactionData { interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> { reactionData: ReactionData; identifier: string; - size?: "sm" | "lg"; + size?: "md" | "lg"; /** List of participants raising their hand */ } diff --git a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap index 608c1a0f..a1e319d9 100644 --- a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap +++ b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap @@ -10,7 +10,7 @@ exports[`Can close reaction dialog 1`] = ` aria-expanded="true" aria-haspopup="true" aria-labelledby="_r_bb_" - class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53" + class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53" data-kind="primary" data-size="lg" role="button" @@ -44,7 +44,7 @@ exports[`Can fully expand emoji picker 1`] = ` aria-expanded="true" aria-haspopup="true" aria-labelledby="_r_7m_" - class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53" + class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53" data-kind="primary" data-size="lg" role="button" @@ -75,7 +75,7 @@ exports[`Can lower hand 1`] = ` aria-expanded="false" aria-haspopup="true" aria-labelledby="_r_36_" - class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53" + class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53" data-kind="secondary" data-size="lg" role="button" @@ -109,7 +109,7 @@ exports[`Can open menu 1`] = ` aria-expanded="true" aria-haspopup="true" aria-labelledby="_r_0_" - class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53" + class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53" data-kind="primary" data-size="lg" role="button" @@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = ` aria-expanded="false" aria-haspopup="true" aria-labelledby="_r_1j_" - class="_button_13vu4_8 raisedButton _has-icon_13vu4_60 _icon-only_13vu4_53" + class="_button_1nw83_8 raisedButton _has-icon_1nw83_60 _icon-only_1nw83_53" data-kind="primary" data-size="lg" role="button" diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx index 4e728d3b..fdedf36c 100644 --- a/src/components/CallFooter.tsx +++ b/src/components/CallFooter.tsx @@ -101,7 +101,7 @@ export const CallFooter: FC = ({ tileStoreGeneration, }) => { const buttons: JSX.Element[] = []; - const buttonSize = asPip ? "sm" : "lg"; + const buttonSize = asPip ? "md" : "lg"; const showSettingsButton = openSettings !== undefined && !asPip && !hideControls; const showLayoutSwitcher = !asPip && !hideControls; diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx index 4a3173b4..f9b14707 100644 --- a/src/input/AvatarInputField.tsx +++ b/src/input/AvatarInputField.tsx @@ -113,7 +113,7 @@ export const AvatarInputField: FC = ({ iconOnly Icon={EditIcon} kind="tertiary" - size="sm" + size="md" aria-label={t("action.edit")} /> } @@ -136,7 +136,7 @@ export const AvatarInputField: FC = ({ iconOnly Icon={EditIcon} kind="tertiary" - size="sm" + size="md" aria-label={t("action.edit")} onClick={onSelectUpload} /> diff --git a/src/room/EarpieceOverlay.tsx b/src/room/EarpieceOverlay.tsx index 6835bdd7..574792f0 100644 --- a/src/room/EarpieceOverlay.tsx +++ b/src/room/EarpieceOverlay.tsx @@ -30,7 +30,7 @@ export const EarpieceOverlay: FC = ({ show, onBackToVideoPressed }) => { {t("handset.overlay_description")}