diff --git a/package.json b/package.json index f4614176340..32820f51bcd 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "@sentry/browser": "^8.0.0", "@testing-library/react-hooks": "^8.0.1", "@vector-im/compound-design-tokens": "^1.6.1", - "@vector-im/compound-web": "^5.4.0", + "@vector-im/compound-web": "^5.5.0", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", "@zxcvbn-ts/language-en": "^3.0.2", diff --git a/playwright/pages/toasts.ts b/playwright/pages/toasts.ts index 0785f33c23d..436ea42952f 100644 --- a/playwright/pages/toasts.ts +++ b/playwright/pages/toasts.ts @@ -45,7 +45,7 @@ export class Toasts { */ public async acceptToast(expectedTitle: string): Promise { const toast = await this.getToast(expectedTitle); - await toast.locator(".mx_Toast_buttons .mx_AccessibleButton_kind_primary").click(); + await toast.locator('.mx_Toast_buttons button[data-kind="primary"]').click(); } /** @@ -55,6 +55,6 @@ export class Toasts { */ public async rejectToast(expectedTitle: string): Promise { const toast = await this.getToast(expectedTitle); - await toast.locator(".mx_Toast_buttons .mx_AccessibleButton_kind_danger_outline").click(); + await toast.locator('.mx_Toast_buttons button[data-kind="secondary"]').click(); } } diff --git a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png index 6439fe305bb..62316fd3129 100644 Binary files a/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png and b/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Threads-Activity-Centre-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png index 55ae8561368..fde2eda551b 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png index 6f55f2fd008..3528d129be4 100644 Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png differ diff --git a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png index dcac67dc1f0..4c403627fac 100644 Binary files a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png differ diff --git a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png index 37405cd821a..3dfe328de2e 100644 Binary files a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png differ diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss index 6b18836776f..65a171b496d 100644 --- a/res/css/structures/_ToastContainer.pcss +++ b/res/css/structures/_ToastContainer.pcss @@ -154,6 +154,7 @@ limitations under the License. overflow: hidden; text-overflow: ellipsis; margin: 4px 0 11px 0; + color: $secondary-content; font: var(--cpd-font-body-sm-regular); a { @@ -161,10 +162,6 @@ limitations under the License. } } - .mx_Toast_detail { - color: $secondary-content; - } - .mx_Toast_deviceID { font-size: $font-10px; } diff --git a/src/SupportedBrowser.ts b/src/SupportedBrowser.ts index 4314e279611..071a64f4fcb 100644 --- a/src/SupportedBrowser.ts +++ b/src/SupportedBrowser.ts @@ -17,6 +17,7 @@ limitations under the License. import { logger } from "matrix-js-sdk/src/logger"; import browserlist from "browserslist"; import electronToChromium from "electron-to-chromium/versions"; +import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out"; import { DeviceType, parseUserAgent } from "./utils/device/parseUserAgent"; import ToastStore from "./stores/ToastStore"; @@ -112,10 +113,11 @@ export function checkBrowserSupport(): void { title: _t("unsupported_browser|title", { brand }), props: { description: _t("unsupported_browser|description", { brand }), - acceptLabel: _t("action|learn_more"), - onAccept: onLearnMoreClick, - rejectLabel: _t("action|dismiss"), - onReject: onDismissClick, + secondaryLabel: _t("action|learn_more"), + SecondaryIcon: PopOutIcon, + onSecondaryClick: onLearnMoreClick, + primaryLabel: _t("action|dismiss"), + onPrimaryClick: onDismissClick, }, component: GenericToast, priority: 40, diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index f9d6db3f535..8335b0e3f67 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -1390,8 +1390,8 @@ export default class MatrixChat extends React.PureComponent { title: userNotice.title, props: { description: {userNotice.description}, - acceptLabel: _t("action|ok"), - onAccept: () => { + primaryLabel: _t("action|ok"), + onPrimaryClick: () => { ToastStore.sharedInstance().dismissToast(key); localStorage.setItem(key, "1"); }, diff --git a/src/components/structures/ToastContainer.tsx b/src/components/structures/ToastContainer.tsx index c95f5a10993..43c8f13e2be 100644 --- a/src/components/structures/ToastContainer.tsx +++ b/src/components/structures/ToastContainer.tsx @@ -16,6 +16,7 @@ limitations under the License. import * as React from "react"; import classNames from "classnames"; +import { Text } from "@vector-im/compound-web"; import ToastStore, { IToast } from "../../stores/ToastStore"; @@ -78,7 +79,9 @@ export default class ToastContainer extends React.Component<{}, IState> { if (title) { titleElement = (
-

{title}

+ + {title} + {countIndicator}
); diff --git a/src/components/views/toasts/GenericExpiringToast.tsx b/src/components/views/toasts/GenericExpiringToast.tsx index 150aaff4008..fea826dfa3a 100644 --- a/src/components/views/toasts/GenericExpiringToast.tsx +++ b/src/components/views/toasts/GenericExpiringToast.tsx @@ -31,9 +31,9 @@ const SECOND = 1000; const GenericExpiringToast: React.FC = ({ description, - acceptLabel, + primaryLabel, dismissLabel, - onAccept, + onPrimaryClick, onDismiss, toastKey, numSeconds, @@ -52,10 +52,10 @@ const GenericExpiringToast: React.FC = ({ return ( ); }; diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx index c40eaab8e88..70c6c1a7ddb 100644 --- a/src/components/views/toasts/GenericToast.tsx +++ b/src/components/views/toasts/GenericToast.tsx @@ -14,31 +14,37 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ReactNode } from "react"; +import React, { ComponentType, ReactNode } from "react"; +import { Button } from "@vector-im/compound-web"; -import AccessibleButton from "../elements/AccessibleButton"; import { XOR } from "../../../@types/common"; export interface IProps { description: ReactNode; detail?: ReactNode; - acceptLabel: string; + primaryLabel: string; + PrimaryIcon?: ComponentType>; - onAccept(): void; + onPrimaryClick(): void; } interface IPropsExtended extends IProps { - rejectLabel: string; - onReject(): void; + secondaryLabel: string; + SecondaryIcon?: ComponentType>; + destructive?: "primary" | "secondary"; + onSecondaryClick(): void; } const GenericToast: React.FC> = ({ description, detail, - acceptLabel, - rejectLabel, - onAccept, - onReject, + primaryLabel, + PrimaryIcon, + secondaryLabel, + SecondaryIcon, + destructive, + onPrimaryClick, + onSecondaryClick, }) => { const detailContent = detail ?
{detail}
: null; @@ -49,14 +55,24 @@ const GenericToast: React.FC> = ({ {detailContent}
- {onReject && rejectLabel && ( - - {rejectLabel} - + {onSecondaryClick && secondaryLabel && ( + )} - - {acceptLabel} - +
); diff --git a/src/components/views/toasts/VerificationRequestToast.tsx b/src/components/views/toasts/VerificationRequestToast.tsx index 283473bf516..c7ac14f804a 100644 --- a/src/components/views/toasts/VerificationRequestToast.tsx +++ b/src/components/views/toasts/VerificationRequestToast.tsx @@ -185,14 +185,14 @@ export default class VerificationRequestToast extends React.PureComponent ); } diff --git a/src/stores/LifecycleStore.ts b/src/stores/LifecycleStore.ts index decef118818..d000289f365 100644 --- a/src/stores/LifecycleStore.ts +++ b/src/stores/LifecycleStore.ts @@ -114,8 +114,8 @@ async function checkServerVersions(): Promise { version: MINIMUM_MATRIX_VERSION, brand: SdkConfig.get().brand, }), - acceptLabel: _t("action|ok"), - onAccept: () => { + primaryLabel: _t("action|ok"), + onPrimaryClick: () => { ToastStore.sharedInstance().dismissToast(toastKey); }, }, diff --git a/src/toasts/AnalyticsToast.tsx b/src/toasts/AnalyticsToast.tsx index 59c7124d573..b1eadd963d8 100644 --- a/src/toasts/AnalyticsToast.tsx +++ b/src/toasts/AnalyticsToast.tsx @@ -87,10 +87,10 @@ export const showToast = (): void => { // them to opt in again. props = { description: _t("analytics|consent_migration"), - acceptLabel: _t("analytics|accept_button"), - onAccept, - rejectLabel: _t("action|learn_more"), - onReject: onLearnMorePreviouslyOptedIn, + primaryLabel: _t("analytics|accept_button"), + onPrimaryClick: onAccept, + secondaryLabel: _t("action|learn_more"), + onSecondaryClick: onLearnMorePreviouslyOptedIn, }; } else if (legacyAnalyticsOptIn === null || legacyAnalyticsOptIn === undefined) { // The user had no analytics setting previously set, so we just need to prompt to opt-in, rather than @@ -102,10 +102,10 @@ export const showToast = (): void => { ); props = { description: _t("analytics|learn_more", {}, { LearnMoreLink: learnMoreLink }), - acceptLabel: _t("action|yes"), - onAccept, - rejectLabel: _t("action|no"), - onReject, + primaryLabel: _t("action|yes"), + onPrimaryClick: onAccept, + secondaryLabel: _t("action|no"), + onSecondaryClick: onReject, }; } else { // false diff --git a/src/toasts/BulkUnverifiedSessionsToast.ts b/src/toasts/BulkUnverifiedSessionsToast.ts index 1019d717e9f..878ce7b3062 100644 --- a/src/toasts/BulkUnverifiedSessionsToast.ts +++ b/src/toasts/BulkUnverifiedSessionsToast.ts @@ -44,10 +44,10 @@ export const showToast = (deviceIds: Set): void => { icon: "verification_warning", props: { description: _t("encryption|verification|unverified_sessions_toast_description"), - acceptLabel: _t("action|review"), - onAccept, - rejectLabel: _t("encryption|verification|unverified_sessions_toast_reject"), - onReject, + primaryLabel: _t("action|review"), + onPrimaryClick: onAccept, + secondaryLabel: _t("encryption|verification|unverified_sessions_toast_reject"), + onSecondaryClick: onReject, }, component: GenericToast, priority: 50, diff --git a/src/toasts/DesktopNotificationsToast.ts b/src/toasts/DesktopNotificationsToast.ts index ba8340ca3a0..8d02b657b4b 100644 --- a/src/toasts/DesktopNotificationsToast.ts +++ b/src/toasts/DesktopNotificationsToast.ts @@ -44,10 +44,10 @@ export const showToast = (fromMessageSend: boolean): void => { : _t("notifications|enable_prompt_toast_title"), props: { description: _t("notifications|enable_prompt_toast_description"), - acceptLabel: _t("action|enable"), - onAccept, - rejectLabel: _t("action|dismiss"), - onReject, + primaryLabel: _t("action|enable"), + onPrimaryClick: onAccept, + secondaryLabel: _t("action|dismiss"), + onSecondaryClick: onReject, }, component: GenericToast, priority: 30, diff --git a/src/toasts/MobileGuideToast.ts b/src/toasts/MobileGuideToast.ts index 3288f5a95ee..5d4ecd2bb1e 100644 --- a/src/toasts/MobileGuideToast.ts +++ b/src/toasts/MobileGuideToast.ts @@ -45,10 +45,10 @@ export const showToast = (): void => { title: _t("mobile_guide|toast_title"), props: { description: _t("mobile_guide|toast_description", { brand }), - acceptLabel: _t("mobile_guide|toast_accept"), - onAccept, - rejectLabel: _t("action|dismiss"), - onReject, + primaryLabel: _t("mobile_guide|toast_accept"), + onPrimaryClick: onAccept, + secondaryLabel: _t("action|dismiss"), + onSecondaryClick: onReject, }, component: GenericToast, priority: 99, diff --git a/src/toasts/ServerLimitToast.tsx b/src/toasts/ServerLimitToast.tsx index 8e297270fe8..a2ea19217a4 100644 --- a/src/toasts/ServerLimitToast.tsx +++ b/src/toasts/ServerLimitToast.tsx @@ -47,8 +47,8 @@ export const showToast = ( {errorText} {contactText} ), - acceptLabel: _t("action|ok"), - onAccept: () => { + primaryLabel: _t("action|ok"), + onPrimaryClick: () => { hideToast(); if (onHideToast) onHideToast(); }, diff --git a/src/toasts/SetupEncryptionToast.ts b/src/toasts/SetupEncryptionToast.ts index 3f78ad0c925..a9a495ead9b 100644 --- a/src/toasts/SetupEncryptionToast.ts +++ b/src/toasts/SetupEncryptionToast.ts @@ -114,10 +114,11 @@ export const showToast = (kind: Kind): void => { icon: getIcon(kind), props: { description: getDescription(kind), - acceptLabel: getSetupCaption(kind), - onAccept, - rejectLabel: _t("encryption|verification|unverified_sessions_toast_reject"), - onReject, + primaryLabel: getSetupCaption(kind), + onPrimaryClick: onAccept, + secondaryLabel: _t("encryption|verification|unverified_sessions_toast_reject"), + onSecondaryClick: onReject, + destructive: "secondary", }, component: GenericToast, priority: kind === Kind.VERIFY_THIS_SESSION ? 95 : 40, diff --git a/src/toasts/UnverifiedSessionToast.tsx b/src/toasts/UnverifiedSessionToast.tsx index e7a38edeeab..a934ae9bda1 100644 --- a/src/toasts/UnverifiedSessionToast.tsx +++ b/src/toasts/UnverifiedSessionToast.tsx @@ -59,10 +59,11 @@ export const showToast = async (deviceId: string): Promise => { props: { description: device.display_name, detail: , - acceptLabel: _t("encryption|verification|unverified_session_toast_accept"), - onAccept, - rejectLabel: _t("action|no"), - onReject, + primaryLabel: _t("encryption|verification|unverified_session_toast_accept"), + onPrimaryClick: onAccept, + secondaryLabel: _t("action|no"), + onSecondaryClick: onReject, + destructive: "secondary", }, component: GenericToast, priority: 80, diff --git a/src/toasts/UpdateToast.tsx b/src/toasts/UpdateToast.tsx index 4a4f66602b3..5e08fb56abf 100644 --- a/src/toasts/UpdateToast.tsx +++ b/src/toasts/UpdateToast.tsx @@ -83,10 +83,10 @@ export const showToast = (version: string, newVersion: string, releaseNotes?: st title: _t("update|toast_title", { brand }), props: { description: _t("update|toast_description", { brand }), - acceptLabel, - onAccept, - rejectLabel: _t("action|dismiss"), - onReject, + primaryLabel: acceptLabel, + onPrimaryClick: onAccept, + secondaryLabel: _t("action|dismiss"), + onSecondaryClick: onReject, }, component: GenericToast, priority: 20, diff --git a/test/components/views/toasts/GenericToast-test.tsx b/test/components/views/toasts/GenericToast-test.tsx index 4d29aec7652..c0e2e1e3903 100644 --- a/test/components/views/toasts/GenericToast-test.tsx +++ b/test/components/views/toasts/GenericToast-test.tsx @@ -21,11 +21,11 @@ import GenericToast from "../../../../src/components/views/toasts/GenericToast"; const renderGenericToast = (props: Partial> = {}): RenderResult => { const propsWithDefaults = { - acceptLabel: "Accept", + primaryLabel: "Accept", description:
Description
, - onAccept: () => {}, - onReject: () => {}, - rejectLabel: "Reject", + onPrimaryClick: () => {}, + onSecondaryClick: () => {}, + secondaryLabel: "Reject", ...props, }; diff --git a/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap b/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap index ee033f70f4a..f4a41e25be4 100644 --- a/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap +++ b/test/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap @@ -14,20 +14,24 @@ exports[`GenericToast should render as expected with detail content 1`] = ` aria-live="off" class="mx_Toast_buttons" > -
Reject -
-
+
+ @@ -52,20 +56,24 @@ exports[`GenericToast should render as expected without detail content 1`] = ` aria-live="off" class="mx_Toast_buttons" > -
Reject -
-
+
+ diff --git a/test/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap b/test/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap index ab302309fc1..b427e443cfd 100644 --- a/test/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap +++ b/test/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap @@ -12,20 +12,24 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] = aria-live="off" class="mx_Toast_buttons" > -
Ignore -
-
+
+ @@ -48,20 +52,24 @@ exports[`VerificationRequestToast should render a self-verification 1`] = ` aria-live="off" class="mx_Toast_buttons" > -
Ignore -
-
+
+ diff --git a/test/stores/LifecycleStore-test.ts b/test/stores/LifecycleStore-test.ts index ae312e11df8..529fc4d816f 100644 --- a/test/stores/LifecycleStore-test.ts +++ b/test/stores/LifecycleStore-test.ts @@ -80,7 +80,7 @@ describe("LifecycleStore", () => { await sleep(0); - addOrReplaceToast.mock.calls[0][0].props.onAccept(); + addOrReplaceToast.mock.calls[0][0].props.onPrimaryClick(); expect(dismissToast).toHaveBeenCalledWith(addOrReplaceToast.mock.calls[0][0].key); }); diff --git a/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap b/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap index 0aef2390306..0d9e1883360 100644 --- a/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap +++ b/test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap @@ -13,7 +13,9 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
-

+

New login. Was this you?

-
No -
-
+
+
diff --git a/yarn.lock b/yarn.lock index 6a1e4a487e8..77f27e56cc9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3017,7 +3017,7 @@ resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.6.1.tgz#3f1bb5b2b9f8aff10144aab19dfa11165c3c927b" integrity sha512-u5xG/8AN7QkPPWhugj0ZrQtWsAjuKHzuOoP0s3bbDg7ZkKTE9l5tM29bdOHnSv9mEYKO+KVMMfsl0W1rlaTmAw== -"@vector-im/compound-web@^5.4.0": +"@vector-im/compound-web@^5.5.0": version "5.5.0" resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-5.5.0.tgz#c646cd8c59aa7e5df527d843ad3b7b7c064d5224" integrity sha512-Z+QSXOkJE4/LYk9j9FMVE2m5noz3gEA4yRxetjSJyXB5mDpyIJ1OYAweuZJXS3foxqygVDeB82YgTw1JgDtUvg==