fix(html): add icons to ImageEditor action pane buttons

telerik · Dec 2, 2024 · 6b2108e · 6b2108e
1 parent a33add5
commit 6b2108e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/packages/html/src/imageeditor/templates/imageeditor-crop.tsx b/packages/html/src/imageeditor/templates/imageeditor-crop.tsx
@@ -1,7 +1,6 @@
 import { ImageEditor } from "..";
-import { ButtonGroup, ToolbarItem, ToolbarSeparator } from "../..";
+import { ButtonGroup, Checkbox, ToolbarItem, ToolbarSeparator } from "../..";
 import { Button } from "../../button";
-import { Checkbox } from "../../checkbox";
 import { DropdownList } from "../../dropdownlist";
 import { FormNormal, Fieldset, FormField } from "../../form";
 import { NumericTextbox } from "../../numerictextbox";
@@ -26,8 +25,8 @@ export const ImageEditorCrop = (props: any) => (
         actionPane={
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
-                    <Button themeColor="primary">Confirm</Button>
-                    <Button>Cancel</Button>
+                    <Button themeColor="primary" icon="check">Confirm</Button>
+                    <Button icon="cancel-outline">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Crop Image" cols={2} gapX={2}>
@@ -56,7 +55,7 @@ export const ImageEditorCrop = (props: any) => (
                         label="Height:"
                         editor={ <NumericTextbox showClearButton={false} value="68" /> }
                     />
-                    <FormField
+                   <FormField
                         colSpan="2"
                         label="Lock aspect ratio:"
                         editor={ <Checkbox /> }

diff --git a/packages/html/src/imageeditor/templates/imageeditor-resize.tsx b/packages/html/src/imageeditor/templates/imageeditor-resize.tsx
@@ -26,8 +26,8 @@ export const ImageEditorResize = (props: any) => (
         actionPane={
             <FormNormal tag="div" className="k-imageeditor-pane-form" formButtons={
                 <>
-                    <Button themeColor="primary">Confirm</Button>
-                    <Button>Cancel</Button>
+                    <Button themeColor="primary" icon="check">Confirm</Button>
+                    <Button icon="cancel-outline">Cancel</Button>
                 </>
             }>
                 <Fieldset layout="grid" legend="Resize Image" cols={2} gapX={2}>