Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: HTML specs #4658

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 26 additions & 7 deletions packages/html/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/html/package.json
Original file line number Diff line number Diff line change
@@ -49,6 +49,7 @@
"react-dom": "^18.0.0"
},
"devDependencies": {
"@types/react": "^18.0.2"
"@types/react": "^18.2.19",
"@types/react-dom": "^18.2.7"
}
}
4 changes: 2 additions & 2 deletions packages/html/src/editor/tests/editor-find-replace.tsx
Original file line number Diff line number Diff line change
@@ -47,7 +47,7 @@ export default () =>(
</ul>
</div>
<div className="k-tabstrip-content k-active">
<Form tag="div">
<Form as="div">
<FormField label="Find What:" editor={<Textbox showClearButton={false} value="editor" />} />
<FormField editor={
<div className="k-search-options k-checkbox-list">
@@ -94,7 +94,7 @@ export default () =>(
</ul>
</div>
<div className="k-tabstrip-content k-active">
<Form tag="div">
<Form as="div">
<FormField label="Find What:" editor={ <Textbox showClearButton={false} value="editor" /> } />
<FormField label="Replace With:" editor={ <Textbox showClearButton={false} value="grid" /> } />
<FormField editor={
2 changes: 1 addition & 1 deletion packages/html/src/editor/tests/editor-image-editor.tsx
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ export default () =>(
<Button>Cancel</Button>
</>
}>
<Form tag="div">
<Form as="div">
<FormField label="Web address:" editor={ <Textbox showClearButton={false} /> } />
<FormField label="Alternate text:" editor={ <Textbox showClearButton={false} /> } />
<FormField label="Width:" editor={ <Textbox showClearButton={false} /> } />
6 changes: 3 additions & 3 deletions packages/html/src/editor/tests/editor-table-wizard.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ export default () =>(
</ul>
</div>
<div className="k-tabstrip-content k-active" >
<Form tag="div" layout="grid" cols={4} gapX={4}>
<Form as="div" className="k-d-grid k-grid-cols-4 k-gap-x-4">
<FormField
colSpan="2"
label="Rows"
@@ -136,7 +136,7 @@ export default () =>(
</ul>
</div>
<div className="k-tabstrip-content k-active">
<Form tag="div" layout="grid">
<Form as="div" className="k-d-grid">
<FormField label="ID" optional editor={ <Textbox /> } />
<FormField label="CSS class" optional editor={ <Textbox /> } />
<Fieldset legend="Accessibility" layout="grid" cols={4} gapX={4} >
@@ -186,7 +186,7 @@ export default () =>(
<Button>Cancel</Button>
</>
}>
<Form tag="div" layout="grid" cols={4} gapX={4}>
<Form as="div" className="k-d-grid k-grid-cols-4 k-gap-x-4">
<FormField
colSpan="full"
editor={
14 changes: 14 additions & 0 deletions packages/html/src/form/form-buttons.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { classNames } from "../misc";
import { KendoComponent } from "../misc/component-props";

export const FORM_BUTTONS_CLASSNAME = "k-form-buttons";

export type FormButtonsProps = object;

export const FormButtons: KendoComponent<"div", FormButtonsProps> = (props) => {
const { as: Component = "div", ...other } = props;

return <Component {...other} className={classNames(FORM_BUTTONS_CLASSNAME, props.className)} />;
};

FormButtons.className = FORM_BUTTONS_CLASSNAME;
113 changes: 28 additions & 85 deletions packages/html/src/form/form.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,107 +1,51 @@
import { classNames, optionClassNames, Size } from '../misc';
import { FormField } from './form-field';
import { Fieldset } from './fieldset';
import { classNames, ComponentSlot, componentSlot, optionClassNames, Size } from "../misc";
import { KendoComponent } from "../misc/component-props";
import { FormButtons, FormButtonsProps } from "./form-buttons.spec";

export const FORM_CLASSNAME = 'k-form';
export const FORM_CLASSNAME = "k-form";

const states = [];

const options = {
size: [ Size.small, Size.medium, Size.large ]
size: [ Size.small, Size.medium, Size.large ],
};

export type KendoFormOptions = {
size?: (typeof options.size)[number] | null;
size?: (typeof options.size)[number] | null;
};

export type KendoFormProps = KendoFormOptions & {
orientation?: string;
layout?: string;
formButtons?: JSX.Element | string;
cols?: number;
gapX?: number;
gapY?: number;
tag?: string;
children?: JSX.Element | JSX.Element[];
orientation?: string;
FormButtons?: ComponentSlot<FormButtonsProps>;
children?: JSX.Element | JSX.Element[];
};

const defaultProps = {
size: Size.medium,
layout: 'basic',
tag: 'form'
FormButtons: FormButtons,
};

export const Form = (
props: KendoFormProps &
React.HTMLAttributes<HTMLDivElement>
) => {
const {
size = defaultProps.size,
orientation,
layout = defaultProps.layout,
formButtons,
cols,
gapX,
gapY,
tag = defaultProps.tag,
children
} = props;
export const Form: KendoComponent<"form", KendoFormProps> = (props) => {
const { as: Component = "form", size = defaultProps.size, orientation } = props;

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 if ( children.type === FormField ) {
formChildren.push( <FormField {...children.props} orientation={orientation} key={`${new Date().getTime()}`} /> );
} else {
children.type === Fieldset && formChildren.push( <Fieldset {...children.props} key={`${new Date().getTime()}`} /> );
}

}
const [ FormButtons, FormButtonProps ] = componentSlot<FormButtonsProps>(props.FormButtons || defaultProps.FormButtons);

return (
<Parent tag={tag} className={classNames(
props.className,
FORM_CLASSNAME,
optionClassNames(FORM_CLASSNAME, {
size
}),
{
[`${FORM_CLASSNAME}-${orientation}`]: orientation
}
)}>
{ layout === 'grid' ?
<div className={classNames(
'k-form-layout',
'k-d-grid',
{
[`k-grid-cols-${cols}`]: cols,
[`k-gap-x-${gapX}`]: gapX,
[`k-gap-y-${gapY}`]: gapY
}
)}>
{formChildren}
</div>
:
<>{formChildren}</>
}
{ formButtons &&
<div className="k-form-buttons">
{formButtons}
</div>
}
</Parent>
<Component
className={classNames(
props.className,
FORM_CLASSNAME,
optionClassNames(FORM_CLASSNAME, {
size,
}),
{
[`${FORM_CLASSNAME}-${orientation}`]: orientation,
}
)}
>
{props.children}
<FormButtons {...FormButtonProps} />
</Component>
);
};

@@ -111,4 +55,3 @@ Form.className = FORM_CLASSNAME;
Form.defaultProps = defaultProps;

export default Form;

Loading