Skip to content

Commit 4441aaf

Browse files
adamkudrnaadamkudrna
committed
Create FormLayout component and make form fields ready for it (#44)
1 parent e092552 commit 4441aaf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+995
-25
lines changed

‎src/demo/pages/DemoContainer.jsx‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
CTAStart,
2222
CheckboxField,
2323
ForgotPassword,
24+
FormLayout,
2425
LayoutCenter,
2526
List,
2627
ListItem,
@@ -344,6 +345,371 @@ class DemoContainer extends React.Component {
344345
</CTA>
345346
)}
346347
/>
348+
<h3 id="layout-components-form-layout" className="typography-size-4 mb-6">Form Layout</h3>
349+
<p>
350+
Vertical Form Layout works similar to List except that List Items are not needed.
351+
Vertical form field layout is forced.
352+
</p>
353+
<Documentation
354+
name="Vertical Form Layout"
355+
component={(
356+
<FormLayout>
357+
<>
358+
<TextField
359+
id="formLayoutVerticalFirstName"
360+
changeHandler={logger}
361+
label="First Name"
362+
/>
363+
<TextField
364+
id="formLayoutVerticalLastName"
365+
changeHandler={logger}
366+
label="Last Name"
367+
/>
368+
</>
369+
<TextField
370+
id="formLayoutVerticalEmail"
371+
changeHandler={logger}
372+
label="Email address"
373+
type="email"
374+
helperText="Optional"
375+
/>
376+
<>
377+
<TextField
378+
id="formLayoutVerticalAddress1"
379+
changeHandler={logger}
380+
label="Address"
381+
placeholder="Address line 1"
382+
/>
383+
<TextField
384+
id="formLayoutVerticalAddress2"
385+
changeHandler={logger}
386+
isLabelVisible={false}
387+
label="Address 2"
388+
placeholder="Address line 2"
389+
/>
390+
<TextField
391+
id="formLayoutVerticalZip"
392+
changeHandler={logger}
393+
helperText="ZIP should be 5 to 6 digits long code."
394+
label="ZIP"
395+
inputSize={6}
396+
validationState="invalid"
397+
/>
398+
<TextField
399+
id="formLayoutVerticalCountry"
400+
changeHandler={logger}
401+
label="Country"
402+
/>
403+
<CheckboxField
404+
id="formLayoutVerticalDelivery"
405+
changeHandler={logger}
406+
label="This is my delivery address"
407+
/>
408+
</>
409+
<SelectField
410+
id="formLayoutVerticalFruit"
411+
changeHandler={logger}
412+
label="Your favourite fruit"
413+
options={this.exampleOptions}
414+
/>
415+
<TextArea
416+
id="formLayoutVerticalMessage"
417+
changeHandler={logger}
418+
fullWidth
419+
label="Message"
420+
rows={3}
421+
/>
422+
<Toggle
423+
id="formLayoutVerticalNewsletter"
424+
changeHandler={logger}
425+
checked
426+
description="Only once per week!"
427+
label="Receive weekly newsletter"
428+
required
429+
/>
430+
<Radio
431+
id="formLayoutVerticalFruit2"
432+
changeHandler={logger}
433+
label="And fruit again!"
434+
options={this.exampleOptions}
435+
value="apples"
436+
/>
437+
</FormLayout>
438+
)}
439+
/>
440+
<p>
441+
Horizontal Form Layout is designed for horizontal form fields.
442+
It is applied starting from <code>md</code> viewport size onwards.
443+
Horizontal form field layout is forced.
444+
</p>
445+
<Documentation
446+
name="Horizontal Form Layout"
447+
component={(
448+
<FormLayout fieldLayout="horizontal">
449+
<>
450+
<TextField
451+
id="formLayoutHorizontalFirstName"
452+
changeHandler={logger}
453+
label="First Name"
454+
/>
455+
<TextField
456+
id="formLayoutHorizontalLastName"
457+
changeHandler={logger}
458+
label="Last Name"
459+
/>
460+
</>
461+
<TextField
462+
id="formLayoutHorizontalEmail"
463+
changeHandler={logger}
464+
label="Email address"
465+
type="email"
466+
helperText="Optional"
467+
/>
468+
<>
469+
<TextField
470+
id="formLayoutHorizontalAddress1"
471+
changeHandler={logger}
472+
label="Address"
473+
placeholder="Address line 1"
474+
/>
475+
<TextField
476+
id="formLayoutHorizontalAddress2"
477+
changeHandler={logger}
478+
isLabelVisible={false}
479+
label="Address 2"
480+
placeholder="Address line 2"
481+
/>
482+
<TextField
483+
id="formLayoutHorizontalZip"
484+
changeHandler={logger}
485+
helperText="ZIP should be 5 to 6 digits long code."
486+
label="ZIP"
487+
inputSize={6}
488+
validationState="invalid"
489+
/>
490+
<TextField
491+
id="formLayoutHorizontalCountry"
492+
changeHandler={logger}
493+
label="Country"
494+
/>
495+
<CheckboxField
496+
id="formLayoutHorizontalDelivery"
497+
changeHandler={logger}
498+
label="This is my delivery address"
499+
/>
500+
</>
501+
<SelectField
502+
id="formLayoutHorizontalFruit"
503+
changeHandler={logger}
504+
label="Your favourite fruit"
505+
options={this.exampleOptions}
506+
/>
507+
<TextArea
508+
id="formLayoutHorizontalMessage"
509+
changeHandler={logger}
510+
fullWidth
511+
label="Message"
512+
rows={3}
513+
/>
514+
<Toggle
515+
id="formLayoutHorizontalNewsletter"
516+
changeHandler={logger}
517+
checked
518+
label="Receive weekly newsletter"
519+
required
520+
description="Only once per week!"
521+
/>
522+
<Radio
523+
id="formLayoutHorizontalFruit2"
524+
changeHandler={logger}
525+
label="And fruit again!"
526+
options={this.exampleOptions}
527+
value="apples"
528+
/>
529+
</FormLayout>
530+
)}
531+
/>
532+
<Documentation
533+
name="Horizontal Form Layout with Custom Label Width"
534+
component={(
535+
<FormLayout
536+
fieldLayout="horizontal"
537+
labelWidth="15em"
538+
>
539+
<>
540+
<TextField
541+
id="formLayoutHorizontalCustomFirstName"
542+
changeHandler={logger}
543+
label="First Name"
544+
/>
545+
<TextField
546+
id="formLayoutHorizontalCustomLastName"
547+
changeHandler={logger}
548+
label="Last Name"
549+
/>
550+
</>
551+
<TextField
552+
id="formLayoutHorizontalCustomEmail"
553+
changeHandler={logger}
554+
label="Email address"
555+
type="email"
556+
helperText="Optional"
557+
/>
558+
<>
559+
<TextField
560+
id="formLayoutHorizontalCustomAddress1"
561+
changeHandler={logger}
562+
label="Address"
563+
placeholder="Address line 1"
564+
/>
565+
<TextField
566+
id="formLayoutHorizontalCustomAddress2"
567+
changeHandler={logger}
568+
isLabelVisible={false}
569+
label="Address 2"
570+
placeholder="Address line 2"
571+
/>
572+
<TextField
573+
id="formLayoutHorizontalCustomZip"
574+
changeHandler={logger}
575+
helperText="ZIP should be 5 to 6 digits long code."
576+
label="ZIP"
577+
inputSize={6}
578+
validationState="invalid"
579+
/>
580+
<TextField
581+
id="formLayoutHorizontalCustomCountry"
582+
changeHandler={logger}
583+
label="Country"
584+
/>
585+
<CheckboxField
586+
id="formLayoutHorizontalCustomDelivery"
587+
changeHandler={logger}
588+
label="This is my delivery address"
589+
/>
590+
</>
591+
<SelectField
592+
id="formLayoutHorizontalCustomFruit"
593+
changeHandler={logger}
594+
label="Your favourite fruit"
595+
options={this.exampleOptions}
596+
/>
597+
<TextArea
598+
id="formLayoutHorizontalCustomMessage"
599+
changeHandler={logger}
600+
fullWidth
601+
label="Message"
602+
rows={3}
603+
/>
604+
<Toggle
605+
id="formLayoutHorizontalCustomNewsletter"
606+
changeHandler={logger}
607+
checked
608+
label="Receive weekly newsletter"
609+
required
610+
description="Only once per week!"
611+
/>
612+
<Radio
613+
id="formLayoutHorizontalCustomFruit2"
614+
changeHandler={logger}
615+
label="And fruit again!"
616+
options={this.exampleOptions}
617+
value="apples"
618+
/>
619+
</FormLayout>
620+
)}
621+
/>
622+
<Documentation
623+
name="Horizontal Form Layout with Auto-Width Labels (Firefox only, custom fallback)"
624+
component={(
625+
<FormLayout
626+
fieldLayout="horizontal"
627+
labelWidth="auto"
628+
labelAutoWidthFallback="12em"
629+
>
630+
<>
631+
<TextField
632+
id="formLayoutHorizontalAutoFirstName"
633+
changeHandler={logger}
634+
label="First Name"
635+
/>
636+
<TextField
637+
id="formLayoutHorizontalAutoLastName"
638+
changeHandler={logger}
639+
label="Last Name"
640+
/>
641+
</>
642+
<TextField
643+
id="formLayoutHorizontalAutoEmail"
644+
changeHandler={logger}
645+
label="Email address"
646+
type="email"
647+
helperText="Optional"
648+
/>
649+
<>
650+
<TextField
651+
id="formLayoutHorizontalAutoAddress1"
652+
changeHandler={logger}
653+
label="Address"
654+
placeholder="Address line 1"
655+
/>
656+
<TextField
657+
id="formLayoutHorizontalAutoAddress2"
658+
changeHandler={logger}
659+
isLabelVisible={false}
660+
label="Address 2"
661+
placeholder="Address line 2"
662+
/>
663+
<TextField
664+
id="formLayoutHorizontalAutoZip"
665+
changeHandler={logger}
666+
helperText="ZIP should be 5 to 6 digits long code."
667+
label="ZIP"
668+
inputSize={6}
669+
validationState="invalid"
670+
/>
671+
<TextField
672+
id="formLayoutHorizontalAutoCountry"
673+
changeHandler={logger}
674+
label="Country"
675+
/>
676+
<CheckboxField
677+
id="formLayoutHorizontalAutoDelivery"
678+
changeHandler={logger}
679+
label="This is my delivery address"
680+
/>
681+
</>
682+
<SelectField
683+
id="formLayoutHorizontalAutoFruit"
684+
changeHandler={logger}
685+
label="Your favourite fruit"
686+
options={this.exampleOptions}
687+
/>
688+
<TextArea
689+
id="formLayoutHorizontalAutoMessage"
690+
changeHandler={logger}
691+
fullWidth
692+
label="Message"
693+
rows={3}
694+
/>
695+
<Toggle
696+
id="formLayoutHorizontalAutoNewsletter"
697+
changeHandler={logger}
698+
checked
699+
label="Receive weekly newsletter"
700+
required
701+
description="Only once per week!"
702+
/>
703+
<Radio
704+
id="formLayoutHorizontalAutoFruit2"
705+
changeHandler={logger}
706+
label="And fruit again!"
707+
options={this.exampleOptions}
708+
value="apples"
709+
/>
710+
</FormLayout>
711+
)}
712+
/>
347713
<h3 id="layout-components-list" className="typography-size-4 mb-6">List</h3>
348714
<Documentation
349715
name="Default list"

‎src/demo/pages/navigation.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export default [
3535
link: '#layout-components-cta',
3636
title: 'CTA',
3737
},
38+
{
39+
link: '#layout-components-form-layout',
40+
title: 'Form Layout',
41+
},
3842
{
3943
link: '#layout-components-list',
4044
title: 'List',

0 commit comments

Comments
 (0)