@progress/kendo-themes-html 14.5.1-dev.6 → 14.5.1-dev.8

package/src/imageeditor/templates/imageeditor-rotate.tsx

@@ -0,0 +1,98 @@
+import { ImageEditor, ImageEditorPane, ImageEditorResizeHandles } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { InputSuffixText } from "../../input";
+import { Form, FormField, Fieldset } from "../../form";
+import { Slider } from "../../slider";
+import { Tooltip } from "../../tooltip";
+
+const rotateSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" selected aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+export const ImageEditorRotate = (props: any) => (
+    <ImageEditor
+        sidebarItems={rotateSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Rotate" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <FormField
+                        label="Rotation"
+                        editor={
+                            <div className="k-imageeditor-field-row">
+                                <Slider
+                                    style={{ width: "170px", flex: "none" }}
+                                    aria-label="Rotation"
+                                    showButtons={false}
+                                    showTicks={false}
+                                    value={85}
+                                    min={0}
+                                    max={360}
+                                />
+                                <NumericTextbox
+                                    style={{ width: "72px", flex: "none" }}
+                                    showClearButton={false}
+                                    showSpinButton={false}
+                                    separators={false}
+                                    value="85"
+                                    suffix={<InputSuffixText>°</InputSuffixText>}
+                                />
+                            </div>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Rotate Options"
+                            editor={
+                                <div className="k-imageeditor-controls">
+                                    <Button icon="rotate-right" aria-label="Rotate Right"></Button>
+                                    <Button icon="rotate-left" aria-label="Rotate Left"></Button>
+                                </div>
+                            }
+                        />
+                        <FormField
+                            label="Flip Options"
+                            editor={
+                                <div className="k-imageeditor-controls">
+                                    <Button icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                                    <Button icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                                </div>
+                            }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <div className="k-imageeditor-rotate">
+                    <ImageEditorResizeHandles variant="scale" grid />
+                </div>
+                <Tooltip
+                    themeColor="inverse"
+                    style={{ position: "absolute", insetBlockEnd: "-52px", insetInlineEnd: "0" }}
+                    content={<div>85°</div>}
+                ></Tooltip>
+            </>
+        }
+        {...props} />
+);

package/src/imageeditor/templates/imageeditor-shadow.tsx

@@ -0,0 +1,96 @@
+import { ImageEditor, ImageEditorPane } from "..";
+import { Button } from "../../button";
+import { NumericTextbox } from "../../numerictextbox";
+import { ColorPicker } from "../../colorpicker";
+import { Form, FormField, Fieldset } from "../../form";
+import { Icon } from "../../icon";
+import { InputPrefixText } from "../../input";
+
+const shadowSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" selected aria-label="Shadow"></Button>
+];
+
+const hexToRgba = (hex: string, alphaPercent: number) => {
+    const value = hex.replace("#", "");
+    const r = parseInt(value.substring(0, 2), 16);
+    const g = parseInt(value.substring(2, 4), 16);
+    const b = parseInt(value.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alphaPercent / 100})`;
+};
+
+export const ImageEditorShadow = ({
+    positionX = 2,
+    positionY = -4,
+    blur = 32,
+    spread = 12,
+    color = "#232a36",
+    opacity = 32,
+    ...props
+}: any) => (
+    <ImageEditor
+        sidebarItems={shadowSidebarItems}
+        actionPane={
+            <ImageEditorPane title="Shadow" actions={
+                <>
+                    <Button>Reset</Button>
+                    <Button themeColor="primary">Apply</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <FormField
+                        label="Position"
+                        editor={
+                            <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                <NumericTextbox id="shadow-position-x" showSpinButton={false} value={String(positionX)} prefix={<InputPrefixText>X</InputPrefixText>} aria-label="Position X" />
+                                <NumericTextbox id="shadow-position-y" showSpinButton={false} value={String(positionY)} prefix={<InputPrefixText>Y</InputPrefixText>} aria-label="Position Y" />
+                            </Fieldset>
+                        }
+                    />
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Blur"
+                            editorId="shadow-blur"
+                            editor={ <NumericTextbox id="shadow-blur" showSpinButton={false} value={String(blur)} prefix={<Icon icon="blur" />} /> }
+                        />
+                        <FormField
+                            label="Spread"
+                            editorId="shadow-spread"
+                            editor={ <NumericTextbox id="shadow-spread" showSpinButton={false} value={String(spread)} prefix={<Icon icon="brightness-contrast" />} /> }
+                        />
+                    </Fieldset>
+                    <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                        <FormField
+                            label="Color"
+                            editor={ <ColorPicker id="shadow-color" value={color} aria-label="Color" /> }
+                        />
+                        <FormField
+                            label="Opacity"
+                            editorId="shadow-opacity"
+                            editor={ <NumericTextbox id="shadow-opacity" showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} /> }
+                        />
+                    </Fieldset>
+                </Form>
+            </ImageEditorPane>
+        }
+
+        children={
+            <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{
+                backgroundImage: "url('/packages/html/assets/sofia.jpg')",
+                backgroundSize: "cover",
+                boxShadow: `${positionX}px ${positionY}px ${blur}px ${spread}px ${hexToRgba(color, opacity)}`
+            }}></canvas>
+        }
+        {...props} />
+);

package/src/imageeditor/tests/imageeditor-adaptive-small.tsx

@@ -0,0 +1,373 @@
+import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, ImageEditorResizeHandles } from '..';
+import { Button } from '../../button';
+import { ButtonGroup } from '../../button-group';
+import { Combobox } from '../../combobox';
+import { NumericTextbox } from '../../numerictextbox';
+import { ColorPicker } from '../../colorpicker';
+import { Form, FormField, Fieldset } from '../../form';
+import { Icon } from '../../icon';
+import { SegmentedControl, SegmentedControlButton } from '../../segmented-control';
+import { ToolbarSeparator } from '../../toolbar';
+
+// Mobile top toolbar has no zoom-level combobox - just the 6 core icon actions, split into two edge-aligned groups
+const mobileToolbarItems = [
+    <Button fillMode="flat" key="mobile-toolbar-button-1" icon="image-add" aria-label="Image Add"></Button>,
+    <ToolbarSeparator key="mobile-toolbar-separator-1"></ToolbarSeparator>,
+    <Button fillMode="flat" key="mobile-toolbar-button-2" icon="undo" aria-label="Undo"></Button>,
+    <Button fillMode="flat" key="mobile-toolbar-button-3" icon="redo" aria-label="Redo"></Button>,
+    <ToolbarSeparator key="mobile-toolbar-separator-2"></ToolbarSeparator>,
+    <Button fillMode="flat" key="mobile-toolbar-button-4" icon="download" aria-label="Download"></Button>,
+    <div className="k-spacer" key="mobile-toolbar-spacer"></div>,
+    <Button fillMode="flat" key="mobile-toolbar-button-5" icon="zoom-in" aria-label="Zoom In"></Button>,
+    <Button fillMode="flat" key="mobile-toolbar-button-6" icon="zoom-out" aria-label="Zoom Out"></Button>
+];
+
+// Same 5 actions as the desktop FloatingToolbar (imageeditor-insert-shape.tsx) - on mobile they dock at the top instead of floating over the canvas
+const contextualToolbarItems = [
+    <Button fillMode="flat" key="contextual-button-1" icon="copy" aria-label="Duplicate"></Button>,
+    <Button fillMode="flat" key="contextual-button-2" icon="pencil" aria-label="Edit"></Button>,
+    <ToolbarSeparator key="contextual-separator-1"></ToolbarSeparator>,
+    <Button fillMode="flat" key="contextual-button-3" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>,
+    <Button fillMode="flat" key="contextual-button-4" icon="flip-vertical" aria-label="Flip Vertical"></Button>,
+    <ToolbarSeparator key="contextual-separator-2"></ToolbarSeparator>,
+    <Button fillMode="flat" key="contextual-button-5" icon="trash" aria-label="Delete"></Button>
+];
+
+const shapeSidebarItems = [
+    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
+    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
+    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
+    <div className="k-separator" key="sidebar-separator-1"></div>,
+    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
+    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" selected aria-label="Shapes"></Button>,
+    <div className="k-separator" key="sidebar-separator-2"></div>,
+    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
+    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
+    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
+    <div className="k-separator" key="sidebar-separator-3"></div>,
+    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
+    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
+];
+
+const shapeTypes = [
+    { label: "Square", icon: "checkbox" },
+    { label: "Rectangle", icon: "rectangle-shape" },
+    { label: "Circle", icon: "circle-shape" },
+    { label: "Oval", icon: "oval-shape" },
+    { label: "Triangle", icon: "kpi-status-hold" },
+    { label: "Star", icon: "star" },
+    { label: "Heart", icon: "heart" },
+    { label: "Diamond", icon: "kpi-status-deny" },
+    { label: "Hexagon", icon: "hexagon-shape" },
+    { label: "Pentagon", icon: "pentagon-shape" },
+    { label: "Arrow", icon: "arrow-right" }
+];
+
+const styles = `
+    #test-area {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+    }
+    #test-area .k-imageeditor-adaptive {
+        width: 360px;
+        height: 800px;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area">
+
+            <div>
+                <h4>Mobile / Adaptive / Unselected Tool</h4>
+                <ImageEditor adaptive toolbarItems={mobileToolbarItems}>
+                    <canvas width="326" height="203" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                </ImageEditor>
+            </div>
+
+            <div>
+                <h4>Mobile / Adaptive / Selected Tool / Panel Opened</h4>
+                <ImageEditor
+                    adaptive
+                    toolbarItems={contextualToolbarItems}
+                    sidebarItems={shapeSidebarItems}
+                    actionPane={
+                        <ImageEditorPane adaptive title="Shape">
+                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                                <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
+                                <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
+                            </SegmentedControl>
+
+                            <Form tag="div">
+                                <FormField
+                                    label="Type"
+                                    editor={
+                                        <ImageEditorOptionList scrollable scrollableEnd>
+                                            {shapeTypes.map((shape) => (
+                                                <ImageEditorOptionPreview key={shape.label} label={shape.label} selected={shape.label === "Oval"}>
+                                                    <div className="k-imageeditor-option-content">
+                                                        <Icon icon={shape.icon} />
+                                                        <span className="k-imageeditor-option-label">{shape.label}</span>
+                                                    </div>
+                                                </ImageEditorOptionPreview>
+                                            ))}
+                                        </ImageEditorOptionList>
+                                    }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Stroke Color"
+                                        editor={ <ColorPicker id="mobile-shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
+                                    />
+                                    <FormField
+                                        label="Stroke Width"
+                                        editorId="mobile-shape-stroke-width"
+                                        editor={ <NumericTextbox id="mobile-shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
+                                    />
+                                </Fieldset>
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Fill Color"
+                                        editor={ <ColorPicker id="mobile-shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
+                                    />
+                                    <FormField
+                                        label="Text Color"
+                                        editor={ <ColorPicker id="mobile-shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
+                                    />
+                                </Fieldset>
+                                <FormField
+                                    label="Font Family"
+                                    editorId="mobile-shape-font-family"
+                                    editor={ <Combobox id="mobile-shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Font Size"
+                                        editorId="mobile-shape-font-size"
+                                        editor={ <NumericTextbox id="mobile-shape-font-size" showSpinButton={false} value="24" prefix={<Icon icon="font-size" />} /> }
+                                    />
+                                    <FormField
+                                        label="Alignment"
+                                        editor={
+                                            <ButtonGroup>
+                                                <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
+                                                <Button icon="align-center" selected aria-label="Align Center"></Button>
+                                                <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
+                                            </ButtonGroup>
+                                        }
+                                    />
+                                </Fieldset>
+                                <FormField
+                                    label="Format"
+                                    editor={
+                                        <div className="k-imageeditor-controls">
+                                            <Button icon="bold" aria-label="Bold"></Button>
+                                            <Button icon="italic" aria-label="Italic"></Button>
+                                            <Button icon="underline" aria-label="Underline"></Button>
+                                            <Button icon="strikethrough" aria-label="Strikethrough"></Button>
+                                            <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
+                                            <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
+                                        </div>
+                                    }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Align Horizontal"
+                                        editor={
+                                            <ButtonGroup>
+                                                <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
+                                                <Button icon="align-items-center" aria-label="Align Center"></Button>
+                                                <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
+                                            </ButtonGroup>
+                                        }
+                                    />
+                                    <FormField
+                                        label="Align Vertical"
+                                        editor={
+                                            <ButtonGroup>
+                                                <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
+                                                <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
+                                                <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
+                                            </ButtonGroup>
+                                        }
+                                    />
+                                </Fieldset>
+                            </Form>
+                        </ImageEditorPane>
+                    }
+                >
+                    <canvas width="326" height="203" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                    <div className="k-imageeditor-resize" style={{ width: "165px", height: "54px", top: "75px", left: "81px" }}>
+                        <div style={{
+                            width: "100%",
+                            height: "100%",
+                            borderRadius: "50%",
+                            background: "#eae382",
+                            border: "2px solid #b0e855",
+                            boxSizing: "border-box"
+                        }}>
+                            <p style={{
+                                margin: 0,
+                                width: "100%",
+                                height: "100%",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontFamily: "'Trebuchet MS', sans-serif",
+                                fontSize: "16px",
+                                lineHeight: 1,
+                                color: "#4a4500",
+                                whiteSpace: "nowrap"
+                            }}>Shape text</p>
+                        </div>
+                        <ImageEditorResizeHandles variant="mixed" />
+                    </div>
+                </ImageEditor>
+            </div>
+
+            <div>
+                <h4>Tablet / Adaptive / Selected Tool / Panel Opened</h4>
+                <ImageEditor
+                    adaptive
+                    style={{ width: "768px", height: "1024px" }}
+                    toolbarItems={contextualToolbarItems}
+                    sidebarItems={shapeSidebarItems}
+                    actionPane={
+                        <ImageEditorPane adaptive title="Shape">
+                            <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                                <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
+                                <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
+                            </SegmentedControl>
+
+                            <Form tag="div">
+                                <FormField
+                                    label="Type"
+                                    editor={
+                                        <ImageEditorOptionList scrollable scrollableEnd>
+                                            {shapeTypes.map((shape) => (
+                                                <ImageEditorOptionPreview key={shape.label} label={shape.label} selected={shape.label === "Oval"}>
+                                                    <div className="k-imageeditor-option-content">
+                                                        <Icon icon={shape.icon} />
+                                                        <span className="k-imageeditor-option-label">{shape.label}</span>
+                                                    </div>
+                                                </ImageEditorOptionPreview>
+                                            ))}
+                                        </ImageEditorOptionList>
+                                    }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Stroke Color"
+                                        editor={ <ColorPicker id="tablet-shape-stroke-color" value="#b0e855" aria-label="Stroke Color" /> }
+                                    />
+                                    <FormField
+                                        label="Stroke Width"
+                                        editorId="tablet-shape-stroke-width"
+                                        editor={ <NumericTextbox id="tablet-shape-stroke-width" showSpinButton={false} value="8" prefix={<Icon icon="border-width" />} /> }
+                                    />
+                                </Fieldset>
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Fill Color"
+                                        editor={ <ColorPicker id="tablet-shape-fill-color" value="#eae382" valueIconName="droplet" aria-label="Fill Color" /> }
+                                    />
+                                    <FormField
+                                        label="Text Color"
+                                        editor={ <ColorPicker id="tablet-shape-text-color" value="#4a4500" valueIconName="foreground-color" aria-label="Text Color" /> }
+                                    />
+                                </Fieldset>
+                                <FormField
+                                    label="Font Family"
+                                    editorId="tablet-shape-font-family"
+                                    editor={ <Combobox id="tablet-shape-font-family" prefix={<Icon icon="font-family" />} value="Trebuchet MS" /> }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Font Size"
+                                        editorId="tablet-shape-font-size"
+                                        editor={ <NumericTextbox id="tablet-shape-font-size" showSpinButton={false} value="24" prefix={<Icon icon="font-size" />} /> }
+                                    />
+                                    <FormField
+                                        label="Alignment"
+                                        editor={
+                                            <ButtonGroup>
+                                                <Button className="k-group-start" icon="align-left" aria-label="Align Left"></Button>
+                                                <Button icon="align-center" selected aria-label="Align Center"></Button>
+                                                <Button className="k-group-end" icon="align-right" aria-label="Align Right"></Button>
+                                            </ButtonGroup>
+                                        }
+                                    />
+                                </Fieldset>
+                                <FormField
+                                    label="Format"
+                                    editor={
+                                        <div className="k-imageeditor-controls">
+                                            <Button icon="bold" aria-label="Bold"></Button>
+                                            <Button icon="italic" aria-label="Italic"></Button>
+                                            <Button icon="underline" aria-label="Underline"></Button>
+                                            <Button icon="strikethrough" aria-label="Strikethrough"></Button>
+                                            <Button icon="convert-uppercase" aria-label="Uppercase"></Button>
+                                            <Button icon="convert-lowercase" aria-label="Lowercase"></Button>
+                                        </div>
+                                    }
+                                />
+                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
+                                    <FormField
+                                        label="Align Horizontal"
+                                        editor={
+                                            <ButtonGroup>
+                                                <Button className="k-group-start" icon="align-items-start" aria-label="Align Left"></Button>
+                                                <Button icon="align-items-center" aria-label="Align Center"></Button>
+                                                <Button className="k-group-end" icon="align-items-end" aria-label="Align Right"></Button>
+                                            </ButtonGroup>
+                                        }
+                                    />
+                                    <FormField
+                                        label="Align Vertical"
+                                        editor={
+                                            <ButtonGroup>
+                                                <Button className="k-group-start" icon="align-items-start-alt" aria-label="Align Top"></Button>
+                                                <Button icon="align-items-center-alt" aria-label="Align Middle"></Button>
+                                                <Button className="k-group-end" icon="align-items-end-alt" aria-label="Align Bottom"></Button>
+                                            </ButtonGroup>
+                                        }
+                                    />
+                                </Fieldset>
+                            </Form>
+                        </ImageEditorPane>
+                    }
+                >
+                    <canvas width="720" height="393" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat" }}></canvas>
+                    <div className="k-imageeditor-resize" style={{ width: "234px", height: "77px", top: "156px", left: "243px" }}>
+                        <div style={{
+                            width: "100%",
+                            height: "100%",
+                            borderRadius: "50%",
+                            background: "#eae382",
+                            border: "2px solid #b0e855",
+                            boxSizing: "border-box"
+                        }}>
+                            <p style={{
+                                margin: 0,
+                                width: "100%",
+                                height: "100%",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontFamily: "'Trebuchet MS', sans-serif",
+                                fontSize: "16px",
+                                lineHeight: 1,
+                                color: "#4a4500",
+                                whiteSpace: "nowrap"
+                            }}>Shape text</p>
+                        </div>
+                        <ImageEditorResizeHandles variant="mixed" />
+                    </div>
+                </ImageEditor>
+            </div>
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-adjustments-pane.tsx

@@ -0,0 +1,14 @@
+import { ImageEditorAdjustments } from '..';
+
+
+export default () => (
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Adjustments Pane</h4>
+
+            <ImageEditorAdjustments contentHeight="640px" />
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-blur-pane.tsx

@@ -0,0 +1,29 @@
+import { ImageEditorBlur } from '..';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <h4>Image Editor Blur Pane &mdash; Rectangular Markee</h4>
+
+            <ImageEditorBlur contentHeight="482px" shape="rectangular" intensity={16}>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", filter: "blur(8px)" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ borderStyle: "dashed" }}></div>
+                </div>
+            </ImageEditorBlur>
+
+            <h4>Image Editor Blur Pane &mdash; Elliptical Markee</h4>
+
+            <ImageEditorBlur contentHeight="482px" shape="elliptical" intensity={18}>
+                <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+                <canvas width="494" height="307" aria-hidden="true" style={{ position: "absolute", insetBlockStart: 0, insetInlineStart: 0, backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", filter: "blur(8px)", clipPath: "ellipse(160px 98.5px at center)" }}></canvas>
+                <div className="k-imageeditor-crop-overlay">
+                    <div className="k-imageeditor-crop" style={{ width: "320px", height: "197px", borderStyle: "dashed", borderRadius: "50%", insetInlineStart: "50%", insetBlockStart: "50%", transform: "translate(-50%, -50%)" }}></div>
+                </div>
+            </ImageEditorBlur>
+
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-crop-pane.tsx

@@ -3,14 +3,15 @@ import { ImageEditorCrop } from '..';
 
 export default () =>(
     <>
-        <div id="test-area" className="k-d-grid k-grid-cols-1">
+        <div id="test-area" className="k-d-grid">
 
             <h4>Image Editor Crop Pane</h4>
 
             <ImageEditorCrop contentHeight="482px">
-                <canvas width="700" height="400" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundPosition: "50px -350px" }}></canvas>
+                <canvas width="700" height="400" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundPosition: "50px -350px" }}></canvas>
                 <div className="k-imageeditor-crop-overlay">
                     <div className="k-imageeditor-crop" style={{ width: "400px", height: "400px", backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundClip: "content-box", backgroundPosition: "748px -350px" }}>
+                        <div className="k-imageeditor-crop-grid"></div>
                         <span className="k-resize-handle k-resize-nw"></span>
                         <span className="k-resize-handle k-resize-n"></span>
                         <span className="k-resize-handle k-resize-ne"></span>