From 3f4222e5e42abf20d58844d4f089cb13846d8c56 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 7 Mar 2018 17:17:05 -0500 Subject: [PATCH 1/9] Resolving Card action bar still visable after hiding with *ngIf #1421 --- src/modules/card/card-actions.component.scss | 7 +++++++ src/modules/card/card-actions.component.ts | 1 + src/modules/card/card.component.scss | 2 -- 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/modules/card/card-actions.component.scss diff --git a/src/modules/card/card-actions.component.scss b/src/modules/card/card-actions.component.scss new file mode 100644 index 000000000..3027c1729 --- /dev/null +++ b/src/modules/card/card-actions.component.scss @@ -0,0 +1,7 @@ +@import "../../scss/mixins"; + +:host { + display: block; + @include sky-border(light, top); + padding: $sky-padding-3_4 0; +} \ No newline at end of file diff --git a/src/modules/card/card-actions.component.ts b/src/modules/card/card-actions.component.ts index aa955f173..7b6db7f03 100644 --- a/src/modules/card/card-actions.component.ts +++ b/src/modules/card/card-actions.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'sky-card-actions', + styleUrls: ['./card-actions.component.scss'], templateUrl: '../shared/simple-content.html' }) export class SkyCardActionsComponent { } diff --git a/src/modules/card/card.component.scss b/src/modules/card/card.component.scss index 21a48c63e..5d6759ed6 100644 --- a/src/modules/card/card.component.scss +++ b/src/modules/card/card.component.scss @@ -88,10 +88,8 @@ } .sky-card-actions { - @include sky-border(light, top); bottom: 0; flex-shrink: 0; - padding: $sky-padding-3_4 0; text-align: center; .sky-context-menu-btn { From a450054956bfa0efa21c71481ea49e9f82c22f08 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Thu, 8 Mar 2018 10:46:26 -0500 Subject: [PATCH 2/9] Addressed PR style comments --- src/modules/card/card-actions.component.scss | 8 ++++---- src/modules/card/card-actions.component.ts | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/modules/card/card-actions.component.scss b/src/modules/card/card-actions.component.scss index 3027c1729..402369a03 100644 --- a/src/modules/card/card-actions.component.scss +++ b/src/modules/card/card-actions.component.scss @@ -1,7 +1,7 @@ @import "../../scss/mixins"; :host { - display: block; - @include sky-border(light, top); - padding: $sky-padding-3_4 0; -} \ No newline at end of file + display: block; + @include sky-border(light, top); + padding: $sky-padding-3_4 0; +} diff --git a/src/modules/card/card-actions.component.ts b/src/modules/card/card-actions.component.ts index 7b6db7f03..e23730367 100644 --- a/src/modules/card/card-actions.component.ts +++ b/src/modules/card/card-actions.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'sky-card-actions', - styleUrls: ['./card-actions.component.scss'], - templateUrl: '../shared/simple-content.html' + templateUrl: '../shared/simple-content.html', + styleUrls: ['./card-actions.component.scss'] }) export class SkyCardActionsComponent { } From c5e5ca37b63972e7cf638cedfaba27e28e0ece84 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 25 Jun 2018 13:20:38 -0400 Subject: [PATCH 3/9] added missing aria labels to sky-repeater and tests --- .../repeater/repeater-item.component.html | 8 +++++++- .../repeater/repeater-item.component.ts | 3 +++ .../repeater/repeater.component.spec.ts | 19 +++++++++++++------ 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/modules/repeater/repeater-item.component.html b/src/modules/repeater/repeater-item.component.html index eb3d9369b..67e2e1b78 100644 --- a/src/modules/repeater/repeater-item.component.html +++ b/src/modules/repeater/repeater-item.component.html @@ -31,13 +31,19 @@

-
+
diff --git a/src/modules/repeater/repeater-item.component.ts b/src/modules/repeater/repeater-item.component.ts index f6e7727cf..7c23bf090 100644 --- a/src/modules/repeater/repeater-item.component.ts +++ b/src/modules/repeater/repeater-item.component.ts @@ -20,6 +20,8 @@ import { SkyRepeaterService } from './repeater.service'; +let nextId: number = 0; + @Component({ selector: 'sky-repeater-item', styleUrls: ['./repeater-item.component.scss'], @@ -27,6 +29,7 @@ import { animations: [skyAnimationSlide] }) export class SkyRepeaterItemComponent { + public contentId: string = `sky-radio-content-${++nextId}`; public get isExpanded(): boolean { return this._isExpanded; diff --git a/src/modules/repeater/repeater.component.spec.ts b/src/modules/repeater/repeater.component.spec.ts index 7acf2ab55..440009433 100644 --- a/src/modules/repeater/repeater.component.spec.ts +++ b/src/modules/repeater/repeater.component.spec.ts @@ -41,6 +41,17 @@ describe('Repeater item component', () => { }) ); + it('should have aria-control set pointed at content', fakeAsync(() => { + let fixture = TestBed.createComponent(RepeaterTestComponent); + let el = fixture.nativeElement; + + fixture.detectChanges(); + tick(); + + expect(el.querySelector('sky-chevron').getAttribute('aria-controls')) + .toBe(el.querySelector('.sky-repeater-item-content').getAttribute('id')); + })); + describe('with expand mode of "single"', () => { it('should collapse other items when an item is expanded', fakeAsync(() => { let fixture = TestBed.createComponent(RepeaterTestComponent); @@ -106,24 +117,20 @@ describe('Repeater item component', () => { let el = fixture.nativeElement; cmp.expandMode = 'single'; - fixture.detectChanges(); - tick(); let repeaterItems = cmp.repeater.items.toArray(); - expect(repeaterItems[0].isExpanded).toBe(true); + expect(el.querySelector('sky-chevron').getAttribute('aria-expanded')).toBe('true'); el.querySelectorAll('.sky-repeater-item-title').item(0).click(); - fixture.detectChanges(); - tick(); repeaterItems = cmp.repeater.items.toArray(); - expect(repeaterItems[0].isExpanded).toBe(false); + expect(el.querySelector('sky-chevron').getAttribute('aria-expanded')).toBe('false'); })); it('should toggle its collapsed state when an item\'s chevron is clicked', fakeAsync(() => { From cd451aeac3b1541d8c87adc8a7effac115853d9d Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Wed, 27 Jun 2018 14:37:29 -0400 Subject: [PATCH 4/9] swapped section role to be region --- src/modules/repeater/repeater-item.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/repeater/repeater-item.component.html b/src/modules/repeater/repeater-item.component.html index 67e2e1b78..4239e8312 100644 --- a/src/modules/repeater/repeater-item.component.html +++ b/src/modules/repeater/repeater-item.component.html @@ -42,7 +42,7 @@

From 1552f2aa14e01a4d99fae1c7514188d175535a77 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 30 Jul 2018 15:38:37 -0400 Subject: [PATCH 5/9] ignored blur on colorinput --- src/modules/colorpicker/colorpicker-input.directive.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/colorpicker/colorpicker-input.directive.ts b/src/modules/colorpicker/colorpicker-input.directive.ts index 83a0b09b9..17005a788 100644 --- a/src/modules/colorpicker/colorpicker-input.directive.ts +++ b/src/modules/colorpicker/colorpicker-input.directive.ts @@ -113,6 +113,7 @@ export class SkyColorpickerInputDirective this.writeModelValue(this.modelValue); } + /* istanbul ignore next */ @HostListener('blur') public onBlur(event: any) { this._onTouched(); From 67d72bc6bba94213a402c7dcab9a85d30a564da7 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 14 Sep 2018 09:32:09 -0400 Subject: [PATCH 6/9] changed section to div and removed role --- src/modules/repeater/repeater-item.component.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/modules/repeater/repeater-item.component.html b/src/modules/repeater/repeater-item.component.html index 9bf897914..26334cb7b 100644 --- a/src/modules/repeater/repeater-item.component.html +++ b/src/modules/repeater/repeater-item.component.html @@ -1,4 +1,4 @@ -
-
+ From c7ca6c2eaa09b1cfc9c8f6a95e0caeb5ba13ffa8 Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Mon, 17 Sep 2018 13:28:00 -0400 Subject: [PATCH 7/9] removed h1 tag so users can choose their own header if at all --- src/modules/repeater/repeater-item.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/repeater/repeater-item.component.html b/src/modules/repeater/repeater-item.component.html index 26334cb7b..60bf5ead2 100644 --- a/src/modules/repeater/repeater-item.component.html +++ b/src/modules/repeater/repeater-item.component.html @@ -29,9 +29,9 @@ [hidden]="titleEl.children.length === 0" (click)="headerClick()" > -

+
-

+
Date: Tue, 18 Sep 2018 10:00:37 -0400 Subject: [PATCH 8/9] fixed line-height shift on repeater title --- src/modules/repeater/repeater-item.component.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/modules/repeater/repeater-item.component.scss b/src/modules/repeater/repeater-item.component.scss index 5a185596d..50f28c02b 100644 --- a/src/modules/repeater/repeater-item.component.scss +++ b/src/modules/repeater/repeater-item.component.scss @@ -39,6 +39,8 @@ .sky-repeater-item-title { margin: 0; flex-grow: 1; + line-height: 1.1; + color: #282b31; } ::ng-deep sky-repeater-item-content { From f2af9ada6b756feb56742b5ee541cf13531ae9eb Mon Sep 17 00:00:00 2001 From: Conor Wright Date: Fri, 21 Sep 2018 12:44:15 -0400 Subject: [PATCH 9/9] fixed to use color variable --- src/modules/repeater/repeater-item.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/repeater/repeater-item.component.scss b/src/modules/repeater/repeater-item.component.scss index 50f28c02b..0d5cac852 100644 --- a/src/modules/repeater/repeater-item.component.scss +++ b/src/modules/repeater/repeater-item.component.scss @@ -40,7 +40,7 @@ margin: 0; flex-grow: 1; line-height: 1.1; - color: #282b31; + color: $sky-text-color-default; } ::ng-deep sky-repeater-item-content {