Skip to content

Commit

Permalink
feat(html): add forms helper
Browse files Browse the repository at this point in the history
  • Loading branch information
@epetrow @Juveniel
epetrow authored and Juveniel committed Apr 6, 2023
1 parent 1dbc28e commit 9af79bd
Show file tree
Hide file tree
Showing 41 changed files with 1,305 additions and 2,218 deletions.
123 changes: 51 additions & 72 deletions packages/html/src/editor/tests/editor-find-replace.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Textbox } from '../../textbox';
import { Editor, EditorContent, EditorToolbar } from '../../editor';
import { Window } from '../../window';
import { ButtonGroup } from '../../button-group';
import { Form, FormField } from '../../form';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand All @@ -23,6 +24,9 @@ const styles = `
.k-editor-content > .ProseMirror {
white-space: normal;
}
.k-form-horizontal .k-form-field:nth-child(3) .k-form-field-wrap {
max-width: initial;
}
`;

root.render(
Expand All @@ -47,43 +51,34 @@ root.render(
</ul>
</div>
<div className="k-tabstrip-content k-active">
<div className="k-form k-form-md k-form-horizontal">
<div className="k-form-field">
<div className="k-form-label">
<label>Find What:</label>
</div>
<div className="k-form-field-wrap">
<Textbox showClearButton={false} value="editor" />
</div>
</div>
<div className="k-form-field">
<div className="k-form-field-wrap">
<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>
<Form tag="div" orientation="horizontal">
<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>
</div>
} />
<div className="k-matches-container">
<Button themeColor="primary" fillMode="flat" icon="arrow-chevron-left">Prev</Button>
<span>1 of 3 matches</span>
<Button themeColor="primary" fillMode="flat" icon="arrow-chevron-right">Next</Button>
</div>
</div>
</Form>
</div>
</div>
</Window>
Expand All @@ -103,57 +98,41 @@ root.render(
</ul>
</div>
<div className="k-tabstrip-content k-active">
<div className="k-form k-form-md k-form-horizontal">
<div className="k-form-field">
<div className="k-form-label">
<label>Find What:</label>
</div>
<div className="k-form-field-wrap">
<Textbox showClearButton={false} value="editor" />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Replace With:</label>
</div>
<div className="k-form-field-wrap">
<Textbox showClearButton={false} value="grid" />
</div>
</div>
<div className="k-form-field">
<Form tag="div" orientation="horizontal">
<FormField label="Find What:" editor={ <Textbox showClearButton={false} value="editor" /> } />
<FormField label="Replace With:" editor={ <Textbox showClearButton={false} value="grid" /> } />
<FormField editor={
<ActionButtons alignment="end">
<Button>Replace</Button>
<Button>Replace All</Button>
</ActionButtons>
</div>
<div className="k-form-field">
<div className="k-form-field-wrap">
<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>
} />
<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>
</div>
} />
<div className="k-matches-container">
<Button themeColor="primary" fillMode="flat" icon="arrow-chevron-left">Prev</Button>
<span>1 of 3 matches</span>
<Button themeColor="primary" fillMode="flat" icon="arrow-chevron-right">Next</Button>
</div>
</div>
</Form>
</div>
</div>
</Window>
Expand Down
41 changes: 7 additions & 34 deletions packages/html/src/editor/tests/editor-image-editor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import ReactDOM from 'react-dom/client';
import { Textbox } from '../../textbox';
import { Window } from '../../window';
import { Form, FormField } from '../../form';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand All @@ -23,40 +24,12 @@ root.render(

<section>
<Window title="Insert Image" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
<div className="k-form k-form-md k-form-horizontal">
<div className="k-form-field">
<div className="k-form-label">
<label>Web address:</label>
</div>
<div className="k-form-field-wrap">
<Textbox showClearButton={false} />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Alternate text:</label>
</div>
<div className="k-form-field-wrap">
<Textbox showClearButton={false} />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Width:</label>
</div>
<div className="k-form-field-wrap">
<Textbox showClearButton={false} />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Height:</label>
</div>
<div className="k-form-field-wrap">
<Textbox showClearButton={false} />
</div>
</div>
</div>
<Form tag="div" orientation="horizontal">
<FormField label="Web address:" editor={ <Textbox showClearButton={false} /> } />
<FormField label="Alternate text:" editor={ <Textbox showClearButton={false} /> } />
<FormField label="Width:" editor={ <Textbox showClearButton={false} /> } />
<FormField label="Height:" editor={ <Textbox showClearButton={false} /> } />
</Form>
</Window>
</section>

Expand Down
70 changes: 20 additions & 50 deletions packages/html/src/editor/tests/editor-table-wizard-accessibility.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { DropdownList } from '../../dropdownlist';
import { NumericTextbox } from '../../numerictextbox';
import { Textarea } from '../../textarea';
import { Textbox } from '../../textbox';
import { Form, FormField } from '../../form';

const root = ReactDOM.createRoot(
document.getElementById('app') as HTMLElement
Expand Down Expand Up @@ -34,56 +35,25 @@ root.render(
</ul>
</div>
<div className="k-tabstrip-content k-active">
<div className="k-form k-form-md k-form-horizontal">
<div className="k-form-field">
<div className="k-form-label">
<label>Header Rows</label>
</div>
<div className="k-form-field-wrap">
<NumericTextbox />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Header Cols</label>
</div>
<div className="k-form-field-wrap">
<NumericTextbox />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Caption</label>
</div>
<div className="k-form-field-wrap">
<Textbox />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Alignment</label>
</div>
<div className="k-form-field-wrap">
<DropdownList className="k-align" showValue={false} value="Remove align" valueIconName="align-remove" style={{ width: "min-content" }} />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Summary</label>
</div>
<div className="k-form-field-wrap">
<Textarea className="k-editor-accessibility-summary" placeholder="Summary attribute is not HTML5 compatible." />
</div>
</div>
<div className="k-form-field">
<div className="k-form-label">
<label>Associate headers</label>
</div>
<div className="k-form-field-wrap">
<DropdownList value="None" />
</div>
</div>
</div>
<Form tag="div" orientation="horizontal">
<FormField label="Header Rows" editor={ <NumericTextbox /> } />
<FormField label="Header Cols" editor={ <NumericTextbox /> } />
<FormField label="Caption" editor={ <Textbox /> } />
<FormField label="Alignment" editor={
<DropdownList
className="k-align"
showValue={false}
value="Remove align"
valueIconName="align-remove"
style={{ width: "min-content" }} /> }
/>
<FormField label="Summary" editor={
<Textarea
className="k-editor-accessibility-summary"
placeholder="Summary attribute is not HTML5 compatible."/> }
/>
<FormField label="Associate headers" editor={ <DropdownList value="None" /> } />
</Form>
</div>
</div>
</Window>
Expand Down
28 changes: 28 additions & 0 deletions packages/html/src/form/fieldset.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { classNames } from '../utils';

export const FIELDSET_CLASSNAME = 'k-form-fieldset';

export type KendoFieldsetProps = {
legend?: null | string;
};

export const Fieldset = (
props: KendoFieldsetProps &
React.HTMLAttributes<HTMLFieldSetElement>
) => {
const {
legend,
} = props;

return (
<fieldset className={classNames(FIELDSET_CLASSNAME)}>
{ legend && <legend className="k-form-legend">{legend}</legend> }
{props.children}
</fieldset>
);
};

Fieldset.className = FIELDSET_CLASSNAME;

export default Fieldset;

Loading

0 comments on commit 9af79bd

Please sign in to comment.