Merge branch 'develop' into silence-stylelint-deprecations

packages/bootstrap/scss/imageeditor/_variables.scss

@@ -15,7 +15,7 @@ $kendo-image-editor-content-border-width: 1px !default;
 
 $kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 240px, calc( 240px + #{$kendo-image-editor-content-border-width} ) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 250px, calc( 250px + #{$kendo-image-editor-content-border-width} ) ) !default;
 
 $kendo-image-editor-crop-border-width: 1px !default;
 $kendo-image-editor-crop-border-style: dashed !default;

packages/fluent/docs/customization-imageeditor.md

@@ -230,8 +230,8 @@ The following table lists the available variables for customization.
 <tr>
     <td>$kendo-image-editor-action-pane-width</td>
     <td>Number</td>
-    <td><code>if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )</code></td>
-    <td><code>240px</code></td>
+    <td><code>if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) )</code></td>
+    <td><code>270px</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Imageeditor action pane width.</div></div>

packages/fluent/docs/customization.md

@@ -15769,8 +15769,8 @@ The following table lists the available variables for customizing the Fluent the
 <tr>
     <td>$kendo-image-editor-action-pane-width</td>
     <td>Number</td>
-    <td><code>if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )</code></td>
-    <td><code>240px</code></td>
+    <td><code>if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) )</code></td>
+    <td><code>270px</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">Imageeditor action pane width.</div></div>

packages/fluent/scss/imageeditor/_variables.scss

@@ -67,7 +67,7 @@ $kendo-image-editor-action-pane-padding-y: k-spacing(3) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(3) !default;
 /// Imageeditor action pane width.
 /// @group imageeditor
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 /// Crop background color of the imageeditor.
 /// @group imageeditor

packages/html/src/imageeditor/templates/imageeditor-crop.tsx

@@ -26,8 +26,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 +56,7 @@ export const ImageEditorCrop = (props: any) => (
                         label="Height:"
                         editor={ <NumericTextbox showClearButton={false} value="68" /> }
                     />
-                    <FormField
+                   <FormField
                         colSpan="2"
                         editor={ <CheckboxWithLabelAfter>Lock aspect ratio</CheckboxWithLabelAfter> }
                     />

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}>

packages/material/scss/imageeditor/_variables.scss

@@ -15,7 +15,7 @@ $kendo-image-editor-content-border-width: 1px !default;
 
 $kendo-image-editor-action-pane-padding-y: k-spacing(8) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(4) !default;
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 240px, calc(240px + #{$kendo-image-editor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == null, 280px, calc(280px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 $kendo-image-editor-crop-border-width: 1px !default;
 $kendo-image-editor-crop-border-style: dashed !default;

tests/imageeditor/imageeditor-crop-pane.html

@@ -202,9 +202,19 @@ <h4>Image Editor Crop Pane</h4>
                         </fieldset>
                         <div class="k-form-buttons">
                             <button class="k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-check">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M434.7 82.7 480 128 192 416 32 256l45.3-45.3L192 325.5z"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Confirm</span>
                             </button>
                             <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-cancel-outline">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 32c-56.1 0-107.4 20.6-146.7 54.7-8.1 7-15.6 14.6-22.6 22.6C52.6 148.6 32 199.9 32 256c0 123.7 100.3 224 224 224 56.1 0 107.4-20.6 146.7-54.7 8.1-7 15.6-14.6 22.6-22.6C459.4 363.4 480 312.1 480 256c0-123.7-100.3-224-224-224m0 416c-106 0-192-86-192-192 0-47.2 17.1-90.5 45.4-124L380 402.6c-33.5 28.3-76.8 45.4-124 45.4m146.6-68L132 109.4C165.5 81.1 208.8 64 256 64c106 0 192 86 192 192 0 47.2-17.1 90.5-45.4 124"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Cancel</span>
                             </button>
                         </div>

tests/imageeditor/imageeditor-resize-pane.html

@@ -194,9 +194,19 @@ <h4>Image Editor Resize Pane</h4>
                         </fieldset>
                         <div class="k-form-buttons">
                             <button class="k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-check">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M434.7 82.7 480 128 192 416 32 256l45.3-45.3L192 325.5z"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Confirm</span>
                             </button>
                             <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-cancel-outline">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 32c-56.1 0-107.4 20.6-146.7 54.7-8.1 7-15.6 14.6-22.6 22.6C52.6 148.6 32 199.9 32 256c0 123.7 100.3 224 224 224 56.1 0 107.4-20.6 146.7-54.7 8.1-7 15.6-14.6 22.6-22.6C459.4 363.4 480 312.1 480 256c0-123.7-100.3-224-224-224m0 416c-106 0-192-86-192-192 0-47.2 17.1-90.5 45.4-124L380 402.6c-33.5 28.3-76.8 45.4-124 45.4m146.6-68L132 109.4C165.5 81.1 208.8 64 256 64c106 0 192 86 192 192 0 47.2-17.1 90.5-45.4 124"></path>
+                                    </svg>
+                                </span>
                                 <span class="k-button-text">Cancel</span>
                             </button>
                         </div>