diff --git a/playwright/component/harness.ts b/playwright/component/harness.ts index 8e1a6e589..19bc2e08b 100644 --- a/playwright/component/harness.ts +++ b/playwright/component/harness.ts @@ -92,6 +92,12 @@ export async function expectWithin( outer: Locator, ): Promise { await expect(inner).toBeVisible(); + // Wait for animations to settle. + await inner.evaluate(async (element) => { + for (const animation of element.getAnimations({ subtree: true })) + await animation.finished; + }); + const innerBox = await inner.boundingBox(); const outerBox = await outer.boundingBox(); if (innerBox === null || outerBox === null) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 73a7796ba..23e2eaa3a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,10 +132,10 @@ importers: version: 10.3.1(react@19.2.8) '@vector-im/compound-design-tokens': specifier: ^11.0.0 - version: 11.0.0(@types/react@19.2.18)(react@19.2.8) + version: 11.1.0(@types/react@19.2.18)(react@19.2.8) '@vector-im/compound-web': specifier: ^10.0.0 - version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@vitejs/plugin-react': specifier: ^6.0.2 version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)) @@ -3223,8 +3223,8 @@ packages: peerDependencies: react: '>= 16.8.0' - '@vector-im/compound-design-tokens@11.0.0': - resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==} + '@vector-im/compound-design-tokens@11.1.0': + resolution: {integrity: sha512-vkMcy/G5VBlVle8umQNpctKHqZITS8XOQprsgcbSGRmwW080Z+TXV/vPsEXhgq8JKdxURkLhua0zQUufCeo46A==} peerDependencies: '@adobe/leonardo-contrast-colors': ^1.0.0 '@types/react': '*' @@ -8667,12 +8667,12 @@ snapshots: '@use-gesture/core': 10.3.1 react: 19.2.8 - '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)': + '@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8)': optionalDependencies: '@types/react': 19.2.18 react: 19.2.8 - '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8) @@ -8684,7 +8684,7 @@ snapshots: '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8) - '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8) + '@vector-im/compound-design-tokens': 11.1.0(@types/react@19.2.18)(react@19.2.8) classnames: 2.5.1 react: 19.2.8 vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css index 4a2bd8ba8..0b152a519 100644 --- a/src/button/ReactionToggleButton.module.css +++ b/src/button/ReactionToggleButton.module.css @@ -83,7 +83,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div { flex: 0 0 auto; } -.reactionButton { +.reactionPopupMenu .reactionsMenu .reactionButton { padding: var(--reaction-button-padding); border-radius: var(--cpd-radius-pill-effect); font-size: var(--reaction-button-fontsize);