Update toast styles to match Figma (#12833)

* Warn users on unsupported browsers before they lack features

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

* Update Learn more link

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

* Iterate

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

* Iterate

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

* Update toast styles to match Figma

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

* Remove test code

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

* update tests

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

* Update tests

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

* Update snapshots

---------

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

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",

playwright/pages/toasts.ts

@@ -45,7 +45,7 @@ export class Toasts {
      */
     public async acceptToast(expectedTitle: string): Promise<void> {
         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<void> {
         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();
     }
 }

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;
         }

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"),
+            secondaryLabel: _t("action|learn_more"),
-            onAccept: onLearnMoreClick,
+            SecondaryIcon: PopOutIcon,
-            rejectLabel: _t("action|dismiss"),
+            onSecondaryClick: onLearnMoreClick,
-            onReject: onDismissClick,
+            primaryLabel: _t("action|dismiss"),
+            onPrimaryClick: onDismissClick,
         },
         component: GenericToast,
         priority: 40,

src/components/structures/MatrixChat.tsx

@@ -1390,8 +1390,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                     title: userNotice.title,
                     props: {
                         description: <Linkify>{userNotice.description}</Linkify>,
-                        acceptLabel: _t("action|ok"),
+                        primaryLabel: _t("action|ok"),
-                        onAccept: () => {
+                        onPrimaryClick: () => {
                             ToastStore.sharedInstance().dismissToast(key);
                             localStorage.setItem(key, "1");
                         },

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 = (
                     <div className="mx_Toast_title">
-                        <h2>{title}</h2>
+                        <Text size="lg" weight="semibold" as="h2">
+                            {title}
+                        </Text>
                         <span className="mx_Toast_title_countIndicator">{countIndicator}</span>
                     </div>
                 );

src/components/views/toasts/GenericExpiringToast.tsx

@@ -31,9 +31,9 @@ const SECOND = 1000;
 
 const GenericExpiringToast: React.FC<IProps> = ({
     description,
-    acceptLabel,
+    primaryLabel,
     dismissLabel,
-    onAccept,
+    onPrimaryClick,
     onDismiss,
     toastKey,
     numSeconds,
@@ -52,10 +52,10 @@ const GenericExpiringToast: React.FC<IProps> = ({
     return (
         <GenericToast
             description={description}
-            acceptLabel={acceptLabel}
+            primaryLabel={primaryLabel}
-            onAccept={onAccept}
+            onPrimaryClick={onPrimaryClick}
-            rejectLabel={rejectLabel}
+            secondaryLabel={rejectLabel}
-            onReject={onReject}
+            onSecondaryClick={onReject}
         />
     );
 };

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<React.SVGAttributes<SVGElement>>;
 
-    onAccept(): void;
+    onPrimaryClick(): void;
 }
 
 interface IPropsExtended extends IProps {
-    rejectLabel: string;
+    secondaryLabel: string;
-    onReject(): void;
+    SecondaryIcon?: ComponentType<React.SVGAttributes<SVGElement>>;
+    destructive?: "primary" | "secondary";
+    onSecondaryClick(): void;
 }
 
 const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
     description,
     detail,
-    acceptLabel,
+    primaryLabel,
-    rejectLabel,
+    PrimaryIcon,
-    onAccept,
+    secondaryLabel,
-    onReject,
+    SecondaryIcon,
+    destructive,
+    onPrimaryClick,
+    onSecondaryClick,
 }) => {
     const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;
 
@@ -49,14 +55,24 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
                 {detailContent}
             </div>
             <div className="mx_Toast_buttons" aria-live="off">
-                {onReject && rejectLabel && (
+                {onSecondaryClick && secondaryLabel && (
-                    <AccessibleButton kind="danger_outline" onClick={onReject}>
+                    <Button
-                        {rejectLabel}
+                        onClick={onSecondaryClick}
-                    </AccessibleButton>
+                        kind={destructive === "secondary" ? "destructive" : "secondary"}
+                        Icon={SecondaryIcon}
+                        size="sm"
+                    >
+                        {secondaryLabel}
+                    </Button>
                 )}
-                <AccessibleButton onClick={onAccept} kind="primary">
+                <Button
-                    {acceptLabel}
+                    onClick={onPrimaryClick}
-                </AccessibleButton>
+                    kind={destructive === "primary" ? "destructive" : "primary"}
+                    Icon={PrimaryIcon}
+                    size="sm"
+                >
+                    {primaryLabel}
+                </Button>
             </div>
         </div>
     );

src/components/views/toasts/VerificationRequestToast.tsx

@@ -185,14 +185,14 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
             <GenericToast
                 description={description}
                 detail={detail}
-                acceptLabel={
+                primaryLabel={
                     request.isSelfVerification || !request.roomId
                         ? _t("encryption|verification|request_toast_accept")
                         : _t("encryption|verification|request_toast_accept_user")
                 }
-                onAccept={this.accept}
+                onPrimaryClick={this.accept}
-                rejectLabel={declineLabel}
+                secondaryLabel={declineLabel}
-                onReject={this.cancel}
+                onSecondaryClick={this.cancel}
             />
         );
     }

src/stores/LifecycleStore.ts

@@ -114,8 +114,8 @@ async function checkServerVersions(): Promise<void> {
                     version: MINIMUM_MATRIX_VERSION,
                     brand: SdkConfig.get().brand,
                 }),
-                acceptLabel: _t("action|ok"),
+                primaryLabel: _t("action|ok"),
-                onAccept: () => {
+                onPrimaryClick: () => {
                     ToastStore.sharedInstance().dismissToast(toastKey);
                 },
             },

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"),
+            primaryLabel: _t("analytics|accept_button"),
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("action|learn_more"),
+            secondaryLabel: _t("action|learn_more"),
-            onReject: onLearnMorePreviouslyOptedIn,
+            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"),
+            primaryLabel: _t("action|yes"),
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("action|no"),
+            secondaryLabel: _t("action|no"),
-            onReject,
+            onSecondaryClick: onReject,
         };
     } else {
         // false

src/toasts/BulkUnverifiedSessionsToast.ts

@@ -44,10 +44,10 @@ export const showToast = (deviceIds: Set<string>): void => {
         icon: "verification_warning",
         props: {
             description: _t("encryption|verification|unverified_sessions_toast_description"),
-            acceptLabel: _t("action|review"),
+            primaryLabel: _t("action|review"),
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
+            secondaryLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
-            onReject,
+            onSecondaryClick: onReject,
         },
         component: GenericToast,
         priority: 50,

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"),
+            primaryLabel: _t("action|enable"),
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("action|dismiss"),
+            secondaryLabel: _t("action|dismiss"),
-            onReject,
+            onSecondaryClick: onReject,
         },
         component: GenericToast,
         priority: 30,

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"),
+            primaryLabel: _t("mobile_guide|toast_accept"),
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("action|dismiss"),
+            secondaryLabel: _t("action|dismiss"),
-            onReject,
+            onSecondaryClick: onReject,
         },
         component: GenericToast,
         priority: 99,

src/toasts/ServerLimitToast.tsx

@@ -47,8 +47,8 @@ export const showToast = (
                     {errorText} {contactText}
                 </React.Fragment>
             ),
-            acceptLabel: _t("action|ok"),
+            primaryLabel: _t("action|ok"),
-            onAccept: () => {
+            onPrimaryClick: () => {
                 hideToast();
                 if (onHideToast) onHideToast();
             },

src/toasts/SetupEncryptionToast.ts

@@ -114,10 +114,11 @@ export const showToast = (kind: Kind): void => {
         icon: getIcon(kind),
         props: {
             description: getDescription(kind),
-            acceptLabel: getSetupCaption(kind),
+            primaryLabel: getSetupCaption(kind),
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
+            secondaryLabel: _t("encryption|verification|unverified_sessions_toast_reject"),
-            onReject,
+            onSecondaryClick: onReject,
+            destructive: "secondary",
         },
         component: GenericToast,
         priority: kind === Kind.VERIFY_THIS_SESSION ? 95 : 40,

src/toasts/UnverifiedSessionToast.tsx

@@ -59,10 +59,11 @@ export const showToast = async (deviceId: string): Promise<void> => {
         props: {
             description: device.display_name,
             detail: <DeviceMetaData device={extendedDevice} />,
-            acceptLabel: _t("encryption|verification|unverified_session_toast_accept"),
+            primaryLabel: _t("encryption|verification|unverified_session_toast_accept"),
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("action|no"),
+            secondaryLabel: _t("action|no"),
-            onReject,
+            onSecondaryClick: onReject,
+            destructive: "secondary",
         },
         component: GenericToast,
         priority: 80,

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,
+            primaryLabel: acceptLabel,
-            onAccept,
+            onPrimaryClick: onAccept,
-            rejectLabel: _t("action|dismiss"),
+            secondaryLabel: _t("action|dismiss"),
-            onReject,
+            onSecondaryClick: onReject,
         },
         component: GenericToast,
         priority: 20,

test/components/views/toasts/GenericToast-test.tsx

@@ -21,11 +21,11 @@ import GenericToast from "../../../../src/components/views/toasts/GenericToast";
 
 const renderGenericToast = (props: Partial<ComponentProps<typeof GenericToast>> = {}): RenderResult => {
     const propsWithDefaults = {
-        acceptLabel: "Accept",
+        primaryLabel: "Accept",
         description: <div>Description</div>,
-        onAccept: () => {},
+        onPrimaryClick: () => {},
-        onReject: () => {},
+        onSecondaryClick: () => {},
-        rejectLabel: "Reject",
+        secondaryLabel: "Reject",
         ...props,
     };
 

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"
     >
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Reject
-      </div>
+      </button>
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Accept
-      </div>
+      </button>
     </div>
   </div>
 </DocumentFragment>
@@ -52,20 +56,24 @@ exports[`GenericToast should render as expected without detail content 1`] = `
       aria-live="off"
       class="mx_Toast_buttons"
     >
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Reject
-      </div>
+      </button>
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Accept
-      </div>
+      </button>
     </div>
   </div>
 </DocumentFragment>

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"
     >
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Ignore
-      </div>
+      </button>
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Verify Session
-      </div>
+      </button>
     </div>
   </div>
 </div>
@@ -48,20 +52,24 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
       aria-live="off"
       class="mx_Toast_buttons"
     >
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+        class="_button_zt6rp_17"
+        data-kind="secondary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Ignore
-      </div>
+      </button>
-      <div
+      <button
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+        class="_button_zt6rp_17"
+        data-kind="primary"
+        data-size="sm"
         role="button"
         tabindex="0"
       >
         Verify Session
-      </div>
+      </button>
     </div>
   </div>
 </div>

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);
     });

test/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap

@@ -13,7 +13,9 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
         <div
           class="mx_Toast_title"
         >
-          <h2>
+          <h2
+            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
+          >
             New login. Was this you?
           </h2>
           <span
@@ -47,20 +49,24 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
               aria-live="off"
               class="mx_Toast_buttons"
             >
-              <div
+              <button
-                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
+                class="_button_zt6rp_17 _destructive_zt6rp_111"
+                data-kind="secondary"
+                data-size="sm"
                 role="button"
                 tabindex="0"
               >
                 No
-              </div>
+              </button>
-              <div
+              <button
-                class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+                class="_button_zt6rp_17"
+                data-kind="primary"
+                data-size="sm"
                 role="button"
                 tabindex="0"
               >
                 Yes, it was me
-              </div>
+              </button>
             </div>
           </div>
         </div>

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==