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

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

@@ -1,4 +1,3 @@
-import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
 import { ColorPicker } from '../../colorpicker';
 import { FloatingLabel } from '../../floating-label';
@@ -8,7 +7,8 @@ import { RadioButtonWithLabelAfter, RadioGroup, RadioItem } from '../../radio';
 import { Switch } from '../../switch';
 import { Textbox } from '../../textbox';
 import { UploadChunk, UploadFile } from '../../upload';
-import { Form, FormField } from '../../form';
+import { FormField, FormHorizontal, FormNormal } from '../../form';
+import { Slider, SliderTick } from '../../slider';
 
 
 const styles = `
@@ -32,8 +32,9 @@ export default () =>(
             <span>Horizontal Form</span>
 
             <section>
-                <Form>
-
+                <FormNormal
+                    formButtons={null}
+                >
                     <FormField
                         label="Textbox:"
                         editor={ <Textbox/> }
@@ -113,35 +114,19 @@ export default () =>(
                     <FormField
                         label="Slider:"
                         editor={
-                            <div className="k-slider k-slider-horizontal">
-                                <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                                <div className="k-slider-track-wrap">
-                                    <ul className="k-reset k-slider-items">
-                                        <li className="k-tick k-tick-large">
-                                            <span className="k-label">0</span>
-                                        </li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick k-tick-large">
-                                            <span className="k-label">5</span>
-                                        </li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick k-tick-large">
-                                            <span className="k-label">10</span>
-                                        </li>
-                                    </ul>
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a href="#" className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                                <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                            </div>
+                            <Slider>
+                                <SliderTick label large text="0"/>
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick label large text="5"/>
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick label large text="10"/>
+                            </Slider>
                         }
                     >
                     </FormField>
@@ -173,14 +158,14 @@ export default () =>(
                         }
                     >
                     </FormField>
-
-                </Form>
+                </FormNormal>
             </section>
 
 
             <section>
-                <Form orientation="horizontal">
-
+                <FormHorizontal
+                    formButtons={null}
+                >
                     <FormField
                         label="Textbox:"
                         editor={ <Textbox/> }
@@ -258,37 +243,21 @@ export default () =>(
                     </FormField>
 
                     <FormField
-                        label="Slider"
+                        label="Slider:"
                         editor={
-                            <div className="k-slider k-slider-horizontal">
-                                <Button icon="caret-alt-left" rounded="full" className="k-button-decrease"></Button>
-                                <div className="k-slider-track-wrap">
-                                    <ul className="k-reset k-slider-items">
-                                        <li className="k-tick k-tick-large">
-                                            <span className="k-label">0</span>
-                                        </li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick k-tick-large">
-                                            <span className="k-label">5</span>
-                                        </li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick"></li>
-                                        <li className="k-tick k-tick-large">
-                                            <span className="k-label">10</span>
-                                        </li>
-                                    </ul>
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a href="#" className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                                <Button icon="caret-alt-right" rounded="full" className="k-button-increase"></Button>
-                            </div>
+                            <Slider>
+                                <SliderTick label large text="0"/>
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick label large text="5"/>
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick />
+                                <SliderTick label large text="10"/>
+                            </Slider>
                         }
                     >
                     </FormField>
@@ -320,8 +289,7 @@ export default () =>(
                         }
                     >
                     </FormField>
-
-                </Form>
+                </FormHorizontal>
             </section>
 
         </div>

package/src/form/tests/form-grid-layout.tsx

@@ -1,7 +1,6 @@
 import { DropdownList } from '../../dropdownlist';
 import { Textbox } from '../../textbox';
-import { Button } from '../../button';
-import { Form, FormField, Fieldset } from '../../form';
+import { FormField, Fieldset, FormNormal } from '../../form';
 
 
 export default () =>(
@@ -12,12 +11,7 @@ export default () =>(
             <span></span>
 
             <section>
-                <Form layout="grid" cols={2} gapX={4} formButtons={
-                    <>
-                        <Button className="k-form-submit" themeColor="primary">Submit</Button>
-                        <Button className="k-form-clear" >Clear</Button>
-                    </>
-                } >
+                <FormNormal layout="grid" cols={2} gapX={4}>
                     <Fieldset legend="Personal Information" layout="grid" cols={1} gapY={3}>
                         <FormField
                             label="First Name"
@@ -49,7 +43,7 @@ export default () =>(
                             editor={ <Textbox/> }
                         />
                     </Fieldset>
-                </Form>
+                </FormNormal>
             </section>
 
         </div>

package/src/form/tests/form-misc.tsx

@@ -1,7 +1,6 @@
 import { Checkbox } from '../../checkbox';
 import { Textbox } from '../../textbox';
-import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormField, FormHorizontal, FormNormal } from '../../form';
 
 
 const styles = `
@@ -21,15 +20,9 @@ export default () =>(
 
             <section>
                 <div className="k-messagebox k-messagebox-error">
-                    Error: The quick brown fox jumps over the lazy dog.
+                        Error: The quick brown fox jumps over the lazy dog.
                 </div>
-
-                <Form formButtons={
-                    <>
-                        <Button themeColor="primary">Submit</Button>
-                        <Button>Clear</Button>
-                    </>
-                } >
+                <FormNormal>
                     <FormField
                         label="Normal:"
                         optional
@@ -68,22 +61,15 @@ export default () =>(
                             </>
                         }
                     />
-
-                </Form>
+                </FormNormal>
             </section>
 
 
             <section>
                 <div className="k-messagebox k-messagebox-error">
-                    Error: The quick brown fox jumps over the lazy dog.
+                        Error: The quick brown fox jumps over the lazy dog.
                 </div>
-
-                <Form orientation="horizontal" formButtons={
-                    <>
-                        <Button className="k-form-submit" themeColor="primary" focus>Submit</Button>
-                        <Button className="k-form-clear">Clear</Button>
-                    </>
-                } >
+                <FormHorizontal>
                     <FormField
                         label="Normal:"
                         optional
@@ -126,8 +112,7 @@ export default () =>(
                             </>
                         }
                     />
-
-                </Form>
+                </FormHorizontal>
             </section>
 
         </div>

package/src/form/tests/form-sizes.tsx

@@ -1,71 +1,39 @@
-import { DropdownList } from '../../dropdownlist';
-import { Textbox } from '../../textbox';
-import { Button } from '../../button';
-import { Form, FormField, Fieldset } from '../../form';
+import { Form, FormNormal, FormHorizontal } from '../../form';
 
 
-const styles = { border: '1px solid grey', padding: '10px' };
+const styles = `
+    #test-area {
+        grid-template-columns: 80px repeat(3, 1fr);
+    }
+
+    section {
+        padding: 10px;
+        border: 1px solid gray;
+    }
+`;
 
 export default () =>(
     <>
-        <div id="test-area">
-            <div>Form Sizes</div>
-            <br />
-            <div style={{ display: 'flex', gap: '20px' }}>
-                <section style={styles}>
-                    <div><strong>sm</strong></div>
-                    <br />
-                    <Form size="small"
-                        formButtons={
-                            <>
-                                <Button className="k-form-submit" themeColor="primary" size="small">Submit</Button>
-                                <Button className="k-form-clear" size="small">Clear</Button>
-                            </>
-                        }>
-                        <Fieldset legend="Shipping Address" layout="grid" cols={2} gapX={2} >
-                            <FormField colSpan="1" label="Country" editor={ <DropdownList value="France" size="small"/> } />
-                            <FormField colSpan="1" label="City" editor={ <Textbox size="small"/> } />
-                            <FormField colSpan="2" className="k-form-field-error" label="Address Line" error="Address Line is required" editor={ <Textbox size="small"/> } />
-                        </Fieldset>
-                    </Form>
-                </section>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span></span>
+            <span>small</span>
+            <span>medium</span>
+            <span>large</span>
 
-                <section style={styles}>
-                    <div><strong>md</strong></div>
-                    <br />
-                    <Form size="medium"
-                        formButtons={
-                            <>
-                                <Button className="k-form-submit" themeColor="primary" size="medium">Submit</Button>
-                                <Button className="k-form-clear" size="medium">Clear</Button>
-                            </>
-                        }>
-                        <Fieldset legend="Shipping Address" layout="grid" cols={2} gapX={2} >
-                            <FormField colSpan="1" label="Country" editor={ <DropdownList value="France" size="medium"/> } />
-                            <FormField colSpan="1" label="City" editor={ <Textbox size="medium"/> } />
-                            <FormField colSpan="2" className="k-form-field-error" label="Address Line" error="Address Line is required" editor={ <Textbox size="medium"/> } />
-                        </Fieldset>
-                    </Form>
+            <span>vertical</span>
+            {Form.options.size.map((size) => (
+                <section>
+                    <FormNormal size={size}></FormNormal>
                 </section>
+            ))}
 
-                <section style={styles}>
-                    <div><strong>lg</strong></div>
-                    <br />
-                    <Form size="large"
-                        formButtons={
-                            <>
-                                <Button className="k-form-submit" themeColor="primary" size="large">Submit</Button>
-                                <Button className="k-form-clear" size="large">Clear</Button>
-                            </>
-                        }>
-                        <Fieldset legend="Shipping Address" layout="grid" cols={2} gapX={2} >
-                            <FormField colSpan="1" label="Country" editor={ <DropdownList value="France" size="large"/> } />
-                            <FormField colSpan="1" label="City" editor={ <Textbox size="large"/> } />
-                            <FormField colSpan="2" className="k-form-field-error" label="Address Line" error="Address Line is required" editor={ <Textbox size="large"/> } />
-                        </Fieldset>
-                    </Form>
+            <span>horizontal</span>
+            {Form.options.size.map((size) => (
+                <section>
+                    <FormHorizontal size={size}></FormHorizontal>
                 </section>
-            </div>
+            ))}
         </div>
     </>
 );

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

@@ -4,7 +4,7 @@ import { Textbox } from '../../textbox';
 import { DateTimePicker } from '../../datetimepicker';
 import { NumericTextbox } from '../../numerictextbox';
 import { DropdownList } from '../../dropdownlist';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 
 
 const styles = `
@@ -46,7 +46,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div" layout="grid" cols={4} gapX={2}>
+                            <FormNormal formButtons={null} tag="div" layout="grid" cols={4} gapX={2}>
                                 <FormField
                                     colSpan="full"
                                     className="k-form-field-error"
@@ -84,7 +84,7 @@ export default () =>(
                                     label="Parent"
                                     editor={ <DropdownList placeholder="-None-"/> }
                                 />
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>

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

@@ -5,7 +5,7 @@ import { Textbox } from '../../textbox';
 import { DatePicker } from '../../datepicker';
 import { NumericTextbox } from '../../numerictextbox';
 import { Checkbox } from '../../checkbox';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 
 
 const styles = `
@@ -50,7 +50,7 @@ export default () =>(
                             </ul>
                         </div>
                         <div className="k-tabstrip-content k-active">
-                            <Form tag="div">
+                            <FormNormal formButtons={null} tag="div">
                                 <FormField
                                     label="Notes"
                                     optional
@@ -76,7 +76,7 @@ export default () =>(
                                         </>
                                     }
                                 />
-                            </Form>
+                            </FormNormal>
                         </div>
                     </div>
                 </WindowNormal>

package/src/grid/tests/grid-angular.tsx

@@ -4,7 +4,7 @@ import { Checkbox } from '../../checkbox';
 import { Icon } from '../../icon';
 import { Pager } from '../../pager';
 import { Popup } from '../../popup';
-import { Skeleton } from '../../skeleton';
+import { SkeletonNormal } from '../../skeleton';
 
 
 export default () =>(
@@ -71,7 +71,7 @@ export default () =>(
                                             </tr>
                                             <tr className="k-table-row k-table-alt-row k-alt">
                                                 <td className="k-table-td">4</td>
-                                                <td className="k-table-td"><Skeleton animation={false}/></td>
+                                                <td className="k-table-td"><SkeletonNormal animation={false}/></td>
                                             </tr>
                                         </tbody>
                                     </table>

package/src/grid/tests/grid-column-resizing-actions.tsx

@@ -6,7 +6,7 @@ import { Toolbar } from '../../toolbar';
 import { Popup } from '../../popup';
 import { WindowNormal } from '../../window';
 import { Button } from '../../button';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 import { Checkbox } from '../../checkbox';
 import { Textbox } from '../../textbox';
 
@@ -226,7 +226,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Form>
+                    <FormNormal formButtons={null}>
                         <FormField
                             label="Value in px"
                             editor={ <Textbox value="412" /> }
@@ -241,7 +241,7 @@ export default () =>(
                             }
                         >
                         </FormField>
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
         </div>

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

@@ -5,7 +5,7 @@ import { Textbox } from '../../textbox';
 import { Button } from '../../button';
 import { DropdownList } from '../../dropdownlist';
 import { DatePicker } from '../../datepicker';
-import { Form, FormField } from '../../form';
+import { FormNormal, FormField } from '../../form';
 
 
 const styles = `
@@ -30,7 +30,7 @@ export default () =>(
                         <Button icon="cancel">Cancel</Button>
                     </>
                 }>
-                    <Form tag="div">
+                    <FormNormal formButtons={null} tag="div">
                         <FormField className="k-form-field-error" label="Text data field label" error="Error" editor={ <Textbox value="Invalid" invalid showClearButton /> } />
                         <FormField label="Date data field label" editor={ <DatePicker placeholder="dd/MM/yyyy" /> } />
                         <FormField label="Numeric data field label" editor={ <NumericTextbox placeholder="##,###" /> } />
@@ -41,7 +41,7 @@ export default () =>(
                             </>
                         } />
                         <FormField label="Boolean data field label" editor={ <DropdownList value="True" /> } />
-                    </Form>
+                    </FormNormal>
                 </WindowNormal>
             </section>
 

package/src/grid/tests/grid-rtl-angular.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '../../icon';
 import { Pager } from '../../pager';
-import { Skeleton } from '../../skeleton';
+import { SkeletonNormal } from '../../skeleton';
 
 
 export default () =>(
@@ -67,11 +67,11 @@ export default () =>(
                                             </tr>
                                             <tr className="k-table-row k-table-alt-row k-alt">
                                                 <td className="k-table-td">4</td>
-                                                <td className="k-table-td"><Skeleton animation={false} /></td>
+                                                <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                             </tr>
                                             <tr className="k-table-row">
                                                 <td className="k-table-td">5</td>
-                                                <td className="k-table-td"><Skeleton animation={false} /></td>
+                                                <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                             </tr>
                                         </tbody>
                                     </table>

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

@@ -1,6 +1,6 @@
 import { Icon } from '../../icon';
 import { Pager } from '../../pager';
-import { Skeleton } from '../../skeleton';
+import { SkeletonNormal } from '../../skeleton';
 
 
 export default () =>(
@@ -60,11 +60,11 @@ export default () =>(
                                 </tr>
                                 <tr className="k-table-row k-table-alt-row k-alt">
                                     <td className="k-table-td">4</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                                 <tr className="k-table-row">
                                     <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                             </tbody>
                         </table>

package/src/grid/tests/grid-selection-aggregates.tsx

@@ -1,5 +1,5 @@
 import { Pager } from '../../pager';
-import { Skeleton } from '../../skeleton';
+import { SkeletonNormal } from '../../skeleton';
 
 
 export default () =>(
@@ -60,11 +60,11 @@ export default () =>(
                                 </tr>
                                 <tr className="k-table-row k-table-alt-row k-alt">
                                     <td className="k-table-td k-selected">4</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                                 <tr className="k-table-row">
                                     <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                             </tbody>
                         </table>
@@ -149,11 +149,11 @@ export default () =>(
                                 </tr>
                                 <tr className="k-table-row k-table-alt-row k-alt">
                                     <td className="k-table-td k-selected">4</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                                 <tr className="k-table-row">
                                     <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                             </tbody>
                         </table>

package/src/grid/tests/grid-size-sm-comp-sm.tsx

@@ -5,7 +5,7 @@ import { DropdownList } from '../../dropdownlist';
 import { Icon } from '../../icon';
 import { NumericTextbox } from '../../numerictextbox';
 import { Pager } from '../../pager';
-import { Skeleton } from '../../skeleton';
+import { SkeletonNormal } from '../../skeleton';
 import { Textbox } from '../../textbox';
 import { Toolbar } from '../../toolbar';
 
@@ -79,11 +79,11 @@ export default () =>(
                                 </tr>
                                 <tr className="k-table-row k-table-alt-row k-alt">
                                     <td className="k-table-td">4</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                                 <tr className="k-table-row">
                                     <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                             </tbody>
                         </table>

package/src/grid/tests/grid-size-sm.tsx

@@ -5,7 +5,7 @@ import { DropdownList } from '../../dropdownlist';
 import { Icon } from '../../icon';
 import { NumericTextbox } from '../../numerictextbox';
 import { Pager } from '../../pager';
-import { Skeleton } from '../../skeleton';
+import { SkeletonNormal } from '../../skeleton';
 import { Textbox } from '../../textbox';
 import { Toolbar } from '../../toolbar';
 
@@ -79,11 +79,11 @@ export default () =>(
                                 </tr>
                                 <tr className="k-table-row k-table-alt-row k-alt">
                                     <td className="k-table-td">4</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                                 <tr className="k-table-row">
                                     <td className="k-table-td">5</td>
-                                    <td className="k-table-td"><Skeleton animation={false} /></td>
+                                    <td className="k-table-td"><SkeletonNormal animation={false} /></td>
                                 </tr>
                             </tbody>
                         </table>