From 256df22bf2abc146179d15395619103b700e4f8c Mon Sep 17 00:00:00 2001 From: Bozhidar Dryanovski Date: Wed, 17 Jul 2019 22:31:08 +0300 Subject: [PATCH] fix: change clrSpinner API Signed-off-by: Bozhidar Dryanovski --- golden/clr-angular.d.ts | 14 +- .../data/datagrid/datagrid-row.html | 2 +- src/clr-angular/data/datagrid/datagrid.html | 2 +- .../progress/spinner/spinner.spec.ts | 47 ++++++- src/clr-angular/progress/spinner/spinner.ts | 128 ++++++++++++------ .../src/app/spinners/spinner-component.html | 21 +++ src/dev/src/app/spinners/spinner-component.ts | 12 ++ src/dev/src/app/spinners/spinner.demo.ts | 4 +- .../src/app/spinners/spinners.demo.module.ts | 7 +- .../src/app/spinners/spinners.demo.routing.ts | 4 +- .../demos/spinners/spinner-component.html | 4 +- .../demos/spinners/spinner-component.ts | 16 +-- .../demos/spinners/spinner.demo.html | 2 +- 13 files changed, 197 insertions(+), 66 deletions(-) create mode 100644 src/dev/src/app/spinners/spinner-component.html create mode 100644 src/dev/src/app/spinners/spinner-component.ts diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts index 041a5ade9c..986940a428 100644 --- a/golden/clr-angular.d.ts +++ b/golden/clr-angular.d.ts @@ -1031,13 +1031,17 @@ export declare class ClrSignpostTrigger implements OnDestroy { export declare class ClrSpinner { assertive: boolean; - readonly assignClass: string; - inline: boolean; - inverse: boolean; - medium: boolean; + clrInline: boolean | string; + clrInverse: boolean | string; + clrMedium: boolean | string; + clrSmall: boolean | string; + readonly inlineClass: boolean; + readonly inverseClass: boolean; + readonly mediumClass: boolean; off: boolean; readonly setAriaLive: "assertive" | "off" | "polite"; - small: boolean; + readonly smallClass: boolean; + readonly spinnerClass: boolean; } export declare class ClrSpinnerModule { diff --git a/src/clr-angular/data/datagrid/datagrid-row.html b/src/clr-angular/data/datagrid/datagrid-row.html index fd0fbc7217..5cc99ddd9b 100644 --- a/src/clr-angular/data/datagrid/datagrid-row.html +++ b/src/clr-angular/data/datagrid/datagrid-row.html @@ -59,7 +59,7 @@ [attr.dir]="expand.expanded ? 'down' : 'right'" [attr.title]="expand.expanded ? commonStrings.collapse : commonStrings.expand"> - {{ commonStrings.loading }} + {{ commonStrings.loading }} diff --git a/src/clr-angular/data/datagrid/datagrid.html b/src/clr-angular/data/datagrid/datagrid.html index 32136ffb53..f9b780615d 100644 --- a/src/clr-angular/data/datagrid/datagrid.html +++ b/src/clr-angular/data/datagrid/datagrid.html @@ -53,7 +53,7 @@
diff --git a/src/clr-angular/progress/spinner/spinner.spec.ts b/src/clr-angular/progress/spinner/spinner.spec.ts index 92a60d3cac..fc7a89185f 100644 --- a/src/clr-angular/progress/spinner/spinner.spec.ts +++ b/src/clr-angular/progress/spinner/spinner.spec.ts @@ -17,22 +17,28 @@ const SPINNER_INLINE = 'spinner-inline'; const SPINNER_SMALL_SIZE = 'spinner-sm'; const SPINNER_MEDIUM_SIZE = 'spinner-md'; +const SPINNER_LARGE_SIZE = 'spinner-lg'; @Component({ - template: `Loading ...`, + template: `Loading ...`, }) class TestComponent {} @Component({ - template: `Loading ...`, + template: `Loading ...`, }) class TestSmallComponent {} @Component({ - template: `Loading ...`, + template: `Loading ...`, }) class TestMediumComponent {} +@Component({ + template: `Loading ...`, +}) +class TestLargeComponent {} + describe('ClrSpinner component', () => { describe('View', () => { let fixture: ComponentFixture; @@ -40,7 +46,7 @@ describe('ClrSpinner component', () => { beforeEach(function() { TestBed.configureTestingModule({ - declarations: [TestComponent, TestSmallComponent, TestMediumComponent], + declarations: [TestComponent, TestSmallComponent, TestMediumComponent, TestLargeComponent], imports: [ClrSpinnerModule], }); }); @@ -95,6 +101,39 @@ describe('ClrSpinner component', () => { }); describe('Sizes', () => { + function componentWidth(fix): number { + return Math.floor(fix.debugElement.query(By.directive(ClrSpinner)).nativeElement.getBoundingClientRect().width); + } + + function componentHeight(fix): number { + return Math.floor( + fix.debugElement.query(By.directive(ClrSpinner)).nativeElement.getBoundingClientRect().height + ); + } + it(`.${SPINNER_SMALL_SIZE} should have the size ot 18x18`, () => { + const fixtureSmall = TestBed.createComponent(TestSmallComponent); + fixtureSmall.detectChanges(); + + expect(componentHeight(fixtureSmall)).toBe(18); + expect(componentWidth(fixtureSmall)).toBe(18); + }); + + it(`.${SPINNER_MEDIUM_SIZE} should have the size ot 36x36`, () => { + const fixtureMedium = TestBed.createComponent(TestMediumComponent); + fixtureMedium.detectChanges(); + + expect(componentHeight(fixtureMedium)).toBe(36); + expect(componentWidth(fixtureMedium)).toBe(36); + }); + + it(`.${SPINNER_LARGE_SIZE} should have the size ot 72x72`, () => { + const fixtureLarge = TestBed.createComponent(TestLargeComponent); + fixtureLarge.detectChanges(); + + expect(componentHeight(fixtureLarge)).toBe(72); + expect(componentWidth(fixtureLarge)).toBe(72); + }); + it(`should add .${SPINNER_SMALL_SIZE}`, () => { fixture = TestBed.createComponent(TestSmallComponent); clrSpinner = fixture.debugElement.query(By.directive(ClrSpinner)).nativeElement; diff --git a/src/clr-angular/progress/spinner/spinner.ts b/src/clr-angular/progress/spinner/spinner.ts index 04ccc4c794..e787de82de 100644 --- a/src/clr-angular/progress/spinner/spinner.ts +++ b/src/clr-angular/progress/spinner/spinner.ts @@ -3,42 +3,113 @@ * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ -import { Component, Input } from '@angular/core'; +import { Component, Input, HostBinding } from '@angular/core'; import { isBooleanAttributeSet } from '../../utils/component/is-boolean-attribute-set'; -const SPINNER_BASE_CLASS = 'spinner'; - -const SPINNER_INVERSE = 'spinner-inverse'; -const SPINNER_INLINE = 'spinner-inline'; - -const SPINNER_SMALL_SIZE = 'spinner-sm'; -const SPINNER_MEDIUM_SIZE = 'spinner-md'; - @Component({ selector: 'clr-spinner', template: ` `, host: { - '[attr.class]': 'assignClass', '[attr.aria-live]': 'setAriaLive', '[attr.aria-busy]': 'true', }, }) export class ClrSpinner { + /** + * Default class for all spinners. This class is always true + */ + @HostBinding('class.spinner') + get spinnerClass() { + return true; + } + // Style - @Input() inline: boolean; - @Input() inverse: boolean; + private _inline: boolean; + @HostBinding('class.spinner-inline') + get inlineClass() { + return this._inline; + } + + @Input('clrInline') + set clrInline(value: boolean | string) { + this._inline = isBooleanAttributeSet(value); + } + + private _inverse: boolean; + @HostBinding('class.spinner-inverse') + get inverseClass() { + return this._inverse; + } + + @Input('clrInverse') + set clrInverse(value: boolean | string) { + this._inverse = isBooleanAttributeSet(value); + } // Size - @Input() small: boolean; - @Input() medium: boolean; - /* No need to handle large - default value */ + /** + * By default all spinners are Large. (spinner-lg) + * To change the size you need to use set clrSmall or clrMedium to TRUE/ + */ + + /** + * Small + */ + private _small: boolean; + @HostBinding('class.spinner-sm') + get smallClass() { + return this._small; + } + + @Input('clrSmall') + set clrSmall(value: boolean | string) { + this._small = isBooleanAttributeSet(value); + } + + /** + * When clrSmall & clrMedium are set both to true. + * The CSS with high priority will be small - so medium size will be ignored. + * + * For this reason if clrSmall is set we won't add clrMedium class. + * + * NOTE: This is dictated by the CSS rules. + * DON'T USE clrSmall & clrMedium to toggle classes. This could change without notice. + * + * Also there is no logical need to have both of them set to TRUE or FALSE. + */ + private _medium: boolean; + @HostBinding('class.spinner-md') + get mediumClass() { + if (this._small) { + return false; + } + return this._medium; + } + + @Input('clrMedium') + set clrMedium(value: boolean | string) { + this._medium = isBooleanAttributeSet(value); + } // Aria Live - @Input() assertive: boolean; - @Input() off: boolean; - /* No need to handle polite - default value */ + + /** + * By default aria-live will be set to `polite` . + * To change is it you need to set clrAssertive or clrOff to TRUE + * + * There is priority: + * Default: polite + * Asertive + * Off + * + * In case when for some reason you have clrAssertive=TRUE and clrOff=TRUE, + * we gonna set `assertive` as value of aria-live. + * + */ + @Input('clrAssertive') assertive: boolean; + @Input('clrOff') off: boolean; get setAriaLive() { if (isBooleanAttributeSet(this.assertive)) { @@ -49,25 +120,4 @@ export class ClrSpinner { } return 'polite'; } - - get assignClass(): string { - const classes = [SPINNER_BASE_CLASS]; - - if (isBooleanAttributeSet(this.inline)) { - classes.push(SPINNER_INLINE); - } - - if (isBooleanAttributeSet(this.inverse)) { - classes.push(SPINNER_INVERSE); - } - - // You could have only on size at a time... - if (isBooleanAttributeSet(this.small)) { - classes.push(SPINNER_SMALL_SIZE); - } else if (isBooleanAttributeSet(this.medium)) { - classes.push(SPINNER_MEDIUM_SIZE); - } - - return classes.join(' '); - } } diff --git a/src/dev/src/app/spinners/spinner-component.html b/src/dev/src/app/spinners/spinner-component.html new file mode 100644 index 0000000000..bea958f6be --- /dev/null +++ b/src/dev/src/app/spinners/spinner-component.html @@ -0,0 +1,21 @@ + + +
Small
+
+ Fetching data +
+ +
Medium
+
+ Loading users + +
+ +
Large (default)
+
+ You won't hear about me +
diff --git a/src/dev/src/app/spinners/spinner-component.ts b/src/dev/src/app/spinners/spinner-component.ts new file mode 100644 index 0000000000..12fc49dcbc --- /dev/null +++ b/src/dev/src/app/spinners/spinner-component.ts @@ -0,0 +1,12 @@ +/* + * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved. + * This software is released under MIT license. + * The full license information can be found in LICENSE in the root directory of this project. + */ +import { Component } from '@angular/core'; + +@Component({ + selector: 'clr-spinner-component', + templateUrl: './spinner-component.html', +}) +export class SpinnerComponentDemo {} diff --git a/src/dev/src/app/spinners/spinner.demo.ts b/src/dev/src/app/spinners/spinner.demo.ts index fdf7d9d9cb..11881f7988 100644 --- a/src/dev/src/app/spinners/spinner.demo.ts +++ b/src/dev/src/app/spinners/spinner.demo.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -13,6 +13,8 @@ import { Component } from '@angular/core'; `, diff --git a/src/dev/src/app/spinners/spinners.demo.module.ts b/src/dev/src/app/spinners/spinners.demo.module.ts index 7fa742549a..795cd19709 100644 --- a/src/dev/src/app/spinners/spinners.demo.module.ts +++ b/src/dev/src/app/spinners/spinners.demo.module.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -10,12 +10,13 @@ import { ClarityModule } from '@clr/angular'; import { SpinnerSizesDemo } from './spinner-sizes'; import { SpinnerTypesDemo } from './spinner-types'; +import { SpinnerComponentDemo } from './spinner-component'; import { SpinnerDemo } from './spinner.demo'; import { ROUTING } from './spinners.demo.routing'; @NgModule({ imports: [CommonModule, ClarityModule, ROUTING], - declarations: [SpinnerDemo, SpinnerSizesDemo, SpinnerTypesDemo], - exports: [SpinnerDemo, SpinnerSizesDemo, SpinnerTypesDemo], + declarations: [SpinnerDemo, SpinnerSizesDemo, SpinnerTypesDemo, SpinnerComponentDemo], + exports: [SpinnerDemo, SpinnerSizesDemo, SpinnerTypesDemo, SpinnerComponentDemo], }) export class SpinnersDemoModule {} diff --git a/src/dev/src/app/spinners/spinners.demo.routing.ts b/src/dev/src/app/spinners/spinners.demo.routing.ts index f958f3c93b..984b262bf6 100644 --- a/src/dev/src/app/spinners/spinners.demo.routing.ts +++ b/src/dev/src/app/spinners/spinners.demo.routing.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -9,6 +9,7 @@ import { RouterModule, Routes } from '@angular/router'; import { SpinnerSizesDemo } from './spinner-sizes'; import { SpinnerTypesDemo } from './spinner-types'; import { SpinnerDemo } from './spinner.demo'; +import { SpinnerComponentDemo } from './spinner-component'; const ROUTES: Routes = [ { @@ -18,6 +19,7 @@ const ROUTES: Routes = [ { path: '', redirectTo: 'spinner-types', pathMatch: 'full' }, { path: 'spinner-types', component: SpinnerTypesDemo }, { path: 'spinner-sizes', component: SpinnerSizesDemo }, + { path: 'spinner-component', component: SpinnerComponentDemo }, ], }, ]; diff --git a/src/website/src/app/documentation/demos/spinners/spinner-component.html b/src/website/src/app/documentation/demos/spinners/spinner-component.html index 02b25fb286..a3d48007a7 100644 --- a/src/website/src/app/documentation/demos/spinners/spinner-component.html +++ b/src/website/src/app/documentation/demos/spinners/spinner-component.html @@ -58,7 +58,7 @@
Modify
- Downloading + Downloading Downloading
@@ -78,6 +78,6 @@
Accessibility live region
- Downloading + Downloading diff --git a/src/website/src/app/documentation/demos/spinners/spinner-component.ts b/src/website/src/app/documentation/demos/spinners/spinner-component.ts index 212250af64..9d1c169ede 100644 --- a/src/website/src/app/documentation/demos/spinners/spinner-component.ts +++ b/src/website/src/app/documentation/demos/spinners/spinner-component.ts @@ -11,7 +11,7 @@ const EXAMPLE = ` const EXAMPLE1 = `
- + Downloading @@ -21,7 +21,7 @@ const EXAMPLE1 = ` `; const EXAMPLE2 = ` -Downloading +Downloading `; @Component({ @@ -36,37 +36,37 @@ export class SpinnerComponentDemo { props = [ { - name: '[inline]', + name: '[clrInline]', type: 'Boolean', defaultValue: 'false', description: 'Create an inline spinner', }, { - name: '[inverse]', + name: '[clrInverse]', type: 'Boolean', defaultValue: 'false', description: 'Create spinner for dark background', }, { - name: '[small]', + name: '[clrSmall]', type: 'Boolean', defaultValue: 'false', description: 'Make the spinner small 18x18 pixels', }, { - name: '[medium]', + name: '[clrMedium]', type: 'Boolean', defaultValue: 'false', description: 'Medium spinners 36x36 pixels', }, { - name: '[assertive]', + name: '[clrAssertive]', type: 'Boolean', defaultValue: 'false', description: 'Set aria-live to "assertive", default is "polite"', }, { - name: '[off]', + name: '[clrOff]', type: 'Boolean', defaultValue: 'false', description: 'Set aria-live to "off", no event will be broadcasted to screen readers', diff --git a/src/website/src/app/documentation/demos/spinners/spinner.demo.html b/src/website/src/app/documentation/demos/spinners/spinner.demo.html index c0d664031b..3f6d515890 100644 --- a/src/website/src/app/documentation/demos/spinners/spinner.demo.html +++ b/src/website/src/app/documentation/demos/spinners/spinner.demo.html @@ -117,7 +117,7 @@

Spinners Versus Progress Bars

progress bar is a matter of spacing, visual consistency, and the object the user selected to begin the process.