diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png index bd5fb364cd..2cfaa6aed6 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png index f4b1409866..92576de585 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png index 2643ccee95..6cee46031c 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png index b0dc89eae1..a58c7e1e51 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png index 5f9eb946bd..80c4e760c5 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png index 6ec8408d93..d86162048e 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png index 99aa065e9d..52e93c2604 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png index 5e844ede99..2c8f30ca5b 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png index ada0ca1f08..aa4d3e3afe 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png index db942937ee..3770e26d2a 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png index 1a2fafea2c..b0445e40f4 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png index bcf1e37566..f9637a4c27 100644 Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png b/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png index ede6fe9fe7..460b54b845 100644 Binary files a/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png and b/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png differ diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png index 64260f6086..b598dd9b68 100644 Binary files a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png differ diff --git a/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png b/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png index 34a415dc21..8b3df20102 100644 Binary files a/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png and b/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png differ diff --git a/apps/web/res/css/_components.pcss b/apps/web/res/css/_components.pcss index 723f8b0256..30fa3fa972 100644 --- a/apps/web/res/css/_components.pcss +++ b/apps/web/res/css/_components.pcss @@ -93,7 +93,6 @@ @import "./structures/auth/_Registration.pcss"; @import "./structures/auth/_SessionLockStolenView.pcss"; @import "./structures/auth/_SetupEncryptionBody.pcss"; -@import "./views/audio_messages/_PlayPauseButton.pcss"; @import "./views/audio_messages/_PlaybackContainer.pcss"; @import "./views/audio_messages/_SeekBar.pcss"; @import "./views/audio_messages/_Waveform.pcss"; @@ -228,7 +227,6 @@ @import "./views/messages/_MPollBody.pcss"; @import "./views/messages/_MStickerBody.pcss"; @import "./views/messages/_MessageActionBar.pcss"; -@import "./views/messages/_ReactionsRow.pcss"; @import "./views/messages/_TextualEvent.pcss"; @import "./views/messages/_ThreadActionBar.pcss"; @import "./views/messages/_common_CryptoEvent.pcss"; diff --git a/apps/web/res/css/views/audio_messages/_PlayPauseButton.pcss b/apps/web/res/css/views/audio_messages/_PlayPauseButton.pcss deleted file mode 100644 index 47df79c5d3..0000000000 --- a/apps/web/res/css/views/audio_messages/_PlayPauseButton.pcss +++ /dev/null @@ -1,29 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2021 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -.mx_PlayPauseButton { - position: relative; - width: 32px; - height: 32px; - min-width: 32px; /* for when the button is used in a flexbox */ - min-height: 32px; /* for when the button is used in a flexbox */ - border-radius: 32px; - background-color: $system; - /* !important override compound icon button */ - padding: var(--cpd-space-1-5x) !important; - box-sizing: border-box; - - svg { - width: 20px; - height: 20px; - } - - &[disabled] svg { - opacity: 0.5; - } -} diff --git a/apps/web/res/css/views/messages/_ReactionsRow.pcss b/apps/web/res/css/views/messages/_ReactionsRow.pcss deleted file mode 100644 index 0c16480bd5..0000000000 --- a/apps/web/res/css/views/messages/_ReactionsRow.pcss +++ /dev/null @@ -1,57 +0,0 @@ -/* -Copyright 2019-2024 New Vector Ltd. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -.mx_ReactionsRow { - color: var(--cpd-color-text-primary); - - .mx_ReactionsRow_addReactionButton { - display: inline-block; - visibility: hidden; /* show on hover of the .mx_EventTile */ - width: 16px; - height: 16px; - padding: var(--cpd-space-1x); - vertical-align: middle; - margin-left: 4px; - margin-right: 4px; - - svg { - height: inherit; - width: inherit; - color: $tertiary-content; - } - - &.mx_ReactionsRow_addReactionButton_active { - visibility: visible; /* keep showing whilst the context menu is shown */ - } - - &:hover, - &.mx_ReactionsRow_addReactionButton_active { - svg { - color: $primary-content; - } - } - } -} - -.mx_EventTile:hover .mx_ReactionsRow_addReactionButton { - visibility: visible; -} - -.mx_ReactionsRow_showAll { - color: $tertiary-content; - - &.mx_AccessibleButton_kind_link_inline { - font-size: $font-12px; - line-height: $font-20px; - margin-inline-start: $spacing-4; - vertical-align: middle; - - &:hover { - color: $primary-content; - } - } -} diff --git a/apps/web/res/css/views/messages/_common_CryptoEvent.pcss b/apps/web/res/css/views/messages/_common_CryptoEvent.pcss index 06b7ccc1c7..6f8ed066cc 100644 --- a/apps/web/res/css/views/messages/_common_CryptoEvent.pcss +++ b/apps/web/res/css/views/messages/_common_CryptoEvent.pcss @@ -8,8 +8,4 @@ Please see LICENSE files in the repository root for full details. .mx_EventTileBubble.mx_cryptoEvent { margin: var(--EventTileBubble_margin-block) auto; - - svg[data-state="supported"] { - color: $header-panel-text-primary-color; - } } diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap index 609f600931..8fb8a9489b 100644 --- a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -750,7 +750,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t style="height: 400px;" >
= ({ theme }) => { useLayoutEffect(() => { - document.documentElement.classList.remove(...allThemesClasses); + document.body.classList.remove(...allThemesClasses); if (theme !== "system") { - document.documentElement.classList.add(`cpd-theme-${theme}`); + document.body.classList.add(`cpd-theme-${theme}`); } - return () => document.documentElement.classList.remove(...allThemesClasses); + return () => document.body.classList.remove(...allThemesClasses); }, [theme]); return null; diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/disabled-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/disabled-auto.png new file mode 100644 index 0000000000..6e5636b92f Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/disabled-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png index 4e432ba9b7..da83cd3ecd 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png differ diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css index 74315673f1..bcf50ea829 100644 --- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css +++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css @@ -6,6 +6,22 @@ */ .button { + position: relative; + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; border-radius: 32px; background-color: var(--cpd-color-bg-subtle-primary); + padding: var(--cpd-space-1-5x); + box-sizing: border-box; +} + +.button svg { + width: 20px; + height: 20px; +} + +.button[disabled] svg { + opacity: 0.5; } diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx index 5bbcfbbf39..d1f1ff97fa 100644 --- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx +++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx @@ -24,3 +24,4 @@ type Story = StoryObj; export const Default: Story = {}; export const Playing: Story = { args: { playing: true } }; +export const Disabled: Story = { args: { disabled: true } }; diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx index 57cc2afc8b..4b8b7cbee6 100644 --- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx +++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx @@ -14,7 +14,7 @@ import { describe, it, expect } from "vitest"; import * as stories from "./PlayPauseButton.stories.tsx"; -const { Default, Playing } = composeStories(stories); +const { Default, Playing, Disabled } = composeStories(stories); describe("PlayPauseButton", () => { it("renders the button in default state", () => { @@ -27,6 +27,11 @@ describe("PlayPauseButton", () => { expect(container).toMatchSnapshot(); }); + it("renders the button in disabled state", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + it("calls togglePlay when clicked", async () => { const user = userEvent.setup(); const togglePlay = fn(); @@ -35,4 +40,12 @@ describe("PlayPauseButton", () => { await user.click(getByRole("button")); expect(togglePlay).toHaveBeenCalled(); }); + + it("preserves consumer class names alongside shared styles", () => { + const { getByRole } = render(); + const button = getByRole("button"); + + expect(button).toHaveClass("custom-play-pause-button"); + expect(button.className).toContain("PlayPauseButton-module_button"); + }); }); diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx index 529e746b8c..dcff19c438 100644 --- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx +++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx @@ -6,6 +6,7 @@ */ import React, { type HTMLAttributes, type JSX, type MouseEventHandler } from "react"; +import classNames from "classnames"; import { IconButton } from "@vector-im/compound-web"; import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid"; import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid"; @@ -44,6 +45,7 @@ export function PlayPauseButton({ disabled = false, playing = false, togglePlay, + className, ...rest }: Readonly): JSX.Element { const { translate: _t } = useI18n(); @@ -56,7 +58,7 @@ export function PlayPauseButton({ aria-label={label} tooltip={label} onClick={togglePlay} - className={styles.button} + className={classNames(styles.button, className)} disabled={disabled} {...rest} > diff --git a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap index 6c1a790bc5..5c15fc74fd 100644 --- a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap +++ b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap @@ -32,6 +32,38 @@ exports[`PlayPauseButton > renders the button in default state 1`] = `
`; +exports[`PlayPauseButton > renders the button in disabled state 1`] = ` +
+ +
+`; + exports[`PlayPauseButton > renders the button in playing state 1`] = `