Merge pull request #194 from element-hq/quenting/new-icons-components

Use the icon components directly from the tokens package
element-hq · Jul 15, 2024 · 76e47ca · 76e47ca
2 parents 0d1c20d + 35b8e1f
commit 76e47ca
Show file tree

Hide file tree

Showing 48 changed files with 111 additions and 592 deletions.
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "@types/react": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
-    "@vector-im/compound-design-tokens": "^1.3.0",
+    "@vector-im/compound-design-tokens": "^1.6.0",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.4",
     "browserslist-to-esbuild": "^1.2.0",
@@ -98,12 +98,10 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.5.3",
-    "vite-plugin-svgr": "^3.2.0",
     "vitest": "^1.6.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.9",
-    "@floating-ui/react-dom": "^2.0.8",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-form": "^0.0.3",

diff --git a/playwright/visual.test.ts-snapshots/Icon-Icon-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-Icon-1-chromium-linux.png
diff --git a/...wright/visual.test.ts-snapshots/Icon-IndicatorIcon-Default-1-chromium-linux.png b/...wright/visual.test.ts-snapshots/Icon-IndicatorIcon-Default-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Icon-IndicatorIcon-Demo-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-IndicatorIcon-Demo-1-chromium-linux.png
diff --git a/...st.ts-snapshots/Icon-IndicatorIcon-With-Critical-Indicator-1-chromium-linux.png b/...st.ts-snapshots/Icon-IndicatorIcon-With-Critical-Indicator-1-chromium-linux.png
diff --git a/...visual.test.ts-snapshots/Icon-IndicatorIcon-With-Indicator-1-chromium-linux.png b/...visual.test.ts-snapshots/Icon-IndicatorIcon-With-Indicator-1-chromium-linux.png
diff --git a/...est.ts-snapshots/Icon-IndicatorIcon-With-Success-Indicator-1-chromium-linux.png b/...est.ts-snapshots/Icon-IndicatorIcon-With-Success-Indicator-1-chromium-linux.png
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -17,10 +17,10 @@ limitations under the License.
 import classNames from "classnames";
 import React, { PropsWithChildren, useCallback } from "react";
 
-import CheckCircleIcon from "@vector-im/compound-design-tokens/icons/check-circle.svg";
-import ErrorIcon from "@vector-im/compound-design-tokens/icons/error.svg";
-import InfoIcon from "@vector-im/compound-design-tokens/icons/info.svg";
-import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg";
+import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 
 import styles from "./Alert.module.css";
 import { Text } from "../Typography/Text";

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -76,7 +76,6 @@ exports[`Alert > renders actions 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          class="cpd-icon"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -142,7 +141,6 @@ exports[`Alert > renders critical 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          class="cpd-icon"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -213,7 +211,6 @@ exports[`Alert > renders info 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          class="cpd-icon"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -279,7 +276,6 @@ exports[`Alert > renders success 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          class="cpd-icon"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"

diff --git a/src/components/Button/ActionButton.stories.tsx b/src/components/Button/ActionButton.stories.tsx
@@ -18,21 +18,7 @@ import React from "react";
 import { Meta } from "@storybook/react";
 import { fn } from "@storybook/test";
 
-import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg";
-import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg";
-import EditIcon from "@vector-im/compound-design-tokens/icons/edit.svg";
-import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg";
-import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg";
-import LinkIcon from "@vector-im/compound-design-tokens/icons/link.svg";
-import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
-import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
-import SearchIcon from "@vector-im/compound-design-tokens/icons/search.svg";
-import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
-import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
-import UserAddIcon from "@vector-im/compound-design-tokens/icons/user-add.svg";
-import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.svg";
-import VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
-import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
+import * as icons from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { Button as ButtonComponent } from "./Button";
 import { Tooltip } from "../..";
@@ -70,41 +56,9 @@ export default {
       control: { type: "inline-radio" },
     },
     Icon: {
-      options: [
-        "CheckIcon",
-        "CloseIcon",
-        "EditIcon",
-        "EndCallIcon",
-        "ExpandIcon",
-        "LinkIcon",
-        "MicOnSolidIcon",
-        "MicOffSolidIcon",
-        "SearchIcon",
-        "SettingsSolidIcon",
-        "ShareScreenSolidIcon",
-        "UserAddIcon",
-        "VideoCallOffSolidIcon",
-        "VideoCallSolidIcon",
-        "VisibilityOnIcon",
-      ],
-      mapping: {
-        CheckIcon,
-        CloseIcon,
-        EditIcon,
-        EndCallIcon,
-        ExpandIcon,
-        LinkIcon,
-        MicOnSolidIcon,
-        MicOffSolidIcon,
-        SearchIcon,
-        SettingsSolidIcon,
-        ShareScreenSolidIcon,
-        UserAddIcon,
-        VideoCallOffSolidIcon,
-        VideoCallSolidIcon,
-        VisibilityOnIcon,
-      },
-      control: { type: "inline-radio" },
+      options: Object.keys(icons),
+      mapping: icons,
+      control: { type: "select" },
     },
     onClick: { action: "onClick" },
   },
@@ -125,71 +79,71 @@ export const Settings = {
   args: {
     label: "Settings",
     kind: "secondary",
-    Icon: SettingsSolidIcon,
+    Icon: icons.SettingsSolidIcon,
   },
 };
 
 export const ShareLink = {
   args: {
     label: "Copy link",
     kind: "secondary",
-    Icon: LinkIcon,
+    Icon: icons.LinkIcon,
   },
 };
 
 export const VideoOn = {
   args: {
     label: "Turn video off",
     kind: "secondary",
-    Icon: VideoCallSolidIcon,
+    Icon: icons.VideoCallSolidIcon,
   },
 };
 
 export const VideoOff = {
   args: {
     label: "Turn video on",
     kind: "primary",
-    Icon: VideoCallOffSolidIcon,
+    Icon: icons.VideoCallOffSolidIcon,
   },
 };
 
 export const MicOn = {
   args: {
     label: "Turn mic off",
     kind: "secondary",
-    Icon: MicOnSolidIcon,
+    Icon: icons.MicOnSolidIcon,
   },
 };
 
 export const MicOff = {
   args: {
     label: "Turn mic on",
     kind: "primary",
-    Icon: MicOffSolidIcon,
+    Icon: icons.MicOffSolidIcon,
   },
 };
 
 export const ShareScreen = {
   args: {
     label: "Share screen",
     kind: "secondary",
-    Icon: ShareScreenSolidIcon,
+    Icon: icons.ShareScreenSolidIcon,
   },
 };
 
 export const SharingScreen = {
   args: {
     label: "Stop sharing screen",
     kind: "primary",
-    Icon: ShareScreenSolidIcon,
+    Icon: icons.ShareScreenSolidIcon,
   },
 };
 
 export const Fullscreen = {
   args: {
     label: "Full screen",
     kind: "secondary",
-    Icon: ExpandIcon,
+    Icon: icons.ExpandIcon,
   },
 };
 
@@ -198,7 +152,7 @@ export const EndCall = {
     label: "End call",
     kind: "primary",
     destructive: true,
-    Icon: EndCallIcon,
+    Icon: icons.EndCallIcon,
   },
 };
 
@@ -207,7 +161,7 @@ export const Invite = {
     label: "Invite",
     kind: "primary",
     size: "sm",
-    Icon: UserAddIcon,
+    Icon: icons.UserAddIcon,
   },
 };
 
@@ -216,7 +170,7 @@ export const Edit = {
     label: "Edit",
     kind: "primary",
     size: "sm",
-    Icon: EditIcon,
+    Icon: icons.EditIcon,
   },
 };
 
@@ -225,7 +179,7 @@ export const Search = {
     label: "Search",
     kind: "secondary",
     size: "sm",
-    Icon: SearchIcon,
+    Icon: icons.SearchIcon,
   },
 };
 
@@ -234,7 +188,7 @@ export const Save = {
     label: "Save",
     kind: "primary",
     size: "sm",
-    Icon: CheckIcon,
+    Icon: icons.CheckIcon,
   },
 };
 
@@ -243,7 +197,7 @@ export const SaveDisabled = {
     label: "Save",
     kind: "primary",
     size: "sm",
-    Icon: CheckIcon,
+    Icon: icons.CheckIcon,
     disabled: true,
   },
 };
@@ -253,7 +207,7 @@ export const Cancel = {
     label: "Cancel",
     kind: "secondary",
     size: "sm",
-    Icon: CloseIcon,
+    Icon: icons.CloseIcon,
   },
 };
 
@@ -262,6 +216,6 @@ export const Close = {
     label: "Close",
     kind: "secondary",
     size: "sm",
-    Icon: CloseIcon,
+    Icon: icons.CloseIcon,
   },
 };
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -19,21 +19,7 @@ import { fn } from "@storybook/test";
 
 import { Button as ButtonComponent } from "./Button";
 
-import CheckIcon from "@vector-im/compound-design-tokens/icons/check.svg";
-import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg";
-import EditIcon from "@vector-im/compound-design-tokens/icons/edit.svg";
-import EndCallIcon from "@vector-im/compound-design-tokens/icons/end-call.svg";
-import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg";
-import LinkIcon from "@vector-im/compound-design-tokens/icons/link.svg";
-import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg";
-import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg";
-import SearchIcon from "@vector-im/compound-design-tokens/icons/search.svg";
-import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-solid.svg";
-import ShareScreenSolidIcon from "@vector-im/compound-design-tokens/icons/share-screen-solid.svg";
-import UserAddIcon from "@vector-im/compound-design-tokens/icons/user-add.svg";
-import VideoCallOffSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-off-solid.svg";
-import VideoCallSolidIcon from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
-import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
+import * as icons from "@vector-im/compound-design-tokens/assets/web/icons";
 
 export default {
   title: "Button",
@@ -58,41 +44,9 @@ export default {
     },
     iconOnly: { type: "boolean" },
     Icon: {
-      options: [
-        "CheckIcon",
-        "CloseIcon",
-        "EditIcon",
-        "EndCallIcon",
-        "ExpandIcon",
-        "LinkIcon",
-        "MicOnSolidIcon",
-        "MicOffSolidIcon",
-        "SearchIcon",
-        "SettingsSolidIcon",
-        "ShareScreenSolidIcon",
-        "UserAddIcon",
-        "VideoCallOffSolidIcon",
-        "VideoCallSolidIcon",
-        "VisibilityOnIcon",
-      ],
-      mapping: {
-        CheckIcon,
-        CloseIcon,
-        EditIcon,
-        EndCallIcon,
-        ExpandIcon,
-        LinkIcon,
-        MicOnSolidIcon,
-        MicOffSolidIcon,
-        SearchIcon,
-        SettingsSolidIcon,
-        ShareScreenSolidIcon,
-        UserAddIcon,
-        VideoCallOffSolidIcon,
-        VideoCallSolidIcon,
-        VisibilityOnIcon,
-      },
-      control: { type: "inline-radio" },
+      options: Object.keys(icons),
+      mapping: icons,
+      control: { type: "select" },
     },
     onClick: { action: "onClick" },
   },
@@ -164,15 +118,15 @@ export const TertiaryDestructive = {
 export const WithIcon = {
   args: {
     ...Primary.args,
-    Icon: VisibilityOnIcon,
+    Icon: icons.VisibilityOnIcon,
   },
 };
 
 export const SmallWithIcon = {
   args: {
     ...Primary.args,
     size: "sm",
-    Icon: VisibilityOnIcon,
+    Icon: icons.VisibilityOnIcon,
   },
 };
 

diff --git a/src/components/Button/IconButton/IconButton.stories.tsx b/src/components/Button/IconButton/IconButton.stories.tsx
@@ -20,7 +20,7 @@ import { fn } from "@storybook/test";
 
 import { IconButton as IconButtonComponent } from "./IconButton";
 
-import UserIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
+import UserIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 
 export default {
   title: "Button/IconButton",