Skip to content

Commit ad3ad98

Browse files
Rachel RoppoloRachel Roppolo
Rachel Roppolo
authored and
Rachel Roppolo
committed
UIDS-87 Update RadioButton component to move label outside to leverage new styles
1 parent 99ca3c9 commit ad3ad98

File tree

9 files changed

+232
-234
lines changed

9 files changed

+232
-234
lines changed

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 140 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -284,38 +284,20 @@ exports[`Storyshots Design System/Form Default 1`] = `
284284
className="RadioButtonGroup"
285285
name="radio-buttons"
286286
>
287-
<label
288-
className="RadioButton"
289-
>
290-
<input
291-
className="RadioButton__input"
292-
disabled={false}
293-
id="first-radio"
294-
name="radio-buttons"
295-
type="radio"
296-
/>
297-
<span
298-
className="RadioButton__label"
299-
>
300-
first choice
301-
</span>
302-
</label>
303-
<label
304-
className="RadioButton"
305-
>
306-
<input
307-
className="RadioButton__input"
308-
disabled={false}
309-
id="second-radio"
310-
name="radio-buttons"
311-
type="radio"
312-
/>
313-
<span
314-
className="RadioButton__label"
315-
>
316-
second choice
317-
</span>
318-
</label>
287+
<input
288+
disabled={false}
289+
id="first-radio"
290+
label="first choice"
291+
name="radio-buttons"
292+
type="radio"
293+
/>
294+
<input
295+
disabled={false}
296+
id="second-radio"
297+
label="second choice"
298+
name="radio-buttons"
299+
type="radio"
300+
/>
319301
</div>
320302
<button
321303
className="btn btn-primary"
@@ -339,14 +321,93 @@ exports[`Storyshots Design System/Form Elements/Form Control Label Checkbox 1`]
339321
className="FormControlLabel"
340322
htmlFor="checkbox"
341323
>
342-
<input
343-
className="FormControlLabel__control"
344-
defaultValue="1"
345-
id="checkbox"
346-
name="checkbox"
347-
type="checkbox"
348-
/>
349-
Labeled checkbox
324+
<div
325+
className="FormControlLabel__label"
326+
>
327+
<input
328+
checked={false}
329+
className="FormControlLabel__control"
330+
id="checkbox"
331+
name="checkbox"
332+
onChange={[Function]}
333+
type="checkbox"
334+
value="1"
335+
/>
336+
Labeled checkbox
337+
</div>
338+
</label>
339+
</div>
340+
`;
341+
342+
exports[`Storyshots Design System/Form Elements/Form Control Label Radio 1`] = `
343+
<div
344+
style={
345+
Object {
346+
"padding": "1rem",
347+
}
348+
}
349+
>
350+
<label
351+
className="FormControlLabel"
352+
htmlFor="default"
353+
>
354+
<div
355+
className="FormControlLabel__label"
356+
>
357+
<input
358+
checked={false}
359+
className="FormControlLabel__control"
360+
disabled={false}
361+
id="default"
362+
name=""
363+
onChange={[Function]}
364+
type="radio"
365+
/>
366+
label
367+
</div>
368+
</label>
369+
</div>
370+
`;
371+
372+
exports[`Storyshots Design System/Form Elements/Form Control Label Radio Button With Children 1`] = `
373+
<div
374+
style={
375+
Object {
376+
"padding": "1rem",
377+
}
378+
}
379+
>
380+
<label
381+
className="FormControlLabel FormControlLabel--bordered"
382+
htmlFor="default"
383+
>
384+
<div
385+
className="FormControlLabel__label"
386+
>
387+
<input
388+
checked={false}
389+
className="FormControlLabel__control"
390+
disabled={false}
391+
id="default"
392+
name=""
393+
onChange={[Function]}
394+
type="radio"
395+
/>
396+
Option with child
397+
</div>
398+
<div
399+
className="FormControlLabel__children"
400+
>
401+
<span
402+
style={
403+
Object {
404+
"color": "#A1A1A1",
405+
}
406+
}
407+
>
408+
Some descriptive text for the option above
409+
</span>
410+
</div>
350411
</label>
351412
</div>
352413
`;
@@ -456,43 +517,55 @@ exports[`Storyshots Design System/Form Elements/Form Group With Checkbox Button
456517
className="FormControlLabel FormControlLabel--bordered"
457518
htmlFor="value-1"
458519
>
459-
<input
460-
checked={false}
461-
className="FormControlLabel__control"
462-
id="value-1"
463-
onChange={[Function]}
464-
type="checkbox"
465-
value="1"
466-
/>
467-
Value 1
520+
<div
521+
className="FormControlLabel__label"
522+
>
523+
<input
524+
checked={false}
525+
className="FormControlLabel__control"
526+
id="value-1"
527+
onChange={[Function]}
528+
type="checkbox"
529+
value="1"
530+
/>
531+
Value 1
532+
</div>
468533
</label>
469534
<label
470535
className="FormControlLabel FormControlLabel--bordered"
471536
htmlFor="value-2"
472537
>
473-
<input
474-
checked={false}
475-
className="FormControlLabel__control"
476-
id="value-2"
477-
onChange={[Function]}
478-
type="checkbox"
479-
value="2"
480-
/>
481-
Value 2
538+
<div
539+
className="FormControlLabel__label"
540+
>
541+
<input
542+
checked={false}
543+
className="FormControlLabel__control"
544+
id="value-2"
545+
onChange={[Function]}
546+
type="checkbox"
547+
value="2"
548+
/>
549+
Value 2
550+
</div>
482551
</label>
483552
<label
484553
className="FormControlLabel FormControlLabel--bordered"
485554
htmlFor="value-3"
486555
>
487-
<input
488-
checked={false}
489-
className="FormControlLabel__control"
490-
id="value-3"
491-
onChange={[Function]}
492-
type="checkbox"
493-
value="3"
494-
/>
495-
Value 3
556+
<div
557+
className="FormControlLabel__label"
558+
>
559+
<input
560+
checked={false}
561+
className="FormControlLabel__control"
562+
id="value-3"
563+
onChange={[Function]}
564+
type="checkbox"
565+
value="3"
566+
/>
567+
Value 3
568+
</div>
496569
</label>
497570
</div>
498571
</div>
@@ -907,73 +980,6 @@ exports[`Storyshots Design System/Form Elements/Form Group With Trailing Icon 1`
907980
</div>
908981
`;
909982

910-
exports[`Storyshots Design System/Form Elements/Radio Button Default 1`] = `
911-
<div
912-
style={
913-
Object {
914-
"padding": "1rem",
915-
}
916-
}
917-
>
918-
<label
919-
className="RadioButton"
920-
>
921-
<input
922-
className="RadioButton__input"
923-
disabled={false}
924-
id="default"
925-
name=""
926-
type="radio"
927-
/>
928-
<span
929-
className="RadioButton__label"
930-
>
931-
label
932-
</span>
933-
</label>
934-
</div>
935-
`;
936-
937-
exports[`Storyshots Design System/Form Elements/Radio Button With Children 1`] = `
938-
<div
939-
style={
940-
Object {
941-
"padding": "1rem",
942-
}
943-
}
944-
>
945-
<label
946-
className="RadioButton RadioButton--bordered"
947-
>
948-
<input
949-
className="RadioButton__input"
950-
disabled={false}
951-
id="default"
952-
name=""
953-
type="radio"
954-
/>
955-
<span
956-
className="RadioButton__label"
957-
>
958-
Option with child
959-
</span>
960-
<div
961-
className="RadioButton__children"
962-
>
963-
<span
964-
style={
965-
Object {
966-
"color": "#A1A1A1",
967-
}
968-
}
969-
>
970-
Some descriptive text for the option above
971-
</span>
972-
</div>
973-
</label>
974-
</div>
975-
`;
976-
977983
exports[`Storyshots Design System/Form Inline 1`] = `
978984
<div
979985
style={

‎src/CheckboxButtonGroup/CheckboxButtonGroup.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
.CheckboxButtonGroup {
55
display: flex;
66
flex-direction: row;
7+
flex-wrap: wrap;
78

89
label {
9-
margin-bottom: 0;
10+
margin-bottom: 0.5rem;
1011
}
1112
}

‎src/FormControlLabel/FormControlLabel.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './FormControlLabel.scss';
77
export default function FormControlLabel({
88
bordered,
99
checked,
10+
children,
1011
className,
1112
Control,
1213
id,
@@ -25,8 +26,15 @@ export default function FormControlLabel({
2526
)}
2627
htmlFor={id}
2728
>
28-
<Control checked={checked} className="FormControlLabel__control" id={id} {...controlProps} />
29-
{text}
29+
<div className="FormControlLabel__label">
30+
<Control checked={checked} className="FormControlLabel__control" id={id} {...controlProps} />
31+
{text}
32+
</div>
33+
{children && (
34+
<div className="FormControlLabel__children">
35+
{children}
36+
</div>
37+
)}
3038
</label>
3139
);
3240
}

‎src/FormControlLabel/FormControlLabel.scss‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
11
@import '../../scss/theme';
22

33
.FormControlLabel {
4-
align-items: center;
4+
flex-direction: column;
55
display: flex;
66

7+
&__label {
8+
align-items: center;
9+
display: flex;
10+
flex-direction: row;
11+
}
12+
713
&__control {
814
display: flex;
915
margin-right: .25rem;
1016
}
1117

18+
&__children {
19+
display: flex;
20+
margin-top: 0.5rem;
21+
width: 100%;
22+
}
23+
1224
&--bordered {
1325
@include font-type-30;
1426

@@ -20,10 +32,12 @@
2032
}
2133

2234
&--active {
23-
@include font-type-30--bold;
24-
2535
background-color: $ux-blue-100;
26-
color: $ux-blue-700;
2736
border-color: $ux-blue-200;
37+
38+
&__label {
39+
@include font-type-30--bold;
40+
color: $ux-blue-700;
41+
}
2842
}
2943
}

0 commit comments

Comments
 (0)