Skip to content

Commit ecb142a

Browse files
asudohasudoh
authored
fix(radio-button): support combinations of group/label (#1933)
* fix(radio-button): support combinations of group/label The earlier commit (#1722) had styling problems with: * Label positioned at left * `.bx--radio-button-wrapper` used with the vertical radio group feature we introduced in `v10` Also: * Introduced a corresponding set of style definitions for `v10` * Given `v9` doesn't have a support for vertical radio group, added a change to hide vertical radio group in `v9` dev env Refs #1721. * Update src/components/radio-button/_radio-button.scss Co-Authored-By: asudoh <asudoh@gmail.com> * chore(radio-button): make IDs unique
1 parent 6e5b88b commit ecb142a

File tree

3 files changed

+165
-40
lines changed

3 files changed

+165
-40
lines changed

‎src/components/radio-button/_radio-button.scss‎

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@
9292
margin: 0px;
9393
}
9494

95-
.#{$prefix}--radio-button-wrapper + .#{$prefix}--radio-button-wrapper {
96-
margin-left: 20px;
95+
.#{$prefix}--radio-button-wrapper:not(:last-of-type) {
96+
margin-right: $spacing-md;
9797
}
9898

9999
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right .#{$prefix}--radio-button__label {
@@ -104,13 +104,18 @@
104104
flex-direction: row-reverse;
105105
}
106106

107+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left .#{$prefix}--radio-button__appearance {
108+
margin-right: 0;
109+
margin-left: $spacing-xs;
110+
}
111+
107112
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__label {
108113
flex-direction: column-reverse;
109114
text-align: center;
110115
}
111116

112117
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__appearance {
113-
margin: 0;
118+
margin-right: 0;
114119
}
115120

116121
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__label-text {
@@ -127,7 +132,7 @@
127132
}
128133

129134
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-bottom .#{$prefix}--radio-button__appearance {
130-
margin: 0;
135+
margin-right: 0;
131136
}
132137
}
133138

@@ -230,6 +235,61 @@
230235
.#{$prefix}--radio-button__label.#{$prefix}--skeleton .#{$prefix}--radio-button__appearance {
231236
display: none;
232237
}
238+
239+
.#{$prefix}--radio-button-wrapper .#{$prefix}--radio-button__label {
240+
display: flex;
241+
align-items: center;
242+
justify-content: center;
243+
margin: 0;
244+
}
245+
246+
.#{$prefix}--radio-button-wrapper:not(:last-of-type) {
247+
margin-right: $spacing-md;
248+
}
249+
250+
.#{$prefix}--radio-button-group--vertical .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
251+
margin-right: 0;
252+
margin-bottom: $spacing-xs;
253+
}
254+
255+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right .#{$prefix}--radio-button__label {
256+
flex-direction: row;
257+
}
258+
259+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left .#{$prefix}--radio-button__label {
260+
flex-direction: row-reverse;
261+
}
262+
263+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left .#{$prefix}--radio-button__appearance {
264+
margin-right: 0;
265+
margin-left: $spacing-xs;
266+
}
267+
268+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__label {
269+
flex-direction: column-reverse;
270+
text-align: center;
271+
}
272+
273+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__appearance {
274+
margin-right: 0;
275+
}
276+
277+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-top .#{$prefix}--radio-button__label-text {
278+
margin-bottom: 5px;
279+
}
280+
281+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-bottom .#{$prefix}--radio-button__label {
282+
flex-direction: column;
283+
text-align: center;
284+
}
285+
286+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-bottom .#{$prefix}--radio-button__label-text {
287+
margin-top: 5px;
288+
}
289+
290+
.#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-bottom .#{$prefix}--radio-button__appearance {
291+
margin-right: 0;
292+
}
233293
}
234294

235295
@include exports('radio-button') {

‎src/components/radio-button/radio-button.config.js‎

Lines changed: 100 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,29 @@
99

1010
const { prefix } = require('../../globals/js/settings');
1111

12-
const items = [
13-
{
14-
id: 'radio-button-1',
15-
value: 'red',
16-
label: 'Radio Button label',
17-
},
18-
{
19-
id: 'radio-button-2',
20-
value: 'green',
21-
label: 'Radio Button label',
22-
},
23-
{
24-
id: 'radio-button-3',
25-
value: 'blue',
26-
label: 'Radio Button label',
27-
disabled: true,
28-
},
29-
];
12+
const items = () => {
13+
const groupId = Math.random()
14+
.toString(36)
15+
.substr(2);
16+
return [
17+
{
18+
id: `radio-button-${groupId}-1`,
19+
value: 'red',
20+
label: 'Radio Button label',
21+
},
22+
{
23+
id: `radio-button-${groupId}-2`,
24+
value: 'green',
25+
label: 'Radio Button label',
26+
},
27+
{
28+
id: `radio-button-${groupId}-3`,
29+
value: 'blue',
30+
label: 'Radio Button label',
31+
disabled: true,
32+
},
33+
];
34+
};
3035

3136
module.exports = {
3237
context: {
@@ -39,17 +44,92 @@ module.exports = {
3944
context: {
4045
selectedValue: 'red',
4146
group: 'radio-button',
42-
items,
47+
items: items(),
48+
},
49+
},
50+
{
51+
name: 'horizontal-bottom',
52+
label: 'Radio button group (Label at bottom)',
53+
context: {
54+
direction: 'bottom',
55+
selectedValue: 'red',
56+
group: 'radio-button',
57+
items: items(),
58+
},
59+
},
60+
{
61+
name: 'horizontal-left',
62+
label: 'Radio button group (Label at left)',
63+
context: {
64+
direction: 'left',
65+
selectedValue: 'red',
66+
group: 'radio-button',
67+
items: items(),
68+
},
69+
},
70+
{
71+
name: 'horizontal-top',
72+
label: 'Radio button group (Label at top)',
73+
context: {
74+
direction: 'top',
75+
selectedValue: 'red',
76+
group: 'radio-button',
77+
items: items(),
4378
},
4479
},
4580
{
4681
name: 'vertical',
4782
label: 'Vertical radio button group',
83+
meta: {
84+
xVersionOnly: true,
85+
},
86+
context: {
87+
selectedValue: 'red',
88+
group: 'radio-button--vertical',
89+
vertical: true,
90+
items: items(),
91+
},
92+
},
93+
{
94+
name: 'vertical-bottom',
95+
label: 'Vertical radio button group (Label at bottom)',
96+
meta: {
97+
xVersionOnly: true,
98+
},
99+
context: {
100+
direction: 'bottom',
101+
selectedValue: 'red',
102+
group: 'radio-button--vertical',
103+
vertical: true,
104+
items: items(),
105+
},
106+
},
107+
{
108+
name: 'vertical-left',
109+
label: 'Vertical radio button group (Label at left)',
110+
meta: {
111+
xVersionOnly: true,
112+
},
113+
context: {
114+
direction: 'left',
115+
selectedValue: 'red',
116+
group: 'radio-button--vertical',
117+
vertical: true,
118+
items: items(),
119+
},
120+
},
121+
{
122+
name: 'vertical-top',
123+
label: 'Vertical radio button group (Label at top)',
124+
meta: {
125+
xVersionOnly: true,
126+
},
48127
context: {
128+
direction: 'top',
49129
selectedValue: 'red',
50130
group: 'radio-button--vertical',
51131
vertical: true,
52-
items,
132+
items: items(),
53133
},
54134
},
55135
],

‎src/components/radio-button/radio-button.hbs‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,9 @@
1010
<div class="{{@root.prefix}}--form-item">
1111
<div class="{{@root.prefix}}--radio-button-group {{#if vertical}} {{@root.prefix}}--radio-button-group--vertical {{/if}}">
1212
{{#each items}}
13+
<div class="{{@root.prefix}}--radio-button-wrapper{{#if ../direction}} {{@root.prefix}}--radio-button-wrapper--label-{{../direction}}{{/if}}">
1314
<input id="{{id}}" class="{{@root.prefix}}--radio-button" type="radio" value="{{value}}" name="{{../group}}" tabindex="0"{{#is value ../selectedValue}} checked{{/is}}{{#if disabled}} disabled{{/if}}>
1415
<label for="{{id}}" class="{{@root.prefix}}--radio-button__label">
15-
<span class="{{@root.prefix}}--radio-button__appearance"></span>
16-
{{label}}
17-
</label>
18-
{{/each}}
19-
</div>
20-
</div>
21-
</fieldset>
22-
23-
<fieldset class="{{@root.prefix}}--fieldset">
24-
<legend class="{{@root.prefix}}--label">Radio Button heading</legend>
25-
<div class="{{@root.prefix}}--form-item">
26-
<div class="{{@root.prefix}}--radio-button-group">
27-
{{#each items}}
28-
<div class="{{@root.prefix}}--radio-button-wrapper {{@root.prefix}}--radio-button-wrapper--label-top">
29-
<input id="{{id}}x" class="{{@root.prefix}}--radio-button" type="radio" value="{{value}}" name="{{../group}}" tabindex="0"{{#is value ../selectedValue}} checked{{/is}}{{#if disabled}} disabled{{/if}}>
30-
<label for="{{id}}x" class="{{@root.prefix}}--radio-button__label">
3116
<span class="{{@root.prefix}}--radio-button__appearance"></span>
3217
<span class="{{@root.prefix}}--radio-button__label-text">{{label}}</span>
3318
</label>

0 commit comments

Comments
 (0)