From 1057dbdd722160e85bddd3823af6140fdd3df6f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20B=C5=82a=C5=BCejewicz=20=28Peter=20Blazejewicz=29?= Date: Fri, 15 Nov 2019 14:34:31 +0100 Subject: [PATCH] feat(progressbar): allow to specify progressbar text type (#3394) As advised on the Bootstrap documentation page when using some background variants that is advisable to change the text color accordingly, for example for readability purposes. The `textType` input property allows to achieve this, adding support for binding text types to `text-*` utility class on the progress bar. Common scenario: progress bar with 'warning' type renders a white text on the yellow background (assuming default BS). This change allows users to opt to 'dark' text type to improve the readability. ref: https://getbootstrap.com/docs/4.3/utilities/colors/#background-color --- .../demos/texttypes/progressbar-texttypes.html | 4 ++++ .../texttypes/progressbar-texttypes.module.ts | 13 +++++++++++++ .../demos/texttypes/progressbar-texttypes.ts | 8 ++++++++ .../progressbar/progressbar.module.ts | 11 ++++++++++- src/progressbar/progressbar-config.spec.ts | 1 + src/progressbar/progressbar-config.ts | 1 + src/progressbar/progressbar.spec.ts | 18 ++++++++++++++++++ src/progressbar/progressbar.ts | 15 ++++++++++++--- 8 files changed, 67 insertions(+), 4 deletions(-) create mode 100644 demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.html create mode 100644 demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.module.ts create mode 100644 demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.ts diff --git a/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.html b/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.html new file mode 100644 index 0000000000..7a1bb2adb5 --- /dev/null +++ b/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.html @@ -0,0 +1,4 @@ +

+

+

+

diff --git a/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.module.ts b/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.module.ts new file mode 100644 index 0000000000..7646c0708c --- /dev/null +++ b/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; + +import { NgbdProgressbarTextTypes } from './progressbar-texttypes'; + +@NgModule({ + imports: [BrowserModule, NgbModule], + declarations: [NgbdProgressbarTextTypes], + exports: [NgbdProgressbarTextTypes], + bootstrap: [NgbdProgressbarTextTypes] +}) +export class NgbdProgressbarTextTypesModule {} diff --git a/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.ts b/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.ts new file mode 100644 index 0000000000..06e4583623 --- /dev/null +++ b/demo/src/app/components/progressbar/demos/texttypes/progressbar-texttypes.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'ngbd-progressbar-texttypes', + templateUrl: './progressbar-texttypes.html' +}) +export class NgbdProgressbarTextTypes { +} diff --git a/demo/src/app/components/progressbar/progressbar.module.ts b/demo/src/app/components/progressbar/progressbar.module.ts index 6ba95f6de8..1d08d9b3e9 100644 --- a/demo/src/app/components/progressbar/progressbar.module.ts +++ b/demo/src/app/components/progressbar/progressbar.module.ts @@ -17,6 +17,8 @@ import { NgbdProgressbarShowValueModule } from './demos/showvalue/progressbar-sh import { NgbdProgressbarShowvalue } from './demos/showvalue/progressbar-showvalue'; import { NgbdProgressbarStriped } from './demos/striped/progressbar-striped'; import { NgbdProgressbarStripedModule } from './demos/striped/progressbar-striped.module'; +import { NgbdProgressbarTextTypes } from './demos/texttypes/progressbar-texttypes'; +import { NgbdProgressbarTextTypesModule } from './demos/texttypes/progressbar-texttypes.module'; const DEMOS = { basic: { @@ -25,6 +27,12 @@ const DEMOS = { code: require('!!raw-loader!./demos/basic/progressbar-basic').default, markup: require('!!raw-loader!./demos/basic/progressbar-basic.html').default }, + texttypes: { + title: 'Contextual text progress bars', + type: NgbdProgressbarTextTypes, + code: require('!!raw-loader!./demos/texttypes/progressbar-texttypes').default, + markup: require('!!raw-loader!./demos/texttypes/progressbar-texttypes.html').default + }, showvalue: { title: 'Progress bars with current value labels', type: NgbdProgressbarShowvalue, @@ -78,7 +86,8 @@ export const ROUTES = [ NgbdProgressbarStripedModule, NgbdProgressbarConfigModule, NgbdProgressbarLabelsModule, - NgbdProgressbarHeightModule + NgbdProgressbarHeightModule, + NgbdProgressbarTextTypesModule, ] }) export class NgbdProgressbarModule { diff --git a/src/progressbar/progressbar-config.spec.ts b/src/progressbar/progressbar-config.spec.ts index 3a95abbc87..e5df2c5d5e 100644 --- a/src/progressbar/progressbar-config.spec.ts +++ b/src/progressbar/progressbar-config.spec.ts @@ -7,6 +7,7 @@ describe('ngb-progressbar-config', () => { expect(config.max).toBe(100); expect(config.striped).toBe(false); expect(config.animated).toBe(false); + expect(config.textType).toBeUndefined(); expect(config.type).toBeUndefined(); expect(config.showValue).toBe(false); expect(config.height).toBeUndefined(); diff --git a/src/progressbar/progressbar-config.ts b/src/progressbar/progressbar-config.ts index cc0379cdc0..c573f46d4f 100644 --- a/src/progressbar/progressbar-config.ts +++ b/src/progressbar/progressbar-config.ts @@ -11,6 +11,7 @@ export class NgbProgressbarConfig { max = 100; animated = false; striped = false; + textType: string; type: string; showValue = false; height: string; diff --git a/src/progressbar/progressbar.spec.ts b/src/progressbar/progressbar.spec.ts index 02412fdfb6..1a084d9cfc 100644 --- a/src/progressbar/progressbar.spec.ts +++ b/src/progressbar/progressbar.spec.ts @@ -37,6 +37,7 @@ describe('ngb-progressbar', () => { expect(progressCmp.max).toBe(defaultConfig.max); expect(progressCmp.animated).toBe(defaultConfig.animated); expect(progressCmp.striped).toBe(defaultConfig.striped); + expect(progressCmp.textType).toBe(defaultConfig.textType); expect(progressCmp.type).toBe(defaultConfig.type); }); @@ -186,6 +187,17 @@ describe('ngb-progressbar', () => { expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('bg-dark'); }); + it('accepts a custom text type', () => { + const html = ''; + const fixture = createTestComponent(html); + + expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-light'); + + fixture.componentInstance.textType = 'info'; + fixture.detectChanges(); + expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('text-info'); + }); + it('accepts animated as normal attr', () => { const html = ''; const fixture = createTestComponent(html); @@ -271,6 +283,7 @@ describe('ngb-progressbar', () => { config.max = 1000; config.striped = true; config.animated = true; + config.textType = 'white'; config.type = 'success'; })); @@ -282,6 +295,7 @@ describe('ngb-progressbar', () => { expect(progressbar.max).toBe(config.max); expect(progressbar.striped).toBe(config.striped); expect(progressbar.animated).toBe(config.animated); + expect(progressbar.textType).toBe(config.textType); expect(progressbar.type).toBe(config.type); }); }); @@ -291,6 +305,7 @@ describe('ngb-progressbar', () => { config.max = 1000; config.striped = true; config.animated = true; + config.textType = 'light'; config.type = 'success'; beforeEach(() => { @@ -306,6 +321,7 @@ describe('ngb-progressbar', () => { expect(progressbar.max).toBe(config.max); expect(progressbar.striped).toBe(config.striped); expect(progressbar.animated).toBe(config.animated); + expect(progressbar.textType).toBe(config.textType); expect(progressbar.type).toBe(config.type); }); }); @@ -317,5 +333,7 @@ class TestComponent { max = 50; animated = true; striped = true; + + textType = 'light'; type = 'warning'; } diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts index 4961b00e72..5ec11a2b7b 100644 --- a/src/progressbar/progressbar.ts +++ b/src/progressbar/progressbar.ts @@ -10,9 +10,9 @@ import {NgbProgressbarConfig} from './progressbar-config'; changeDetection: ChangeDetectionStrategy.OnPush, template: `
-
+
{{getPercentValue()}}%
@@ -50,6 +50,14 @@ export class NgbProgressbar { */ @Input() showValue: boolean; + /** + * Optional text variant type of the progress bar. + * + * Supports types based on Bootstrap background color variants, like: + * `"success"`, `"info"`, `"warning"`, `"danger"`, `"primary"`, `"secondary"`, `"dark"` and so on. + */ + @Input() textType: string; + /** * The type of the progress bar. * @@ -76,6 +84,7 @@ export class NgbProgressbar { this.max = config.max; this.animated = config.animated; this.striped = config.striped; + this.textType = config.textType; this.type = config.type; this.showValue = config.showValue; this.height = config.height;