Skip to content

Commit 4b88649

Browse files
jeffredoddjeffredodd
authored
feat: Refactor FormRadio Component (#405)
* Initial pass at radio refactor * Reorganizing unit tests * Updating with PR feedback * removing sinon and adding display names * Adding package-lock
1 parent e570e45 commit 4b88649

File tree

8 files changed

+568
-422
lines changed

8 files changed

+568
-422
lines changed

‎package-lock.json‎

Lines changed: 28 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@
4545
"dependencies": {
4646
"classnames": "^2.2.6",
4747
"focus-trap-react": "^6.0.0",
48-
"prop-types": "^15.7.1"
48+
"prop-types": "^15.7.1",
49+
"shortid": "^2.2.14"
4950
},
5051
"devDependencies": {
5152
"@babel/cli": "^7.1.5",

‎src/Forms/Forms.Component.js‎

Lines changed: 99 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import path from 'path';
22
import React from 'react';
33
import { Description, DocsText, DocsTile, Header, Import, Properties, Separator } from '../_playground';
4-
import { FormFieldset, FormInput, FormItem, FormLabel, FormLegend, FormMessage, FormRadio, FormSelect, FormSet, FormTextarea } from '../';
4+
import { FormFieldset, FormInput, FormItem, FormLabel, FormLegend, FormMessage, FormRadioGroup, FormRadioItem, FormSelect, FormSet, FormTextarea } from '../';
55

66
export const FormsComponent = () => {
77
const inputsCode = `<FormSet>
@@ -168,37 +168,63 @@ export const FormsComponent = () => {
168168

169169
const inputsRadioCode = `<FormFieldset>
170170
<FormLegend>Radio buttons</FormLegend>
171-
<FormRadio
172-
inputs={[
173-
{ id: 'radio-1', name: 'radio-1', value: 'radio-1', label: 'Option 1' },
174-
{ id: 'radio-2', name: 'radio-2', value: 'radio-2', label: 'Option 2' },
175-
{ id: 'radio-3', name: 'radio-3', value: 'radio-3', label: 'Option 3' }
176-
]}
177-
defaultChecked='radio-2' />
171+
<FormRadioGroup>
172+
<FormRadioItem
173+
id='radio-1'>
174+
Option 1
175+
</FormRadioItem>
176+
<FormRadioItem
177+
id='radio-2'>
178+
Option 2
179+
</FormRadioItem>
180+
<FormRadioItem
181+
checked
182+
id='radio-3'>
183+
Option 3
184+
</FormRadioItem>
185+
</FormRadioGroup>
178186
</FormFieldset>
179187
180188
<FormFieldset>
181189
<FormLegend>Radio buttons disabled</FormLegend>
182-
<FormRadio
183-
disabled
184-
inputs={[
185-
{ id: 'radio-4', name: 'radio-4', value: 'radio-4', label: 'Option 1' },
186-
{ id: 'radio-5', name: 'radio-5', value: 'radio-5', label: 'Option 2' },
187-
{ id: 'radio-6', name: 'radio-6', value: 'radio-6', label: 'Option 3' }
188-
]}
189-
defaultChecked='radio-4' />
190+
<FormRadioGroup>
191+
<FormRadioItem
192+
checked
193+
disabled
194+
id='radio-4'>
195+
Option 1
196+
</FormRadioItem>
197+
<FormRadioItem
198+
disabled
199+
id='radio-5'>
200+
Option 2
201+
</FormRadioItem>
202+
<FormRadioItem
203+
disabled
204+
id='radio-6'>
205+
Option 3
206+
</FormRadioItem>
207+
</FormRadioGroup>
190208
</FormFieldset>
191209
192210
<FormFieldset>
193211
<FormLegend>Inline Radio buttons</FormLegend>
194-
<FormRadio
195-
isInline
196-
inputs={[
197-
{ id: 'radio-7', name: 'radio-7', value: 'radio-7', label: 'Option 1' },
198-
{ id: 'radio-8', name: 'radio-8', value: 'radio-8', label: 'Option 2' },
199-
{ id: 'radio-9', name: 'radio-9', value: 'radio-9', label: 'Option 3' }
200-
]}
201-
defaultChecked='radio-9' />
212+
<FormRadioGroup
213+
inline>
214+
<FormRadioItem
215+
id='radio-7'>
216+
Option 1
217+
</FormRadioItem>
218+
<FormRadioItem
219+
checked
220+
id='radio-8'>
221+
Option 2
222+
</FormRadioItem>
223+
<FormRadioItem
224+
id='radio-9'>
225+
Option 3
226+
</FormRadioItem>
227+
</FormRadioGroup>
202228
</FormFieldset>`;
203229

204230
const inputsCheckboxCode = `<FormFieldset>
@@ -482,37 +508,63 @@ Along with Invalid and Warning, error messages should be displayed below the fie
482508
<DocsTile>
483509
<FormFieldset>
484510
<FormLegend>Radio buttons</FormLegend>
485-
<FormRadio
486-
defaultChecked='radio-2'
487-
inputs={[
488-
{ id: 'radio-1', name: 'radio-1', value: 'radio-1', label: 'Option 1' },
489-
{ id: 'radio-2', name: 'radio-2', value: 'radio-2', label: 'Option 2' },
490-
{ id: 'radio-3', name: 'radio-3', value: 'radio-3', label: 'Option 3' }
491-
]} />
511+
<FormRadioGroup>
512+
<FormRadioItem
513+
id='radio-1'>
514+
Option 1
515+
</FormRadioItem>
516+
<FormRadioItem
517+
id='radio-2'>
518+
Option 2
519+
</FormRadioItem>
520+
<FormRadioItem
521+
defaultChecked
522+
id='radio-3'>
523+
Option 3
524+
</FormRadioItem>
525+
</FormRadioGroup>
492526
</FormFieldset>
493527

494528
<FormFieldset>
495529
<FormLegend>Radio buttons disabled</FormLegend>
496-
<FormRadio
497-
defaultChecked='radio-4'
498-
disabled
499-
inputs={[
500-
{ id: 'radio-4', name: 'radio-4', value: 'radio-4', label: 'Option 1' },
501-
{ id: 'radio-5', name: 'radio-5', value: 'radio-5', label: 'Option 2' },
502-
{ id: 'radio-6', name: 'radio-6', value: 'radio-6', label: 'Option 3' }
503-
]} />
530+
<FormRadioGroup>
531+
<FormRadioItem
532+
defaultChecked
533+
disabled
534+
id='radio-4'>
535+
Option 1
536+
</FormRadioItem>
537+
<FormRadioItem
538+
disabled
539+
id='radio-5'>
540+
Option 2
541+
</FormRadioItem>
542+
<FormRadioItem
543+
disabled
544+
id='radio-6'>
545+
Option 3
546+
</FormRadioItem>
547+
</FormRadioGroup>
504548
</FormFieldset>
505549

506550
<FormFieldset>
507551
<FormLegend>Inline Radio buttons</FormLegend>
508-
<FormRadio
509-
defaultChecked='radio-9'
510-
inputs={[
511-
{ id: 'radio-7', name: 'radio-7', value: 'radio-7', label: 'Option 1' },
512-
{ id: 'radio-8', name: 'radio-8', value: 'radio-8', label: 'Option 2' },
513-
{ id: 'radio-9', name: 'radio-9', value: 'radio-9', label: 'Option 3' }
514-
]}
515-
isInline />
552+
<FormRadioGroup
553+
inline>
554+
<FormRadioItem
555+
id='radio-7'>
556+
Option 1
557+
</FormRadioItem>
558+
<FormRadioItem
559+
defaultChecked
560+
id='radio-8'>
561+
Option 2
562+
</FormRadioItem>
563+
<FormRadioItem
564+
id='radio-9'>
565+
Option 3
566+
</FormRadioItem>
567+
</FormRadioGroup>
516568
</FormFieldset>
517569
</DocsTile>
518570
<DocsText>{inputsRadioCode}</DocsText>

0 commit comments

Comments
 (0)