Remove @bentley/icons-generic from AppUI packages (backport #1153) (#…

…1155) * Remove `@bentley/icons-generic` from AppUI packages (#1153) * Remove unused icons-generic dependency * Avoid icons-generic usage in SnapMode field. * Remove icons-generic from appui-react * rush change * Remove leftover getIconNode * Remove failing tests that test the DOM structure. * Fix endIcon styling. (cherry picked from commit 594690c) # Conflicts: # common/config/rush/pnpm-lock.yaml # ui/appui-react/src/appui-react/statusfields/SnapMode.tsx * Fix merge conflicts --------- Co-authored-by: GerardasB <[email protected]>
iTwin · Dec 12, 2024 · 282c149 · 282c149
1 parent e652f15
commit 282c149
Show file tree

Hide file tree

Showing 19 changed files with 192 additions and 82 deletions.
diff --git a/common/changes/@itwin/appui-react/remove-icons-generic_2024-12-11-15-42.json b/common/changes/@itwin/appui-react/remove-icons-generic_2024-12-11-15-42.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Remove `@bentley/icons-generic` dependency.",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}
diff --git a/common/changes/@itwin/core-react/remove-icons-generic_2024-12-11-15-42.json b/common/changes/@itwin/core-react/remove-icons-generic_2024-12-11-15-42.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/core-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/core-react"
+}
diff --git a/common/changes/@itwin/imodel-components-react/remove-icons-generic_2024-12-11-15-42.json b/common/changes/@itwin/imodel-components-react/remove-icons-generic_2024-12-11-15-42.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-components-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/imodel-components-react"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/ui/appui-react/package.json b/ui/appui-react/package.json
@@ -117,7 +117,6 @@
     "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@bentley/icons-generic": "^1.0.34",
     "@itwin/itwinui-icons-react": "^2.8.0",
     "@itwin/itwinui-illustrations-react": "^2.0.1",
     "classnames": "2.5.1",

diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnaps.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnaps.tsx
@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export function SvgSnaps() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path d="M14,3.5a1.5,1.5,0,1,0-2.2618,1.2854L10.3276,9.0174a1.49,1.49,0,0,0-1.31,1.31L4.7855,11.7382a1.5009,1.5009,0,1,0,.1971.9343l4.2319-1.4107a1.4958,1.4958,0,1,0,2.0473-2.0473l1.4107-4.2319A1.4949,1.4949,0,0,0,14,3.5ZM12.5,3a.5.5,0,1,1-.5.5A.5006.5006,0,0,1,12.5,3Zm-9,10a.5.5,0,1,1,.5-.5A.5.5,0,0,1,3.5,13Zm7-2a.5.5,0,0,1,0-1H10.5a.5.5,0,0,1,0,1Z" />
+    </svg>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsBisector.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsBisector.tsx
@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export function SvgSnapsBisector() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path d="M12.761,4.05371,9.35376.64648l-.707.707L11.2395,3.94629,8.23425,6.1994a1.48412,1.48412,0,0,0-.734-.19934,1.493,1.493,0,0,0-1.3941,2.04535L2.239,10.94629l3.40772,3.40723.707-.707L3.76147,11.05371l3.00477-2.253A1.48394,1.48394,0,0,0,7.50024,9,1.493,1.493,0,0,0,8.89429,6.95459ZM7.50024,8a.5.5,0,1,1,.5-.5A.50057.50057,0,0,1,7.50024,8Z" />
+    </svg>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsCenter.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsCenter.tsx
@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export function SvgSnapsCenter() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path d="M7.5,7a.5.5,0,1,1-.5.5A.50057.50057,0,0,1,7.5,7m0-1A1.5,1.5,0,1,0,9,7.5,1.5,1.5,0,0,0,7.5,6Zm0-5A6.5,6.5,0,1,1,1,7.5,6.50736,6.50736,0,0,1,7.5,1m0-1A7.5,7.5,0,1,0,15,7.5,7.5,7.5,0,0,0,7.5,0Z" />
+    </svg>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsIntersection.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsIntersection.tsx
@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export function SvgSnapsIntersection() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path d="M13.38379,13.67969,8.81842,8.20129A1.43136,1.43136,0,0,0,8.90662,6.995l4.40979-3.60828-.63282-.77344L8.27417,6.22119a1.48194,1.48194,0,0,0-1.3584-.10309L2.38379.67969l-.76758.64062L6.18158,6.79877a1.4317,1.4317,0,0,0-.08807,1.20678L1.68359,11.61328l.63282.77344L6.72626,8.77905a1.48165,1.48165,0,0,0,1.358.10291l4.532,5.43835ZM7,7.5a.5.5,0,1,1,.5.5A.50056.50056,0,0,1,7,7.5Z" />
+    </svg>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsMidpoint.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsMidpoint.tsx
@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export function SvgSnapsMidpoint() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path d="M14.35352,1.35352l-.707-.707L8.143,6.15A1.49124,1.49124,0,0,0,6.15,8.143L.64648,13.64648l.707.707L6.85693,8.8501A1.49129,1.49129,0,0,0,8.85,6.857ZM7.5,8.00012A.50006.50006,0,1,1,8,7.5.50063.50063,0,0,1,7.5,8.00012Z" />
+    </svg>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsNearest.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsNearest.tsx
@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export function SvgSnapsNearest() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path d="M13,1.5V7.293L11.293,9H8.9082a1.49339,1.49339,0,0,0-2.90191.43781l-1.22968.6148L1.64673,13.14636l.707.707L5.29663,10.911l1.01349-.5069A1.4891,1.4891,0,0,0,8.90814,10H11.707L14,7.707V1.5ZM7.5,10.00006A.50006.50006,0,1,1,8,9.49994.50063.50063,0,0,1,7.5,10.00006Z" />
+    </svg>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsOrigin.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsOrigin.tsx
@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Utilities
+ */
+
+import * as React from "react";
+
+/** @internal */
+export function SvgSnapsOrigin() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <path
+        d="M10.79681,5.00409l-.801-.801,2.20392-2.20379.801.8009Zm-5.7926-.801L2.80029,1.99927l-.801.8009L4.20319,5.00409Zm4.99158,6.59363,2.20392,2.204.801-.801-2.20392-2.204Zm-7.99646,1.403.801.801,2.20392-2.204-.801-.801ZM15,6.99988v1H11.50549L8,11.50537V15H7V11.50537L3.49451,7.99988H0v-1H3.49451L7,3.49451V0H8V3.49451l3.50549,3.50537Zm-4.40869.5L7.5,4.40869,4.40875,7.49988,7.5,10.59119Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+}
diff --git a/ui/appui-react/src/appui-react/layout/footer/snap-mode/Snap.scss b/ui/appui-react/src/appui-react/layout/footer/snap-mode/Snap.scss
@@ -12,6 +12,10 @@
   color: var(--iui-color-text);
   position: relative;
 
+  svg {
+    fill: currentColor;
+  }
+
   > .nz-icon {
     grid-row: 1;
     color: var(--iui-color-icon);

diff --git a/ui/appui-react/src/appui-react/layout/footer/snap-mode/Snap.tsx b/ui/appui-react/src/appui-react/layout/footer/snap-mode/Snap.tsx
@@ -46,10 +46,8 @@ export class Snap extends React.PureComponent<SnapProps> {
         role="button"
         tabIndex={-1}
       >
-        {this.props.icon === undefined ? undefined : (
-          <div>{this.props.icon}</div>
-        )}
-        <div>{this.props.children}</div>
+        {this.props.icon}
+        {this.props.children}
       </div>
     );
   }

diff --git a/ui/appui-react/src/appui-react/statusfields/SnapMode.tsx b/ui/appui-react/src/appui-react/statusfields/SnapMode.tsx
@@ -6,88 +6,70 @@
  * @module StatusBar
  */
 
-import snapModeBisector from "@bentley/icons-generic/icons/snaps-bisector.svg";
-import snapModeCenter from "@bentley/icons-generic/icons/snaps-center.svg";
-import snapModeIntersection from "@bentley/icons-generic/icons/snaps-intersection.svg";
-import snapModeMidpoint from "@bentley/icons-generic/icons/snaps-midpoint.svg";
-import snapModeNearest from "@bentley/icons-generic/icons/snaps-nearest.svg";
-import snapModeOrigin from "@bentley/icons-generic/icons/snaps-origin.svg";
-import snapModeKeypoint from "@bentley/icons-generic/icons/snaps.svg";
 import { SnapMode } from "@itwin/core-frontend";
-import { Icon } from "@itwin/core-react";
 import type { CommonProps } from "@itwin/core-react";
 import * as React from "react";
 import { UiFramework } from "../UiFramework.js";
 import { SnapModePanel } from "../layout/footer/snap-mode/Panel.js";
 import { Snap } from "../layout/footer/snap-mode/Snap.js";
 import { useTranslation } from "../hooks/useTranslation.js";
 import { useReduxFrameworkState } from "../uistate/useReduxFrameworkState.js";
-import { Button } from "@itwin/itwinui-react";
+import { Button, Icon } from "@itwin/itwinui-react";
 import { StatusBarPopover } from "../statusbar/popup/StatusBarPopover.js";
+import { SvgSnapsBisector } from "../icons/snaps/SvgSnapsBisector.js";
+import { SvgSnapsCenter } from "../icons/snaps/SvgSnapsCenter.js";
+import { SvgSnapsIntersection } from "../icons/snaps/SvgSnapsIntersection.js";
+import { SvgSnapsMidpoint } from "../icons/snaps/SvgSnapsMidpoint.js";
+import { SvgSnapsNearest } from "../icons/snaps/SvgSnapsNearest.js";
+import { SvgSnapsOrigin } from "../icons/snaps/SvgSnapsOrigin.js";
+import { SvgSnaps } from "../icons/snaps/SvgSnaps.js";
 
 /** Define the properties that will be used to represent the available snap modes. */
 interface SnapModeFieldEntry {
   labelKey: string;
   value: number;
-  iconSpec: string;
+  icon: React.ReactElement;
 }
 
 // Field entry of all possible snap modes.
 const allSnapModeFieldEntries: SnapModeFieldEntry[] = [
   {
     labelKey: "snapModeField.keypoint",
     value: SnapMode.NearestKeypoint as number,
-    iconSpec: snapModeKeypoint,
+    icon: <SvgSnaps />,
   },
   {
     labelKey: "snapModeField.intersection",
     value: SnapMode.Intersection as number,
-    iconSpec: snapModeIntersection,
+    icon: <SvgSnapsIntersection />,
   },
   {
     labelKey: "snapModeField.center",
     value: SnapMode.Center as number,
-    iconSpec: snapModeCenter,
+    icon: <SvgSnapsCenter />,
   },
   {
     labelKey: "snapModeField.nearest",
     value: SnapMode.Nearest as number,
-    iconSpec: snapModeNearest,
+    icon: <SvgSnapsNearest />,
   },
   {
     labelKey: "snapModeField.origin",
     value: SnapMode.Origin as number,
-    iconSpec: snapModeOrigin,
+    icon: <SvgSnapsOrigin />,
   },
   {
     labelKey: "snapModeField.midpoint",
     value: SnapMode.MidPoint as number,
-    iconSpec: snapModeMidpoint,
+    icon: <SvgSnapsMidpoint />,
   },
   {
     labelKey: "snapModeField.bisector",
     value: SnapMode.Bisector as number,
-    iconSpec: snapModeBisector,
+    icon: <SvgSnapsBisector />,
   },
 ];
 
-/** Return icon for a specific snapMode. */
-const getSnapModeIcon = (snapMode: number) => {
-  // Get all the modes present in the bitmask.
-  const modes: SnapModeFieldEntry[] = allSnapModeFieldEntries.filter(
-    (entry) => {
-      return (entry.value & snapMode) === entry.value;
-    }
-  );
-
-  return (
-    // eslint-disable-next-line deprecation/deprecation
-    <Icon
-      iconSpec={modes.length === 1 ? modes[0].iconSpec : snapModeKeypoint}
-    />
-  );
-};
-
 /** Defines properties supported by the SnapMode Field Component. */
 // eslint-disable-next-line deprecation/deprecation
 interface SnapModeFieldProps extends CommonProps {
@@ -123,6 +105,13 @@ export function SnapModeField(props: SnapModeFieldProps) {
   );
   const snapMode = props.snapMode ?? reduxSnapMode ?? SnapMode.NearestKeypoint;
 
+  // Get all the modes present in the bitmask.
+  const enabledSnaps: SnapModeFieldEntry[] = allSnapModeFieldEntries.filter(
+    (entry) => {
+      return (entry.value & snapMode) === entry.value;
+    }
+  );
+
   const title = translate("snapModeField.snapMode");
   return (
     <StatusBarPopover
@@ -140,10 +129,7 @@ export function SnapModeField(props: SnapModeFieldProps) {
                 UiFramework.setAccudrawSnapMode(entry.value);
               }}
               isActive={(snapMode & entry.value) === entry.value}
-              icon={
-                // eslint-disable-next-line deprecation/deprecation
-                <Icon className={`icon`} iconSpec={entry.iconSpec} />
-              }
+              icon={<Icon>{entry.icon}</Icon>}
             >
               {translate(entry.labelKey)}
             </Snap>
@@ -154,7 +140,9 @@ export function SnapModeField(props: SnapModeFieldProps) {
       <Button
         styleType="borderless"
         title={title}
-        endIcon={getSnapModeIcon(snapMode)}
+        endIcon={
+          enabledSnaps.length === 1 ? enabledSnaps[0].icon : <SvgSnaps />
+        }
       >
         {title}
         <StatusBarPopover.ExpandIndicator />

diff --git a/ui/appui-react/src/test/layout/footer/snap-mode/Snap.test.tsx b/ui/appui-react/src/test/layout/footer/snap-mode/Snap.test.tsx
@@ -23,12 +23,4 @@ describe("<Snap />", () => {
       selectorMatches(".nz-active")
     );
   });
-
-  it("renders correctly with icon", () => {
-    render(<Snap icon={<i data-testid="icon" />} />);
-
-    expect(screen.getByTestId("icon")).to.satisfy(
-      selectorMatches(".nz-footer-snapMode-snap div:first-child i")
-    );
-  });
 });