[Backport staging] Update compound-design-tokens to satisfy compound-web peer dependency (#12820)

RiotRobot · t3chguy · web-flow · commit 0e2ba42ad703 · 2024-07-24T11:22:21.000Z
Co-authored-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@vector-im/compound-design-tokens": "^1.2.0",
+        "@vector-im/compound-design-tokens": "^1.6.1",
         "@vector-im/compound-web": "^5.4.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx
@@ -28,7 +28,7 @@ import {
     TimelineWindow,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg";
+import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
 
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import EventIndexPeg from "../../indexing/EventIndexPeg";
diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications.svg";
+import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 
 import { _t } from "../../languageHandler";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
@@ -19,7 +19,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { EventTimelineSet, Room, Thread } from "matrix-js-sdk/src/matrix";
 import { IconButton, Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads.svg";
+import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 
 import { Icon as MarkAllThreadsReadIcon } from "../../../res/img/element-icons/check-all.svg";
 import BaseCard from "../views/right_panel/BaseCard";
diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx
@@ -22,7 +22,7 @@ import {
 } from "matrix-js-sdk/src/rendezvous";
 import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
 import { Icon as CheckCircleSolidIcon } from "@vector-im/compound-design-tokens/icons/check-circle-solid.svg";
-import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import { Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
 
diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "react";
 import classNames from "classnames";
 import { IconButton, Text } from "@vector-im/compound-web";
-import { Icon as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
 
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -37,19 +37,19 @@ import {
     Search,
     Form,
 } from "@vector-im/compound-web";
-import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite.svg";
+import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
 import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
-import { Icon as LinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
-import { Icon as SettingsIcon } from "@vector-im/compound-design-tokens/icons/settings.svg";
+import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/settings";
 import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg";
-import { Icon as LeaveIcon } from "@vector-im/compound-design-tokens/icons/leave.svg";
-import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg";
-import { Icon as PollsIcon } from "@vector-im/compound-design-tokens/icons/polls.svg";
-import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg";
+import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
+import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files";
+import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
 import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
 import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
-import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
-import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
+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 { Icon as ChevronDownIcon } from "@vector-im/compound-design-tokens/icons/chevron-down.svg";
 import { EventType, JoinRule, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
@@ -35,17 +35,17 @@ import { UserVerificationStatus, VerificationRequest } from "matrix-js-sdk/src/c
 import { logger } from "matrix-js-sdk/src/logger";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { Heading, MenuItem, Text } from "@vector-im/compound-web";
-import { Icon as ChatIcon } from "@vector-im/compound-design-tokens/icons/chat.svg";
-import { Icon as CheckIcon } from "@vector-im/compound-design-tokens/icons/check.svg";
-import { Icon as ShareIcon } from "@vector-im/compound-design-tokens/icons/share.svg";
-import { Icon as MentionIcon } from "@vector-im/compound-design-tokens/icons/mention.svg";
+import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
+import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
+import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
 import { Icon as InviteIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
-import { Icon as BlockIcon } from "@vector-im/compound-design-tokens/icons/block.svg";
-import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
-import { Icon as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
+import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { Icon as ChatProblemIcon } from "@vector-im/compound-design-tokens/icons/chat-problem.svg";
 import { Icon as VisibilityOffIcon } from "@vector-im/compound-design-tokens/icons/visibility-off.svg";
-import { Icon as LeaveIcon } from "@vector-im/compound-design-tokens/icons/leave.svg";
+import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 
 import dis from "../../../dispatcher/dispatcher";
 import Modal from "../../../Modal";
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
@@ -18,13 +18,13 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
 import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
-import { Icon as CloseCallIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import CloseCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/threads-solid.svg";
 import { Icon as RoomInfoIcon } from "@vector-im/compound-design-tokens/icons/info-solid.svg";
 import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
-import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg";
-import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
-import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
+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 PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
 
diff --git a/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx b/src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Icon as ExternalLinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
+import ExternalLinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
 import { Button, IconButton, Tooltip } from "@vector-im/compound-web";
 import React, { useCallback } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
diff --git a/src/components/views/rooms/RoomSearchAuxPanel.tsx b/src/components/views/rooms/RoomSearchAuxPanel.tsx
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.svg";
-import { Icon as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
+import SearchIcon from "@vector-im/compound-design-tokens/assets/web/icons/search";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { IconButton, Link } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
diff --git a/src/components/views/settings/AvatarSetting.tsx b/src/components/views/settings/AvatarSetting.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React, { ReactNode, createRef, useCallback, useEffect, useState } from "react";
-import { Icon as EditIcon } from "@vector-im/compound-design-tokens/icons/edit.svg";
-import { Icon as UploadIcon } from "@vector-im/compound-design-tokens/icons/share.svg";
-import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
+import EditIcon from "@vector-im/compound-design-tokens/assets/web/icons/edit";
+import UploadIcon from "@vector-im/compound-design-tokens/assets/web/icons/share";
+import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
 import { Menu, MenuItem } from "@vector-im/compound-web";
 import classNames from "classnames";
 
diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx
@@ -26,7 +26,7 @@ import {
     ErrorMessage,
     HelpMessage,
 } from "@vector-im/compound-web";
-import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
+import DeleteIcon from "@vector-im/compound-design-tokens/assets/web/icons/delete";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 
diff --git a/test/components/structures/__snapshots__/FilePanel-test.tsx.snap b/test/components/structures/__snapshots__/FilePanel-test.tsx.snap
@@ -22,7 +22,17 @@ exports[`FilePanel renders empty state 1`] = `
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%;"
         >
-          <div />
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            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"
+            />
+          </svg>
         </div>
       </button>
     </div>
@@ -36,10 +46,17 @@ exports[`FilePanel renders empty state 1`] = `
           class="mx_Flex mx_EmptyState"
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x);"
         >
-          <div
+          <svg
+            fill="currentColor"
             height="32px"
+            viewBox="0 0 24 24"
             width="32px"
-          />
+            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"
+            />
+          </svg>
           <p
             class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83"
           >
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -40,7 +40,17 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
             class="_indicator-icon_133tf_26"
             style="--cpd-icon-button-size: 100%;"
           >
-            <div />
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              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"
+              />
+            </svg>
           </div>
         </button>
       </div>
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
diff --git a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
diff --git a/yarn.lock b/yarn.lock
