From d445d964a94cd32f00abd0faa70d9d52e8f28105 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 3 Aug 2018 14:06:44 -0400 Subject: [PATCH 01/21] initial component scaffolding --- .../checkbox/checkbox-icon-button.component.html | 0 .../checkbox/checkbox-icon-button.component.scss | 0 .../checkbox/checkbox-icon-button.component.ts | 10 ++++++++++ src/modules/radio/radio-icon-button.component.ts | 11 +++++++++++ 4 files changed, 21 insertions(+) create mode 100644 src/modules/checkbox/checkbox-icon-button.component.html create mode 100644 src/modules/checkbox/checkbox-icon-button.component.scss create mode 100644 src/modules/checkbox/checkbox-icon-button.component.ts create mode 100644 src/modules/radio/radio-icon-button.component.ts diff --git a/src/modules/checkbox/checkbox-icon-button.component.html b/src/modules/checkbox/checkbox-icon-button.component.html new file mode 100644 index 000000000..e69de29bb diff --git a/src/modules/checkbox/checkbox-icon-button.component.scss b/src/modules/checkbox/checkbox-icon-button.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/modules/checkbox/checkbox-icon-button.component.ts b/src/modules/checkbox/checkbox-icon-button.component.ts new file mode 100644 index 000000000..1cc0ad5d0 --- /dev/null +++ b/src/modules/checkbox/checkbox-icon-button.component.ts @@ -0,0 +1,10 @@ +import { SkyCheckboxComponent } from './checkbox.component'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'sky-checkbox-icon-button', + styleUrls: ['./checkbox-icon-button.component.scss'], + templateUrl: './checkbox-icon-button.component.html' +}) +export class SkyCheckboxIconButtonComponent extends SkyCheckboxComponent { +} diff --git a/src/modules/radio/radio-icon-button.component.ts b/src/modules/radio/radio-icon-button.component.ts new file mode 100644 index 000000000..93e715ff6 --- /dev/null +++ b/src/modules/radio/radio-icon-button.component.ts @@ -0,0 +1,11 @@ +import { SkyRadioComponent } from './radio.component'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'sky-radio-icon-button', + styleUrls: [''], + templateUrl: '' +}) +export class SkyRadioIconButtonComponent extends SkyRadioComponent { + +} From 99740f49816560c85eb8d1ff156ba596f7f467dc Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 8 Aug 2018 13:15:33 -0400 Subject: [PATCH 02/21] created initial icon functionality --- .../checkbox/checkbox-demo.component.html | 4 +- src/demos/checkbox/checkbox-demo.component.ts | 25 ++++++++++++ src/demos/radio/radio-demo.component.html | 39 +++++++++++++++++++ src/demos/radio/radio-demo.component.ts | 1 + .../checkbox-icon-button.component.html | 0 .../checkbox-icon-button.component.scss | 0 .../checkbox-icon-button.component.ts | 10 ----- src/modules/checkbox/checkbox.component.html | 21 ++++++---- src/modules/checkbox/checkbox.component.ts | 23 +++++++++++ src/modules/checkbox/checkbox.module.ts | 4 +- src/modules/radio/radio-icon.component.html | 32 +++++++++++++++ src/modules/radio/radio-icon.component.ts | 39 +++++++++++++++++++ src/modules/radio/radio.module.ts | 7 +++- src/scss/_forms.scss | 18 +++++++++ 14 files changed, 202 insertions(+), 21 deletions(-) delete mode 100644 src/modules/checkbox/checkbox-icon-button.component.html delete mode 100644 src/modules/checkbox/checkbox-icon-button.component.scss delete mode 100644 src/modules/checkbox/checkbox-icon-button.component.ts create mode 100644 src/modules/radio/radio-icon.component.html create mode 100644 src/modules/radio/radio-icon.component.ts diff --git a/src/demos/checkbox/checkbox-demo.component.html b/src/demos/checkbox/checkbox-demo.component.html index 4788811f3..0d8eca5b5 100644 --- a/src/demos/checkbox/checkbox-demo.component.html +++ b/src/demos/checkbox/checkbox-demo.component.html @@ -7,7 +7,9 @@

+ [icon]="item.icon" + [fixedIcon]="item.fixedIcon" + [checkboxType]="item.checkboxType"> {{ item.label }} diff --git a/src/demos/checkbox/checkbox-demo.component.ts b/src/demos/checkbox/checkbox-demo.component.ts index 080ee60e1..9228670b8 100644 --- a/src/demos/checkbox/checkbox-demo.component.ts +++ b/src/demos/checkbox/checkbox-demo.component.ts @@ -15,6 +15,31 @@ export class SkyCheckboxDemoComponent { label: 'Checkbox 2', checked: true }, + { + label: 'Fixed icon checkbox', + checked: false, + icon: 'bold', + fixedIcon: true + }, + { + label: 'Not fixed icon checkbox', + checked: true, + icon: 'umbrella' + }, + { + label: 'Fixed success icon checkbox', + checked: false, + icon: 'star', + fixedIcon: true, + checkboxType: 'success' + }, + { + label: 'Fixed danger icon checkbox', + checked: true, + icon: 'ban', + fixedIcon: true, + checkboxType: 'danger' + }, { label: 'Disabled', disabled: true diff --git a/src/demos/radio/radio-demo.component.html b/src/demos/radio/radio-demo.component.html index 6dab9fb2e..29e3913e7 100644 --- a/src/demos/radio/radio-demo.component.html +++ b/src/demos/radio/radio-demo.component.html @@ -45,3 +45,42 @@

Selected option: {{ selectedValue }}

+ +

+ Icon radio buttons +

+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ +

+ Selected option: {{ iconSelectedValue }} +

diff --git a/src/demos/radio/radio-demo.component.ts b/src/demos/radio/radio-demo.component.ts index cff773a89..5413e27ea 100644 --- a/src/demos/radio/radio-demo.component.ts +++ b/src/demos/radio/radio-demo.component.ts @@ -6,5 +6,6 @@ import { Component } from '@angular/core'; }) export class SkyRadioDemoComponent { public selectedValue = '3'; + public iconSelectedValue = '2'; public valueGuy = '2'; } diff --git a/src/modules/checkbox/checkbox-icon-button.component.html b/src/modules/checkbox/checkbox-icon-button.component.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/modules/checkbox/checkbox-icon-button.component.scss b/src/modules/checkbox/checkbox-icon-button.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/modules/checkbox/checkbox-icon-button.component.ts b/src/modules/checkbox/checkbox-icon-button.component.ts deleted file mode 100644 index 1cc0ad5d0..000000000 --- a/src/modules/checkbox/checkbox-icon-button.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { SkyCheckboxComponent } from './checkbox.component'; -import { Component } from '@angular/core'; - -@Component({ - selector: 'sky-checkbox-icon-button', - styleUrls: ['./checkbox-icon-button.component.scss'], - templateUrl: './checkbox-icon-button.component.html' -}) -export class SkyCheckboxIconButtonComponent extends SkyCheckboxComponent { -} diff --git a/src/modules/checkbox/checkbox.component.html b/src/modules/checkbox/checkbox.component.html index eebf3d067..807688d13 100644 --- a/src/modules/checkbox/checkbox.component.html +++ b/src/modules/checkbox/checkbox.component.html @@ -1,7 +1,6 @@ +
+ + + + + + + + + + + + + + + + + + + + +
diff --git a/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts b/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts index 20612da8a..7e5316049 100644 --- a/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts @@ -10,6 +10,15 @@ describe('Checkbox', () => { selector: '#screenshot-checkbox' }); }); + }); + it('should match previous icon checkbox screenshot', () => { + return SkyVisualTest.setupTest('checkbox') + .then(() => { + return SkyVisualTest.compareScreenshot({ + screenshotName: 'icon-checkbox', + selector: '#screenshot-icon-checkbox' + }); + }); }); }); diff --git a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html index a655b0bcf..8d49408ed 100644 --- a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html +++ b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html @@ -23,4 +23,37 @@ + +
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
diff --git a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.ts b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.ts index 814c3a05c..6686a09bf 100644 --- a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.ts +++ b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.ts @@ -6,5 +6,6 @@ import { Component } from '@angular/core'; }) export class RadioVisualComponent { public selectedValue = '3'; + public iconSelectedValue = '2'; public valueGuy = '2'; } diff --git a/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts b/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts index 16910e0c0..f78aae60d 100644 --- a/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts @@ -10,6 +10,15 @@ describe('Radio component', () => { selector: '#screenshot-radio' }); }); + }); + it('should match the icon radio input', () => { + return SkyVisualTest.setupTest('radio') + .then(() => { + return SkyVisualTest.compareScreenshot({ + screenshotName: 'icon-radio', + selector: '#screenshot-icon-radio' + }); + }); }); }); diff --git a/src/demos/checkbox/checkbox-demo.component.ts b/src/demos/checkbox/checkbox-demo.component.ts index 1695be6a6..20f011312 100644 --- a/src/demos/checkbox/checkbox-demo.component.ts +++ b/src/demos/checkbox/checkbox-demo.component.ts @@ -54,5 +54,5 @@ export class SkyCheckboxDemoComponent { icon: 'ban', checkboxType: 'danger' } - ] + ]; } diff --git a/src/modules/checkbox/checkbox-icon.component.html b/src/modules/checkbox/checkbox-icon.component.html index b3082adc2..a82b772dd 100644 --- a/src/modules/checkbox/checkbox-icon.component.html +++ b/src/modules/checkbox/checkbox-icon.component.html @@ -14,7 +14,7 @@ (blur)="onInputBlur()" (change)="onInteractionEvent($event)"/> + + ` +}) +class SingleCheckboxComponent { + public icon: string = 'bold'; + public checkboxType: string; +} + +describe('Icon checkbox component', () => { + let fixture: ComponentFixture; + let debugElement: DebugElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + SingleCheckboxComponent + ], + imports: [ + BrowserModule, + FormsModule, + SkyCheckboxModule + ] + }); + fixture = TestBed.createComponent(SingleCheckboxComponent); + debugElement = fixture.debugElement; + }); + + it('should set icon based on input', () => { + fixture.detectChanges(); + + let checkboxIcon = debugElement.query(By.css('i')).nativeElement; + expect(checkboxIcon).toHaveCssClass('fa-bold'); + + fixture.componentInstance.icon = 'umbrella'; + fixture.detectChanges(); + + checkboxIcon = debugElement.query(By.css('i')).nativeElement; + expect(checkboxIcon).toHaveCssClass('fa-umbrella'); + }); + + it('should set span class based on checkbox type input', () => { + fixture.detectChanges(); + + let span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-info'); + + fixture.componentInstance.checkboxType = 'info'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-info'); + + fixture.componentInstance.checkboxType = 'success'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-success'); + + fixture.componentInstance.checkboxType = 'warning'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-warning'); + + fixture.componentInstance.checkboxType = 'danger'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-danger'); + }); +}); diff --git a/src/modules/checkbox/checkbox-icon.component.ts b/src/modules/checkbox/checkbox-icon.component.ts index 9b0b8fe17..f122e5d66 100644 --- a/src/modules/checkbox/checkbox-icon.component.ts +++ b/src/modules/checkbox/checkbox-icon.component.ts @@ -25,7 +25,6 @@ export const SKY_CHECKBOX_ICON_CONTROL_VALUE_ACCESSOR: any = { @Component({ selector: 'sky-checkbox-icon', templateUrl: './checkbox-icon.component.html', - styleUrls: ['./checkbox-icon.component.scss'], providers: [SKY_CHECKBOX_ICON_CONTROL_VALUE_ACCESSOR] }) export class SkyCheckboxIconComponent extends SkyCheckboxComponent { diff --git a/src/modules/radio/radio-icon.component.html b/src/modules/radio/radio-icon.component.html index a19afd875..b761a3e1c 100644 --- a/src/modules/radio/radio-icon.component.html +++ b/src/modules/radio/radio-icon.component.html @@ -15,10 +15,11 @@ (blur)="onInputBlur()" (ngModelChange)="onRadioChanged($event)"/> + + + ` +}) +class SingleRadioComponent { + public icon: string = 'bold'; + public radioType: string; +} + +describe('Icon radio component', () => { + let fixture: ComponentFixture; + let debugElement: DebugElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ + SingleRadioComponent + ], + imports: [ + BrowserModule, + FormsModule, + SkyRadioModule + ] + }); + fixture = TestBed.createComponent(SingleRadioComponent); + debugElement = fixture.debugElement; + }); + + it('should set icon based on input', () => { + fixture.detectChanges(); + + let radioIcon = debugElement.query(By.css('i')).nativeElement; + expect(radioIcon).toHaveCssClass('fa-bold'); + + fixture.componentInstance.icon = 'umbrella'; + fixture.detectChanges(); + + radioIcon = debugElement.query(By.css('i')).nativeElement; + expect(radioIcon).toHaveCssClass('fa-umbrella'); + }); + + it('should set span class based on radio type input', () => { + fixture.detectChanges(); + + let span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-info'); + + fixture.componentInstance.radioType = 'info'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-info'); + + fixture.componentInstance.radioType = 'success'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-success'); + + fixture.componentInstance.radioType = 'warning'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-warning'); + + fixture.componentInstance.radioType = 'danger'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-danger'); + }); +}); diff --git a/src/modules/radio/radio-icon.component.ts b/src/modules/radio/radio-icon.component.ts index 1820c999f..2c6ac5b6f 100644 --- a/src/modules/radio/radio-icon.component.ts +++ b/src/modules/radio/radio-icon.component.ts @@ -8,17 +8,21 @@ import { } from './radio.component'; import { NG_VALUE_ACCESSOR } from '../../../node_modules/@angular/forms'; +/** + * Provider Expression that allows sky-checkbox to register as a ControlValueAccessor. + * This allows it to support [(ngModel)]. + */ +// tslint:disable:no-forward-ref no-use-before-declare export const SKY_RADIO_ICON_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - // tslint:disable-next-line:no-forward-ref useExisting: forwardRef(() => SkyRadioIconComponent), multi: true }; +// tslint:enable @Component({ selector: 'sky-radio-icon', templateUrl: './radio-icon.component.html', - styleUrls: ['./radio-icon.component.scss'], providers: [SKY_RADIO_ICON_CONTROL_VALUE_ACCESSOR] }) export class SkyRadioIconComponent extends SkyRadioComponent { diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index d9253acda..cec47c8df 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -134,6 +134,13 @@ fieldset { align-items: center; justify-content: center; + &.sky-switch-control-icon { + width: 36px; + height: 36px; + flex: 1 0 36px; + font-size: 18px; + } + &::before { content: ''; } From 44b19ffa7379a5c243b5ba06ff00eed4a37c6ade Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 10 Aug 2018 11:14:29 -0400 Subject: [PATCH 05/21] added fixed radio icon comp import --- src/modules/radio/radio-icon.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/modules/radio/radio-icon.component.ts b/src/modules/radio/radio-icon.component.ts index 2c6ac5b6f..519f1dad0 100644 --- a/src/modules/radio/radio-icon.component.ts +++ b/src/modules/radio/radio-icon.component.ts @@ -3,10 +3,13 @@ import { Input, forwardRef } from '@angular/core'; +import { + NG_VALUE_ACCESSOR +} from '@angular/forms'; + import { SkyRadioComponent } from './radio.component'; -import { NG_VALUE_ACCESSOR } from '../../../node_modules/@angular/forms'; /** * Provider Expression that allows sky-checkbox to register as a ControlValueAccessor. From fb2c56a103f4ab7053968f3bf3ec5d1612f53c9b Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 10 Aug 2018 16:08:49 -0400 Subject: [PATCH 06/21] added labels to the visual tests --- .../src/app/checkbox/checkbox-visual.component.html | 10 ++++++++++ .../src/app/radio/radio-visual.component.html | 3 +++ 2 files changed, 13 insertions(+) diff --git a/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html b/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html index dcdf1e594..f40cb8aa3 100644 --- a/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html +++ b/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html @@ -9,50 +9,60 @@
diff --git a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html index 8d49408ed..d55f3e94f 100644 --- a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html +++ b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html @@ -29,6 +29,7 @@
  • Date: Tue, 14 Aug 2018 13:33:41 -0400 Subject: [PATCH 07/21] override max width --- src/scss/_forms.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 54a511232..57cd7844a 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -136,7 +136,8 @@ fieldset { justify-content: center; &.sky-switch-control-icon { - width: 36px; + max-width: none; + width: 36px; height: 36px; flex: 1 0 36px; font-size: 18px; From 4b4f96fe6703dfa20c5b05a53f0c86300786ac96 Mon Sep 17 00:00:00 2001 From: Blackbaud-ToddRoberts Date: Wed, 15 Aug 2018 09:07:37 -0400 Subject: [PATCH 08/21] add css to handle grouped icon buttons --- src/scss/_forms.scss | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 57cd7844a..5b8baf556 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -153,3 +153,23 @@ fieldset { flex: 1 1 auto; width: 100%; } + +.sky-switch-icon-group{ + display: flex; + + .sky-switch-control-icon { + margin-left: 0; + margin-right: 0; + border-radius: 0; + } + + sky-radio-icon:first-of-type .sky-switch-control, sky-checkbox-icon:first-of-type .sky-switch-control { + border-top-left-radius: $sky-border-radius; + border-bottom-left-radius: $sky-border-radius; + } + + sky-radio-icon:last-of-type .sky-switch-control, sky-checkbox-icon:last-of-type .sky-switch-control { + border-top-right-radius: $sky-border-radius; + border-bottom-right-radius: $sky-border-radius; + } +} \ No newline at end of file From d41db8799d3081fc2d1d2c987ce54432e6d21d6e Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 15 Aug 2018 14:49:31 -0400 Subject: [PATCH 09/21] added group examples. Addressed comments --- .../checkbox/checkbox-demo.component.html | 18 ++++- src/demos/checkbox/checkbox-demo.component.ts | 34 ++++++-- src/demos/radio/radio-demo.component.html | 80 +++++++++++++++---- src/demos/radio/radio-demo.component.ts | 3 +- .../checkbox/checkbox-icon.component.html | 1 - .../checkbox/checkbox-icon.component.spec.ts | 2 +- .../checkbox/checkbox-icon.component.ts | 5 +- src/modules/checkbox/checkbox.component.html | 1 - .../radio/radio-icon.component.spec.ts | 2 +- 9 files changed, 116 insertions(+), 30 deletions(-) diff --git a/src/demos/checkbox/checkbox-demo.component.html b/src/demos/checkbox/checkbox-demo.component.html index 54b34f528..50a139230 100644 --- a/src/demos/checkbox/checkbox-demo.component.html +++ b/src/demos/checkbox/checkbox-demo.component.html @@ -15,14 +15,28 @@

    - Icon checkboxes + Icon checkbox group +

    + +
      +
    • + + +
      • +
    + +

    + Icon checkbox types

    • diff --git a/src/demos/checkbox/checkbox-demo.component.ts b/src/demos/checkbox/checkbox-demo.component.ts index 20f011312..da296791c 100644 --- a/src/demos/checkbox/checkbox-demo.component.ts +++ b/src/demos/checkbox/checkbox-demo.component.ts @@ -25,32 +25,50 @@ export class SkyCheckboxDemoComponent { disabled: true } ]; - public iconCheckboxItems = [ + public iconCheckboxGroup = [ { - label: 'Icon checkbox 1', - checked: false, + label: 'Bold', + checked: true, icon: 'bold' }, { - label: 'Icon checkbox 2', + label: 'Italic', + checked: false, + icon: 'italic' + }, + { + label: 'Underline', checked: true, - icon: 'umbrella' + icon: 'underline' }, { - label: 'Success icon checkbox', + label: 'Strikethrough', checked: false, + disabled: true, + icon: 'strikethrough' + } + ]; + public iconCheckboxItems = [ + { + label: 'Info icon checkbox 1', + checked: true, + icon: 'info' + }, + { + label: 'Success icon checkbox', + checked: true, icon: 'star', checkboxType: 'success' }, { label: 'Warning icon checkbox', - checked: false, + checked: true, icon: 'exclamation-triangle', checkboxType: 'warning' }, { label: 'Danger icon checkbox', - checked: false, + checked: true, icon: 'ban', checkboxType: 'danger' } diff --git a/src/demos/radio/radio-demo.component.html b/src/demos/radio/radio-demo.component.html index 29e3913e7..93e441825 100644 --- a/src/demos/radio/radio-demo.component.html +++ b/src/demos/radio/radio-demo.component.html @@ -47,36 +47,88 @@

      - Icon radio buttons + Icon radio button group +

      + +
        +
      • + + +
        • +
      • + + +
        • +
      • + + +
        • +
      • + + +
        • +
      + +

      + Selected option: {{ iconGroupSelectedValue }} +

      + +

      + Icon radio button types

      • + radioType="info" + value="info" + [(ngModel)]="iconSelectedValue">
      • + radioType="success" + value="success" + [(ngModel)]="iconSelectedValue">
      • + radioType="warning" + value="warning" + [(ngModel)]="iconSelectedValue"> + +
        • +
      • +
      diff --git a/src/demos/radio/radio-demo.component.ts b/src/demos/radio/radio-demo.component.ts index 5413e27ea..59fc11ae0 100644 --- a/src/demos/radio/radio-demo.component.ts +++ b/src/demos/radio/radio-demo.component.ts @@ -6,6 +6,7 @@ import { Component } from '@angular/core'; }) export class SkyRadioDemoComponent { public selectedValue = '3'; - public iconSelectedValue = '2'; + public iconSelectedValue = 'info'; + public iconGroupSelectedValue = 'table'; public valueGuy = '2'; } diff --git a/src/modules/checkbox/checkbox-icon.component.html b/src/modules/checkbox/checkbox-icon.component.html index a82b772dd..b144e5ba1 100644 --- a/src/modules/checkbox/checkbox-icon.component.html +++ b/src/modules/checkbox/checkbox-icon.component.html @@ -22,7 +22,6 @@ 'sky-switch-control-danger': checkboxType === 'danger' }"> diff --git a/src/modules/checkbox/checkbox-icon.component.spec.ts b/src/modules/checkbox/checkbox-icon.component.spec.ts index 3a5e7edb9..db1c7c792 100644 --- a/src/modules/checkbox/checkbox-icon.component.spec.ts +++ b/src/modules/checkbox/checkbox-icon.component.spec.ts @@ -38,7 +38,7 @@ class SingleCheckboxComponent { public checkboxType: string; } -describe('Icon checkbox component', () => { +describe('Checkbox icon component', () => { let fixture: ComponentFixture; let debugElement: DebugElement; diff --git a/src/modules/checkbox/checkbox-icon.component.ts b/src/modules/checkbox/checkbox-icon.component.ts index f122e5d66..df8f69cb8 100644 --- a/src/modules/checkbox/checkbox-icon.component.ts +++ b/src/modules/checkbox/checkbox-icon.component.ts @@ -21,6 +21,7 @@ export const SKY_CHECKBOX_ICON_CONTROL_VALUE_ACCESSOR: any = { useExisting: forwardRef(() => SkyCheckboxIconComponent), multi: true }; +// tslint:enable @Component({ selector: 'sky-checkbox-icon', @@ -36,7 +37,9 @@ export class SkyCheckboxIconComponent extends SkyCheckboxComponent { return this._checkboxType || 'info'; } public set checkboxType(value: string) { - this._checkboxType = value; + if (value) { + this._checkboxType = value.toLowerCase(); + } } private _checkboxType: string; diff --git a/src/modules/checkbox/checkbox.component.html b/src/modules/checkbox/checkbox.component.html index 5be612f3b..a7f4398d9 100644 --- a/src/modules/checkbox/checkbox.component.html +++ b/src/modules/checkbox/checkbox.component.html @@ -17,7 +17,6 @@ class="sky-switch-control sky-rounded-corners"> diff --git a/src/modules/radio/radio-icon.component.spec.ts b/src/modules/radio/radio-icon.component.spec.ts index 72152e318..81616239b 100644 --- a/src/modules/radio/radio-icon.component.spec.ts +++ b/src/modules/radio/radio-icon.component.spec.ts @@ -38,7 +38,7 @@ class SingleRadioComponent { public radioType: string; } -describe('Icon radio component', () => { +describe('Radio icon component', () => { let fixture: ComponentFixture; let debugElement: DebugElement; From 8ba39895fbb9690ad1da96669a6dc079a3fe050b Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 15 Aug 2018 14:57:04 -0400 Subject: [PATCH 10/21] fixed scss spacing --- src/scss/_forms.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 5b8baf556..426334e6e 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -156,20 +156,20 @@ fieldset { .sky-switch-icon-group{ display: flex; - + .sky-switch-control-icon { - margin-left: 0; - margin-right: 0; - border-radius: 0; + margin-left: 0; + margin-right: 0; + border-radius: 0; } - + sky-radio-icon:first-of-type .sky-switch-control, sky-checkbox-icon:first-of-type .sky-switch-control { border-top-left-radius: $sky-border-radius; border-bottom-left-radius: $sky-border-radius; } - + sky-radio-icon:last-of-type .sky-switch-control, sky-checkbox-icon:last-of-type .sky-switch-control { border-top-right-radius: $sky-border-radius; border-bottom-right-radius: $sky-border-radius; } -} \ No newline at end of file +} From 6674ff876c2816babe571498638e9472eb92fef9 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 15 Aug 2018 15:27:04 -0400 Subject: [PATCH 11/21] fixed spacing issue --- src/scss/_forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 426334e6e..2a7e186bf 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -154,7 +154,7 @@ fieldset { width: 100%; } -.sky-switch-icon-group{ +.sky-switch-icon-group { display: flex; .sky-switch-control-icon { From b3d26592535765979a5361dff4663b92fe18d821 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Thu, 16 Aug 2018 09:35:16 -0400 Subject: [PATCH 12/21] updated demos to have switch group displays --- .../checkbox/checkbox-demo.component.html | 36 +++++---- src/demos/radio/radio-demo.component.html | 74 ++++++++----------- 2 files changed, 46 insertions(+), 64 deletions(-) diff --git a/src/demos/checkbox/checkbox-demo.component.html b/src/demos/checkbox/checkbox-demo.component.html index 50a139230..422190d40 100644 --- a/src/demos/checkbox/checkbox-demo.component.html +++ b/src/demos/checkbox/checkbox-demo.component.html @@ -18,27 +18,25 @@

      Icon checkbox group

      -
        -
      • - - -
        • -
      +
      + + +

      Icon checkbox types

      -
        -
      • - - -
        • -
      +
      + + +
      diff --git a/src/demos/radio/radio-demo.component.html b/src/demos/radio/radio-demo.component.html index 93e441825..d8ec5ff0c 100644 --- a/src/demos/radio/radio-demo.component.html +++ b/src/demos/radio/radio-demo.component.html @@ -50,41 +50,33 @@

      Icon radio button group

      -
        -
      • - - -
        • -
      • - - -
        • -
      • - - -
        • -
      • - - -
        • -
      +
      + + + + + + + + +

      Selected option: {{ iconGroupSelectedValue }} @@ -94,8 +86,7 @@

      Icon radio button types

      -
        -
      • +
        value="info" [(ngModel)]="iconSelectedValue"> -
        • -
      • value="success" [(ngModel)]="iconSelectedValue"> -
        • -
      • value="warning" [(ngModel)]="iconSelectedValue"> -
        • -
      • value="danger" [(ngModel)]="iconSelectedValue"> -
        • -
      +

      Selected option: {{ iconSelectedValue }} From 0a92fdb6bb932fe527c461c032de130b6b2a2fd1 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 17 Aug 2018 14:15:25 -0400 Subject: [PATCH 13/21] updated width of buttons. Moved disabled demo. Updated list-toolbar demo --- .../checkbox/checkbox-demo.component.html | 16 ++-- src/demos/checkbox/checkbox-demo.component.ts | 12 +-- .../list-toolbar-demo.component.html | 32 ++++++-- .../list-toolbar-demo.component.ts | 1 + src/demos/radio/radio-demo.component.html | 79 ++++++++++--------- src/scss/_forms.scss | 6 +- 6 files changed, 87 insertions(+), 59 deletions(-) diff --git a/src/demos/checkbox/checkbox-demo.component.html b/src/demos/checkbox/checkbox-demo.component.html index 422190d40..c767fc572 100644 --- a/src/demos/checkbox/checkbox-demo.component.html +++ b/src/demos/checkbox/checkbox-demo.component.html @@ -15,28 +15,28 @@

    - Icon checkbox group + Icon checkbox types

    -
    +

    - Icon checkbox types + Icon checkbox group

    -
    +
    diff --git a/src/demos/checkbox/checkbox-demo.component.ts b/src/demos/checkbox/checkbox-demo.component.ts index da296791c..589220d67 100644 --- a/src/demos/checkbox/checkbox-demo.component.ts +++ b/src/demos/checkbox/checkbox-demo.component.ts @@ -40,12 +40,6 @@ export class SkyCheckboxDemoComponent { label: 'Underline', checked: true, icon: 'underline' - }, - { - label: 'Strikethrough', - checked: false, - disabled: true, - icon: 'strikethrough' } ]; public iconCheckboxItems = [ @@ -54,6 +48,12 @@ export class SkyCheckboxDemoComponent { checked: true, icon: 'info' }, + { + label: 'Disabled info icon checkbox 1', + checked: true, + disabled: true, + icon: 'strikethrough' + }, { label: 'Success icon checkbox', checked: true, diff --git a/src/demos/list-toolbar/list-toolbar-demo.component.html b/src/demos/list-toolbar/list-toolbar-demo.component.html index 0db8b35eb..fc98ebbbd 100644 --- a/src/demos/list-toolbar/list-toolbar-demo.component.html +++ b/src/demos/list-toolbar/list-toolbar-demo.component.html @@ -63,12 +63,32 @@ - +
    + + + + + + + + +
    diff --git a/src/demos/list-toolbar/list-toolbar-demo.component.ts b/src/demos/list-toolbar/list-toolbar-demo.component.ts index 920d66028..de86fe479 100644 --- a/src/demos/list-toolbar/list-toolbar-demo.component.ts +++ b/src/demos/list-toolbar/list-toolbar-demo.component.ts @@ -7,6 +7,7 @@ import 'rxjs/add/observable/of'; templateUrl: './list-toolbar-demo.component.html' }) export class SkyListToolbarDemoComponent { + public iconGroupSelectedValue = 'table'; public items = Observable.of([ { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples' }, { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' }, diff --git a/src/demos/radio/radio-demo.component.html b/src/demos/radio/radio-demo.component.html index d8ec5ff0c..034a9eebd 100644 --- a/src/demos/radio/radio-demo.component.html +++ b/src/demos/radio/radio-demo.component.html @@ -46,42 +46,6 @@

    Selected option: {{ selectedValue }}

    -

    - Icon radio button group -

    - -
    - - - - - - - - -
    - -

    - Selected option: {{ iconGroupSelectedValue }} -

    -

    Icon radio button types

    @@ -94,6 +58,14 @@

    value="info" [(ngModel)]="iconSelectedValue"> + +

    Selected option: {{ iconSelectedValue }}

    + +

    + Icon radio button group +

    + +
    + + + + + + + + +
    + +

    + Selected option: {{ iconGroupSelectedValue }} +

    diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 2a7e186bf..6cb034126 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -137,9 +137,9 @@ fieldset { &.sky-switch-control-icon { max-width: none; - width: 36px; - height: 36px; - flex: 1 0 36px; + width: 35px; + height: 35px; + flex: 1 0 35px; font-size: 18px; } From c82d3a1d02f3643966c5a17eb929dcd5c1b7cba6 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 17 Aug 2018 14:53:56 -0400 Subject: [PATCH 14/21] removed radio-icon html file --- src/modules/icon/icon.component.scss | 6 ++++ src/modules/radio/radio-icon.component.html | 33 --------------------- src/modules/radio/radio-icon.component.ts | 2 +- src/modules/radio/radio.component.html | 27 +++++++++++------ src/modules/radio/radio.component.scss | 2 +- 5 files changed, 26 insertions(+), 44 deletions(-) create mode 100644 src/modules/icon/icon.component.scss delete mode 100644 src/modules/radio/radio-icon.component.html diff --git a/src/modules/icon/icon.component.scss b/src/modules/icon/icon.component.scss new file mode 100644 index 000000000..c884e486a --- /dev/null +++ b/src/modules/icon/icon.component.scss @@ -0,0 +1,6 @@ +:host() { + display: inline-block; +} +i { + display: inherit; +} diff --git a/src/modules/radio/radio-icon.component.html b/src/modules/radio/radio-icon.component.html deleted file mode 100644 index b761a3e1c..000000000 --- a/src/modules/radio/radio-icon.component.html +++ /dev/null @@ -1,33 +0,0 @@ - diff --git a/src/modules/radio/radio-icon.component.ts b/src/modules/radio/radio-icon.component.ts index 519f1dad0..1719da5e6 100644 --- a/src/modules/radio/radio-icon.component.ts +++ b/src/modules/radio/radio-icon.component.ts @@ -25,7 +25,7 @@ export const SKY_RADIO_ICON_CONTROL_VALUE_ACCESSOR: any = { @Component({ selector: 'sky-radio-icon', - templateUrl: './radio-icon.component.html', + templateUrl: './radio.component.html', providers: [SKY_RADIO_ICON_CONTROL_VALUE_ACCESSOR] }) export class SkyRadioIconComponent extends SkyRadioComponent { diff --git a/src/modules/radio/radio.component.html b/src/modules/radio/radio.component.html index c9d81725f..830190b17 100644 --- a/src/modules/radio/radio.component.html +++ b/src/modules/radio/radio.component.html @@ -1,7 +1,6 @@

    ` + }) + class SingleRadioComponent { + public icon: string = 'bold'; + public radioType: string; + } + + let fixture: ComponentFixture; + let componentInstance: any; beforeEach(function () { TestBed.configureTestingModule({ imports: [ @@ -80,161 +105,217 @@ describe('Radio component', function () { FormsModule ], declarations: [ - RadioTestComponent + RadioTestComponent, + SingleRadioComponent ] }); }); - beforeEach(fakeAsync(function () { - fixture = TestBed.createComponent(RadioTestComponent); + describe('Standard radio component', () => { + beforeEach(fakeAsync(function () { + fixture = TestBed.createComponent(RadioTestComponent); - fixture.detectChanges(); - tick(); - componentInstance = fixture.componentInstance; - })); + fixture.detectChanges(); + tick(); + componentInstance = fixture.componentInstance; + })); - function createEvent(eventName: string) { - let evt = document.createEvent('CustomEvent'); - evt.initEvent(eventName, false, false); - return evt; - } + function createEvent(eventName: string) { + let evt = document.createEvent('CustomEvent'); + evt.initEvent(eventName, false, false); + return evt; + } - it('should update the ngModel properly when radio button is changed', fakeAsync(function () { - let radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[0]; - let ngModel = radioElement.injector.get(NgModel); - let radio2El = fixture.debugElement.query(By.css('#hey .sky-radio-wrapper')); + it('should update the ngModel properly when radio button is changed', fakeAsync(function () { + let radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[0]; + let ngModel = radioElement.injector.get(NgModel); + let radio2El = fixture.debugElement.query(By.css('#hey .sky-radio-wrapper')); - expect(ngModel.valid).toBe(true); - expect(ngModel.pristine).toBe(true); - expect(ngModel.touched).toBe(false); + expect(ngModel.valid).toBe(true); + expect(ngModel.pristine).toBe(true); + expect(ngModel.touched).toBe(false); - radio2El.nativeElement.click(); + radio2El.nativeElement.click(); - fixture.detectChanges(); - tick(); + fixture.detectChanges(); + tick(); - expect(ngModel.valid).toBe(true); - expect(ngModel.pristine).toBe(false); - expect(ngModel.touched).toBe(false); - expect(radio2El.query(By.css('input')).nativeElement.checked).toBe(true); - expect(componentInstance.selectedValue).toBe('2'); + expect(ngModel.valid).toBe(true); + expect(ngModel.pristine).toBe(false); + expect(ngModel.touched).toBe(false); + expect(radio2El.query(By.css('input')).nativeElement.checked).toBe(true); + expect(componentInstance.selectedValue).toBe('2'); - radio2El.query(By.css('input')).nativeElement.dispatchEvent(createEvent('blur')); - expect(ngModel.touched).toBe(true); - })); + radio2El.query(By.css('input')).nativeElement.dispatchEvent(createEvent('blur')); + expect(ngModel.touched).toBe(true); + })); - it('should update the radio buttons properly when ngModel is changed', fakeAsync(function () { - componentInstance.selectedValue = '2'; + it('should update the radio buttons properly when ngModel is changed', fakeAsync(function () { + componentInstance.selectedValue = '2'; - fixture.detectChanges(); - tick(); - fixture.detectChanges(); - tick(); + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + tick(); - let radio2El = fixture.debugElement.query(By.css('#hey input')); - expect(radio2El.nativeElement.checked).toBe(true); - })); + let radio2El = fixture.debugElement.query(By.css('#hey input')); + expect(radio2El.nativeElement.checked).toBe(true); + })); - it('should handle disabled state properly', fakeAsync(function () { - componentInstance.disabled2 = true; - fixture.detectChanges(); - tick(); + it('should handle disabled state properly', fakeAsync(function () { + componentInstance.disabled2 = true; + fixture.detectChanges(); + tick(); - let radio2El = fixture.debugElement.query(By.css('#hey .sky-radio-wrapper')); + let radio2El = fixture.debugElement.query(By.css('#hey .sky-radio-wrapper')); - radio2El.nativeElement.click(); + radio2El.nativeElement.click(); - fixture.detectChanges(); - tick(); - expect(radio2El.query(By.css('input')).nativeElement.checked).toBe(false); - expect(componentInstance.selectedValue).toBe('1'); + fixture.detectChanges(); + tick(); + expect(radio2El.query(By.css('input')).nativeElement.checked).toBe(false); + expect(componentInstance.selectedValue).toBe('1'); - componentInstance.disabled2 = false; - fixture.detectChanges(); - tick(); + componentInstance.disabled2 = false; + fixture.detectChanges(); + tick(); - radio2El.nativeElement.click(); + radio2El.nativeElement.click(); - fixture.detectChanges(); - tick(); - expect(radio2El.query(By.css('input')).nativeElement.checked).toBe(true); - expect(componentInstance.selectedValue).toBe('2'); + fixture.detectChanges(); + tick(); + expect(radio2El.query(By.css('input')).nativeElement.checked).toBe(true); + expect(componentInstance.selectedValue).toBe('2'); - })); + })); - it('should pass a label when specified', fakeAsync(function () { - componentInstance.label1 = 'My label'; + it('should pass a label when specified', fakeAsync(function () { + componentInstance.label1 = 'My label'; - fixture.detectChanges(); - tick(); + fixture.detectChanges(); + tick(); - let radio1El = fixture.debugElement.query(By.css('#hey-2 input')); - expect(radio1El.nativeElement.getAttribute('aria-label')).toBe('My label'); - })); + let radio1El = fixture.debugElement.query(By.css('#hey-2 input')); + expect(radio1El.nativeElement.getAttribute('aria-label')).toBe('My label'); + })); - it('should pass a labelled by id properly when specified', fakeAsync(function () { - componentInstance.labelledBy3 = 'label-id'; + it('should pass a labelled by id properly when specified', fakeAsync(function () { + componentInstance.labelledBy3 = 'label-id'; - fixture.detectChanges(); - tick(); + fixture.detectChanges(); + tick(); - let radio1El = fixture.debugElement.query(By.css('#hey-3 input')); - expect(radio1El.nativeElement.getAttribute('aria-labelledby')).toBe('label-id'); - })); + let radio1El = fixture.debugElement.query(By.css('#hey-3 input')); + expect(radio1El.nativeElement.getAttribute('aria-labelledby')).toBe('label-id'); + })); - it('should pass a tabindex when specified', fakeAsync(function () { - componentInstance.tabindex2 = '3'; + it('should pass a tabindex when specified', fakeAsync(function () { + componentInstance.tabindex2 = '3'; - fixture.detectChanges(); - tick(); + fixture.detectChanges(); + tick(); - let radio1El = fixture.debugElement.query(By.css('#hey input')); - expect(radio1El.nativeElement.getAttribute('tabindex')).toBe('3'); - })); + let radio1El = fixture.debugElement.query(By.css('#hey input')); + expect(radio1El.nativeElement.getAttribute('tabindex')).toBe('3'); + })); - it('should not change the selected value if input is disabled', fakeAsync(() => { - const radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[2]; - const radioComponent = radioElement.componentInstance; + it('should not change the selected value if input is disabled', fakeAsync(() => { + const radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[2]; + const radioComponent = radioElement.componentInstance; - radioComponent.selectedValue = 'foo'; - radioComponent.disabled = true; - radioComponent.onRadioChanged('bar'); + radioComponent.selectedValue = 'foo'; + radioComponent.disabled = true; + radioComponent.onRadioChanged('bar'); - expect(radioComponent.selectedValue).toEqual('foo'); - })); + expect(radioComponent.selectedValue).toEqual('foo'); + })); - it('should not change the selected value if the new value is the same', fakeAsync(() => { - const radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[2]; - const radioComponent = radioElement.componentInstance; + it('should not change the selected value if the new value is the same', fakeAsync(() => { + const radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[2]; + const radioComponent = radioElement.componentInstance; - radioComponent.selectedValue = 'foo'; - radioComponent.disabled = false; - radioComponent.onRadioChanged('foo'); + radioComponent.selectedValue = 'foo'; + radioComponent.disabled = false; + radioComponent.onRadioChanged('foo'); - expect(radioComponent.selectedValue).toEqual('foo'); - })); + expect(radioComponent.selectedValue).toEqual('foo'); + })); - it('should not change the selected value if the new value is undefined', fakeAsync(() => { - const radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[2]; - const radioComponent = radioElement.componentInstance; + it('should not change the selected value if the new value is undefined', fakeAsync(() => { + const radioElement = fixture.debugElement.queryAll(By.directive(SkyRadioComponent))[2]; + const radioComponent = radioElement.componentInstance; - radioComponent.selectedValue = 'foo'; - radioComponent.writeValue(undefined); + radioComponent.selectedValue = 'foo'; + radioComponent.writeValue(undefined); - expect(radioComponent.selectedValue).toEqual('foo'); - })); + expect(radioComponent.selectedValue).toEqual('foo'); + })); - it('should prevent click events on the label from bubbling to parents', async(() => { - let radioLabelElement = fixture.debugElement - .query(By.css('#radio-clickable')) - .query(By.directive(SkyRadioLabelComponent)); + it('should prevent click events on the label from bubbling to parents', async(() => { + let radioLabelElement = fixture.debugElement + .query(By.css('#radio-clickable')) + .query(By.directive(SkyRadioLabelComponent)); - spyOn(componentInstance, 'onClick'); - spyOn(radioLabelElement.componentInstance, 'onClick').and.callThrough(); + spyOn(componentInstance, 'onClick'); + spyOn(radioLabelElement.componentInstance, 'onClick').and.callThrough(); - radioLabelElement.nativeElement.click(); + radioLabelElement.nativeElement.click(); + + expect((componentInstance.onClick as any).calls.count()).toEqual(1); + expect(radioLabelElement.componentInstance.onClick).toHaveBeenCalled(); + })); + }); - expect((componentInstance.onClick as any).calls.count()).toEqual(1); - expect(radioLabelElement.componentInstance.onClick).toHaveBeenCalled(); - })); + describe('Radio icon component', () => { + let debugElement: DebugElement; + + beforeEach(() => { + fixture = TestBed.createComponent(SingleRadioComponent); + debugElement = fixture.debugElement; + }); + + it('should set icon based on input', () => { + fixture.detectChanges(); + + let radioIcon = debugElement.query(By.css('i')).nativeElement; + expect(radioIcon).toHaveCssClass('fa-bold'); + + fixture.componentInstance.icon = 'umbrella'; + fixture.detectChanges(); + + radioIcon = debugElement.query(By.css('i')).nativeElement; + expect(radioIcon).toHaveCssClass('fa-umbrella'); + }); + + it('should set span class based on radio type input', () => { + fixture.detectChanges(); + + let span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-info'); + + fixture.componentInstance.radioType = 'info'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-info'); + + fixture.componentInstance.radioType = 'success'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-success'); + + fixture.componentInstance.radioType = 'warning'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-warning'); + + fixture.componentInstance.radioType = 'danger'; + fixture.detectChanges(); + + span = debugElement.query(By.css('span')).nativeElement; + expect(span).toHaveCssClass('sky-switch-control-danger'); + }); + }); }); diff --git a/src/modules/radio/radio.component.ts b/src/modules/radio/radio.component.ts index 381cb4eef..ed296f9c6 100644 --- a/src/modules/radio/radio.component.ts +++ b/src/modules/radio/radio.component.ts @@ -57,11 +57,26 @@ export class SkyRadioComponent implements ControlValueAccessor { @Input() public value: any; + @Input() + public icon: string; + + @Input() + public get radioType(): string { + return this._radioType || 'info'; + } + public set radioType(value: string) { + if (value) { + this._radioType = value.toLowerCase(); + } + } + public get inputId(): string { return `input-${this.id}`; } public selectedValue: any; + + private _radioType: string; private onChangeCallback: (value: any) => void; public onInputBlur() { diff --git a/src/modules/radio/radio.module.ts b/src/modules/radio/radio.module.ts index 5eab67f0e..4f66d6e70 100644 --- a/src/modules/radio/radio.module.ts +++ b/src/modules/radio/radio.module.ts @@ -4,13 +4,11 @@ import { FormsModule } from '@angular/forms'; import { SkyRadioComponent } from './radio.component'; import { SkyRadioLabelComponent } from './radio-label.component'; -import { SkyRadioIconComponent } from './radio-icon.component'; import { SkyIconModule } from '../icon'; @NgModule({ declarations: [ SkyRadioComponent, - SkyRadioIconComponent, SkyRadioLabelComponent ], imports: [ @@ -20,7 +18,6 @@ import { SkyIconModule } from '../icon'; ], exports: [ SkyRadioComponent, - SkyRadioIconComponent, SkyRadioLabelComponent ] }) diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 6cb034126..5a433fd70 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -163,12 +163,12 @@ fieldset { border-radius: 0; } - sky-radio-icon:first-of-type .sky-switch-control, sky-checkbox-icon:first-of-type .sky-switch-control { + sky-radio:first-of-type .sky-switch-control-icon, sky-checkbox:first-of-type .sky-switch-control-icon { border-top-left-radius: $sky-border-radius; border-bottom-left-radius: $sky-border-radius; } - sky-radio-icon:last-of-type .sky-switch-control, sky-checkbox-icon:last-of-type .sky-switch-control { + sky-radio:last-of-type .sky-switch-control-icon, sky-checkbox:last-of-type .sky-switch-control-icon { border-top-right-radius: $sky-border-radius; border-bottom-right-radius: $sky-border-radius; } From 54e7e891a109a02883dbe410966ee7b33991f619 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 17 Aug 2018 16:33:15 -0400 Subject: [PATCH 17/21] minor ts lint fix --- src/modules/radio/radio.component.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/modules/radio/radio.component.spec.ts b/src/modules/radio/radio.component.spec.ts index c0600b536..4c4e1ebf6 100644 --- a/src/modules/radio/radio.component.spec.ts +++ b/src/modules/radio/radio.component.spec.ts @@ -14,8 +14,7 @@ import { NgModel } from '@angular/forms'; import { - By, - BrowserModule + By } from '@angular/platform-browser'; import { From bc35a2d4d0858de7e47518045cc7bdbd8bcbc6f7 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Tue, 28 Aug 2018 15:25:02 -0400 Subject: [PATCH 18/21] updated skyux theme and made it take all minor revisions --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f5193b23f..3f2421093 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "wdio": "wdio" }, "dependencies": { - "@skyux/theme": "3.0.0", + "@skyux/theme": "^3.1.0", "dragula": "3.7.2", "intl": "1.2.5", "microedge-rxstate": "2.0.2", From cc92df76418bb295e8b94e04cf989d25e0c4f2f9 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Tue, 28 Aug 2018 17:47:38 -0400 Subject: [PATCH 19/21] Change theme dependency to use exact version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3f2421093..91c41d916 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "wdio": "wdio" }, "dependencies": { - "@skyux/theme": "^3.1.0", + "@skyux/theme": "3.1.0", "dragula": "3.7.2", "intl": "1.2.5", "microedge-rxstate": "2.0.2", From 28560a9b84d99ebaee1d26b4aba1ff3058817dc2 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 29 Aug 2018 10:26:53 -0400 Subject: [PATCH 20/21] added theme dependency to visual tests --- skyux-spa-visual-tests/package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/skyux-spa-visual-tests/package.json b/skyux-spa-visual-tests/package.json index 57d3c01fc..cdc3c4f1d 100644 --- a/skyux-spa-visual-tests/package.json +++ b/skyux-spa-visual-tests/package.json @@ -21,8 +21,9 @@ "devDependencies": { "@blackbaud/skyux": "latest", "@blackbaud/skyux-builder": "1.13.0", - "pix-diff": "2.0.0", - "browserstack-local": "1.3.0" + "@skyux/theme": "3.1.0", + "browserstack-local": "1.3.0", + "pix-diff": "2.0.0" }, "peerDependencies": { "http-server": "^0.10.0", From 7a209e92575e9673c576fc8646a09f7f813e6b3d Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 29 Aug 2018 13:14:08 -0400 Subject: [PATCH 21/21] fixed visual tests for icon switches --- .../checkbox/checkbox-visual.component.html | 40 +++++++++---------- .../src/app/checkbox/checkbox.visual-spec.ts | 2 +- .../src/app/radio/radio-visual.component.html | 26 +++++++----- .../src/app/radio/radio.visual-spec.ts | 2 +- 4 files changed, 37 insertions(+), 33 deletions(-) diff --git a/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html b/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html index f40cb8aa3..7f9ff31d1 100644 --- a/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html +++ b/skyux-spa-visual-tests/src/app/checkbox/checkbox-visual.component.html @@ -7,62 +7,62 @@
    - - - + - - + - - + - - + - - + - - + - - + - - + - - + - +
    diff --git a/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts b/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts index 7e5316049..9b1bbe611 100644 --- a/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/checkbox/checkbox.visual-spec.ts @@ -16,7 +16,7 @@ describe('Checkbox', () => { return SkyVisualTest.setupTest('checkbox') .then(() => { return SkyVisualTest.compareScreenshot({ - screenshotName: 'icon-checkbox', + screenshotName: 'checkbox-icon', selector: '#screenshot-icon-checkbox' }); }); diff --git a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html index d55f3e94f..142910262 100644 --- a/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html +++ b/skyux-spa-visual-tests/src/app/radio/radio-visual.component.html @@ -9,10 +9,11 @@
    + > Option 2
    @@ -27,35 +28,38 @@
    • - - + #cb="ngModel" + > +
    • - - + (ngModelChange)="iconSelectedValue = $event" + > +
    • - - + (ngModelChange)="iconSelectedValue = $event" + > +
    diff --git a/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts b/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts index f78aae60d..73108d617 100644 --- a/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts +++ b/skyux-spa-visual-tests/src/app/radio/radio.visual-spec.ts @@ -16,7 +16,7 @@ describe('Radio component', () => { return SkyVisualTest.setupTest('radio') .then(() => { return SkyVisualTest.compareScreenshot({ - screenshotName: 'icon-radio', + screenshotName: 'radio-icon', selector: '#screenshot-icon-radio' }); });