Skip to content

Commit 4eb0670

Browse files
cal-smithcal-smith
committed
initial forms update
1 parent d529266 commit 4eb0670

File tree

5 files changed

+109
-43
lines changed

5 files changed

+109
-43
lines changed

‎src/forms/checkbox.component.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,22 +56,25 @@ export class CheckboxChange {
5656
@Component({
5757
selector: "ibm-checkbox",
5858
template: `
59-
<label [class]="getVariantClass()" [for]="id">
60-
<input type="checkbox" #inputCheckbox
59+
<div class="bx--form-item bx--checkbox-wrapper">
60+
<input
61+
#inputCheckbox
62+
class="bx--checkbox"
63+
type="checkbox"
64+
[id]="id"
65+
[value]="value"
66+
[name]="name"
67+
[required]="required"
6168
[checked]="checked"
6269
[disabled]="disabled"
6370
[indeterminate]="indeterminate"
64-
[name]="name"
65-
[id]="id"
66-
[required]="required"
67-
[value]="value"
6871
[attr.aria-label]="ariaLabel"
6972
[attr.aria-labelledby]="ariaLabelledby"
7073
[attr.aria-checked]="indeterminate ? 'mixed' : checked"
7174
(change)="onChange($event)"
7275
(click)="onClick($event)">
73-
<span class="checkbox_label"><ng-content></ng-content></span>
74-
</label>
76+
<label [for]="id" class="bx--checkbox-label"><ng-content></ng-content></label>
77+
</div>
7578
`,
7679
providers: [
7780
{
@@ -80,7 +83,8 @@ export class CheckboxChange {
8083
multi: true
8184
}
8285
],
83-
changeDetection: ChangeDetectionStrategy.OnPush
86+
changeDetection: ChangeDetectionStrategy.OnPush,
87+
styleUrls: [ "./../../node_modules/carbon-components/scss/components/checkbox/_checkbox.scss" ]
8488
})
8589
export class CheckboxComponent implements ControlValueAccessor, AfterViewInit {
8690
/**

‎src/forms/forms.stories.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { storiesOf, moduleMetadata } from "@storybook/angular";
2+
import { action } from "@storybook/addon-actions";
3+
import { withKnobs, boolean } from "@storybook/addon-knobs/angular";
4+
5+
import { NFormsModule } from "../";
6+
7+
storiesOf("Forms", module).addDecorator(
8+
moduleMetadata({
9+
imports: [NFormsModule]
10+
})
11+
)
12+
.addDecorator(withKnobs)
13+
.add("Checkbox", () => ({
14+
template: `
15+
<ibm-checkbox
16+
[checked]="checked"
17+
[disabled]="disabled"
18+
[indeterminate]="indeterminate"
19+
(change)="onChange($event)"
20+
(indeterminateChange)="onIndeterminateChange($event)">
21+
Checkbox
22+
</ibm-checkbox>
23+
`,
24+
props: {
25+
checked: boolean("checked", false),
26+
disabled: boolean("disabled", false),
27+
indeterminate: boolean("indeterminate", false),
28+
onChange: action("Change fired!"),
29+
onIndeterminateChange: action("Indeterminate change fired!")
30+
}
31+
}))
32+
.add("Radio", () => ({
33+
template: `
34+
<ibm-radio-group>
35+
<ibm-radio>one</ibm-radio>
36+
<ibm-radio>two</ibm-radio>
37+
</ibm-radio-group>
38+
`
39+
}))
40+
.add("Label", () => ({
41+
template: `
42+
<ibm-label>
43+
Some Title
44+
<input type="text" class="bx--text-input" placeholder="Optional placeholder text">
45+
</ibm-label>
46+
`,
47+
styleUrls: ["./../../node_modules/carbon-components/scss/components/text-input/_text-input.scss"]
48+
}))
49+
.add("Switch", () => ({
50+
template: `<ibm-switch></ibm-switch>`
51+
}));

‎src/forms/label.component.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,13 @@ import { Component, Input, AfterContentInit, ElementRef } from "@angular/core";
2525
*/
2626
@Component({
2727
selector: "ibm-label",
28-
// tslint:disable:max-line-length
2928
template: `
30-
<label [for]="labelInputID" [ngClass]= "labelState ? 'valid--'+labelState : null">
31-
<ibm-static-icon *ngIf="labelState === 'success'" icon="success" size="sm"></ibm-static-icon>
32-
<ibm-static-icon *ngIf="labelState === 'warning'" icon="warning" size="sm"></ibm-static-icon>
33-
<ibm-static-icon *ngIf="labelState === 'error'" icon="error" size="sm"></ibm-static-icon>
34-
<ng-content></ng-content>
35-
</label>
36-
<ng-content select="input,textarea,div" ></ng-content>`
37-
// tslint:enable:max-line-length
29+
<div class="bx--form-item">
30+
<label [for]="labelInputID" class="bx--label"><ng-content></ng-content></label>
31+
<ng-content select="input,textarea,div"></ng-content>
32+
</div>
33+
`,
34+
styleUrls: ["./../../node_modules/carbon-components/scss/components/form/_form.scss"]
3835
})
3936
export class LabelComponent implements AfterContentInit {
4037
/**

‎src/forms/radio.component.ts‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,18 @@ export class RadioChange {
7676
@Component({
7777
selector: "ibm-radio-group",
7878
template: `
79-
<ng-content></ng-content>
79+
<div class="bx--radio-button-group">
80+
<ng-content></ng-content>
81+
</div>
8082
`,
8183
providers: [
8284
{
8385
provide: NG_VALUE_ACCESSOR,
8486
useExisting: RadioGroup,
8587
multi: true
8688
}
87-
]
89+
],
90+
styleUrls: ["./../../node_modules/carbon-components/scss/components/radio-button/_radio-button.scss"]
8891
})
8992
export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccessor {
9093
/**
@@ -412,19 +415,25 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
412415
@Component({
413416
selector: "ibm-radio",
414417
template: `
415-
<label [for]="id">
416-
<input type="radio" #inputCheckbox
417-
[checked]="checked"
418-
[disabled]="disabled"
419-
[name]="name"
420-
[id]="id"
421-
[required]="required"
422-
[value]="value"
423-
[attr.aria-label]="ariaLabel"
424-
[attr.aria-labelledby]="ariaLabelledby"
425-
(change)="onChange($event)"
426-
(click)="onClick($event)">
427-
<span class="radio_label"><ng-content></ng-content></span>
418+
<input
419+
class="bx--radio-button"
420+
type="radio"
421+
#inputCheckbox
422+
[checked]="checked"
423+
[disabled]="disabled"
424+
[name]="name"
425+
[id]="id"
426+
[required]="required"
427+
[value]="value"
428+
[attr.aria-label]="ariaLabel"
429+
[attr.aria-labelledby]="ariaLabelledby"
430+
(change)="onChange($event)"
431+
(click)="onClick($event)">
432+
<label
433+
class="bx--radio-button__label"
434+
[for]="id">
435+
<span class="bx--radio-button__appearance"></span>
436+
<ng-content></ng-content>
428437
</label>
429438
`,
430439
providers: [
@@ -433,7 +442,8 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
433442
useExisting: RadioComponent,
434443
multi: true
435444
}
436-
]
445+
],
446+
styleUrls: ["./../../node_modules/carbon-components/scss/components/radio-button/_radio-button.scss"]
437447
})
438448
export class RadioComponent extends CheckboxComponent implements OnInit {
439449
/**

‎src/forms/switch.component.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,25 +59,27 @@ export class SwitchChange {
5959
@Component({
6060
selector: "ibm-switch",
6161
template: `
62-
<label [for]="id">
63-
<ng-content></ng-content>
64-
</label>
65-
<button
66-
(click)="onClick($event)"
62+
<input
63+
class="bx--toggle"
6764
[id]="id"
68-
role="switch"
69-
type="button"
65+
type="checkbox"
66+
(click)="onClick($event)"
7067
[disabled]="disabled"
7168
[attr.aria-checked]="checked">
72-
</button>
69+
<label class="bx--toggle__label" [for]="id">
70+
<span class="bx--toggle__text--left">Off</span>
71+
<span class="bx--toggle__appearance"></span>
72+
<span class="bx--toggle__text--right">On</span>
73+
</label>
7374
`,
7475
providers: [
7576
{
7677
provide: NG_VALUE_ACCESSOR,
7778
useExisting: SwitchComponent,
7879
multi: true
7980
}
80-
]
81+
],
82+
styleUrls: ["./../../node_modules/carbon-components/scss/components/toggle/_toggle.scss"]
8183
})
8284
export class SwitchComponent extends CheckboxComponent implements OnInit {
8385
/**
@@ -120,6 +122,7 @@ export class SwitchComponent extends CheckboxComponent implements OnInit {
120122
* @memberof SwitchComponent
121123
*/
122124
ngOnInit() {
125+
/* TODO: remove and extend in neutrino
123126
// Build variant classes
124127
const labelClass = `toggle-label${this.size !== "md" ? `--${this.size}` : ""}`;
125128
const buttonClass = `toggle${this.size !== "md" ? `--${this.size}` : ""}`;
@@ -131,5 +134,6 @@ export class SwitchComponent extends CheckboxComponent implements OnInit {
131134
// Add classes to elements
132135
this.renderer.addClass(labelEl, labelClass);
133136
this.renderer.addClass(buttonEl, buttonClass);
137+
*/
134138
}
135139
}

0 commit comments

Comments
 (0)