Update @vector-im/compound-design-tokens & @vector-im/compound-web (

#29307)

* chore: update `@vector-im/compound-design-tokens` & `@vector-im/compound-web` to last version

* chore: use `error-solid` icon instead of `error`

* chore: update jest snapshot

* fix: `AccessibleButton` lint

package.json

@@ -91,8 +91,8 @@
         "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^3.0.0",
-        "@vector-im/compound-web": "^7.6.1",
+        "@vector-im/compound-design-tokens": "^4.0.0",
+        "@vector-im/compound-web": "^7.6.4",
         "@vector-im/matrix-wysiwyg": "2.38.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",

res/css/structures/_SpaceHierarchy.pcss

@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
             height: 16px;
             width: 16px;
             left: 0;
-            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
             background-size: cover;
             background-repeat: no-repeat;
         }

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconReport::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
     }
 
     .mx_MessageContextMenu_iconLink::before {

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
 
         &.mx_AccessSecretStorageDialog_resetBadge::before {
             /* The image isn't capable of masking, so we use a background instead. */
-            background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
             background-size: 24px;
             background-color: transparent;
         }
@@ -120,7 +120,7 @@ Please see LICENSE files in the repository root for full details.
                         width: 16px;
                         left: 0;
                         top: 2px; /* alignment */
-                        background-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+                        background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
                         background-size: contain;
                     }
 

res/css/views/elements/_InfoTooltip.pcss

@@ -29,5 +29,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InfoTooltip_icon_warning::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
 }

src/components/views/auth/LoginWithQRFlow.tsx

@@ -10,7 +10,7 @@ import React, { createRef, type ReactNode } from "react";
 import { ClientRendezvousFailureReason, MSC4108FailureReason } from "matrix-js-sdk/src/rendezvous";
 import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
 import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import { Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/components/views/elements/AccessibleButton.tsx

@@ -80,7 +80,7 @@ type Props<T extends ElementType = "div"> = {
     /**
      * The tooltip to show on hover or focus.
      */
-    title?: TooltipProps["label"];
+    title?: string;
     /**
      * The caption is a secondary text displayed under the `title` of the tooltip.
      * Only valid when used in conjunction with `title`.

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -35,7 +35,7 @@ import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
 import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-solid";
 import LockOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock-off";
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 import { EventType, JoinRule, type Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 

src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 
 import { _t } from "../../../../../../languageHandler";
 import { E2EStatus } from "../../../../../../utils/ShieldUtils";

src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -15,7 +15,7 @@ import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/thre
 import RoomInfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info-solid";
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
 import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import { JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";

src/components/views/settings/SettingsSubheader.tsx

@@ -7,7 +7,7 @@
 
 import React, { type JSX } from "react";
 import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import classNames from "classnames";
 
 interface SettingsSubheaderProps {

src/components/views/settings/encryption/ResetIdentityPanel.tsx

@@ -8,7 +8,7 @@
 import { Breadcrumb, Button, VisualList, VisualListItem } from "@vector-im/compound-web";
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import React, { type MouseEventHandler } from "react";
 
 import { _t } from "../../../../languageHandler";

test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap

@@ -15,17 +15,17 @@ exports[`<ErrorView /> should match snapshot 1`] = `
       class="mx_ErrorView_container"
     >
       <h1
-        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
       >
         TITLE
       </h1>
       <p
-        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69"
       >
         MSG1
       </p>
       <p
-        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69"
       >
         MSG2
       </p>
@@ -49,17 +49,17 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       class="mx_ErrorView_container"
     >
       <h1
-        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
       >
         Element does not support this browser
       </h1>
       <p
-        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69"
       >
         Element uses some browser features which are not available in your current browser. Try updating this browser if you're not using the latest version and try again.
       </p>
       <p
-        class="_typography_yh5dq_162 _font-body-lg-regular_yh5dq_78"
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69"
       >
         <span>
           For the best experience, use 
@@ -102,7 +102,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
       >
         <button
-          class="_button_i91xf_17 _has-icon_i91xf_66"
+          class="_button_vczzf_8 _has-icon_vczzf_57"
           data-kind="secondary"
           data-size="sm"
           role="button"
@@ -117,24 +117,24 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"
+              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2"
             />
             <path
-              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z"
+              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2"
             />
           </svg>
           Learn more
         </button>
       </div>
     </div>
     <div
-      class="_separator_144s5_17"
+      class="_separator_7ckbw_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
     />
     <h2
-      class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
     >
       Use Element Desktop instead
     </h2>
@@ -143,7 +143,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
     >
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_vczzf_8 _has-icon_vczzf_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -158,7 +158,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_vczzf_8 _has-icon_vczzf_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -173,7 +173,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_vczzf_8 _has-icon_vczzf_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
@@ -188,7 +188,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (ARM 64-bit)
       </a>
       <a
-        class="_button_i91xf_17 _has-icon_i91xf_66"
+        class="_button_vczzf_8 _has-icon_vczzf_57"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"
@@ -204,7 +204,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       </a>
     </div>
     <h2
-      class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
     >
       Or use our mobile app
     </h2>

test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap

@@ -12,22 +12,22 @@ exports[`FilePanel renders empty state 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 mx_BaseCard_header_title_heading"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
           Files
         </p>
       </div>
       <button
         aria-labelledby=":r0:"
-        class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
+        class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
         style="--cpd-icon-button-size: 28px;"
         tabindex="0"
       >
         <div
-          class="_indicator-icon_133tf_26"
+          class="_indicator-icon_zr2a0_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -38,7 +38,7 @@ exports[`FilePanel renders empty state 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
             />
           </svg>
         </div>
@@ -62,16 +62,16 @@ exports[`FilePanel renders empty state 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M6 22c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 20V4c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 2h7.175a1.975 1.975 0 0 1 1.4.575l4.85 4.85a1.975 1.975 0 0 1 .575 1.4V20c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 22H6Zm7-14V4H6v16h12V9h-4a.968.968 0 0 1-.713-.287A.967.967 0 0 1 13 8Z"
+              d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V4q0-.824.588-1.412A1.93 1.93 0 0 1 6 2h7.175a1.98 1.98 0 0 1 1.4.575l4.85 4.85q.275.275.425.638.15.361.15.762V20q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zm7-14V4H6v16h12V9h-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 13 8"
             />
           </svg>
           <p
-            class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
+            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
           >
             No files visible in this room
           </p>
           <p
-            class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
+            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
           >
             Attach files from chat or just drag and drop them anywhere in a room.
           </p>

test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap

@@ -94,7 +94,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"