Deduplicate icons using Compound Design Tokens (#150)

* Deduplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshot Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 14, 2024 · d770e2a · d770e2a
1 parent 63986f8
commit d770e2a
Show file tree

Hide file tree

Showing 26 changed files with 82 additions and 93 deletions.
diff --git a/...ght/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png b/...ght/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png
diff --git a/res/css/structures/_AutocompleteInput.pcss b/res/css/structures/_AutocompleteInput.pcss
@@ -69,8 +69,8 @@ Please see LICENSE files in the repository root for full details.
     font-size: $font-12px;
 }
 
-.mx_AutocompleteInput_editor_selection_remove_button {
-    padding: 0 $spacing-4;
+.mx_AutocompleteInput_editor_selection_remove_button svg {
+    vertical-align: middle;
 }
 
 .mx_AutocompleteInput_matches {

diff --git a/res/css/structures/_RoomSearch.pcss b/res/css/structures/_RoomSearch.pcss
@@ -24,13 +24,13 @@ Please see LICENSE files in the repository root for full details.
     cursor: pointer;
 
     .mx_RoomSearch_icon {
-        width: 16px;
-        height: 16px;
-        mask: url("$(res)/img/element-icons/roomlist/search.svg");
+        width: 20px;
+        height: 20px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
         mask-repeat: no-repeat;
+        mask-size: contain;
         background-color: $secondary-content;
-        margin-left: 7px;
-        margin-bottom: 2px;
+        margin-left: var(--cpd-space-2x);
         flex-shrink: 0;
     }
 

diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss
@@ -53,13 +53,14 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_AuthBody_icon {
-        width: 40px;
+        width: 44px;
+        height: 44px;
     }
 
     .mx_AuthBody_lockIcon {
         color: $secondary-content;
         height: 32px;
-        margin-bottom: -3px; /* tweak to align all icons on different forgot password steps */
+        width: 32px;
     }
 
     .mx_AuthBody_text {

diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss
@@ -174,8 +174,11 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_InviteDialog_userTile_remove {
         display: inline-block;
-        margin-inline-start: $spacing-4;
         vertical-align: middle;
+
+        svg {
+            vertical-align: middle;
+        }
     }
 }
 

diff --git a/res/img/compound/checkbox-32px.svg b/res/img/compound/checkbox-32px.svg
diff --git a/res/img/compound/error-16px.svg b/res/img/compound/error-16px.svg
diff --git a/res/img/compound/padlock-32px.svg b/res/img/compound/padlock-32px.svg
diff --git a/res/img/element-icons/Email-icon.svg b/res/img/element-icons/Email-icon.svg
diff --git a/res/img/element-icons/roomlist/search.svg b/res/img/element-icons/roomlist/search.svg
diff --git a/res/img/feather-customised/help-circle.svg b/res/img/feather-customised/help-circle.svg
diff --git a/res/img/icon-pill-remove.svg b/res/img/icon-pill-remove.svg
diff --git a/res/img/plus.svg b/res/img/plus.svg
diff --git a/src/components/structures/AutocompleteInput.tsx b/src/components/structures/AutocompleteInput.tsx
@@ -8,13 +8,12 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { useState, ReactNode, ChangeEvent, KeyboardEvent, useRef, ReactElement } from "react";
 import classNames from "classnames";
+import { SearchIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import Autocompleter from "../../autocomplete/AutocompleteProvider";
 import { Key } from "../../Keyboard";
 import { ICompletion } from "../../autocomplete/Autocompleter";
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
-import { Icon as PillRemoveIcon } from "../../../res/img/icon-pill-remove.svg";
-import { Icon as SearchIcon } from "../../../res/img/element-icons/roomlist/search.svg";
 import useFocus from "../../hooks/useFocus";
 
 interface AutocompleteInputProps {
@@ -119,7 +118,7 @@ export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
                 onClick={onClickInputArea}
                 data-testid="autocomplete-editor"
             >
-                <SearchIcon className="mx_AutocompleteInput_search_icon" width={16} height={16} />
+                <SearchIcon className="mx_AutocompleteInput_search_icon" width="18px" height="18px" />
                 {selection.map((item) => (
                     <SelectionItem
                         key={item.completionId}
@@ -179,7 +178,7 @@ const SelectionItem: React.FC<SelectionItemProps> = ({ item, onClick, render })
                 onClick={() => onClick(item)}
                 data-testid={`autocomplete-selection-remove-button-${item.completionId}`}
             >
-                <PillRemoveIcon width={8} height={8} />
+                <CloseIcon width="16px" height="16px" />
             </AccessibleButton>
         </span>
     );

diff --git a/src/components/structures/ErrorMessage.tsx b/src/components/structures/ErrorMessage.tsx
@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ReactNode } from "react";
-
-import { Icon as WarningBadgeIcon } from "../../../res/img/compound/error-16px.svg";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 interface ErrorMessageProps {
     message: string | ReactNode | null;
@@ -19,7 +18,7 @@ interface ErrorMessageProps {
  * Reserves two lines to display errors to prevent layout shifts when the error pops up.
  */
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
-    const icon = message ? <WarningBadgeIcon className="mx_Icon mx_Icon_16" /> : null;
+    const icon = message ? <WarningIcon className="mx_Icon mx_Icon_16" /> : null;
 
     return (
         <div className="mx_ErrorMessage">

diff --git a/src/components/structures/auth/ForgotPassword.tsx b/src/components/structures/auth/ForgotPassword.tsx
@@ -11,6 +11,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { sleep } from "matrix-js-sdk/src/utils";
+import { LockSolidIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t, _td } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -23,8 +24,6 @@ import AuthBody from "../../views/auth/AuthBody";
 import PassphraseConfirmField from "../../views/auth/PassphraseConfirmField";
 import StyledCheckbox from "../../views/elements/StyledCheckbox";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
-import { Icon as CheckboxIcon } from "../../../../res/img/compound/checkbox-32px.svg";
-import { Icon as LockIcon } from "../../../../res/img/compound/padlock-32px.svg";
 import QuestionDialog from "../../views/dialogs/QuestionDialog";
 import { EnterEmail } from "./forgot-password/EnterEmail";
 import { CheckEmail } from "./forgot-password/CheckEmail";
@@ -369,7 +368,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
 
         return (
             <>
-                <LockIcon className="mx_AuthBody_lockIcon" />
+                <LockSolidIcon className="mx_AuthBody_lockIcon" />
                 <h1>{_t("auth|reset_password_title")}</h1>
                 <form onSubmit={this.onSubmitForm}>
                     <fieldset disabled={this.state.phase === Phase.ResettingPassword}>
@@ -417,7 +416,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
     public renderDone(): JSX.Element {
         return (
             <>
-                <CheckboxIcon className="mx_Icon mx_Icon_32 mx_Icon_accent" />
+                <CheckIcon className="mx_Icon mx_Icon_32 mx_Icon_accent" />
                 <h1>{_t("auth|reset_password|reset_successful")}</h1>
                 {this.state.logoutDevices ? <p>{_t("auth|reset_password|devices_logout_success")}</p> : null}
                 <input

diff --git a/src/components/structures/auth/forgot-password/EnterEmail.tsx b/src/components/structures/auth/forgot-password/EnterEmail.tsx
@@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ReactNode, useRef } from "react";
+import { EmailSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as EmailIcon } from "../../../../../res/img/element-icons/Email-icon.svg";
 import { _t, _td } from "../../../../languageHandler";
 import EmailField from "../../../views/auth/EmailField";
 import { ErrorMessage } from "../../ErrorMessage";
@@ -54,7 +54,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
 
     return (
         <>
-            <EmailIcon className="mx_AuthBody_icon" />
+            <EmailSolidIcon className="mx_AuthBody_icon" />
             <h1>{_t("auth|enter_email_heading")}</h1>
             <p className="mx_AuthBody_text">
                 {_t("auth|enter_email_explainer", { homeserver }, { b: (t) => <strong>{t}</strong> })}

diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
@@ -13,6 +13,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { uniqBy } from "lodash";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Icon as EmailPillAvatarIcon } from "../../../../res/img/icon-email-pill-avatar.svg";
 import { _t, _td } from "../../../languageHandler";
@@ -123,13 +124,12 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
         let closeButton;
         if (this.props.onRemove) {
             closeButton = (
-                <AccessibleButton className="mx_InviteDialog_userTile_remove" onClick={this.onRemove}>
-                    <img
-                        src={require("../../../../res/img/icon-pill-remove.svg").default}
-                        alt={_t("action|remove")}
-                        width={8}
-                        height={8}
-                    />
+                <AccessibleButton
+                    className="mx_InviteDialog_userTile_remove"
+                    onClick={this.onRemove}
+                    aria-label={_t("action|remove")}
+                >
+                    <CloseIcon width="16px" height="16px" />
                 </AccessibleButton>
             );
         }

diff --git a/src/components/views/elements/AppPermission.tsx b/src/components/views/elements/AppPermission.tsx
@@ -11,6 +11,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
+import { HelpIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
@@ -21,7 +22,6 @@ import BaseAvatar from "../avatars/BaseAvatar";
 import Heading from "../typography/Heading";
 import AccessibleButton from "./AccessibleButton";
 import { parseUrl } from "../../../utils/UrlUtils";
-import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg";
 
 interface IProps {
     url: string;

diff --git a/src/components/views/messages/DecryptionFailureBody.tsx b/src/components/views/messages/DecryptionFailureBody.tsx
@@ -10,11 +10,11 @@ import classNames from "classnames";
 import React, { forwardRef, ForwardRefExoticComponent, useContext } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { DecryptionFailureCode } from "matrix-js-sdk/src/crypto-api";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import { IBodyProps } from "./IBodyProps";
 import { LocalDeviceVerificationStateContext } from "../../../contexts/LocalDeviceVerificationStateContext";
-import { Icon as WarningBadgeIcon } from "../../../../res/img/compound/error-16px.svg";
 
 function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined): string | React.JSX.Element {
     switch (mxEvent.decryptionFailureReason) {
@@ -41,7 +41,7 @@ function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined):
         case DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED:
             return (
                 <span>
-                    <WarningBadgeIcon className="mx_Icon mx_Icon_16" />
+                    <WarningIcon className="mx_Icon mx_Icon_16" />
                     {_t("timeline|decryption_failure|sender_identity_previously_verified")}
                 </span>
             );

diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
@@ -66,7 +66,6 @@ interface IProps {
     presenceLastActiveAgo: number;
     presenceLastTs: number;
     presenceCurrentlyActive?: boolean;
-    showInviteButton: boolean;
     onClick(): void;
     showPresence: boolean;
     subtextLabel?: string;
@@ -135,20 +134,6 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
             </div>
         );
 
-        let inviteButton;
-        if (this.props.showInviteButton) {
-            inviteButton = (
-                <div className="mx_EntityTile_invite">
-                    <img
-                        alt={_t("action|invite")}
-                        src={require("../../../../res/img/plus.svg").default}
-                        width="16"
-                        height="16"
-                    />
-                </div>
-            );
-        }
-
         let powerLabel;
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
@@ -178,7 +163,6 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
                     </div>
                     {nameAndPresence}
                     {powerLabel}
-                    {inviteButton}
                 </AccessibleButton>
             </div>
         );

diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx
@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-
-import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 interface Props {
     message: string;

diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx
@@ -7,8 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
+import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as WarningIcon } from "../../../../res/img/compound/error-16px.svg";
 import { _t } from "../../../languageHandler";
 
 export const VoiceBroadcastRecordingConnectionError: React.FC = () => {

diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -306,9 +306,21 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
                 aria-labelledby="floating-ui-86"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
-                <div
+                <svg
                   class="mx_Icon mx_Icon_12"
-                />
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12 8a1.5 1.5 0 0 0-1.5 1.5 1 1 0 1 1-2 0 3.5 3.5 0 1 1 6.01 2.439c-.122.126-.24.243-.352.355-.287.288-.54.54-.76.824-.293.375-.398.651-.398.882a1 1 0 1 1-2 0c0-.874.407-1.58.819-2.11.305-.392.688-.775 1-1.085l.257-.26A1.5 1.5 0 0 0 12 8Zm1 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                  />
+                  <path
+                    d="M8.1 21.212A9.738 9.738 0 0 0 12 22a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.613-1.958 2.137-3.175A9.738 9.738 0 0 0 22 12a9.738 9.738 0 0 0-.788-3.9 10.099 10.099 0 0 0-2.137-3.175c-.9-.9-1.958-1.612-3.175-2.137A9.738 9.738 0 0 0 12 2a9.738 9.738 0 0 0-3.9.788 10.099 10.099 0 0 0-3.175 2.137c-.9.9-1.612 1.958-2.137 3.175A9.738 9.738 0 0 0 2 12a9.74 9.74 0 0 0 .788 3.9 10.098 10.098 0 0 0 2.137 3.175c.9.9 1.958 1.613 3.175 2.137Zm9.575-3.537C16.125 19.225 14.233 20 12 20c-2.233 0-4.125-.775-5.675-2.325C4.775 16.125 4 14.233 4 12c0-2.233.775-4.125 2.325-5.675C7.875 4.775 9.767 4 12 4c2.233 0 4.125.775 5.675 2.325C19.225 7.875 20 9.767 20 12c0 2.233-.775 4.125-2.325 5.675Z"
+                  />
+                </svg>
               </div>
                with example.com.
             </span>