From ff2daf5887a0e55232d4777d089c5baab1b3b30c Mon Sep 17 00:00:00 2001 From: Will Mendes Date: Fri, 19 Feb 2021 18:58:44 -0300 Subject: [PATCH] feat: adding validation for appearance in dev loop --- CHANGELOG.md | 2 ++ README.md | 27 +++++++++++++++++ package.json | 2 +- .../lib/ngx-skeleton-loader.component.spec.ts | 29 +++++++++++++------ .../src/lib/ngx-skeleton-loader.component.ts | 10 +++++++ 5 files changed, 60 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb6b287..e26227c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,10 +13,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - if `count` is not a numeric value, it will use the default value as `1` - if `animation` is not a valid attribute, it will use the default value as `progress` - PS: The other values alredy have a fallback, so nothing to worry here +- Adding error feedback for `appearance` attribute in case of wrong configuration. Now it will show a error message on the console in case of receiving a wrong value ### Updated - Adding `ngOnChange` to validate `count` input in case of changes via binding +- Updating `README.md` with information about `appearance` and `theme` usage. ## [2.8.0][] - 2021-02-18 diff --git a/README.md b/README.md index 3456864..8dd2346 100644 --- a/README.md +++ b/README.md @@ -118,6 +118,15 @@ export class YourAppComponent {} - loadingText - _default_ `Loading...`: attribute that defines the text value for `aria-valuetext` attribute. Defaults to "Loading..." +## Appearance + +You can also define which appearance want to use in your skeleton loader by passing the options in your component via `[appearance]` attribute. + +### Options + +- `''` - _default_: it will use it `''` as appearance. At the end, it will render like a line, but line is not a expected appearance to be passed; +- `circle`: it will use `circle` as appearance. Great for avatar skeletons, for example :); + ## Animations You can also define which CSS animation you want to use - even not use any, if it's the case - in your skeleton loader by passing the options in your component via `[animation]` attribute. @@ -178,6 +187,24 @@ you need to apply the style changes on the ``` +The [theme] attribute now accepts the same configuration as `ngStyle` as well. That means you can manage to use like you're doing with the built-in directive, having a pleasure and beautiful experience + +```html + +
+ +
+``` + ### ⚠️ This is here only as a documentation, but it's not encouraged to be used. Please consider use it with caution ⚠️ Also, you can use CSS to add theme styles into your component. However, there are some implications: diff --git a/package.json b/package.json index f2cb894..7c78095 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "bundlesize": [ { "path": "./dist/ngx-skeleton-loader/bundles/ngx-skeleton-loader.umd.min.js", - "maxSize": "1.6KB" + "maxSize": "1.7KB" } ], "dependencies": { diff --git a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts index 6871103..f225ac9 100644 --- a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts +++ b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.spec.ts @@ -43,6 +43,10 @@ import { NgxSkeletonLoaderComponent } from './ngx-skeleton-loader.component'; +
+ +
+
@@ -78,8 +82,8 @@ describe('NgxSkeletonLoaderComponent', () => { }), ); - it('should console 2 errors if `animation` and `count` receives invalid options and is running in development mode', () => { - expect(console.error).toHaveBeenCalledTimes(2); + it('should console 3 errors if `animation`, `appearance` and `count` receives invalid options and is running in development mode', () => { + expect(console.error).toHaveBeenCalledTimes(3); }); it('should console errors if `animation` is an invalid option and is running in development mode', () => { @@ -89,20 +93,27 @@ describe('NgxSkeletonLoaderComponent', () => { ); }); - it('should console errors if `animation` is an invalid option and is running in development mode', () => { + it('should console errors if `count` is an invalid option and is running in development mode', () => { expect(console.error).toHaveBeenCalledWith( // tslint:disable-next-line: max-line-length `\`NgxSkeletonLoaderComponent\` need to receive 'count' a numeric value. Forcing default to "1".`, ); }); + it('should console errors if `appearance` is an invalid option and is running in development mode', () => { + expect(console.error).toHaveBeenCalledWith( + // tslint:disable-next-line: max-line-length + `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`, + ); + }); + it('should add all relevant WAI-ARIA `aria-` attributes in all ngx-skeleton-loader', () => { - expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(13); - expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(13); - expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(13); - expect(fixture.nativeElement.querySelectorAll('[aria-valuetext]').length).toBe(13); - expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(13); - expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(13); + expect(fixture.nativeElement.querySelectorAll('[aria-busy="true"]').length).toBe(14); + expect(fixture.nativeElement.querySelectorAll('[aria-valuemin="0"]').length).toBe(14); + expect(fixture.nativeElement.querySelectorAll('[aria-valuemax="100"]').length).toBe(14); + expect(fixture.nativeElement.querySelectorAll('[aria-valuetext]').length).toBe(14); + expect(fixture.nativeElement.querySelectorAll('[role="progressbar"]').length).toBe(14); + expect(fixture.nativeElement.querySelectorAll('[tabindex="0"]').length).toBe(14); }); it('should use progress as default animation if `animation` is not passed as component attribute', () => { diff --git a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts index a7c33cf..4146d7a 100644 --- a/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts +++ b/projects/ngx-skeleton-loader/src/lib/ngx-skeleton-loader.component.ts @@ -76,6 +76,16 @@ export class NgxSkeletonLoaderComponent implements OnInit, AfterViewInit, OnDest } this.animation = 'progress'; } + + if (['circle', ''].indexOf(String(this.appearance)) === -1) { + // Shows error message only in Development + if (isDevMode()) { + console.error( + `\`NgxSkeletonLoaderComponent\` need to receive 'appearance' as: circle or empty string. Forcing default to "''".`, + ); + } + this.appearance = ''; + } } ngOnChanges(changes: SimpleChanges) {