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

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

@@ -4,7 +4,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';
@@ -59,16 +59,14 @@ export default () =>(
                     <FormField
                         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>
@@ -76,17 +74,14 @@ export default () =>(
                     <FormField
                         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>
@@ -211,17 +206,14 @@ export default () =>(
                     <FormField
                         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>
@@ -229,17 +221,14 @@ export default () =>(
                     <FormField
                         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>

package/src/radio/index.ts

@@ -1,4 +1,6 @@
 export * from './radio.spec';
+export * from "./radio-group.spec";
+export * from "./radio-item.spec";
 export * from "./templates/radio-normal";
 export * from "./templates/radio-label";
-export * from "./templates/radio-inside-label";
+export * from "./templates/radio-inside-label";

package/src/radio/radio-group.spec.tsx

@@ -0,0 +1,47 @@
+import { classNames } from '../misc';
+
+export const RADIOGROUP_CLASSNAME = `k-radio-list`;
+
+const states = [];
+
+const options = {};
+
+export type KendoRadioGroupProps = {
+    layout?: 'vertical' | 'horizontal';
+};
+
+const defaultProps = {
+    layout: 'vertical',
+};
+
+export const RadioGroup = (
+    props: KendoRadioGroupProps &
+        React.HTMLAttributes<HTMLUListElement>
+) => {
+    const {
+        layout = defaultProps.layout,
+        ...other
+    } = props;
+
+    return (
+        <ul
+            {...other}
+            className={classNames(
+                props.className,
+                RADIOGROUP_CLASSNAME,
+                {
+                    [`k-list-${layout}`]: layout,
+                },
+            )}
+        >
+            {props.children}
+        </ul>
+    );
+};
+
+RadioGroup.states = states;
+RadioGroup.options = options;
+RadioGroup.className = RADIOGROUP_CLASSNAME;
+RadioGroup.defaultProps = defaultProps;
+
+export default RadioGroup;

package/src/radio/radio-item.spec.tsx

@@ -0,0 +1,38 @@
+import { classNames } from '../misc';
+
+export const RADIOITEM_CLASSNAME = `k-radio-list-item`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export type KendoRadioItemState = { [K in (typeof states)[number]]?: boolean };
+
+export const RadioItem = (
+    props: KendoRadioItemState &
+     React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        ...other
+    } = props;
+    return (
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                RADIOITEM_CLASSNAME,
+            )}
+        >
+            {props.children}
+        </li>
+    );
+};
+
+RadioItem.states = states;
+RadioItem.options = options;
+RadioItem.className = RADIOITEM_CLASSNAME;
+RadioItem.defaultProps = defaultProps;
+
+export default RadioItem;

package/src/radio/radio.spec.tsx

@@ -31,7 +31,7 @@ const defaultProps = {
 };
 
 export const RadioButton = (
-    props: RadioButtonProps & RadioButtonState & React.HTMLAttributes<HTMLSpanElement>
+    props: RadioButtonProps & RadioButtonState & React.HTMLAttributes<HTMLInputElement>
 ) => {
     const {
         id,

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

@@ -0,0 +1,87 @@
+import { RadioGroup, RadioItem, RadioButtonLabel, RadioButtonInsideLabel, RadioButtonNormal } from '../../radio';
+
+const styles = `
+    #test-area {
+        grid-template-columns: repeat(3, 1fr);
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+            <span>Normal - vertical</span>
+            <span>With Label - vertical</span>
+            <span>Inside Label - vertical</span>
+            <RadioGroup>
+                <RadioItem>
+                    <RadioButtonNormal name="normal-vertical" />
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonNormal name="normal-vertical"/>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonNormal name="normal-vertical"/>
+                </RadioItem>
+            </RadioGroup>
+            <RadioGroup>
+                <RadioItem>
+                    <RadioButtonLabel id="rad-vertical-one" name="label-vertical">First</RadioButtonLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonLabel id="rad-vertical-two" name="label-vertical">Second</RadioButtonLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonLabel id="rad-vertical-thee" name="label-vertical">Third</RadioButtonLabel>
+                </RadioItem>
+            </RadioGroup>
+            <RadioGroup>
+                <RadioItem>
+                    <RadioButtonInsideLabel name="inside-label-vertical">First</RadioButtonInsideLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonInsideLabel name="inside-label-vertical">Second</RadioButtonInsideLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonInsideLabel name="inside-label-vertical">Third</RadioButtonInsideLabel>
+                </RadioItem>
+            </RadioGroup>
+            <span>Normal - horizontal</span>
+            <span>With Label - horizontal</span>
+            <span>Inside Label - horizontal</span>
+            <RadioGroup layout="horizontal">
+                <RadioItem>
+                    <RadioButtonNormal name="normal-horizontal" />
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonNormal name="normal-horizontal"/>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonNormal name="normal-horizontal"/>
+                </RadioItem>
+            </RadioGroup>
+            <RadioGroup layout="horizontal">
+                <RadioItem>
+                    <RadioButtonLabel id="rad-horizontal-one" name="label-horizontal">First</RadioButtonLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonLabel id="rad-horizontal-two" name="label-horizontal">Second</RadioButtonLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonLabel id="rad-horizontal-thee" name="label-horizontal">Third</RadioButtonLabel>
+                </RadioItem>
+            </RadioGroup>
+            <RadioGroup layout="horizontal">
+                <RadioItem>
+                    <RadioButtonInsideLabel name="inside-label-horizontal">First</RadioButtonInsideLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonInsideLabel name="inside-label-horizontal">Second</RadioButtonInsideLabel>
+                </RadioItem>
+                <RadioItem>
+                    <RadioButtonInsideLabel name="inside-label-horizontal">Third</RadioButtonInsideLabel>
+                </RadioItem>
+            </RadioGroup>
+        </div>
+    </>
+);

package/src/scheduler/tests/scheduler-edit-dialog.tsx

@@ -8,7 +8,7 @@ import { Combobox } from '../../combobox';
 import { MultiSelect } from '../../multiselect';
 import { Form, FormField } from '../../form';
 import { ButtonGroup } from '../../button-group';
-import { RadioButton } from '../../radio';
+import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
 import { NumericTextbox } from '../../numerictextbox';
 import { DatePicker } from '../../datepicker';
 
@@ -74,23 +74,20 @@ export default () =>(
                                 </div>
                                 <div className="k-scheduler-recurrence-end-rule-editor">
                                     <FormField label="End" editor={
-                                        <ul className="k-radio-list">
-                                            <li className="k-radio-list-item">
-                                                <RadioButton id="k-endrule-never" />
-                                                <label className="k-radio-label" htmlFor="k-endrule-never">Never</label>
-                                            </li>
-                                            <li className="k-radio-list-item">
-                                                <RadioButton id="k-endrule-count" />
-                                                <label className="k-radio-label" htmlFor="k-endrule-count">After</label>
+                                        <RadioGroup>
+                                            <RadioItem>
+                                                <RadioButtonLabel id="k-endrule-never">Never</RadioButtonLabel>
+                                            </RadioItem>
+                                            <RadioItem>
+                                                <RadioButtonLabel id="k-endrule-count" >After</RadioButtonLabel>
                                                 <NumericTextbox className="k-recur-count" />
                                                 <span>occurrence(s)</span>
-                                            </li>
-                                            <li className="k-radio-list-item">
-                                                <RadioButton id="k-endrule-until" />
-                                                <label className="k-radio-label" htmlFor="k-endrule-until">On</label>
+                                            </RadioItem>
+                                            <RadioItem>
+                                                <RadioButtonLabel id="k-endrule-until" >On</RadioButtonLabel>
                                                 <DatePicker className="k-recur-until" disabled />
-                                            </li>
-                                        </ul>
+                                            </RadioItem>
+                                        </RadioGroup>
                                     } />
                                 </div>
                             </div>

package/src/scheduler/tests/scheduler-editing-weekly.tsx

@@ -9,7 +9,7 @@ import { MultiSelect } from '../../multiselect';
 import { Form, FormField } from '../../form';
 import { ButtonGroup } from '../../button-group';
 import { NumericTextbox } from '../../numerictextbox';
-import { RadioButton } from '../../radio';
+import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
 import { DatePicker } from '../../datepicker';
 
 const style = `
@@ -96,23 +96,20 @@ export default () =>(
                                     </div>
                                     <div className="k-scheduler-recurrence-end-rule-editor">
                                         <FormField label="End" editor={
-                                            <ul className="k-radio-list">
-                                                <li className="k-radio-list-item">
-                                                    <RadioButton id="k-endrule-never" />
-                                                    <label className="k-radio-label" htmlFor="k-endrule-never">Never</label>
-                                                </li>
-                                                <li className="k-radio-list-item">
-                                                    <RadioButton id="k-endrule-count" />
-                                                    <label className="k-radio-label" htmlFor="k-endrule-count">After</label>
+                                            <RadioGroup>
+                                                <RadioItem>
+                                                    <RadioButtonLabel id="k-endrule-never">Never</RadioButtonLabel>
+                                                </RadioItem>
+                                                <RadioItem>
+                                                    <RadioButtonLabel id="k-endrule-count" >After</RadioButtonLabel>
                                                     <NumericTextbox className="k-recur-count" />
                                                     <span>occurrence(s)</span>
-                                                </li>
-                                                <li className="k-radio-list-item">
-                                                    <RadioButton id="k-endrule-until" />
-                                                    <label className="k-radio-label" htmlFor="k-endrule-until">On</label>
+                                                </RadioItem>
+                                                <RadioItem>
+                                                    <RadioButtonLabel id="k-endrule-until" >On</RadioButtonLabel>
                                                     <DatePicker className="k-recur-until" disabled />
-                                                </li>
-                                            </ul>
+                                                </RadioItem>
+                                            </RadioGroup>
                                         } />
                                     </div>
                                 </div>

package/src/spreadsheet/tests/spreadsheet-data-validation.tsx

@@ -1,7 +1,7 @@
 import { Window } from '../../window';
 import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
-import { RadioButton } from '../../radio';
+import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
 import { Form, FormField } from '../../form';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
@@ -57,17 +57,14 @@ export default () => (
                     <FormField
                         label="On invalid data:"
                         editor={
-                            <ul className="k-radio-list k-list-horizontal">
-                                <li className="k-radio-list-item">
-                                    <RadioButton checked />
-                                    <label className="k-radio-label">Reject input</label>
-                                </li>
-
-                                <li className="k-radio-list-item">
-                                    <RadioButton />
-                                    <label className="k-radio-label">Show warning</label>
-                                </li>
-                            </ul>
+                            <RadioGroup layout="horizontal">
+                                <RadioItem>
+                                    <RadioButtonLabel checked>Reject input</RadioButtonLabel>
+                                </RadioItem>
+                                <RadioItem>
+                                    <RadioButtonLabel>Show warning</RadioButtonLabel>
+                                </RadioItem>
+                            </RadioGroup>
                         }
                     >
                     </FormField>

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

@@ -2,7 +2,7 @@ import { Window } from '../../window';
 import { Textarea } from '../../textarea';
 import { Button } from '../../button';
 import { Form, FormField } from '../../form';
-import { RadioButton } from '../../radio';
+import { RadioButtonLabel, RadioGroup, RadioItem } from '../../radio';
 import { Textbox } from '../../textbox';
 import { DropdownList } from '../../dropdownlist';
 import { Upload } from '../../upload';
@@ -100,24 +100,20 @@ export default () =>(
                     <Form>
                         <FormField
                             editor={
-                                <ul className="k-radio-list">
-                                    <li className="k-radio-list-item">
-                                        <RadioButton checked />
-                                        <label className="k-radio-label">Merge all</label>
-                                    </li>
-                                    <li className="k-radio-list-item">
-                                        <RadioButton />
-                                        <label className="k-radio-label">Merge horizontally</label>
-                                    </li>
-                                    <li className="k-radio-list-item">
-                                        <RadioButton />
-                                        <label className="k-radio-label">Merge vertically</label>
-                                    </li>
-                                    <li className="k-radio-list-item">
-                                        <RadioButton />
-                                        <label className="k-radio-label">Unmerge</label>
-                                    </li>
-                                </ul>
+                                <RadioGroup>
+                                    <RadioItem>
+                                        <RadioButtonLabel checked>Merge all</RadioButtonLabel>
+                                    </RadioItem>
+                                    <RadioItem>
+                                        <RadioButtonLabel>Merge horizontally</RadioButtonLabel>
+                                    </RadioItem>
+                                    <RadioItem>
+                                        <RadioButtonLabel>Merge vertically</RadioButtonLabel>
+                                    </RadioItem>
+                                    <RadioItem>
+                                        <RadioButtonLabel>Unmerge</RadioButtonLabel>
+                                    </RadioItem>
+                                </RadioGroup>
                             }
                         >
                         </FormField>

package/dist/types/checkbox/templates/checkbox-label.d.ts

@@ -1 +0,0 @@
-export declare const CheckboxLabel: ({ children, id, ...other }: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +0,0 @@
-import Checkbox from "../checkbox.spec";
-
-export const CheckboxLabel = ({ children, id, ...other }: any) => (
-    <>
-        <Checkbox {...other} />
-        <label className={"k-checkbox-label"} htmlFor={id}>{children}</label>
-    </>
-);