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

package/src/spreadsheet/tests/spreadsheet-insert-dialogs.tsx

@@ -1,9 +1,9 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Textarea } from '../../textarea';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 import { Textbox } from '../../textbox';
-import { Upload } from '../../upload';
+import { UploadNormal } from '../../upload';
 import { Dropzone } from '../../dropzone';
 import { DropdownList } from '../../dropdownlist';
 import { ListBox } from '../../listbox';
@@ -23,7 +23,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <Window title="Insert comment" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Insert comment" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
@@ -34,11 +34,11 @@ export default () =>(
                     <Form>
                         <FormField label="Comment" editor={ <Textarea /> }/>
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Insert image" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Insert image" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
@@ -46,12 +46,12 @@ export default () =>(
                 }>
                     <Dropzone />
 
-                    <Upload async status="upload"></Upload>
-                </Window>
+                    <UploadNormal status="upload"></UploadNormal>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Insert Link" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Insert Link" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
@@ -63,11 +63,11 @@ export default () =>(
                         <FormField label="Select link" editor={ <DropdownList value="URL" /> } />
                         <FormField label="URL address" editor={ <Textbox value="Input value" /> } />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Insert Link" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Insert Link" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
@@ -87,11 +87,11 @@ export default () =>(
                             </ListBox>
                         }/>
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window title="Insert Chart" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Insert Chart" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Insert</Button>
                         <Button>Cancel</Button>
@@ -100,7 +100,7 @@ export default () =>(
                     <Form>
                         <FormField label="Select chart type" editor={ <DropdownList value="Donut" /> } />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/spreadsheet/tests/spreadsheet-print.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Button } from '../../button';
 import { Fieldset, Form, FormField } from '../../form';
 import { RadioButtonWithLabelAfter, RadioGroup, RadioItem } from '../../radio';
@@ -20,7 +20,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
-                <Window style={{ width: "620px" }} title="Print" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal style={{ width: "620px" }} title="Print" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Save</Button>
                     </>
@@ -127,11 +127,11 @@ export default () =>(
                             </Form>
                         </div>
                     </div>
-                </Window>
+                </WindowNormal>
             </section>
 
             <section>
-                <Window style={{ width: "620px" }} title="Print" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
+                <WindowNormal style={{ width: "620px" }} title="Print" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary">Save</Button>
                     </>
@@ -172,7 +172,7 @@ export default () =>(
                             </Form>
                         </div>
                     </div>
-                </Window>
+                </WindowNormal>
             </section>
         </div>
     </>

package/src/spreadsheet/tests/spreadsheet-sheets-bar.tsx

@@ -1,7 +1,7 @@
 import { Button } from "../../button";
 import { MenuList, MenuItem, MenuSeparator } from "../../menu";
 import { MenuButton } from "../../menu-button";
-import { Window } from "../../window";
+import { WindowNormal } from "../../window";
 import { Popup } from "../../popup";
 import { Form, FormField } from "../../form";
 import { Textbox } from "../../textbox";
@@ -93,7 +93,7 @@ export default () =>(
 
             <span>Sheets Bar Rename</span>
             <section>
-                <Window title="Rename Sheet" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="stretched" actionButtons={
+                <WindowNormal title="Rename Sheet" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="stretched" actionButtons={
                     <>
                         <Button themeColor="primary">Rename</Button>
                         <Button>Cancel</Button>
@@ -102,12 +102,12 @@ export default () =>(
                     <Form>
                         <FormField label="Rename sheet" editor={ <Textbox placeholder="Sheet name"/> }></FormField>
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
             <span>Sheets Bar Delete</span>
             <section>
-                <Window title="Delete Sheet" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="stretched" actionButtons={
+                <WindowNormal title="Delete Sheet" actions={[ 'x' ]} className="k-spreadsheet-window" actionButtonsAlign="stretched" actionButtons={
                     <>
                         <Button themeColor="primary">Delete</Button>
                         <Button>Cancel</Button>
@@ -115,7 +115,7 @@ export default () =>(
                 }>
                     <p>The deleted sheet data will be lost.</p>
                     <p>Are you sure you want to proceed?</p>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/treelist/tests/treelist-editing-popup.tsx

@@ -1,4 +1,4 @@
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 import { Checkbox } from '../../checkbox';
 import { NumericTextbox } from '../../numerictextbox';
 import { Textbox } from '../../textbox';
@@ -23,7 +23,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <section>
-                <Window title="Add item" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="start" actionButtons={
+                <WindowNormal title="Add item" actionButtonsAlign="start" actionButtons={
                     <>
                         <Button themeColor="primary" icon="save">Save</Button>
                         <Button icon="cancel">Cancel</Button>
@@ -53,7 +53,7 @@ export default () =>(
                             }
                         />
                     </Form>
-                </Window>
+                </WindowNormal>
             </section>
 
         </div>

package/src/upload/index.ts

@@ -3,3 +3,6 @@ export * from './upload-dropzone';
 export * from './upload-file';
 export * from './upload-file-multiple';
 export * from './upload-file-info';
+export * from './templates/upload-chunk';
+export * from './templates/upload-batch';
+export * from './templates/upload-normal';

package/src/upload/templates/upload-batch.tsx

@@ -0,0 +1,14 @@
+import { Upload, UploadFileMultiple, UploadFileInfo } from "..";
+
+export const UploadBatch = (props) => (
+    <Upload async children={[
+        <>
+            <UploadFileMultiple fileSummary="Total: 2 files, 157.66 KB">
+                <UploadFileInfo name="Video1_File_with_Very_Very_Very_Very_Long_Name.png" size="51.23 KB"></UploadFileInfo>
+                <UploadFileInfo name="Image2.jpg" size="106.43 KB"></UploadFileInfo>
+            </UploadFileMultiple>
+        </>
+    ]}
+    {...props}>
+    </Upload>
+);

package/src/upload/templates/upload-chunk.tsx

@@ -0,0 +1,12 @@
+import { UploadFile, Upload } from "..";
+
+export const UploadChunk = (props) => (
+    <Upload async children={[
+        <>
+            <UploadFile name="Image_With_Very_Very_Very_Very_Very_Long_Name1.png" icon="file-image" size="51.23 KB"></UploadFile>
+            <UploadFile name="Image2.jpg" icon="file-image" size="106.43 KB"></UploadFile>
+        </>
+    ]}
+    {...props}>
+    </Upload>
+);

package/src/upload/templates/upload-normal.tsx

@@ -0,0 +1,7 @@
+import { Upload } from "..";
+
+export const UploadNormal = (props) => (
+    <Upload async
+        {...props}>
+    </Upload>
+);

package/src/upload/tests/upload-rtl.tsx

@@ -1,81 +1,68 @@
-import { Upload, UploadFile, UploadFileMultiple, UploadFileInfo } from '../../upload';
-
-
-const style = `
-    #test-area section {
-        max-width: 400px;
-    }
-`;
+import { UploadFile, UploadFileMultiple, UploadFileInfo, UploadChunk, UploadBatch } from '..';
 
 
 export default () =>(
     <>
-        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2 k-rtl">
 
+            <span>Chunk Upload RTL</span>
+            <span>Batch Upload RTL</span>
+
             <section>
-                <Upload async status="uploading">
-                    <UploadFile progress="60" status="error" validationMsg="File type not allowed." name="Video_File_with_Very_Very_Very_Very_Long_Name.jpg" icon="file-image"></UploadFile>
-                    <UploadFile progress="60" status="progress" name="Document.txt" icon="file-pdf" size="225.68 KB" state="uploaded"></UploadFile>
-                </Upload>
+                <UploadChunk actions status="upload" />
             </section>
 
             <section>
-                <Upload async status="done">
-                    <UploadFile progress="60" status="success" validationMsg="File(s) uploaded successfully." name="Image1_With_Very_Very_Very_Very_Long_Name.png" icon="file-image"></UploadFile>
-                    <UploadFile progress="60" status="success" validationMsg="File(s) uploaded successfully." name="Image2.png" icon="file-image" state="uploaded"></UploadFile>
-                </Upload>
+                <UploadBatch actions status="upload" />
             </section>
 
             <section>
-                <Upload async status="done">
-                    <UploadFileMultiple status="success" validationMsg="4 File(s) uploaded successfully" fileSummary="Total: 4 files, 170.22 KB">
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name2.png" size="106.43 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video3.png" size="24.34 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video4.png" size="19.85 KB"></UploadFileInfo>
-                    </UploadFileMultiple>
-                </Upload>
+                <UploadChunk status="uploading">
+                    <UploadFile progress="50" status="progress" name="Document1_With_Very_Very_Very_Very_Very_Long_Name.txt" icon="file-pdf" size="225.68 KB"></UploadFile>
+                    <UploadFile progress="70" status="progress" name="Document2.txt" icon="file-pdf" size="225.68 KB"></UploadFile>
+                </UploadChunk>
             </section>
 
             <section>
-                <Upload async status="uploading">
-                    <UploadFileMultiple status="progress" fileSummary="Total: 4 files, 170.22 KB" progress="70">
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name2.png" size="106.43 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video4.png" size="19.85 KB"></UploadFileInfo>
+                <UploadBatch status="uploading">
+                    <UploadFileMultiple status="progress" fileSummary="Total: 2 files, 39.66 KB" progress="70">
+                        <UploadFileInfo name="Video1_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
+                        <UploadFileInfo name="Image2.png" size="19.85 KB"></UploadFileInfo>
                     </UploadFileMultiple>
-                </Upload>
+                </UploadBatch>
             </section>
 
             <section>
-                <Upload async status="failed">
-                    <UploadFileMultiple status="error" fileSummary="Total: 4 files, 170.22 KB" validationMsg="Invalid file(s). Please check file upload requirements." progress="70">
-                        <UploadFileInfo name="Movie_With_Very_Very_Very_Very_Very_Long_Name1.mkv" size="12.61 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Movie2.mkv" size="12.36 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Image1.jpg" size="1.09 MB"></UploadFileInfo>
-                        <UploadFileInfo name="Image2.jpg" size="1.09 MB"></UploadFileInfo>
-                    </UploadFileMultiple>
-                </Upload>
+                <UploadChunk status="done">
+                    <UploadFile status="success" validationMsg="File(s) uploaded successfully." name="Image1_With_Very_Very_Very_Very_Very_Long_Name.png" icon="file-image"></UploadFile>
+                    <UploadFile status="success" validationMsg="File(s) uploaded successfully." name="Image2.png" icon="file-image"></UploadFile>
+                </UploadChunk>
             </section>
 
             <section>
-                <Upload async actions status="upload">
-                    <UploadFile progress="60" status="success" name="Image_With_Very_Very_Very_Very_Very_Long_Name1.png" icon="file-image" size="51.23 KB"></UploadFile>
-                    <UploadFile progress="60" status="success" name="Image2.jpg" icon="file-image" state="uploaded" size="106.43 KB"></UploadFile>
-                </Upload>
+                <UploadBatch status="done">
+                    <UploadFileMultiple status="success" validationMsg="2 File(s) uploaded successfully" fileSummary="Total: 4 files, 39.46 KB">
+                        <UploadFileInfo name="Video1_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
+                        <UploadFileInfo name="Image2.png" size="24.34 KB"></UploadFileInfo>
+                    </UploadFileMultiple>
+                </UploadBatch>
             </section>
 
             <section>
-                <span>Upload hovered dropzone</span>
-                <Upload async empty disabled hover></Upload>
+                <UploadChunk status="failed">
+                    <UploadFile status="error" validationMsg="File type not allowed." name="Movie1_With_Very_Very_Very_Very_Very_Long_Name1.mkv" icon="file-image"></UploadFile>
+                    <UploadFile status="error" validationMsg="File type not allowed." name="Video2.mkv" icon="file-image"></UploadFile>
+                </UploadChunk>
             </section>
 
             <section>
-                <span>Upload disabled</span>
-                <Upload async empty disabled></Upload>
+                <UploadBatch status="failed">
+                    <UploadFileMultiple status="error" fileSummary="Total: 4 files, 170.22 KB" validationMsg="Invalid file(s). Please check file upload requirements." progress="70">
+                        <UploadFileInfo name="Movie_With_Very_Very_Very_Very_Very_Long_Name1.mkv" size="12.61 KB"></UploadFileInfo>
+                        <UploadFileInfo name="Movie1.mkv" size="12.36 KB"></UploadFileInfo>
+                    </UploadFileMultiple>
+                </UploadBatch>
             </section>
-
         </div>
     </>
 );

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

@@ -0,0 +1,29 @@
+import { Upload, UploadNormal } from '../../upload';
+
+
+const styles = `
+    #test-area {
+        justify-items: start;
+    }
+
+    section {
+        display: flex;
+        flex-direction: column;
+        width: 480px;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            {[ 'normal', ...Upload.states ].map((state) => (
+                <section>
+                    <span>{state}</span>
+                    <UploadNormal status="upload" {...{ [state]: true }}/>
+                </section>
+            ))}
+        </div>
+    </>
+);

package/src/upload/tests/upload.tsx

@@ -1,71 +1,66 @@
-import { Upload, UploadFile, UploadFileMultiple, UploadFileInfo } from '../../upload';
+import { UploadFile, UploadFileMultiple, UploadFileInfo, UploadChunk, UploadBatch } from '..';
 
 
 export default () =>(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
+            <span>Chunk Upload</span>
+            <span>Batch Upload</span>
             <section>
-                <Upload async status="uploading">
-                    <UploadFile progress="60" status="error" validationMsg="File type not allowed." name="Video_File_with_Very_Very_Very_Very_Long_Name.jpg" icon="file-image"></UploadFile>
-                    <UploadFile progress="60" status="progress" name="Document.txt" icon="file-pdf" size="225.68 KB" state="uploaded"></UploadFile>
-                </Upload>
+                <UploadChunk actions status="upload" />
             </section>
 
             <section>
-                <Upload async status="done">
-                    <UploadFile progress="60" status="success" validationMsg="File(s) uploaded successfully." name="Image1_With_Very_Very_Very_Very_Long_Name.png" icon="file-image"></UploadFile>
-                    <UploadFile progress="60" status="success" validationMsg="File(s) uploaded successfully." name="Image2.png" icon="file-image" state="uploaded"></UploadFile>
-                </Upload>
+                <UploadBatch actions status="upload" />
             </section>
 
             <section>
-                <Upload async status="done">
-                    <UploadFileMultiple status="success" validationMsg="4 File(s) uploaded successfully" fileSummary="Total: 4 files, 170.22 KB">
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name2.png" size="106.43 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video3.png" size="24.34 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video4.png" size="19.85 KB"></UploadFileInfo>
-                    </UploadFileMultiple>
-                </Upload>
+                <UploadChunk status="uploading">
+                    <UploadFile progress="50" status="progress" name="Document1_With_Very_Very_Very_Very_Very_Long_Name.txt" icon="file-pdf" size="225.68 KB"></UploadFile>
+                    <UploadFile progress="70" status="progress" name="Document2.txt" icon="file-pdf" size="225.68 KB"></UploadFile>
+                </UploadChunk>
             </section>
 
             <section>
-                <Upload async status="uploading">
-                    <UploadFileMultiple status="progress" fileSummary="Total: 4 files, 170.22 KB" progress="70">
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video_File_with_Very_Very_Very_Very_Long_Name2.png" size="106.43 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Video4.png" size="19.85 KB"></UploadFileInfo>
+                <UploadBatch status="uploading">
+                    <UploadFileMultiple status="progress" fileSummary="Total: 2 files, 39.66 KB" progress="70">
+                        <UploadFileInfo name="Video1_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
+                        <UploadFileInfo name="Image2.png" size="19.85 KB"></UploadFileInfo>
                     </UploadFileMultiple>
-                </Upload>
+                </UploadBatch>
             </section>
 
             <section>
-                <Upload async status="failed">
-                    <UploadFileMultiple status="error" fileSummary="Total: 4 files, 170.22 KB" validationMsg="Invalid file(s). Please check file upload requirements." progress="70">
-                        <UploadFileInfo name="Movie_With_Very_Very_Very_Very_Very_Long_Name1.mkv" size="12.61 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Movie2.mkv" size="12.36 KB"></UploadFileInfo>
-                        <UploadFileInfo name="Image1.jpg" size="1.09 MB"></UploadFileInfo>
-                        <UploadFileInfo name="Image2.jpg" size="1.09 MB"></UploadFileInfo>
-                    </UploadFileMultiple>
-                </Upload>
+                <UploadChunk status="done">
+                    <UploadFile status="success" validationMsg="File(s) uploaded successfully." name="Image1_With_Very_Very_Very_Very_Very_Long_Name.png" icon="file-image"></UploadFile>
+                    <UploadFile status="success" validationMsg="File(s) uploaded successfully." name="Image2.png" icon="file-image"></UploadFile>
+                </UploadChunk>
             </section>
 
             <section>
-                <Upload async actions status="upload">
-                    <UploadFile progress="60" status="success" name="Image_With_Very_Very_Very_Very_Very_Long_Name1.png" icon="file-image" size="51.23 KB"></UploadFile>
-                    <UploadFile progress="60" status="success" name="Image2.jpg" icon="file-image" state="uploaded" size="106.43 KB"></UploadFile>
-                </Upload>
+                <UploadBatch status="done">
+                    <UploadFileMultiple status="success" validationMsg="2 File(s) uploaded successfully" fileSummary="Total: 4 files, 39.46 KB">
+                        <UploadFileInfo name="Video1_File_with_Very_Very_Very_Very_Long_Name.png" size="19.61 KB"></UploadFileInfo>
+                        <UploadFileInfo name="Image2.png" size="24.34 KB"></UploadFileInfo>
+                    </UploadFileMultiple>
+                </UploadBatch>
             </section>
 
             <section>
-                <span>Upload hovered dropzone</span>
-                <Upload async empty hover></Upload>
+                <UploadChunk status="failed">
+                    <UploadFile status="error" validationMsg="File type not allowed." name="Movie1_With_Very_Very_Very_Very_Very_Long_Name1.mkv" icon="file-image"></UploadFile>
+                    <UploadFile status="error" validationMsg="File type not allowed." name="Video2.mkv" icon="file-image"></UploadFile>
+                </UploadChunk>
             </section>
 
             <section>
-                <span>Upload disabled</span>
-                <Upload async empty disabled></Upload>
+                <UploadBatch status="failed">
+                    <UploadFileMultiple status="error" fileSummary="Total: 4 files, 170.22 KB" validationMsg="Invalid file(s). Please check file upload requirements." progress="70">
+                        <UploadFileInfo name="Movie_With_Very_Very_Very_Very_Very_Long_Name1.mkv" size="12.61 KB"></UploadFileInfo>
+                        <UploadFileInfo name="Movie1.mkv" size="12.36 KB"></UploadFileInfo>
+                    </UploadFileMultiple>
+                </UploadBatch>
             </section>
         </div>
     </>

package/src/upload/upload.spec.tsx

@@ -61,7 +61,7 @@ export const Upload = (
             { actions &&
                 <ActionButtons alignment="end" orientation="horizontal">
                     <Button className="k-clear-selected">Clear</Button>
-                    <Button themeColor="primary" className="k-upload-selected">Update</Button>
+                    <Button themeColor="primary" className="k-upload-selected">Upload</Button>
                 </ActionButtons>
             }
         </div>

package/src/window/index.ts

@@ -1 +1,2 @@
 export * from './window.spec';
+export * from './templates/window-normal';

package/src/window/templates/window-normal.tsx

@@ -0,0 +1,11 @@
+import { Window } from "../index";
+
+export const WindowNormal = (props) => (
+    <Window title="Title" actions={[ 'window-minimize', 'window', 'x' ]}
+        children={[
+            <>
+            Content
+            </>
+        ]} {...props}>
+    </Window>
+);

package/src/window/tests/window-action-buttons.tsx

@@ -1,5 +1,5 @@
 import { Button } from '../../button';
-import { Window } from '../../window';
+import { WindowNormal } from '../../window';
 
 
 const style = `
@@ -14,41 +14,41 @@ export default () =>(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <Window title="Title" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="start" actionButtons={
+            <WindowNormal actionButtonsAlign="start" actionButtons={
                 <>
                     <Button>Cancel</Button>
                     <Button themeColor="primary">Update</Button>
                 </>
             }>
                 Action Buttons at start position
-            </Window>
+            </WindowNormal>
 
-            <Window title="Title" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="center" actionButtons={
+            <WindowNormal actionButtonsAlign="center" actionButtons={
                 <>
                     <Button>Cancel</Button>
                     <Button themeColor="primary">Update</Button>
                 </>
             }>
                 Action Buttons at center position
-            </Window>
+            </WindowNormal>
 
-            <Window title="Title" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="end" actionButtons={
+            <WindowNormal actionButtonsAlign="end" actionButtons={
                 <>
                     <Button>Cancel</Button>
                     <Button themeColor="primary">Update</Button>
                 </>
             }>
                 Action Buttons at end position
-            </Window>
+            </WindowNormal>
 
-            <Window title="Title" actions={[ 'window-minimize', 'window', 'x' ]} actionButtonsAlign="stretched" actionButtons={
+            <WindowNormal actionButtonsAlign="stretched" actionButtons={
                 <>
                     <Button>Cancel</Button>
                     <Button themeColor="primary">Update</Button>
                 </>
             }>
                 Action Buttons with stretched position
-            </Window>
+            </WindowNormal>
 
         </div>
     </>

package/src/window/tests/window-rtl.tsx

@@ -1,5 +1,4 @@
-import { Window } from '../../window';
-
+import { WindowNormal } from '..';
 
 const style = `
     .k-window {
@@ -13,25 +12,24 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2 k-rtl">
 
             <section>
-                <Window title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>Window content</Window>
+                <WindowNormal>Window content</WindowNormal>
             </section>
 
             <section>
-                <Window title="" actions={[ 'window-minimize', 'window', 'x' ]}>Window with no title specified</Window>
+                <WindowNormal title="">Window with no title specified</WindowNormal>
             </section>
 
             <section>
-                <Window title="">Window with empty title and no actions</Window>
+                <WindowNormal title="" actions={undefined}>Window with empty title and no actions</WindowNormal>
             </section>
 
             <section>
-                <Window>Window without a title</Window>
+                <WindowNormal title={undefined} actions={undefined}>Window without a title</WindowNormal>
             </section>
 
             <section>
-                <Window title="Window minimized" actions={[ 'window-minimize', 'window', 'x' ]} minimized>Window content</Window>
+                <WindowNormal title="Window minimized" minimized>Window content</WindowNormal>
             </section>
-
         </div>
     </>
 );