@progress/kendo-themes-html 7.0.3-dev.0 → 7.0.3-dev.2

package/src/dropzone/tests/dropzone.tsx

@@ -1,4 +1,4 @@
-import { Dropzone } from '../../dropzone';
+import { DropzoneNormal, DropzoneWithNote } from '..';
 
 
 export default () =>(
@@ -6,22 +6,24 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <section>
-                <p>External dropzone</p>
-                <Dropzone />
+                <p>External dropzone Empty</p>
+                <DropzoneNormal hint={false} />
             </section>
 
             <section>
-                {/* Hover dragging files */}
-                <p>External dropzone - hover dragging files</p>
-                <Dropzone hover />
+                <p>External dropzone with only Hint</p>
+                <DropzoneNormal />
             </section>
 
             <section>
-                {/* Hight set */}
-                <p>External dropzone</p>
-                <Dropzone style={{ height: "400px" }} />
+                <p>External dropzone with only Note</p>
+                <DropzoneWithNote hint={false} />
             </section>
 
+            <section>
+                <p>External dropzone with Hind & Note</p>
+                <DropzoneWithNote />
+            </section>
         </div>
     </>
 );

package/src/editor/tests/editor-find-replace.tsx

@@ -5,7 +5,7 @@ import { Textbox } from '../../textbox';
 import { EditorNormal, EditorContent, EditorToolbar } from '../../editor';
 import { WindowNormal } from '../../window';
 import { ButtonGroup } from '../../button-group';
-import { Form, FormField } from '../../form';
+import { FormField, FormNormal } from '../../form';
 
 
 const styles = `
@@ -47,7 +47,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div">
+                            <FormNormal formButtons={null} tag="div">
                                 <FormField label="Find What:" editor={<Textbox showClearButton={false} value="editor" />} />
                                 <FormField editor={
                                     <CheckboxGroup className="k-search-options">
@@ -70,7 +70,7 @@ export default () =>(
                                     <span>1 of 3 matches</span>
                                     <Button themeColor="primary" fillMode="flat" icon="chevron-right">Next</Button>
                                 </div>
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>
@@ -90,7 +90,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div">
+                            <FormNormal formButtons={null} tag="div">
                                 <FormField label="Find What:" editor={ <Textbox showClearButton={false} value="editor" /> } />
                                 <FormField label="Replace With:" editor={ <Textbox showClearButton={false} value="grid" /> } />
                                 <FormField editor={
@@ -120,7 +120,7 @@ export default () =>(
                                     <span>1 of 3 matches</span>
                                     <Button themeColor="primary" fillMode="flat" icon="chevron-right">Next</Button>
                                 </div>
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>

package/src/editor/tests/editor-image-editor.tsx

@@ -1,7 +1,7 @@
 import { Button } from '../../button';
 import { Textbox } from '../../textbox';
 import { WindowNormal } from '../../window';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 
 
 const styles = `
@@ -26,12 +26,12 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form tag="div">
+                    <FormNormal formButtons={null} tag="div">
                         <FormField label="Web address:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Alternate text:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Width:" editor={ <Textbox showClearButton={false} /> } />
                         <FormField label="Height:" editor={ <Textbox showClearButton={false} /> } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/editor/tests/editor-table-wizard.tsx

@@ -2,7 +2,7 @@ import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
 import { ColorPicker } from '../../colorpicker';
 import { DropdownList } from '../../dropdownlist';
-import { Form, FormField, Fieldset } from '../../form';
+import { FormNormal, FormField, Fieldset } from '../../form';
 import { Icon } from '../../icon';
 import { NumericTextbox } from '../../numerictextbox';
 import { Textarea } from '../../textarea';
@@ -36,7 +36,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active" >
-                            <Form tag="div" layout="grid" cols={4} gapX={4}>
+                            <FormNormal formButtons={null} tag="div" layout="grid" cols={4} gapX={4}>
                                 <FormField
                                     colSpan="2"
                                     label="Rows"
@@ -116,7 +116,7 @@ export default () =>(
                                         </>
                                     }
                                 />
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>
@@ -136,7 +136,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div" layout="grid">
+                            <FormNormal formButtons={null} tag="div" layout="grid">
                                 <FormField label="ID" optional editor={ <Textbox /> } />
                                 <FormField label="CSS class" optional editor={ <Textbox /> } />
                                 <Fieldset legend="Accessibility" layout="grid" cols={4} gapX={4} >
@@ -173,7 +173,7 @@ export default () =>(
                                         editor={ <Textarea rows={3} placeholder="Summary attribute is not HTML5 compatible"/> }
                                     />
                                 </Fieldset>
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>
@@ -186,7 +186,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form tag="div" layout="grid" cols={4} gapX={4}>
+                    <FormNormal formButtons={null} tag="div" layout="grid" cols={4} gapX={4}>
                         <FormField
                             colSpan="full"
                             editor={
@@ -265,7 +265,7 @@ export default () =>(
                             optional
                             editor={ <Textbox /> }
                         />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
         </div>

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

@@ -1,4 +1,4 @@
-import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink, BreadcrumbRoot } from '../../breadcrumb';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { MenuItem, MenuList } from '../../menu';
@@ -42,7 +42,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -50,7 +50,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">

package/src/filemanager/tests/filemanager-drag-hint.tsx

@@ -1,4 +1,4 @@
-import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
+import { BreadcrumbRoot, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
@@ -39,7 +39,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -47,7 +47,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">

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

@@ -1,4 +1,4 @@
-import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
+import { BreadcrumbRoot, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
@@ -34,7 +34,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -42,7 +42,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -152,7 +152,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -160,7 +160,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-filemanager-view k-filemanager-view-grid">

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

@@ -1,4 +1,4 @@
-import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
+import { BreadcrumbRoot, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
@@ -34,7 +34,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -42,7 +42,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">
@@ -94,7 +94,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -102,7 +102,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-widget k-listview k-selectable k-filemanager-listview">

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

@@ -1,4 +1,4 @@
-import { Breadcrumb, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
+import { BreadcrumbRoot, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { Toolbar } from '../../toolbar';
@@ -29,7 +29,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -37,7 +37,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -154,7 +154,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -162,7 +162,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
@@ -270,7 +270,7 @@ export default () =>(
 
                     {/* Content */}
                     <div className="k-filemanager-content">
-                        <Breadcrumb className="k-filemanager-breadcrumb">
+                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
                             <BreadcrumbContainer>
                                 <BreadcrumbItem root>
                                     <BreadcrumbLink root icon>
@@ -278,7 +278,7 @@ export default () =>(
                                     </BreadcrumbLink>
                                 </BreadcrumbItem>
                             </BreadcrumbContainer>
-                        </Breadcrumb>
+                        </BreadcrumbRoot>
 
                         {/* View */}
                         <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">

package/src/form/index.ts

@@ -1,3 +1,5 @@
 export * from './form.spec';
 export * from './form-field';
 export * from './fieldset';
+export * from './templates/form-normal';
+export * from './templates/form-horizontal';

package/src/form/templates/form-horizontal.tsx

@@ -0,0 +1,48 @@
+import { Fieldset, Form, FormField } from "..";
+import { Button } from "../../button";
+import { DropdownList } from "../../dropdownlist";
+import { RadioButton } from "../../radio";
+import { Textbox } from "../../textbox";
+
+export const FormHorizontal = ({ size, ...other }: any) => (
+    <Form
+        formButtons={
+            <>
+                <Button className="k-form-submit" themeColor="primary" size={size}>Submit</Button>
+                <Button className="k-form-clear" size={size}>Clear</Button>
+            </>
+        }
+        children={
+            <Fieldset legend="Form Legend">
+                <FormField label="Label" placeholder="Input Value" editor={<Textbox size={size} />} />
+                <FormField
+                    label="Label"
+                    hint="Hint text"
+                    editor={<DropdownList value="Dropdown List" size={size} />}
+                />
+                <FormField
+                    label="City"
+                    editor={
+                        <ul className="k-radio-list k-list-horizontal">
+                            <li className="k-radio-list-item">
+                                <RadioButton checked={true} size={size} />
+                                <label className="k-radio-label">Label</label>
+                            </li>
+                            <li className="k-radio-list-item">
+                                <RadioButton size={size} />
+                                <label className="k-radio-label">Label</label>
+                            </li>
+                            <li className="k-radio-list-item">
+                                <RadioButton size={size} />
+                                <label className="k-radio-label">Label</label>
+                            </li>
+                        </ul>
+                    }
+                />
+            </Fieldset>
+        }
+        orientation="horizontal"
+        size={size}
+        {...other}>
+    </Form>
+);

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

@@ -0,0 +1,47 @@
+import { Fieldset, Form, FormField } from "..";
+import { Button } from "../../button";
+import { DropdownList } from "../../dropdownlist";
+import { RadioButton } from "../../radio";
+import { Textbox } from "../../textbox";
+
+export const FormNormal = ({ size, ...other }: any) => (
+    <Form
+        formButtons={
+            <>
+                <Button className="k-form-submit" themeColor="primary" size={size}>Submit</Button>
+                <Button className="k-form-clear" size={size}>Clear</Button>
+            </>
+        }
+        children={
+            <Fieldset legend="Form Legend">
+                <FormField label="Label" placeholder="Input Value" editor={<Textbox size={size} />} />
+                <FormField
+                    label="Label"
+                    hint="Hint text"
+                    editor={<DropdownList value="Dropdown List" size={size} />}
+                />
+                <FormField
+                    label="City"
+                    editor={
+                        <ul className="k-radio-list k-list-horizontal">
+                            <li className="k-radio-list-item">
+                                <RadioButton checked={true} size={size} />
+                                <label className="k-radio-label">Label</label>
+                            </li>
+                            <li className="k-radio-list-item">
+                                <RadioButton size={size} />
+                                <label className="k-radio-label">Label</label>
+                            </li>
+                            <li className="k-radio-list-item">
+                                <RadioButton size={size} />
+                                <label className="k-radio-label">Label</label>
+                            </li>
+                        </ul>
+                    }
+                />
+            </Fieldset>
+        }
+        size={size}
+        {...other}>
+    </Form>
+);

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

@@ -3,7 +3,7 @@ import { DatePicker } from '../../datepicker';
 import { DateRangePicker } from '../../daterangepicker';
 import { DateTimePicker } from '../../datetimepicker';
 import { TimePicker } from '../../timepicker';
-import { Form, FormField } from '../../form';
+import { FormField, FormHorizontal, FormNormal } from '../../form';
 
 
 const styles = `
@@ -22,8 +22,9 @@ export default () =>(
             <span>Horizontal Form</span>
 
             <section>
-                <Form>
-
+                <FormNormal
+                    formButtons={null}
+                >
                     <FormField
                         label="DateInput:"
                         editor={
@@ -63,14 +64,14 @@ export default () =>(
                         }
                     >
                     </FormField>
-
-                </Form>
+                </FormNormal>
             </section>
 
 
             <section>
-                <Form orientation="horizontal">
-
+                <FormHorizontal
+                    formButtons={null}
+                >
                     <FormField
                         label="DateInput:"
                         editor={
@@ -110,8 +111,7 @@ export default () =>(
                         }
                     >
                     </FormField>
-
-                </Form>
+                </FormHorizontal>
             </section>
 
         </div>

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

@@ -3,7 +3,7 @@ import { Chip, ChipAction } from '../../chip';
 import { Combobox } from '../../combobox';
 import { DropdownList } from '../../dropdownlist';
 import { MultiSelect } from '../../multiselect';
-import { Form, FormField } from '../../form';
+import { FormField, FormHorizontal, FormNormal } from '../../form';
 
 
 const styles = `
@@ -22,8 +22,9 @@ export default () =>(
             <span>Horizontal Form</span>
 
             <section>
-                <Form>
-
+                <FormNormal
+                    formButtons={null}
+                >
                     <FormField
                         label="AutoComplete:"
                         editor={
@@ -59,14 +60,14 @@ export default () =>(
                         }
                     >
                     </FormField>
-
-                </Form>
+                </FormNormal>
             </section>
 
 
             <section>
-                <Form orientation="horizontal">
-
+                <FormHorizontal
+                    formButtons={null}
+                >
                     <FormField
                         label="AutoComplete:"
                         editor={
@@ -102,8 +103,7 @@ export default () =>(
                         }
                     >
                     </FormField>
-
-                </Form>
+                </FormHorizontal>
             </section>
 
         </div>

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

@@ -1,6 +1,6 @@
 import { Textarea } from '../../textarea';
 import { Textbox } from '../../textbox';
-import { Form, FormField, Fieldset } from '../../form';
+import { FormField, Fieldset, FormNormal, FormHorizontal } from '../../form';
 
 
 const styles = `
@@ -19,8 +19,9 @@ export default () =>(
             <span>Horizontal Form</span>
 
             <section>
-                <Form>
-
+                <FormNormal
+                    formButtons={null}
+                >
                     <Fieldset legend="Please fill in the fields:">
                         <FormField label="First Name:" editor={ <Textbox /> }></FormField>
                         <FormField label="Last Name:" editor={ <Textbox /> }></FormField>
@@ -30,13 +31,14 @@ export default () =>(
                         <FormField label="City:" editor={ <Textbox /> }></FormField>
                         <FormField label="Address:" editor={ <Textarea /> }></FormField>
                     </Fieldset>
-                </Form>
+                </FormNormal>
             </section>
 
 
             <section>
-                <Form orientation="horizontal">
-
+                <FormHorizontal
+                    formButtons={null}
+                >
                     <Fieldset legend="Please fill in the fields:">
                         <FormField label="First Name:" editor={ <Textbox /> }></FormField>
                         <FormField label="Last Name:" editor={ <Textbox /> }></FormField>
@@ -46,7 +48,7 @@ export default () =>(
                         <FormField label="City:" editor={ <Textbox /> }></FormField>
                         <FormField label="Address:" editor={ <Textarea rows={3} /> }></FormField>
                     </Fieldset>
-                </Form>
+                </FormHorizontal>
             </section>
 
         </div>