diff --git a/package.json b/package.json index a54fa74797..06bc05f2e5 100644 --- 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 index c4bf2c3ff7..9c3550804f 100644 --- 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 index 9c56da9609..dff2716c19 100644 --- 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 index 547d185bf1..8951cfcb91 100644 --- 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 index 036dc1b451..c2f8d3c406 100644 --- 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 index d8b0c1b71b..aadabeb646 100644 --- 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 index dbc8743944..2552a8a408 100644 --- 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 index 1f9843d708..6f8fd9790b 100644 --- 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 index c7b1673166..c4b3570b31 100644 --- 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 index fcc269bede..32f8ed7e5d 100644 --- 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 index 36fe540a0f..0882c4a8bf 100644 --- 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 index 0e95deed38..9bb9f736b2 100644 --- 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 index c22da69bed..c817cee0f1 100644 --- 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 index 87ffc5da2e..746cf477a3 100644 --- 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%;" > -
+ + +
@@ -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);" > -
+ xmlns="http://www.w3.org/2000/svg" + > + +

diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 2eab478930..05094a2ca1 100644 --- 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%;" > -

+ + +
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 392e1da949..7c1b43e7c0 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -118,12 +118,19 @@ exports[` has button to edit topic when expanded 1`] = ` data-kind="primary" role="menuitemcheckbox" > -