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

package/src/checkbox/index.ts

@@ -1,3 +1,5 @@
 export * from "./checkbox.spec";
-export * from "./templates/checkbox-label";
+export * from "./checkbox-group.spec";
+export * from "./checkbox-item.spec";
+export * from "./templates/checkbox-with-label";
 export * from "./templates/checkbox-normal";

package/src/checkbox/templates/checkbox-with-label.tsx

@@ -0,0 +1,13 @@
+import Checkbox from "../checkbox.spec";
+
+export const CheckboxWithLabel = ({ children, id, ...other }: any) => (
+    <>
+        <Checkbox id={id} {...other} />
+        <label className={"k-checkbox-label"} htmlFor={id}>{children}</label>
+    </>
+);
+
+/**
+ * @deprecated This template has been renamed to CheckboxWithLabel. Please update your code accordingly.
+ */
+export const CheckboxLabel = CheckboxWithLabel;

package/src/checkbox/tests/checkbox-group.tsx

@@ -0,0 +1,63 @@
+import { CheckboxGroup, CheckboxItem, CheckboxWithLabel, CheckboxNormal } from '../../checkbox';
+
+const styles = `
+    #test-area {
+        grid-template-columns: repeat(2, 1fr);
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span>Normal - vertical</span>
+            <span>With Label - vertical</span>
+            <CheckboxGroup>
+                <CheckboxItem>
+                    <CheckboxNormal/>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxNormal/>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxNormal/>
+                </CheckboxItem>
+            </CheckboxGroup>
+            <CheckboxGroup>
+                <CheckboxItem>
+                    <CheckboxWithLabel id="ch1-vert">Option one</CheckboxWithLabel>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxWithLabel id="ch2-vert">Option two</CheckboxWithLabel>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxWithLabel id="ch3-vert">Option three</CheckboxWithLabel>
+                </CheckboxItem>
+            </CheckboxGroup>
+            <span>Normal - horizontal</span>
+            <span>With Label - horizontal</span>
+            <CheckboxGroup layout="horizontal">
+                <CheckboxItem>
+                    <CheckboxNormal/>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxNormal/>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxNormal/>
+                </CheckboxItem>
+            </CheckboxGroup>
+            <CheckboxGroup layout="horizontal">
+                <CheckboxItem>
+                    <CheckboxWithLabel id="ch1-hor">Option one</CheckboxWithLabel>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxWithLabel id="ch2-hor">Option two</CheckboxWithLabel>
+                </CheckboxItem>
+                <CheckboxItem>
+                    <CheckboxWithLabel id="ch3-hor">Option three</CheckboxWithLabel>
+                </CheckboxItem>
+            </CheckboxGroup>
+        </div>
+    </>
+);

package/src/checkbox/tests/checkbox-size.tsx

@@ -1,9 +1,8 @@
-import { Checkbox, CheckboxLabel } from '../../checkbox';
-
+import { Checkbox, CheckboxWithLabel } from '../../checkbox';
 
 const styles = `
     #test-area {
-        grid-template-columns: 120px repeat(3, 1fr);
+        grid-template-columns: repeat(3, 1fr);
     }
 `;
 
@@ -11,59 +10,18 @@ export default () =>(
     <>
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
-
-            <span></span>
             <span>Small</span>
             <span>Medium</span>
             <span>Large</span>
 
-            <span></span>
-            {Checkbox.options.size.map((size) => (
-                <div key={size}>
-                    <CheckboxLabel size={size} id="ch1" checked >Checked</CheckboxLabel>
-                </div>
-            ))}
-
-            <span></span>
-            {Checkbox.options.size.map((size) => (
-                <div key={size}>
-                    <CheckboxLabel size={size} id="ch1" disabled checked >Checked</CheckboxLabel>
-                </div>
-            ))}
-
-            <span></span>
-            {Checkbox.options.size.map((size) => (
-                <div key={size}>
-                    <CheckboxLabel size={size} id="ch3" >Unchecked</CheckboxLabel>
-                </div>
-            ))}
-
-            <span></span>
-            {Checkbox.options.size.map((size) => (
-                <div key={size}>
-                    <CheckboxLabel size={size} id="ch4" disabled >Unchecked</CheckboxLabel>
-                </div>
-            ))}
-
-            <span></span>
-            {Checkbox.options.size.map((size) => (
-                <div key={size}>
-                    <CheckboxLabel size={size} id="chInd" indeterminate >Indeterminate</CheckboxLabel>
-                </div>
-            ))}
-
-            <span></span>
-            {Checkbox.options.size.map((size) => (
-                <div key={size}>
-                    <CheckboxLabel size={size} id="chIndDis" indeterminate disabled >Indeterminate</CheckboxLabel>
-                </div>
-            ))}
-
-            <span></span>
-            {Checkbox.options.size.map((size) => (
-                <div key={size}>
-                    <CheckboxLabel size={size} id="chError" invalid required>Invalid</CheckboxLabel>
-                </div>
+            {[ 'unchecked', ...Checkbox.states ].map((state) => (
+                <>
+                    { Checkbox.options.size.map((size) => (
+                        <section>
+                            <CheckboxWithLabel id={'ch-' + [ state ] + '-' + [ size ]} { ...{ [state]: true }} size={size}>{state}</CheckboxWithLabel>
+                        </section>
+                    ))}
+                </>
             ))}
         </div>
     </>

package/src/checkbox/tests/checkbox.tsx

@@ -1,4 +1,4 @@
-import { CheckboxLabel } from '../templates/checkbox-label';
+import { CheckboxWithLabel } from '../templates/checkbox-with-label';
 import { CheckboxNormal } from '../templates/checkbox-normal';
 
 
@@ -20,7 +20,7 @@ export default () =>(
             <span dir="rtl">In label RTL</span>
 
             <div>
-                <CheckboxLabel id="ch1" checked >Checked</CheckboxLabel>
+                <CheckboxWithLabel id="ch1" checked >Checked</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -29,7 +29,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="ch1-rtl" checked >Checked</CheckboxLabel>
+                <CheckboxWithLabel id="ch1-rtl" checked >Checked</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -39,7 +39,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="ch2" disabled checked >Checked</CheckboxLabel>
+                <CheckboxWithLabel id="ch2" disabled checked >Checked</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -48,7 +48,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="ch2-rtl" disabled checked >Checked</CheckboxLabel>
+                <CheckboxWithLabel id="ch2-rtl" disabled checked >Checked</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -58,7 +58,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="ch3" >Unchecked</CheckboxLabel>
+                <CheckboxWithLabel id="ch3" >Unchecked</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -67,7 +67,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="ch3-rtl" >Unchecked</CheckboxLabel>
+                <CheckboxWithLabel id="ch3-rtl" >Unchecked</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -77,7 +77,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="ch4" disabled >Unchecked</CheckboxLabel>
+                <CheckboxWithLabel id="ch4" disabled >Unchecked</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -86,7 +86,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="ch4-rtl" disabled >Unchecked</CheckboxLabel>
+                <CheckboxWithLabel id="ch4-rtl" disabled >Unchecked</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -96,7 +96,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="chInd" indeterminate >Indeterminate</CheckboxLabel>
+                <CheckboxWithLabel id="chInd" indeterminate >Indeterminate</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -105,7 +105,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="chInd-rtl" indeterminate >Indeterminate</CheckboxLabel>
+                <CheckboxWithLabel id="chInd-rtl" indeterminate >Indeterminate</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -115,7 +115,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="chIndDis" indeterminate disabled >Indeterminate</CheckboxLabel>
+                <CheckboxWithLabel id="chIndDis" indeterminate disabled >Indeterminate</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -124,7 +124,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="chIndDis-rtl" indeterminate disabled >Indeterminate</CheckboxLabel>
+                <CheckboxWithLabel id="chIndDis-rtl" indeterminate disabled >Indeterminate</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -134,7 +134,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="chError" invalid required >Invalid</CheckboxLabel>
+                <CheckboxWithLabel id="chError" invalid required >Invalid</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -143,7 +143,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="chError-rtl" invalid required >Invalid</CheckboxLabel>
+                <CheckboxWithLabel id="chError-rtl" invalid required >Invalid</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -153,7 +153,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="chFocus" focus >Focus</CheckboxLabel>
+                <CheckboxWithLabel id="chFocus" focus >Focus</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -162,7 +162,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="chFocus-rtl" focus >Focus</CheckboxLabel>
+                <CheckboxWithLabel id="chFocus-rtl" focus >Focus</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">
@@ -172,7 +172,7 @@ export default () =>(
             </div>
 
             <div className="k-ripple-container">
-                <CheckboxLabel id="chRipple" focus >Ripple</CheckboxLabel>
+                <CheckboxWithLabel id="chRipple" focus >Ripple</CheckboxWithLabel>
             </div>
             <div className="k-ripple-container">
                 <label className="k-checkbox-label">
@@ -181,7 +181,7 @@ export default () =>(
                 </label>
             </div>
             <div className="k-ripple-container" dir="rtl">
-                <CheckboxLabel id="chRipple-rtl" focus >Ripple</CheckboxLabel>
+                <CheckboxWithLabel id="chRipple-rtl" focus >Ripple</CheckboxWithLabel>
             </div>
             <div className="k-ripple-container" dir="rtl">
                 <label className="k-checkbox-label">
@@ -191,7 +191,7 @@ export default () =>(
             </div>
 
             <div>
-                <CheckboxLabel id="chLong" checked >Long label Vivamus a arcu lacus. Integer augue leo.</CheckboxLabel>
+                <CheckboxWithLabel id="chLong" checked >Long label Vivamus a arcu lacus. Integer augue leo.</CheckboxWithLabel>
             </div>
             <div>
                 <label className="k-checkbox-label">
@@ -200,7 +200,7 @@ export default () =>(
                 </label>
             </div>
             <div dir="rtl">
-                <CheckboxLabel id="chLong-rtl" checked >Long label Vivamus a arcu lacus. Integer augue leo.</CheckboxLabel>
+                <CheckboxWithLabel id="chLong-rtl" checked >Long label Vivamus a arcu lacus. Integer augue leo.</CheckboxWithLabel>
             </div>
             <div dir="rtl">
                 <label className="k-checkbox-label">

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

@@ -1,6 +1,6 @@
 import { ActionButtons } from '../../action-buttons';
 import { Button } from '../../button';
-import { Checkbox } from '../../checkbox';
+import { CheckboxItem, CheckboxWithLabel, CheckboxGroup } from '../../checkbox';
 import { Textbox } from '../../textbox';
 import { Editor, EditorContent, EditorToolbar } from '../../editor';
 import { Window } from '../../window';
@@ -50,24 +50,20 @@ export default () =>(
                             <Form tag="div">
                                 <FormField label="Find What:" editor={<Textbox showClearButton={false} value="editor" />} />
                                 <FormField editor={
-                                    <div className="k-search-options k-checkbox-list">
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Match case</label>
-                                        </span>
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Match whole word only</label>
-                                        </span>
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Match cyclic (Wrap around)</label>
-                                        </span>
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Regular Expression</label>
-                                        </span>
-                                    </div>
+                                    <CheckboxGroup className="k-search-options">
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Match case</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Match whole word only</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Match cyclic (Wrap around)</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Regular Expression</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                    </CheckboxGroup>
                                 } />
                                 <div className="k-matches-container">
                                     <Button themeColor="primary" fillMode="flat" icon="chevron-left">Prev</Button>
@@ -104,24 +100,20 @@ export default () =>(
                                     </ActionButtons>
                                 } />
                                 <FormField editor={
-                                    <div className="k-search-options k-checkbox-list">
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Match case</label>
-                                        </span>
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Match whole word only</label>
-                                        </span>
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Match cyclic (Wrap around)</label>
-                                        </span>
-                                        <span className="k-checkbox-list-item">
-                                            <Checkbox />
-                                            <label className="k-checkbox-label">Regular Expression</label>
-                                        </span>
-                                    </div>
+                                    <CheckboxGroup className="k-search-options">
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Match case</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Match whole word only</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Match cyclic (Wrap around)</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                        <CheckboxItem>
+                                            <CheckboxWithLabel>Regular Expression</CheckboxWithLabel>
+                                        </CheckboxItem>
+                                    </CheckboxGroup>
                                 } />
                                 <div className="k-matches-container">
                                     <Button themeColor="primary" fillMode="flat" icon="chevron-left">Prev</Button>

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

@@ -3,7 +3,7 @@ import { ColorPicker } from '../../colorpicker';
 import { FloatingLabel } from '../../floating-label';
 import { MaskedTextbox } from '../../maskedtextbox';
 import { NumericTextbox } from '../../numerictextbox';
-import { RadioButton } from '../../radio';
+import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
 import { Switch } from '../../switch';
 import { Textbox } from '../../textbox';
 import { Upload, UploadFile } from '../../upload';
@@ -63,16 +63,14 @@ export default () =>(
                         dir="rtl"
                         label="Radio (Y):"
                         editor={
-                            <ul className="k-radio-list">
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Male</label>
-                                </li>
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Female</label>
-                                </li>
-                            </ul>
+                            <RadioGroup>
+                                <RadioItem>
+                                    <RadioButtonLabel>Male</RadioButtonLabel>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonLabel>Female</RadioButtonLabel>
+                                </RadioItem>
+                            </RadioGroup>
                         }
                     >
                     </FormField>
@@ -81,17 +79,14 @@ export default () =>(
                         dir="rtl"
                         label="Radio (X):"
                         editor={
-                            <ul className="k-radio-list k-list-horizontal">
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Male</label>
-                                </li>
-
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Female</label>
-                                </li>
-                            </ul>
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonLabel>Male</RadioButtonLabel>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonLabel>Female</RadioButtonLabel>
+                                </RadioItem>
+                            </RadioGroup>
                         }
                     >
                     </FormField>
@@ -212,17 +207,14 @@ export default () =>(
                         dir="rtl"
                         label="Radio (Y):"
                         editor={
-                            <ul className="k-radio-list">
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Male</label>
-                                </li>
-
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Female</label>
-                                </li>
-                            </ul>
+                            <RadioGroup>
+                                <RadioItem>
+                                    <RadioButtonLabel>Male</RadioButtonLabel>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonLabel>Female</RadioButtonLabel>
+                                </RadioItem>
+                            </RadioGroup>
                         }
                     >
                     </FormField>
@@ -231,17 +223,14 @@ export default () =>(
                         dir="rtl"
                         label="Radio (X):"
                         editor={
-                            <ul className="k-radio-list k-list-horizontal">
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Male</label>
-                                </li>
-
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Female</label>
-                                </li>
-                            </ul>
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonLabel>Male</RadioButtonLabel>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonLabel>Female</RadioButtonLabel>
+                                </RadioItem>
+                            </RadioGroup>
                         }
                     >
                     </FormField>