From 9ce8adc441de351aeaf93579b8de72b0f320036c Mon Sep 17 00:00:00 2001 From: Jerzy Czopek Date: Sat, 23 Jan 2016 22:46:18 +0100 Subject: [PATCH] feat(spinner): attribute rename & validation Added attribute validation and error logging to the console to address directive guidelines [007](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/DIRECTIVE-CHECKLIST.md#directive-attribute-validation) & [008](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/DIRECTIVE-CHECKLIST.md#error-messages). BREAKING CHANGE: uif-spinner's `uif-spinnersize` attribute changed to `uif-size`. Change your code from this: ```html ``` To this: ```html ``` Closes #100. Closes #102. Closes #120. --- CHANGELOG.md | 4 +++ src/components/spinner/demo/index.html | 25 ++++++++++++++----- .../spinner/spinnerDirective.spec.ts | 19 +++++++++++--- src/components/spinner/spinnerDirective.ts | 22 +++++++++++----- src/components/spinner/spinnerSizeEnum.ts | 18 +++++++++++++ 5 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 src/components/spinner/spinnerSizeEnum.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f7f273..42b6dcb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,10 @@ - **uif-contextual-menu**: added attribute validation & error logging to console (by @s-KaiNet; closes [#99](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/99)) - **uif-table**: added support to select multiple rows (by @waldekmastykarz; closes [#61](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/61)) - **uif-table**: added attribute validation & error logging to console (by @waldekmastykarz; closes [#101](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/101)) +- **uif-spinner**: added attribute validation & error logging to console (by @s-KaiNet; closes [#100](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/100)) + +#### Breaking Changes +- **uif-spinner**: updated attribute name `uif-spinnersize` to `uif-size` (by @s-KaiNet; closes [#102](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/102)) ### [0.2.0 (January 19, 2016)](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/releases/tag/0.2.0) diff --git a/src/components/spinner/demo/index.html b/src/components/spinner/demo/index.html index 144cdb0..348e71c 100644 --- a/src/components/spinner/demo/index.html +++ b/src/components/spinner/demo/index.html @@ -32,36 +32,49 @@

Spinner Demo | <uif-spinner>

+

By default, small spinner is rendered. Above is shorthand of: +
+ + <uif-spinner uif-size="small"><uif-spinner/> + +

+ +

+ Example: +
+ +

+

To render large spinner, use the following markup:
- <uif-spinner uif-spinnersize="large"><uif-spinner/> + <uif-spinner uif-size="large"><uif-spinner/>

Example:
- +

You can also add content to the spinner, which will become it's label :
- <uif-spinner uif-spinnersize="large">Loading...<uif-spinner/> + <uif-spinner uif-size="large">Loading...<uif-spinner/>

Example:
- Loading... + Loading...

You can control visibility of the spinner with ngShow directive
- <uif-spinner uif-spinnersize="large" ng-show="spinnerVisible"><uif-spinner/> + <uif-spinner uif-size="large" ng-show="spinnerVisible"><uif-spinner/>

@@ -70,7 +83,7 @@

Spinner Demo | <uif-spinner>



- +

diff --git a/src/components/spinner/spinnerDirective.spec.ts b/src/components/spinner/spinnerDirective.spec.ts index f3c1b72..57303c4 100644 --- a/src/components/spinner/spinnerDirective.spec.ts +++ b/src/components/spinner/spinnerDirective.spec.ts @@ -29,22 +29,35 @@ describe('spinnerDirective: ', () => { it('should render proper CSS for large spinner', inject(($compile: Function) => { // override default element for suite - element = ng.element(''); + element = ng.element(''); $compile(element)(scope); scope.$digest(); expect(element[0]).toHaveClass('ms-Spinner--large'); })); - it('should not render CSS for large spinner if spinnersize not large', inject(($compile: Function) => { + it('should render proper CSS for small spinner', inject(($compile: Function) => { // override default element for suite - element = ng.element(''); + element = ng.element(''); $compile(element)(scope); scope.$digest(); expect(element[0]).not.toHaveClass('ms-Spinner--large'); })); + it('should throw error when invalid size provided', inject(($compile: Function, $log: ng.ILogService) => { + // override default element for suite + element = ng.element(''); + $compile(element)(scope); + scope.$digest(); + + // expect(element[0]).not.toHaveClass('ms-Spinner--large'); + + expect($log.error.logs.length === 1).toBeTruthy(); + expect($log.error.logs[0]).toContain('Error [ngOfficeUiFabric] officeuifabric.components.spinner - Unsupported size: ' + + 'Spinner size (\'invalid\') is not supported by the Office UI Fabric.'); + })); + it('should not render wrapper when no content', () => { let wrapperElement: ng.IAugmentedJQuery = element.find('div.ms-Spinner-label'); diff --git a/src/components/spinner/spinnerDirective.ts b/src/components/spinner/spinnerDirective.ts index 74f2d72..eb25a3e 100644 --- a/src/components/spinner/spinnerDirective.ts +++ b/src/components/spinner/spinnerDirective.ts @@ -1,5 +1,6 @@ 'use strict'; import * as ng from 'angular'; +import {SpinnerSize} from './spinnerSizeEnum'; /** * @ngdoc directive @@ -37,11 +38,19 @@ export class SpinnerDirective implements ng.IDirective { scope: ISpinnerScope, instanceElement: ng.IAugmentedJQuery, attrs: ISpinnerAttributes, - ctrl: any, + controller: SpinnerController, $transclude: ng.ITranscludeFunction): void { - if (attrs.uifSpinnersize === 'large') { - instanceElement.addClass('ms-Spinner--large'); + if (ng.isDefined(attrs.uifSize) ) { + if (ng.isUndefined(SpinnerSize[attrs.uifSize])) { + + controller.$log.error('Error [ngOfficeUiFabric] officeuifabric.components.spinner - Unsupported size: ' + + 'Spinner size (\'' + attrs.uifSize + '\') is not supported by the Office UI Fabric.'); + } + + if (SpinnerSize[attrs.uifSize] === SpinnerSize.large) { + instanceElement.addClass('ms-Spinner--large'); + } } if (attrs.ngShow != null) { @@ -97,7 +106,7 @@ interface ISpinnerScope extends ng.IScope { */ class SpinnerController { - public static $inject: string[] = ['$scope', '$element', '$interval']; + public static $inject: string[] = ['$scope', '$element', '$interval', '$log']; private _offsetSize: number = 0.179; private _numCircles: number = 8; @@ -109,7 +118,8 @@ class SpinnerController { constructor( public $scope: ISpinnerScope, private $element: ng.IAugmentedJQuery, - private $interval: ng.IIntervalService) { + private $interval: ng.IIntervalService, + public $log: ng.ILogService) { $scope.init = (): void => { this.createCirclesAndArrange(); @@ -209,7 +219,7 @@ class CircleObject { } interface ISpinnerAttributes extends ng.IAttributes { - uifSpinnersize?: string; + uifSize?: string; ngShow?: any; } diff --git a/src/components/spinner/spinnerSizeEnum.ts b/src/components/spinner/spinnerSizeEnum.ts new file mode 100644 index 0000000..8df285a --- /dev/null +++ b/src/components/spinner/spinnerSizeEnum.ts @@ -0,0 +1,18 @@ +'use strict'; + +/** + * + * Enum for spinner sizes supported by Office UI Fabric. + * + * @readonly + * @enum {string} + * @usage + * + * It is used to define size the spinner that will rendered by `uif-spinner` directive. + * + * let size: string = SpinnerSize[SpinnerSize.large]; + */ +export enum SpinnerSize { + 'small', + 'large' +}