@progress/kendo-themes-html 7.0.2-dev.4 → 7.0.2

package/src/fab/tests/fab-items.tsx

@@ -1,10 +1,10 @@
-import { FloatingActionButton, FloatingActionButtonItems, FloatingActionButtonItem } from '../../fab';
+import { FloatingActionButtonItems, FloatingActionButtonItem, IconFloatingActionButton, FloatingActionButton } from '../../fab';
 
 
 const styles = `
     #test-area {
         grid-template-columns: 150px repeat(3, 1fr);
-        grid-template-rows: 30px repeat(5, 320px)
+        grid-template-rows: 30px repeat(3, 320px)
     }
     .relative-container {
         position: relative;
@@ -12,7 +12,13 @@ const styles = `
     }
 `;
 
-export default () =>(
+const indexMap = {
+    0: 36,
+    1: 52,
+    2: 68,
+};
+
+export default () => (
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
@@ -23,136 +29,60 @@ export default () =>(
             <span>Large</span>
 
             <span>Downward - Left Labels</span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="small" position="top-end" style={{ top: "16px", right: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="bottom">
-                        <FloatingActionButtonItem text="Normal" icon="pencil" align="right" />
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
-                        <FloatingActionButtonItem text="Disabled" icon="cancel" align="right" disabled />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="medium" position="top-end" style={{ top: "16px", right: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="bottom">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
-                        <FloatingActionButtonItem text="Disabled & Focus" icon="cancel" align="right" disabled focus />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="large" position="top-end" style={{ top: "16px", right: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="bottom">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
-                        <FloatingActionButtonItem text="Disabled" icon="cancel" align="right" disabled />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
+            {FloatingActionButton.options.size.map((size, index) => (
+                <span className="relative-container">
+                    <IconFloatingActionButton size={size} position="top-end" style={{ top: "16px", right: "16px" }} />
+                    <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: `calc(16px + ${indexMap[index]}px)`, right: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }}>
+                        <FloatingActionButtonItems position="bottom">
+                            {[ "normal", ...FloatingActionButtonItem.states ].map((state) => (
+                                <FloatingActionButtonItem text={state} icon={state === "disabled" ? "cancel" : "pencil"} align="right" {...{ [state]: true }}/>
+                            ))}
+                        </FloatingActionButtonItems>
+                    </div>
+                </span>
+            ))}
 
             <span>Downward - Right Labels</span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="small" position="top-start" style={{ top: "16px", left: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="bottom">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="medium" position="top-start" style={{ top: "16px", left: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="bottom">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="large" position="top-start" style={{ top: "16px", left: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="bottom">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
+            {FloatingActionButton.options.size.map((size, index) => (
+                <span className="relative-container">
+                    <IconFloatingActionButton size={size} position="top-start" style={{ top: "16px", left: "16px" }} />
+                    <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", top: `calc(16px + ${indexMap[index]}px)`, left: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }}>
+                        <FloatingActionButtonItems position="bottom">
+                            {[ "normal", ...FloatingActionButtonItem.states ].map((state) => (
+                                <FloatingActionButtonItem text={state} icon={state === "disabled" ? "cancel" : "pencil"} align="left" {...{ [state]: true }}/>
+                            ))}
+                        </FloatingActionButtonItems>
+                    </div>
+                </span>
+            ))}
 
             <span>Upward - Left Labels</span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="small" position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="top">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="medium" position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="top">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="large" position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="top">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="right" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="right" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="right" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
+            {FloatingActionButton.options.size.map((size, index) => (
+                <span className="relative-container">
+                    <IconFloatingActionButton size={size} position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
+                    <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: `calc(16px + ${indexMap[index]}px)`, right: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }}>
+                        <FloatingActionButtonItems position="top">
+                            {[ "normal", ...FloatingActionButtonItem.states ].map((state) => (
+                                <FloatingActionButtonItem text={state} icon={state === "disabled" ? "cancel" : "pencil"} align="right" {...{ [state]: true }}/>
+                            ))}
+                        </FloatingActionButtonItems>
+                    </div>
+                </span>
+            ))}
 
             <span>Upward - Right Labels</span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="small" position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="top">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="medium" position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="top">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
-            <span className="relative-container">
-                <FloatingActionButton icon="plus" size="large" position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
-                <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }}>
-                    <FloatingActionButtonItems position="top">
-                        <FloatingActionButtonItem text="Hover long text" icon="pencil" align="left" hover />
-                        <FloatingActionButtonItem text="Focus" icon="pencil" align="left" focus />
-                        <FloatingActionButtonItem text="Active" icon="pencil" align="left" active />
-                    </FloatingActionButtonItems>
-                </div>
-            </span>
+            {FloatingActionButton.options.size.map((size, index) => (
+                <span className="relative-container">
+                    <IconFloatingActionButton size={size} position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
+                    <div className="k-fab-popup k-popup k-popup-transparent" style={{ position: "absolute", bottom: `calc(16px + ${indexMap[index]}px)`, left: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }}>
+                        <FloatingActionButtonItems position="top">
+                            {[ "normal", ...FloatingActionButtonItem.states ].map((state) => (
+                                <FloatingActionButtonItem text={state} icon={state === "disabled" ? "cancel" : "pencil"} align="left" {...{ [state]: true }}/>
+                            ))}
+                        </FloatingActionButtonItems>
+                    </div>
+                </span>
+            ))}
         </div>
     </>
 );

package/src/fab/tests/fab-position.tsx

@@ -1,4 +1,4 @@
-import { FloatingActionButton } from '../../fab';
+import { IconFloatingActionButton } from '../../fab';
 
 
 const styles = `
@@ -24,35 +24,35 @@ export default () =>(
 
             <span>Top</span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="top-start" style={{ top: "16px", left: "16px" }} />
+                <IconFloatingActionButton position="top-start" style={{ top: "16px", left: "16px" }} />
             </span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="top-center" style={{ top: "16px" }} />
+                <IconFloatingActionButton position="top-center" style={{ top: "16px" }} />
             </span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="top-end" style={{ top: "16px", right: "16px" }} />
+                <IconFloatingActionButton position="top-end" style={{ top: "16px", right: "16px" }} />
             </span>
 
             <span>Middle</span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="middle-start" style={{ left: "16px" }} />
+                <IconFloatingActionButton position="middle-start" style={{ left: "16px" }} />
             </span>
             <span className="relative-container">
                 NO CENTER POSITION
             </span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="middle-end" style={{ right: "16px" }} />
+                <IconFloatingActionButton position="middle-end" style={{ right: "16px" }} />
             </span>
 
             <span>Bottom</span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
+                <IconFloatingActionButton position="bottom-start" style={{ bottom: "16px", left: "16px" }} />
             </span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="bottom-center" style={{ bottom: "16px" }} />
+                <IconFloatingActionButton position="bottom-center" style={{ bottom: "16px" }} />
             </span>
             <span className="relative-container">
-                <FloatingActionButton icon="plus" position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
+                <IconFloatingActionButton position="bottom-end" style={{ bottom: "16px", right: "16px" }} />
             </span>
 
         </div>

package/src/fab/tests/fab-size-rounded.tsx

@@ -0,0 +1,35 @@
+import { FloatingActionButton, IconFloatingActionButton, IconTextFloatingActionButton, TextFloatingActionButton } from '..';
+
+
+const styles = `
+    #test-area {
+        max-width: 1200px;
+        grid-template-columns: auto repeat(3, 1fr);
+        align-items: center;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span><small>rounded / size</small></span>
+            <span>small</span>
+            <span>medium</span>
+            <span>large</span>
+            {[ null, ...FloatingActionButton.options.rounded ].map((rounded) => (
+                <>
+                    <span>{String(rounded)}</span>
+                    {FloatingActionButton.options.size.map((size) => (
+                        <span className="k-d-flex k-gap-1">
+                            <TextFloatingActionButton rounded={rounded} size={size} />
+                            <IconTextFloatingActionButton rounded={rounded} size={size} />
+                            <IconFloatingActionButton rounded={rounded} size={size} />
+                        </span>
+                    ))}
+                </>
+            ))}
+        </div>
+    </>
+);

package/src/fab/tests/fab-states.tsx

@@ -1,4 +1,4 @@
-import { FloatingActionButton } from '../../fab';
+import { FloatingActionButton, IconFloatingActionButton } from '../../fab';
 
 const styles = `
     #test-area {
@@ -24,7 +24,7 @@ export default () =>(
                     {[ 'normal', ...FloatingActionButton.states ].map((state) => (
                         <>
                             <span style={{ position: "relative" }}>
-                                <FloatingActionButton icon="plus" position="top-start" themeColor={themeColor} {...{ [state]: true }}></FloatingActionButton>
+                                <IconFloatingActionButton position="top-start" themeColor={themeColor} {...{ [state]: true }} />
                             </span>
                         </>
                     ))}

package/src/fab/tests/fab.tsx

@@ -1,4 +1,4 @@
-import { FloatingActionButton } from '../../fab';
+import { FloatingActionButton, IconFloatingActionButton, IconTextFloatingActionButton, TextFloatingActionButton } from '../../fab';
 
 
 const styles = `
@@ -17,115 +17,19 @@ export default () =>(
             <span>Text + Icon</span>
             <span>Icon</span>
 
-            <span>primary</span>
-            <span>
-                <FloatingActionButton themeColor="primary" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="primary" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="primary" icon="plus" />
-            </span>
-
-            <span>secondary</span>
-            <span>
-                <FloatingActionButton themeColor="secondary" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="secondary" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="secondary" icon="plus" />
-            </span>
-
-            <span>tertiary</span>
-            <span>
-                <FloatingActionButton themeColor="tertiary" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="tertiary" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="tertiary" icon="plus" />
-            </span>
-
-            <span>info</span>
-            <span>
-                <FloatingActionButton themeColor="info" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="info" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="info" icon="plus" />
-            </span>
-
-            <span>success</span>
-            <span>
-                <FloatingActionButton themeColor="success" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="success" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="success" icon="plus" />
-            </span>
-
-            <span>warning</span>
-            <span>
-                <FloatingActionButton themeColor="warning" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="warning" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="warning" icon="plus" />
-            </span>
-
-            <span>error</span>
-            <span>
-                <FloatingActionButton themeColor="error" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="error" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="error" icon="plus" />
-            </span>
-
-            <span>dark</span>
-            <span>
-                <FloatingActionButton themeColor="dark" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="dark" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="dark" icon="plus" />
-            </span>
-
-            <span>light</span>
-            <span>
-                <FloatingActionButton themeColor="light" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="light" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="light" icon="plus" />
-            </span>
-
-            <span>inverse</span>
-            <span>
-                <FloatingActionButton themeColor="inverse" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="inverse" icon="plus" text="Create" />
-            </span>
-            <span>
-                <FloatingActionButton themeColor="inverse" icon="plus" />
-            </span>
+            {FloatingActionButton.options.themeColor.map((color) => (
+                <>
+                    <span>{color}</span>
+                    <span>
+                        <TextFloatingActionButton themeColor={color} />
+                    </span>
+                    <span>
+                        <IconTextFloatingActionButton themeColor={color} />
+                    </span>
+                    <span>
+                        <IconFloatingActionButton themeColor={color} />
+                    </span></>
+            ))}
         </div>
     </>
 );

package/src/filemanager/tests/filemanager-dialogs.tsx

@@ -1,6 +1,6 @@
 import { Button } from '../../button';
 import { DialogNormal } from '../../dialog';
-import { Upload } from '../../upload';
+import { UploadNormal } from '../../upload';
 
 
 const styles = `
@@ -23,7 +23,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Upload async empty status="upload"></Upload>
+                    <UploadNormal empty status="upload"/>
                 </DialogNormal>
 
             </section>

package/src/form/tests/form-field-inputs-rtl.tsx

@@ -6,7 +6,7 @@ import { NumericTextbox } from '../../numerictextbox';
 import { RadioButtonWithLabelAfter, RadioGroup, RadioItem } from '../../radio';
 import { Switch } from '../../switch';
 import { Textbox } from '../../textbox';
-import { Upload, UploadFile } from '../../upload';
+import { UploadChunk, UploadFile } from '../../upload';
 import { Form, FormField } from '../../form';
 import { Slider, SliderTick } from '../../slider';
 
@@ -164,9 +164,9 @@ export default () =>(
                         dir="rtl"
                         label="Upload"
                         editor={
-                            <Upload async status="done">
+                            <UploadChunk status="done">
                                 <UploadFile progress="100" status="success" validationMsg="File successfully uploaded." name="test long long long long long long long long long long long long long.pdf" icon="file-pdf"></UploadFile>
-                            </Upload>
+                            </UploadChunk>
                         }
                     >
                     </FormField>
@@ -308,9 +308,9 @@ export default () =>(
                         dir="rtl"
                         label="Upload"
                         editor={
-                            <Upload async status="done">
+                            <UploadChunk status="done">
                                 <UploadFile progress="100" status="success" validationMsg="File successfully uploaded." name="test long long long long long long long long long long long long long.pdf" icon="file-pdf"></UploadFile>
-                            </Upload>
+                            </UploadChunk>
                         }
                     >
                     </FormField>

package/src/form/tests/form-field-inputs.tsx

@@ -7,7 +7,7 @@ import { NumericTextbox } from '../../numerictextbox';
 import { RadioButtonWithLabelAfter, RadioGroup, RadioItem } from '../../radio';
 import { Switch } from '../../switch';
 import { Textbox } from '../../textbox';
-import { Upload, UploadFile } from '../../upload';
+import { UploadChunk, UploadFile } from '../../upload';
 import { Form, FormField } from '../../form';
 
 
@@ -167,9 +167,9 @@ export default () =>(
                     <FormField
                         label="Upload"
                         editor={
-                            <Upload async status="done">
+                            <UploadChunk status="done">
                                 <UploadFile progress="100" status="success" validationMsg="File successfully uploaded." name="test long long long long long long long long long long long long long.pdf" icon="file-pdf"></UploadFile>
-                            </Upload>
+                            </UploadChunk>
                         }
                     >
                     </FormField>
@@ -314,9 +314,9 @@ export default () =>(
                     <FormField
                         label="Upload"
                         editor={
-                            <Upload async status="done">
+                            <UploadChunk status="done">
                                 <UploadFile progress="100" status="success" validationMsg="File successfully uploaded." name="test long long long long long long long long long long long long long.pdf" icon="file-pdf"></UploadFile>
-                            </Upload>
+                            </UploadChunk>
                         }
                     >
                     </FormField>

package/src/gantt/tests/gantt-editing-popup-general.tsx

@@ -1,5 +1,5 @@
 import { Button } from '../../button';
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Textbox } from '../../textbox';
 import { DateTimePicker } from '../../datetimepicker';
 import { NumericTextbox } from '../../numerictextbox';
@@ -20,7 +20,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Edit task" actions={[ 'window-minimize', 'window', 'x' ]} actionButtons={
+                <WindowNormal title="Edit task" actionButtons={
                     <>
                         <Button icon="save" themeColor="primary">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -87,7 +87,7 @@ export default () =>(
                             </Form>
                         </div>
                     </div>
-                </Window>
+                </WindowNormal>
             </section>
         </div>
     </>

package/src/gantt/tests/gantt-editing-popup-other.tsx

@@ -1,5 +1,5 @@
 import { Button } from '../../button';
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Textarea } from '../../textarea';
 import { Textbox } from '../../textbox';
 import { DatePicker } from '../../datepicker';
@@ -21,7 +21,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Edit task" actions={[ 'window-minimize', 'window', 'x' ]} actionButtons={
+                <WindowNormal title="Edit task" actionButtons={
                     <>
                         <Button icon="save" themeColor="primary">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -79,7 +79,7 @@ export default () =>(
                             </Form>
                         </div>
                     </div>
-                </Window>
+                </WindowNormal>
             </section>
 
 

package/src/gantt/tests/gantt-editing-popup-predecessors.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { DropdownList } from '../../dropdownlist';
 import { Toolbar } from '../../toolbar';
 import { Button } from '../../button';
@@ -19,7 +19,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Edit task" actions={[ 'window-minimize', 'window', 'x' ]} actionButtons={
+                <WindowNormal title="Edit task" actionButtons={
                     <>
                         <Button icon="save" themeColor="primary">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -101,7 +101,7 @@ export default () =>(
                             </div>
                         </div>
                     </div>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>