Skip to content

Commit

Permalink
fix(html): render empty label only in horizontal form
Browse files Browse the repository at this point in the history
  • Loading branch information
@epetrow @Juveniel
epetrow authored and Juveniel committed May 12, 2023
1 parent d8139e5 commit efdb49b
Show file tree
Hide file tree
Showing 10 changed files with 33 additions and 20 deletions.
1 change: 0 additions & 1 deletion packages/html/src/editor/tests/editor-table-wizard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,6 @@ root.render(
<Form tag="div" layout="grid" cols={4} gapX={4}>
<FormField
className="k-col-span-full"
label=" "
editor={
<>
<Checkbox />
Expand Down
8 changes: 4 additions & 4 deletions packages/html/src/form/form-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const states = [

export type KendoFormFieldProps = {
label?: null | string;
orientation?: string;
optional?: boolean;
editor?: JSX.Element | string;
hint?: null | string;
Expand All @@ -27,6 +28,7 @@ export const FormField = (
) => {
const {
label,
orientation,
optional,
editor,
hint,
Expand All @@ -46,16 +48,14 @@ export const FormField = (
{label &&
<label className={classNames(
'k-label',
'k-form-label',
{
'k-label-empty': label === ' '
}
'k-form-label'
)}>
{label}
{optional && <span className="k-label-optional">(Optional)</span>}
{info && <span className="k-field-info">(field info)</span>}
</label>
}
{ orientation === 'horizontal' && !label && <span className="k-label k-form-label k-label-empty"></span> }
<div className="k-form-field-wrap">
{editor}
{hint && <div className="k-form-hint">{hint}</div>}
Expand Down
24 changes: 23 additions & 1 deletion packages/html/src/form/form.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { classNames, optionClassNames, Size } from '../utils';
import { Fieldset } from './fieldset';
import { FormField } from './form-field';

export const FORM_CLASSNAME = 'k-form';

Expand All @@ -22,6 +23,7 @@ export type KendoFormProps = KendoFormOptions & {
gapX?: number;
gapY?: number;
tag?: string;
children?: JSX.Element | JSX.Element[];
};

const defaultProps = {
Expand All @@ -44,12 +46,32 @@ export const Form = (
gapX,
gapY,
tag = defaultProps.tag,
children
} = props;

const ConditionalWrapper = ({ condition, wrapper, children }) => (condition ? wrapper(children) : children);

const Parent = ({ tag, className, children }) => ( tag === 'form' ? <form className={className}>{children}</form> : <div className={className}>{children}</div> );

const formChildren: JSX.Element | JSX.Element[] = [];

if (children) {
if ( Array.isArray(children) ) {
children.map( (child, index) => {
if ( child.type === FormField ) {
formChildren.push(
<FormField {...child.props} orientation={orientation} key={index} />
);
} else {
formChildren.push(child);
}
} );
} else {
children.type === FormField && formChildren.push( <FormField {...children.props} orientation={orientation} /> );
}

}

return (
<Parent tag={tag} className={classNames(
props.className,
Expand Down Expand Up @@ -79,7 +101,7 @@ export const Form = (
</Fieldset>
}
>
{props.children}
{formChildren}
</ConditionalWrapper>
{ formButtons &&
<div className="k-form-buttons">
Expand Down
3 changes: 0 additions & 3 deletions packages/html/src/form/tests/form-field-inputs-rtl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,6 @@ root.render(

<FormField
dir="rtl"
label=" "
editor={
<>
<Checkbox/>
Expand Down Expand Up @@ -334,7 +333,6 @@ root.render(

<FormField
dir="rtl"
label=" "
editor={
<FloatingLabel label="FloatingLabel" empty>
<Textbox />
Expand All @@ -345,7 +343,6 @@ root.render(

<FormField
dir="rtl"
label=" "
editor={
<FloatingLabel label="FloatingLabel (Focused)" empty focus>
<Textbox focus />
Expand Down
3 changes: 0 additions & 3 deletions packages/html/src/form/tests/form-field-inputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,6 @@ root.render(
</FormField>

<FormField
label=" "
editor={
<>
<Checkbox/>
Expand Down Expand Up @@ -310,7 +309,6 @@ root.render(
</FormField>

<FormField
label=" "
editor={
<FloatingLabel label="FloatingLabel" empty>
<Textbox />
Expand All @@ -320,7 +318,6 @@ root.render(
</FormField>

<FormField
label=" "
editor={
<FloatingLabel label="FloatingLabel (Focused)" empty focus>
<Textbox focus />
Expand Down
1 change: 0 additions & 1 deletion packages/html/src/form/tests/form-misc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ root.render(
/>

<FormField
label=" "
hint="Hint: hint message"
error="Error: error message"
editor={
Expand Down
2 changes: 1 addition & 1 deletion packages/html/src/grid/tests/grid-editing-popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ root.render(
<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="##,###" /> } />
<FormField label=" " editor={
<FormField editor={
<>
<Checkbox checked />
<label className="k-checkbox-label">Boolean data field label</label>
Expand Down
4 changes: 2 additions & 2 deletions packages/html/src/scheduler/tests/scheduler-edit-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,13 @@ root.render(
<FormField className="k-form-field-error" label="Title" error="Error" editor={ <Textbox invalid value="Invalid" /> }/>
<FormField label="Start" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
<FormField label="End" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
<FormField label=" " editor={
<FormField editor={
<>
<Checkbox />
<label className="k-checkbox-label">All Day Event</label>
</>
}/>
<FormField label=" " editor={
<FormField editor={
<>
<Checkbox />
<label className="k-checkbox-label">Specify Time Zone</label>
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/scheduler/tests/scheduler-editing-weekly.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ root.render(
<Form tag="div" className="k-scheduler-edit-form" orientation="vertical">
<FormField className="k-form-field-error" label="Title" error="Error" editor={ <Textbox invalid value="Invalid" /> }/>
<FormField label="Start" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
<FormField label=" " editor={
<FormField editor={
<>
<Checkbox checked />
<label className="k-checkbox-label">Specify Time Zone</label>
Expand All @@ -56,7 +56,7 @@ root.render(
<Combobox placeholder="Eastern European Summer Time (Sofia-Bulgaria)" />
} />
<FormField label="End" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
<FormField label=" " editor={
<FormField editor={
<>
<Checkbox checked />
<label className="k-checkbox-label">End in different Time Zone</label>
Expand All @@ -65,7 +65,7 @@ root.render(
<FormField label="End Time Zone" editor={
<Combobox placeholder="Select Time Zone, Country, City" />
} />
<FormField label=" " editor={
<FormField editor={
<>
<Checkbox />
<label className="k-checkbox-label">All Day Event</label>
Expand Down
1 change: 0 additions & 1 deletion packages/html/src/treelist/tests/treelist-editing-popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ root.render(
editor={ <NumericTextbox placeholder="##,###" /> }
/>
<FormField
label=" "
editor={
<>
<Checkbox checked />
Expand Down

0 comments on commit efdb49b

Please sign in to comment.