From 594690caa3e828412fc78f6f47629a2a73aff6f0 Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Thu, 12 Dec 2024 18:43:46 +0200 Subject: [PATCH] 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. --- ...remove-icons-generic_2024-12-11-15-42.json | 10 +++ ...remove-icons-generic_2024-12-11-15-42.json | 10 +++ ...remove-icons-generic_2024-12-11-15-42.json | 10 +++ common/config/rush/pnpm-lock.yaml | 9 --- ui/appui-react/package.json | 1 - .../src/appui-react/icons/snaps/SvgSnaps.tsx | 18 +++++ .../icons/snaps/SvgSnapsBisector.tsx | 18 +++++ .../icons/snaps/SvgSnapsCenter.tsx | 18 +++++ .../icons/snaps/SvgSnapsIntersection.tsx | 18 +++++ .../icons/snaps/SvgSnapsMidpoint.tsx | 18 +++++ .../icons/snaps/SvgSnapsNearest.tsx | 18 +++++ .../icons/snaps/SvgSnapsOrigin.tsx | 21 ++++++ .../layout/footer/snap-mode/Snap.scss | 4 ++ .../layout/footer/snap-mode/Snap.tsx | 6 +- .../src/appui-react/statusfields/SnapMode.tsx | 66 ++++++++----------- .../appui-react/tools/RestoreLayoutTool.tsx | 4 -- .../layout/footer/snap-mode/Snap.test.tsx | 8 --- .../src/test/statusfields/SnapMode.test.tsx | 19 ------ ui/core-react/package.json | 1 - ui/imodel-components-react/package.json | 1 - 20 files changed, 192 insertions(+), 86 deletions(-) create mode 100644 common/changes/@itwin/appui-react/remove-icons-generic_2024-12-11-15-42.json create mode 100644 common/changes/@itwin/core-react/remove-icons-generic_2024-12-11-15-42.json create mode 100644 common/changes/@itwin/imodel-components-react/remove-icons-generic_2024-12-11-15-42.json create mode 100644 ui/appui-react/src/appui-react/icons/snaps/SvgSnaps.tsx create mode 100644 ui/appui-react/src/appui-react/icons/snaps/SvgSnapsBisector.tsx create mode 100644 ui/appui-react/src/appui-react/icons/snaps/SvgSnapsCenter.tsx create mode 100644 ui/appui-react/src/appui-react/icons/snaps/SvgSnapsIntersection.tsx create mode 100644 ui/appui-react/src/appui-react/icons/snaps/SvgSnapsMidpoint.tsx create mode 100644 ui/appui-react/src/appui-react/icons/snaps/SvgSnapsNearest.tsx create mode 100644 ui/appui-react/src/appui-react/icons/snaps/SvgSnapsOrigin.tsx 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 new file mode 100644 index 00000000000..646f921a565 --- /dev/null +++ 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 new file mode 100644 index 00000000000..17ffb558418 --- /dev/null +++ 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" +} \ No newline at end of file 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 new file mode 100644 index 00000000000..98181801665 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index b56cd854098..1680b2a13ca 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -564,9 +564,6 @@ importers: ../../ui/appui-react: dependencies: - '@bentley/icons-generic': - specifier: ^1.0.34 - version: 1.0.34 '@itwin/itwinui-icons-react': specifier: ^2.8.0 version: 2.8.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -872,9 +869,6 @@ importers: ../../ui/core-react: dependencies: - '@bentley/icons-generic': - specifier: ^1.0.34 - version: 1.0.34 '@itwin/itwinui-icons-react': specifier: ^2.8.0 version: 2.8.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -996,9 +990,6 @@ importers: ../../ui/imodel-components-react: dependencies: - '@bentley/icons-generic': - specifier: ^1.0.34 - version: 1.0.34 '@itwin/itwinui-icons-react': specifier: ^2.8.0 version: 2.8.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/ui/appui-react/package.json b/ui/appui-react/package.json index cab20b338fd..d52e25495c6 100644 --- a/ui/appui-react/package.json +++ b/ui/appui-react/package.json @@ -118,7 +118,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 new file mode 100644 index 00000000000..0c066e85c33 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsBisector.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsBisector.tsx new file mode 100644 index 00000000000..bdf5ef9e566 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsCenter.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsCenter.tsx new file mode 100644 index 00000000000..51611464077 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsIntersection.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsIntersection.tsx new file mode 100644 index 00000000000..805476400e7 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsMidpoint.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsMidpoint.tsx new file mode 100644 index 00000000000..75ca3eff4a1 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsNearest.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsNearest.tsx new file mode 100644 index 00000000000..4ceeda20d31 --- /dev/null +++ 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 ( + + + + ); +} diff --git a/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsOrigin.tsx b/ui/appui-react/src/appui-react/icons/snaps/SvgSnapsOrigin.tsx new file mode 100644 index 00000000000..9d94af9ce6a --- /dev/null +++ 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 ( + + + + ); +} 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 index 82c2a26a55f..77ddd4779fa 100644 --- 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 index bd634e32392..aa7ea692b9e 100644 --- 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 { role="button" tabIndex={-1} > - {this.props.icon === undefined ? undefined : ( -
{this.props.icon}
- )} -
{this.props.children}
+ {this.props.icon} + {this.props.children} ); } diff --git a/ui/appui-react/src/appui-react/statusfields/SnapMode.tsx b/ui/appui-react/src/appui-react/statusfields/SnapMode.tsx index 7fea90456ec..948839cf05a 100644 --- a/ui/appui-react/src/appui-react/statusfields/SnapMode.tsx +++ b/ui/appui-react/src/appui-react/statusfields/SnapMode.tsx @@ -6,15 +6,7 @@ * @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"; @@ -22,14 +14,21 @@ 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. @@ -37,57 +36,40 @@ const allSnapModeFieldEntries: SnapModeFieldEntry[] = [ { labelKey: "snapModeField.keypoint", value: SnapMode.NearestKeypoint as number, - iconSpec: snapModeKeypoint, + icon: , }, { labelKey: "snapModeField.intersection", value: SnapMode.Intersection as number, - iconSpec: snapModeIntersection, + icon: , }, { labelKey: "snapModeField.center", value: SnapMode.Center as number, - iconSpec: snapModeCenter, + icon: , }, { labelKey: "snapModeField.nearest", value: SnapMode.Nearest as number, - iconSpec: snapModeNearest, + icon: , }, { labelKey: "snapModeField.origin", value: SnapMode.Origin as number, - iconSpec: snapModeOrigin, + icon: , }, { labelKey: "snapModeField.midpoint", value: SnapMode.MidPoint as number, - iconSpec: snapModeMidpoint, + icon: , }, { labelKey: "snapModeField.bisector", value: SnapMode.Bisector as number, - iconSpec: snapModeBisector, + icon: , }, ]; -/** 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 @typescript-eslint/no-deprecated - - ); -}; - /** Defines properties supported by the SnapMode Field Component. */ // eslint-disable-next-line @typescript-eslint/no-deprecated 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 ( - } + icon={{entry.icon}} > {translate(entry.labelKey)} @@ -154,7 +140,9 @@ export function SnapModeField(props: SnapModeFieldProps) {