Skip to content

Commit 2902e6a

Browse files
Akshat55Akshat55
committed
fix: group radios using fieldset tag
Signed-off-by: Akshat Patel <[email protected]>
1 parent 9db3ccf commit 2902e6a

File tree

2 files changed

+84
-78
lines changed

2 files changed

+84
-78
lines changed

‎src/radio/radio-group.component.ts‎

Lines changed: 82 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -46,38 +46,46 @@ import { RadioChange } from "./radio-change.class";
4646
@Component({
4747
selector: "cds-radio-group, ibm-radio-group",
4848
template: `
49-
<div
49+
<fieldset
5050
class="cds--radio-button-group"
5151
[attr.aria-label]="ariaLabel"
5252
[attr.aria-labelledby]="ariaLabelledby"
5353
[ngClass]="{
5454
'cds--radio-button-group--vertical': orientation === 'vertical',
5555
'cds--radio-button-group--label-left': labelPlacement === 'left',
5656
'cds--radio-button-group--invalid' : !warn && invalid,
57-
'cds-radio-button-group--warning': !invalid && warn
58-
}">
57+
'cds--radio-button-group--warning': !invalid && warn
58+
}"
59+
[attr.data-invalid]="invalid ? true : null">
60+
<legend *ngIf="legend" class="cds--label">
61+
<ng-template *ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>
62+
<ng-template #legendLabel>{{legend}}</ng-template>
63+
</legend>
5964
<ng-content></ng-content>
60-
</div>
65+
</fieldset>
6166
<div class="cds--radio-button__validation-msg">
62-
<div *ngIf="!warn && invalid">
67+
<ng-container *ngIf="!warn && invalid">
6368
<svg
6469
cdsIcon="warning--filled"
6570
size="16"
66-
class="cds--radio-button__invalid-icon"
67-
>
71+
class="cds--radio-button__invalid-icon">
6872
</svg>
69-
<ng-container *ngIf="!isTemplate(invalidText)" class="cds--form-requirement">{{ invalidText }}</ng-container>
70-
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
71-
</div>
72-
<div *ngIf="!invalid && warn">
73+
<div class="cds--form-requirement">
74+
<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
75+
<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
76+
</div>
77+
</ng-container>
78+
<ng-container *ngIf="!invalid && warn">
7379
<svg
7480
cdsIcon="warning--alt--filled"
7581
class="cds--radio-button__invalid-icon cds--radio-button__invalid-icon--warning"
7682
size="16">
7783
</svg>
78-
<ng-container *ngIf="!isTemplate(warnText)" class="cds--form-requirement">{{warnText}}</ng-container>
79-
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
80-
</div>
84+
<div class="cds--form-requirement">
85+
<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
86+
<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
87+
</div>
88+
</ng-container>
8189
</div>
8290
<div
8391
*ngIf="helperText && !invalid && !warn"
@@ -96,62 +104,6 @@ import { RadioChange } from "./radio-change.class";
96104
]
97105
})
98106
export class RadioGroup implements AfterContentInit, AfterViewInit, ControlValueAccessor {
99-
/**
100-
* Used for creating the `RadioGroup` 'name' property dynamically.
101-
*/
102-
static radioGroupCount = 0;
103-
104-
@Input() orientation: "horizontal" | "vertical" = "horizontal";
105-
106-
@Input() labelPlacement: "right" | "left" = "right";
107-
108-
/**
109-
* Used to set the `aria-label` attribute on the radio group element.
110-
*/
111-
// tslint:disable-next-line:no-input-rename
112-
@Input() ariaLabel: string;
113-
114-
/**
115-
* Used to set the `aria-labelledby` attribute on the radio group element.
116-
*/
117-
// tslint:disable-next-line:no-input-rename
118-
@Input() ariaLabelledby: string;
119-
120-
/**
121-
* Sets the optional helper text.
122-
*/
123-
@Input() helperText: string | TemplateRef<any>;
124-
125-
/**
126-
* Set to `true` to show the invalid state.
127-
*/
128-
@Input() invalid = false;
129-
130-
/**
131-
* Value displayed if combobox is in an invalid state.
132-
*/
133-
@Input() invalidText: string | TemplateRef<any>;
134-
135-
/**
136-
* Set to `true` to show a warning (contents set by warnText)
137-
*/
138-
@Input() warn = false;
139-
140-
/**
141-
* Sets the warning text
142-
*/
143-
@Input() warnText: string | TemplateRef<any>;
144-
145-
/**
146-
* Emits event notifying other classes of a change using a `RadioChange` class.
147-
*/
148-
@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();
149-
150-
/**
151-
* The `Radio` input items in the `RadioGroup`.
152-
*/
153-
// tslint:disable-next-line:no-forward-ref
154-
@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;
155107

156108
/**
157109
* Sets the passed in `Radio` item as the selected input within the `RadioGroup`.
@@ -244,6 +196,62 @@ export class RadioGroup implements AfterContentInit, AfterViewInit, ControlValue
244196
this._skeleton = value;
245197
this.updateChildren();
246198
}
199+
/**
200+
* Used for creating the `RadioGroup` 'name' property dynamically.
201+
*/
202+
static radioGroupCount = 0;
203+
204+
@Input() orientation: "horizontal" | "vertical" = "horizontal";
205+
206+
@Input() labelPlacement: "right" | "left" = "right";
207+
208+
@Input() legend: string | TemplateRef<any>;
209+
210+
/**
211+
* Used to set the `aria-label` attribute on the radio group element.
212+
*/
213+
@Input() ariaLabel: string;
214+
215+
/**
216+
* Used to set the `aria-labelledby` attribute on the radio group element.
217+
*/
218+
@Input() ariaLabelledby: string;
219+
220+
/**
221+
* Sets the optional helper text.
222+
*/
223+
@Input() helperText: string | TemplateRef<any>;
224+
225+
/**
226+
* Set to `true` to show the invalid state.
227+
*/
228+
@Input() invalid = false;
229+
230+
/**
231+
* Value displayed if combobox is in an invalid state.
232+
*/
233+
@Input() invalidText: string | TemplateRef<any>;
234+
235+
/**
236+
* Set to `true` to show a warning (contents set by warnText)
237+
*/
238+
@Input() warn = false;
239+
240+
/**
241+
* Sets the warning text
242+
*/
243+
@Input() warnText: string | TemplateRef<any>;
244+
245+
/**
246+
* Emits event notifying other classes of a change using a `RadioChange` class.
247+
*/
248+
@Output() change: EventEmitter<RadioChange> = new EventEmitter<RadioChange>();
249+
250+
/**
251+
* The `Radio` input items in the `RadioGroup`.
252+
*/
253+
// tslint:disable-next-line:no-forward-ref
254+
@ContentChildren(forwardRef(() => Radio)) radios: QueryList<Radio>;
247255

248256
/**
249257
* Binds 'cds--form-item' value to the class for `RadioGroup`.
@@ -397,6 +405,10 @@ export class RadioGroup implements AfterContentInit, AfterViewInit, ControlValue
397405
*/
398406
propagateChange = (_: any) => {};
399407

408+
public isTemplate(value) {
409+
return value instanceof TemplateRef;
410+
}
411+
400412
protected updateChildren() {
401413
if (this.radios) {
402414
this.radios.forEach(child => child.skeleton = this.skeleton);
@@ -422,8 +434,4 @@ export class RadioGroup implements AfterContentInit, AfterViewInit, ControlValue
422434
});
423435
});
424436
}
425-
426-
public isTemplate(value) {
427-
return value instanceof TemplateRef;
428-
}
429437
}

‎src/radio/radio.stories.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,15 @@ export default {
2525
const Template: Story<Radio> = (args) => ({
2626
props: args,
2727
template: `
28-
<fieldset class="cds--fieldset">
29-
<legend class="cds--label">{{label}}</legend>
3028
<cds-radio-group
29+
[legend]="label"
3130
[disabled]="disabled"
3231
[helperText]="helperText"
3332
[invalid]="invalid"
3433
[invalidText]="invalidText"
3534
[warn]="warn"
3635
[warnText]="warnText"
37-
aria-label="radiogroup"
36+
ariaLabel="radiogroup"
3837
[orientation]="orientation"
3938
[labelPlacement]="labelPlacement"
4039
(change)="onChange($event)">
@@ -46,7 +45,6 @@ const Template: Story<Radio> = (args) => ({
4645
<cds-radio [value]="Three">Three</cds-radio>
4746
<cds-radio [value]="Four" [disabled]="true">Four</cds-radio>
4847
</cds-radio-group>
49-
</fieldset>
5048
`
5149
});
5250
export const Basic = Template.bind({});

0 commit comments

Comments
 (0)