fix: update icons and code cleanup

gjulivan · gjulivan · commit a440b0265064 · 2026-03-26T15:18:06.000+01:00
diff --git a/packages/pluggableWidgets/signature-web/package.json b/packages/pluggableWidgets/signature-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/signature-web",
     "widgetName": "Signature",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "description": "Signature widget for Mendix Web",
     "copyright": "© Mendix Technology BV 2026. All rights reserved.",
     "license": "Apache-2.0",
@@ -46,17 +46,15 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
-        "@uiw/react-signature": "^1.3.4",
         "classnames": "^2.5.1",
-        "react-resize-detector": "^12.3.0",
         "signature_pad": "^5.1.3"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
         "@mendix/eslint-config-web-widgets": "workspace:*",
-        "@mendix/pluggable-widgets-tools": "file:mendix-pluggable-widgets-tools.tgz",
+        "@mendix/pluggable-widgets-tools": "workspace:*",
         "@mendix/prettier-config-web-widgets": "workspace:*",
-        "@mendix/run-e2e": "workspace:^*",
+        "@mendix/run-e2e": "workspace:*",
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "@mendix/widget-plugin-hooks": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
diff --git a/packages/pluggableWidgets/signature-web/src/Signature.editorPreview.tsx b/packages/pluggableWidgets/signature-web/src/Signature.editorPreview.tsx
@@ -1,5 +1,4 @@
 import { ReactElement } from "react";
-import "./ui/SignaturePreview.css";
 import { SignaturePreviewProps } from "typings/SignatureProps";
 import classNames from "classnames";
 
diff --git a/packages/pluggableWidgets/signature-web/src/Signature.tsx b/packages/pluggableWidgets/signature-web/src/Signature.tsx
@@ -4,8 +4,15 @@ import { SignatureComponent } from "./components/Signature";
 import "./ui/Signature.scss";
 
 export default function Signature(props: SignatureContainerProps): ReactElement {
-    const { class: className } = props;
-    const handleSignEnd = useCallback(() => {}, []);
+    const { class: className, onSignEndAction } = props;
+    const handleSignEnd = useCallback(
+        (imageDataUrl?: string) => {
+            if (onSignEndAction && !onSignEndAction.isExecuting && onSignEndAction.canExecute) {
+                onSignEndAction.execute({ signatureImage: imageDataUrl });
+            }
+        },
+        [onSignEndAction]
+    );
     return (
         <SignatureComponent
             readOnly={false}
diff --git a/packages/pluggableWidgets/signature-web/src/Signature.xml b/packages/pluggableWidgets/signature-web/src/Signature.xml
@@ -101,6 +101,15 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
+        <propertyGroup caption="Events">
+            <property key="onSignEndAction" type="action" required="false">
+                <caption>On sign end</caption>
+                <description>Action that is executed when the user finishes signing. The action will receive the signature image as a parameter.</description>
+                <actionVariables>
+                    <actionVariable key="signatureImage" caption="Signature Image Uri" type="String" />
+                </actionVariables>
+            </property>
+        </propertyGroup>
         <propertyGroup caption="Advanced">
             <property key="showGrid" type="boolean" defaultValue="false">
                 <caption>Show background grid</caption>
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.active.svg b/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.active.svg
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.dark.active.svg b/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.dark.active.svg
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.dark.png b/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.dark.png
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.dark.svg b/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.dark.svg
@@ -1,3 +1,6 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path fill-rule="evenodd" clip-rule="evenodd" d="M5.29619 1.11684C5.3703 0.968626 5.52179 0.875 5.6875 0.875H10.0625C10.2141 0.875 10.3549 0.95351 10.4347 1.08249C10.5144 1.21147 10.5216 1.37254 10.4538 1.50816L9.02039 4.375H10.9375C11.1098 4.375 11.266 4.47611 11.3366 4.63328C11.4072 4.79044 11.379 4.97439 11.2645 5.10316L4.26449 12.9782C4.12649 13.1334 3.89835 13.1702 3.71852 13.0663C3.5387 12.9623 3.45677 12.7462 3.52245 12.5492L5.0805 7.875H2.625C2.47337 7.875 2.33256 7.79649 2.25284 7.66751C2.17313 7.53853 2.16588 7.37746 2.23369 7.24184L5.29619 1.11684Z" fill="#848484"/>
-</svg>  
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 9.51503L5 10.07L5.5 7.51503L11.5 1.51503C12.875 1.38003 13.635 2.14003 13.5 3.51503L7.5 9.51503Z" stroke="#A4A4A4" stroke-miterlimit="10"/>
+<path d="M9.31494 3.91003L11.1749 5.77003" stroke="#A4A4A4" stroke-miterlimit="10"/>
+<path d="M13.3251 3.66504L14.3351 4.67504C14.5551 4.89504 14.5551 5.24504 14.3351 5.46504L11.9651 7.83504" stroke="#A4A4A4" stroke-miterlimit="10"/>
+<path d="M3.13506 10.505C1.63506 11.005 0.450064 14.48 2.94506 14.5C3.99506 14.505 4.99506 12.005 5.94506 13C5.94506 13 6.82006 14.5 7.44506 14.5C9.44506 14.5 10.9951 14.005 10.9951 14.005" stroke="#579BF9" stroke-miterlimit="10"/>
+</svg>
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.png b/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.png
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.svg b/packages/pluggableWidgets/signature-web/src/assets/Signature.icon.svg
@@ -1,3 +1,6 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.29619 1.11684C5.3703 0.968626 5.52179 0.875 5.6875 0.875H10.0625C10.2141 0.875 10.3549 0.95351 10.4347 1.08249C10.5144 1.21147 10.5216 1.37254 10.4538 1.50816L9.02039 4.375H10.9375C11.1098 4.375 11.266 4.47611 11.3366 4.63328C11.4072 4.79044 11.379 4.97439 11.2645 5.10316L4.26449 12.9782C4.12649 13.1334 3.89835 13.1702 3.71852 13.0663C3.5387 12.9623 3.45677 12.7462 3.52245 12.5492L5.0805 7.875H2.625C2.47337 7.875 2.33256 7.79649 2.25284 7.66751C2.17313 7.53853 2.16588 7.37746 2.23369 7.24184L5.29619 1.11684Z" fill="#C1C3C8"/>
-</svg>    
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 9.51503L5 10.07L5.5 7.51503L11.5 1.51503C12.875 1.38003 13.635 2.14003 13.5 3.51503L7.5 9.51503Z" stroke="#535965" stroke-miterlimit="10"/>
+<path d="M9.31494 3.91003L11.1749 5.77003" stroke="#535965" stroke-miterlimit="10"/>
+<path d="M13.3251 3.66504L14.3351 4.67504C14.5551 4.89504 14.5551 5.24504 14.3351 5.46504L11.9651 7.83504" stroke="#535965" stroke-miterlimit="10"/>
+<path d="M3.13506 10.505C1.63506 11.005 0.450064 14.48 2.94506 14.5C3.99506 14.505 4.99506 12.005 5.94506 13C5.94506 13 6.82006 14.5 7.44506 14.5C9.44506 14.5 10.9951 14.005 10.9951 14.005" stroke="#146FF4" stroke-miterlimit="10"/>
+</svg>
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.tile.dark.svg b/packages/pluggableWidgets/signature-web/src/assets/Signature.tile.dark.svg
@@ -0,0 +1,6 @@
+<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37 32L29.5 33.5L31.2 26.14L49.79 7.56002C53.97 7.15002 56.4 9.83002 56 14L37 32Z" stroke="#A4A4A4" stroke-miterlimit="10"/>
+<path d="M42.79 14.69L48.79 20.69" stroke="#A4A4A4" stroke-miterlimit="10"/>
+<path d="M50.73 25.63L57.01 19.35C57.66 18.7 57.66 17.63 57.01 16.98L55.02 14.93" stroke="#A4A4A4" stroke-miterlimit="10"/>
+<path d="M10.41 28.23C5.91002 29.73 2.43002 40.17 9.84002 40.21C13.5 40.23 16.64 33.54 18.84 35.71C19.97 36.83 21.65 39.41 23.34 40.21C25.5 41.23 30.5 39.23 30.5 39.23" stroke="#579BF9" stroke-miterlimit="10"/>
+</svg>
diff --git a/packages/pluggableWidgets/signature-web/src/assets/Signature.tile.svg b/packages/pluggableWidgets/signature-web/src/assets/Signature.tile.svg
@@ -0,0 +1,6 @@
+<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37 32L29.5 33.5L31.2 26.14L49.79 7.56002C53.97 7.15002 56.4 9.83002 56 14L37 32Z" stroke="#535965" stroke-miterlimit="10"/>
+<path d="M42.79 14.69L48.79 20.69" stroke="#535965" stroke-miterlimit="10"/>
+<path d="M50.73 25.63L57.01 19.35C57.66 18.7 57.66 17.63 57.01 16.98L55.02 14.93" stroke="#535965" stroke-miterlimit="10"/>
+<path d="M10.41 28.23C5.91002 29.73 2.43002 40.17 9.84002 40.21C13.5 40.23 16.64 33.54 18.84 35.71C19.97 36.83 21.65 39.41 23.34 40.21C25.5 41.23 30.5 39.23 30.5 39.23" stroke="#146FF4" stroke-miterlimit="10"/>
+</svg>
diff --git a/packages/pluggableWidgets/signature-web/src/components/Alert.tsx b/packages/pluggableWidgets/signature-web/src/components/Alert.tsx
diff --git a/packages/pluggableWidgets/signature-web/src/components/Grid.tsx b/packages/pluggableWidgets/signature-web/src/components/Grid.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useId } from "react";
 
 export interface GridBackgroundProps {
     gridCellWidth: number;
@@ -14,8 +14,7 @@ export const Grid: FC<GridBackgroundProps> = ({
     gridBorderWidth,
     showGrid = true
 }) => {
-    // eslint-disable-next-line react-hooks/purity
-    const id = `grid${Math.floor(Math.random() * 1000000)}`;
+    const id = useId();
     return showGrid ? (
         <svg className="widget-signature-grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
             <defs>
diff --git a/packages/pluggableWidgets/signature-web/src/components/Signature.tsx b/packages/pluggableWidgets/signature-web/src/components/Signature.tsx
@@ -4,7 +4,7 @@ import { ReactElement } from "react";
 import { useSignaturePad } from "src/utils/useSignaturePad";
 import Utils from "../utils/Utils";
 import { SignatureProps } from "../utils/customTypes";
-import { Alert } from "./Alert";
+import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
 import { Grid } from "./Grid";
 import { SizeContainer } from "./SizeContainer";
 
diff --git a/packages/pluggableWidgets/signature-web/src/components/SizeContainer.ts b/packages/pluggableWidgets/signature-web/src/components/SizeContainer.ts
@@ -1,7 +1,6 @@
 import { createElement, CSSProperties, FC, PropsWithChildren } from "react";
 import classNames from "classnames";
 import { useResizeObserver } from "../utils/useResizeObserver";
-// import { Dimensions, HeightUnitType, WidthUnitType } from "../utils/customTypes";
 import { constructWrapperStyle, DimensionsProps } from "../utils/dimensions";
 
 export interface SizeProps extends DimensionsProps, PropsWithChildren {
@@ -15,8 +14,6 @@ export interface SizeProps extends DimensionsProps, PropsWithChildren {
 export const SizeContainer: FC<SizeProps> = (props: SizeProps) => {
     const { className, children, classNameInner, readOnly = false, style, onResize } = props;
     const ref = useResizeObserver(() => onResize?.());
-
-    // const styleWidth = widthUnit === "percentage" ? `${width}%` : `${width}px`;
     const wrapperStyle = constructWrapperStyle(props);
     return createElement(
         "div",
@@ -49,27 +46,3 @@ export const SizeContainer: FC<SizeProps> = (props: SizeProps) => {
 };
 
 SizeContainer.displayName = "SizeContainer";
-
-// const getHeight = (
-//     heightUnit: HeightUnitType,
-//     height: number,
-//     widthUnit: WidthUnitType,
-//     width: number
-// ): CSSProperties => {
-//     const style: CSSProperties = {};
-//     if (heightUnit === "percentageOfWidth") {
-//         const ratio = (height / 100) * width;
-//         if (widthUnit === "percentage") {
-//             style.height = "auto";
-//             style.paddingBottom = `${ratio}%`;
-//         } else {
-//             style.height = `${ratio}px`;
-//         }
-//     } else if (heightUnit === "pixels") {
-//         style.height = `${height}px`;
-//     } else if (heightUnit === "percentageOfParent") {
-//         style.height = `${height}%`;
-//     }
-
-//     return style;
-// };
diff --git a/packages/pluggableWidgets/signature-web/src/package.xml b/packages/pluggableWidgets/signature-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Signature" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Signature" version="2.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Signature.xml" />
         </widgetFiles>
diff --git a/packages/pluggableWidgets/signature-web/src/ui/SignaturePreview.css b/packages/pluggableWidgets/signature-web/src/ui/SignaturePreview.css
diff --git a/packages/pluggableWidgets/signature-web/src/utils/customTypes.ts b/packages/pluggableWidgets/signature-web/src/utils/customTypes.ts
@@ -1,19 +1,6 @@
-import { SignatureContainerProps } from "typings/SignatureProps";
+import { PenTypeEnum, SignatureContainerProps } from "../../typings/SignatureProps";
 
-// export type HeightUnitType = "percentageOfWidth" | "percentageOfParent" | "pixels";
-
-// export type WidthUnitType = "percentage" | "pixels";
-
-// export interface Dimensions {
-//     widthUnit: WidthUnitType;
-//     width: number;
-//     heightUnit: HeightUnitType;
-//     height: number;
-// }
-
-export type penOptions = "fountain" | "ballpoint" | "marker";
-
-export interface SignatureProps extends SignatureContainerProps {
+export interface SignatureProps extends Omit<SignatureContainerProps, "onSignEndAction"> {
     className: string;
     alertMessage?: string;
     clearSignature: boolean;
@@ -22,7 +9,7 @@ export interface SignatureProps extends SignatureContainerProps {
     gridCellHeight: number;
     gridBorderColor: string;
     gridBorderWidth: number;
-    penType: penOptions;
+    penType: PenTypeEnum;
     penColor: string;
     onSignEndAction?: (imageUrl?: string) => void;
     wrapperStyle?: object;
diff --git a/packages/pluggableWidgets/signature-web/typings/SignatureProps.d.ts b/packages/pluggableWidgets/signature-web/typings/SignatureProps.d.ts
@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { CSSProperties } from "react";
-import { EditableValue, EditableImageValue, WebImage } from "mendix";
+import { ActionValue, EditableValue, EditableImageValue, Option, WebImage } from "mendix";
 
 export type PenTypeEnum = "fountain" | "ballpoint" | "marker";
 
@@ -36,6 +36,7 @@ export interface SignatureContainerProps {
     maxHeightUnit: MaxHeightUnitEnum;
     maxHeight: number;
     OverflowY: OverflowYEnum;
+    onSignEndAction?: ActionValue<{ signatureImage: Option<string> }>;
     showGrid: boolean;
     gridBorderColor: string;
     gridCellHeight: number;
@@ -67,6 +68,7 @@ export interface SignaturePreviewProps {
     maxHeightUnit: MaxHeightUnitEnum;
     maxHeight: number | null;
     OverflowY: OverflowYEnum;
+    onSignEndAction: {} | null;
     showGrid: boolean;
     gridBorderColor: string;
     gridCellHeight: number | null;

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { ReactElement } from "react";`
`2`		`-import "./ui/SignaturePreview.css";`
`3`	`2`	`import { SignaturePreviewProps } from "typings/SignatureProps";`
`4`	`3`	`import classNames from "classnames";`
`5`	`4`