Skip to content

Commit ce5e7e9

Browse files
committed
fix(radio): Add heading and update story
1 parent 2d34a38 commit ce5e7e9

File tree

3 files changed

+22
-14
lines changed

3 files changed

+22
-14
lines changed

src/radio/radio-group.component.ts

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,16 @@ export class RadioChange {
6464
*/
6565
@Component({
6666
selector: "ibm-radio-group",
67-
template: `<ng-content></ng-content>`,
67+
template: `
68+
<fieldset class="bx--fieldset">
69+
<legend *ngIf="!skeleton" class="bx--label">Radio Button heading</legend>
70+
<div class="bx--form-item">
71+
<div class="bx--radio-button-group" role="radiogroup">
72+
<ng-content></ng-content>
73+
</div>
74+
</div>
75+
</fieldset>
76+
`,
6877
providers: [
6978
{
7079
provide: NG_VALUE_ACCESSOR,
@@ -179,16 +188,6 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
179188
this.updateChildren();
180189
}
181190

182-
/**
183-
* Binds 'radiogroup' value to the role attribute for `RadioGroup`.
184-
*/
185-
@HostBinding("attr.role") role = "radiogroup";
186-
187-
/**
188-
* Binds 'bx--radio-button-group' value to the class for `RadioGroup`.
189-
*/
190-
@HostBinding("class.bx--radio-button-group") radioButtonGroupClass = true;
191-
192191
/**
193192
* To track whether the `RadioGroup` has been initialized.
194193
*/

src/radio/radio.component.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,13 @@ export class Radio extends Checkbox implements OnInit {
117117
*/
118118
@HostBinding("attr.role") role = "radio";
119119

120+
@HostBinding("class.bx--checkbox-wrapper") get checkboxWrapperClass() {
121+
return false;
122+
}
123+
@HostBinding("class.bx--form-item") get formItemClass() {
124+
return false;
125+
}
126+
120127
/**
121128
* The id for the `Radio`.
122129
* @type {string}

src/radio/radio.stories.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,19 @@ storiesOf("Radio", module).addDecorator(
1515
<ibm-radio-group aria-label="radiogroup" [(ngModel)]="radio" (change)="onChange($event)">
1616
<ibm-radio *ngFor="let radio of manyRadios"
1717
[value]="radio.num"
18-
[disabled]="radio.disabled">{{radio.num}}
18+
[checked]="radio.checked"
19+
[disabled]="radio.disabled">
20+
{{radio.num}}
1921
</ibm-radio>
2022
</ibm-radio-group>
2123
`,
2224
props: {
2325
onChange: action("Radio change"),
2426
manyRadios: [
25-
{ num: "one", disabled: false },
27+
{ num: "one" },
2628
{ num: "two" },
2729
{ num: "three" },
28-
{ num: "four" }
30+
{ num: "four", disabled: true }
2931
]
3032
}
3133
}))

0 commit comments

Comments
 (0)