From 518c229b964d2c4a2e77210692f5d367f2937ff4 Mon Sep 17 00:00:00 2001 From: Jesse Attas Date: Wed, 13 Mar 2024 17:48:59 -0500 Subject: [PATCH] Update Angular and Blazor label provider directives to match nimble-components (#1927) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale #1747 has a maintenance task to ensure the default strings in Angular and Blazor directives match the default strings in nimble-components. ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation Some labels were only provided in nimble-components, not nimble-angular or Blazor. Copied those values over following existing patterns in directives and test files. ## ๐Ÿงช Testing Updated tests but otherwise none since this is a mechanical change. ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Milan Raj --- ...l-provider-core-with-defaults.directive.ts | 5 + .../nimble-label-provider-core.directive.ts | 40 ++++ ...vider-core-with-defaults.directive.spec.ts | 12 +- ...mble-label-provider-core.directive.spec.ts | 190 ++++++++++++++++++ ...-provider-table-with-defaults.directive.ts | 2 + .../nimble-label-provider-table.directive.ts | 16 ++ ...ider-table-with-defaults.directive.spec.ts | 4 + ...ble-label-provider-table.directive.spec.ts | 124 +++++++++--- ...-bb7e376e-ce72-4760-bb8d-f5775b8eefa8.json | 7 + ...-8b481f76-2252-49bf-8f00-07c884c3b2d4.json | 7 + ...-01c69e77-25e6-4f6e-a42c-0254916345eb.json | 7 + .../Components/NimbleLabelProviderCore.razor | 5 + .../NimbleLabelProviderCore.razor.cs | 15 ++ .../Components/NimbleLabelProviderTable.razor | 2 + .../NimbleLabelProviderTable.razor.cs | 6 + .../NimbleLabelProviderCoreTests.cs | 5 + .../NimbleLabelProviderTableTests.cs | 2 + .../nimble-components/src/banner/template.ts | 12 +- .../src/label-provider/core/index.ts | 24 +-- .../core/label-token-defaults.ts | 6 +- .../src/label-provider/core/label-tokens.ts | 18 +- 21 files changed, 454 insertions(+), 55 deletions(-) create mode 100644 change/@ni-nimble-angular-bb7e376e-ce72-4760-bb8d-f5775b8eefa8.json create mode 100644 change/@ni-nimble-blazor-8b481f76-2252-49bf-8f00-07c884c3b2d4.json create mode 100644 change/@ni-nimble-components-01c69e77-25e6-4f6e-a42c-0254916345eb.json diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts index bff9c0e24a..63d82cdbfb 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core-with-defaults.directive.ts @@ -15,5 +15,10 @@ export class NimbleLabelProviderCoreWithDefaultsDirective { this.elementRef.nativeElement.popupDismiss = $localize`:Nimble popup - dismiss|:Close`; this.elementRef.nativeElement.numericDecrement = $localize`:Nimble numeric - decrement|:Decrement`; this.elementRef.nativeElement.numericIncrement = $localize`:Nimble numeric - increment|:Increment`; + this.elementRef.nativeElement.popupIconError = $localize`:Nimble popup icon - error|:Error`; + this.elementRef.nativeElement.popupIconWarning = $localize`:Nimble popup icon - warning|:Warning`; + this.elementRef.nativeElement.popupIconInformation = $localize`:Nimble popup icon - information|:Information`; + this.elementRef.nativeElement.filterSearch = $localize`:Nimble select - search items|:Search`; + this.elementRef.nativeElement.filterNoResults = $localize`:Nimble select - no items|:No items found`; } } \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts index 6c6276d7bd..17fa20a4a7 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/core/nimble-label-provider-core.directive.ts @@ -37,4 +37,44 @@ export class NimbleLabelProviderCoreDirective { @Input('numeric-increment') public set numericIncrement(value: string | undefined) { this.renderer.setProperty(this.elementRef.nativeElement, 'numericIncrement', value); } + + public get popupIconError(): string | undefined { + return this.elementRef.nativeElement.popupIconError; + } + + @Input('popup-icon-error') public set popupIconError(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'popupIconError', value); + } + + public get popupIconWarning(): string | undefined { + return this.elementRef.nativeElement.popupIconWarning; + } + + @Input('popup-icon-warning') public set popupIconWarning(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'popupIconWarning', value); + } + + public get popupIconInformation(): string | undefined { + return this.elementRef.nativeElement.popupIconInformation; + } + + @Input('popup-icon-information') public set popupIconInformation(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'popupIconInformation', value); + } + + public get filterSearch(): string | undefined { + return this.elementRef.nativeElement.filterSearch; + } + + @Input('filter-search') public set filterSearch(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'filterSearch', value); + } + + public get filterNoResults(): string | undefined { + return this.elementRef.nativeElement.filterNoResults; + } + + @Input('filter-no-results') public set filterNoResults(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'filterNoResults', value); + } } \ No newline at end of file diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts index 0b74b5a736..50a4b6bade 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core-with-defaults.directive.spec.ts @@ -30,7 +30,12 @@ describe('Nimble LabelProviderCore withDefaults directive', () => { loadTranslations({ [computeMsgId('Close', 'Nimble popup - dismiss')]: 'Translated close', [computeMsgId('Decrement', 'Nimble numeric - decrement')]: 'Translated decrement', - [computeMsgId('Increment', 'Nimble numeric - increment')]: 'Translated increment' + [computeMsgId('Increment', 'Nimble numeric - increment')]: 'Translated increment', + [computeMsgId('Error', 'Nimble popup icon - error')]: 'Translated error', + [computeMsgId('Warning', 'Nimble popup icon - warning')]: 'Translated warning', + [computeMsgId('Information', 'Nimble popup icon - information')]: 'Translated information', + [computeMsgId('Search', 'Nimble select - search items')]: 'Translated search', + [computeMsgId('No items found', 'Nimble select - no items')]: 'Translated no items found' }); const fixture = TestBed.createComponent(TestHostComponent); const testHostComponent = fixture.componentInstance; @@ -42,5 +47,10 @@ describe('Nimble LabelProviderCore withDefaults directive', () => { expect(labelProvider.popupDismiss).toBe('Translated close'); expect(labelProvider.numericDecrement).toBe('Translated decrement'); expect(labelProvider.numericIncrement).toBe('Translated increment'); + expect(labelProvider.popupIconError).toBe('Translated error'); + expect(labelProvider.popupIconWarning).toBe('Translated warning'); + expect(labelProvider.popupIconInformation).toBe('Translated information'); + expect(labelProvider.filterSearch).toBe('Translated search'); + expect(labelProvider.filterNoResults).toBe('Translated no items found'); }); }); diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts index 7a276c1b41..3249e7e4e4 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/core/tests/nimble-label-provider-core.directive.spec.ts @@ -7,6 +7,11 @@ describe('Nimble Label Provider Core', () => { const label1 = 'String 1'; const label2 = 'String 2'; const label3 = 'String 3'; + const label4 = 'String 4'; + const label5 = 'String 5'; + const label6 = 'String 6'; + const label7 = 'String 7'; + const label8 = 'String 8'; beforeEach(() => { TestBed.configureTestingModule({ @@ -58,6 +63,31 @@ describe('Nimble Label Provider Core', () => { expect(directive.numericIncrement).toBeUndefined(); expect(nativeElement.numericIncrement).toBeUndefined(); }); + + it('has expected defaults for popupIconError', () => { + expect(directive.popupIconError).toBeUndefined(); + expect(nativeElement.popupIconError).toBeUndefined(); + }); + + it('has expected defaults for popupIconWarning', () => { + expect(directive.popupIconWarning).toBeUndefined(); + expect(nativeElement.popupIconWarning).toBeUndefined(); + }); + + it('has expected defaults for popupIconInformation', () => { + expect(directive.popupIconInformation).toBeUndefined(); + expect(nativeElement.popupIconInformation).toBeUndefined(); + }); + + it('has expected defaults for filterSearch', () => { + expect(directive.filterSearch).toBeUndefined(); + expect(nativeElement.filterSearch).toBeUndefined(); + }); + + it('has expected defaults for filterNoResults', () => { + expect(directive.filterNoResults).toBeUndefined(); + expect(nativeElement.filterNoResults).toBeUndefined(); + }); }); describe('with template string values', () => { @@ -67,6 +97,11 @@ describe('Nimble Label Provider Core', () => { popup-dismiss="${label1}" numeric-decrement="${label2}" numeric-increment="${label3}" + popup-icon-error="${label4}" + popup-icon-warning="${label5}" + popup-icon-information="${label6}" + filter-search="${label7}" + filter-no-results="${label8}" > ` @@ -105,6 +140,31 @@ describe('Nimble Label Provider Core', () => { expect(directive.numericIncrement).toBe(label3); expect(nativeElement.numericIncrement).toBe(label3); }); + + it('will use template string values for popupIconError', () => { + expect(directive.popupIconError).toBe(label4); + expect(nativeElement.popupIconError).toBe(label4); + }); + + it('will use template string values for popupIconWarning', () => { + expect(directive.popupIconWarning).toBe(label5); + expect(nativeElement.popupIconWarning).toBe(label5); + }); + + it('will use template string values for popupIconInformation', () => { + expect(directive.popupIconInformation).toBe(label6); + expect(nativeElement.popupIconInformation).toBe(label6); + }); + + it('will use template string values for filterSearch', () => { + expect(directive.filterSearch).toBe(label7); + expect(nativeElement.filterSearch).toBe(label7); + }); + + it('will use template string values for filterNoResults', () => { + expect(directive.filterNoResults).toBe(label8); + expect(nativeElement.filterNoResults).toBe(label8); + }); }); describe('with property bound values', () => { @@ -114,6 +174,11 @@ describe('Nimble Label Provider Core', () => { [popupDismiss]="popupDismiss" [numericDecrement]="numericDecrement" [numericIncrement]="numericIncrement" + [popupIconError]="popupIconError" + [popupIconWarning]="popupIconWarning" + [popupIconInformation]="popupIconInformation" + [filterSearch]="filterSearch" + [filterNoResults]="filterNoResults" > ` @@ -124,6 +189,11 @@ describe('Nimble Label Provider Core', () => { public popupDismiss = label1; public numericDecrement = label1; public numericIncrement = label1; + public popupIconError = label1; + public popupIconWarning = label1; + public popupIconInformation = label1; + public filterSearch = label1; + public filterNoResults = label1; } let fixture: ComponentFixture; @@ -173,6 +243,61 @@ describe('Nimble Label Provider Core', () => { expect(directive.numericIncrement).toBe(label2); expect(nativeElement.numericIncrement).toBe(label2); }); + + it('can be configured with property binding for popupIconError', () => { + expect(directive.popupIconError).toBe(label1); + expect(nativeElement.popupIconError).toBe(label1); + + fixture.componentInstance.popupIconError = label2; + fixture.detectChanges(); + + expect(directive.popupIconError).toBe(label2); + expect(nativeElement.popupIconError).toBe(label2); + }); + + it('can be configured with property binding for popupIconWarning', () => { + expect(directive.popupIconWarning).toBe(label1); + expect(nativeElement.popupIconWarning).toBe(label1); + + fixture.componentInstance.popupIconWarning = label2; + fixture.detectChanges(); + + expect(directive.popupIconWarning).toBe(label2); + expect(nativeElement.popupIconWarning).toBe(label2); + }); + + it('can be configured with property binding for popupIconInformation', () => { + expect(directive.popupIconInformation).toBe(label1); + expect(nativeElement.popupIconInformation).toBe(label1); + + fixture.componentInstance.popupIconInformation = label2; + fixture.detectChanges(); + + expect(directive.popupIconInformation).toBe(label2); + expect(nativeElement.popupIconInformation).toBe(label2); + }); + + it('can be configured with property binding for filterSearch', () => { + expect(directive.filterSearch).toBe(label1); + expect(nativeElement.filterSearch).toBe(label1); + + fixture.componentInstance.filterSearch = label2; + fixture.detectChanges(); + + expect(directive.filterSearch).toBe(label2); + expect(nativeElement.filterSearch).toBe(label2); + }); + + it('can be configured with property binding for filterNoResults', () => { + expect(directive.filterNoResults).toBe(label1); + expect(nativeElement.filterNoResults).toBe(label1); + + fixture.componentInstance.filterNoResults = label2; + fixture.detectChanges(); + + expect(directive.filterNoResults).toBe(label2); + expect(nativeElement.filterNoResults).toBe(label2); + }); }); describe('with attribute bound values', () => { @@ -182,6 +307,11 @@ describe('Nimble Label Provider Core', () => { [attr.popup-dismiss]="popupDismiss" [attr.numeric-decrement]="numericDecrement" [attr.numeric-increment]="numericIncrement" + [attr.popup-icon-error]="popupIconError" + [attr.popup-icon-warning]="popupIconWarning" + [attr.popup-icon-information]="popupIconInformation" + [attr.filter-search]="filterSearch" + [attr.filter-no-results]="filterNoResults" > ` @@ -192,6 +322,11 @@ describe('Nimble Label Provider Core', () => { public popupDismiss = label1; public numericDecrement = label1; public numericIncrement = label1; + public popupIconError = label1; + public popupIconWarning = label1; + public popupIconInformation = label1; + public filterSearch = label1; + public filterNoResults = label1; } let fixture: ComponentFixture; @@ -241,5 +376,60 @@ describe('Nimble Label Provider Core', () => { expect(directive.numericIncrement).toBe(label2); expect(nativeElement.numericIncrement).toBe(label2); }); + + it('can be configured with attribute binding for popupIconError', () => { + expect(directive.popupIconError).toBe(label1); + expect(nativeElement.popupIconError).toBe(label1); + + fixture.componentInstance.popupIconError = label2; + fixture.detectChanges(); + + expect(directive.popupIconError).toBe(label2); + expect(nativeElement.popupIconError).toBe(label2); + }); + + it('can be configured with attribute binding for popupIconWarning', () => { + expect(directive.popupIconWarning).toBe(label1); + expect(nativeElement.popupIconWarning).toBe(label1); + + fixture.componentInstance.popupIconWarning = label2; + fixture.detectChanges(); + + expect(directive.popupIconWarning).toBe(label2); + expect(nativeElement.popupIconWarning).toBe(label2); + }); + + it('can be configured with attribute binding for popupIconInformation', () => { + expect(directive.popupIconInformation).toBe(label1); + expect(nativeElement.popupIconInformation).toBe(label1); + + fixture.componentInstance.popupIconInformation = label2; + fixture.detectChanges(); + + expect(directive.popupIconInformation).toBe(label2); + expect(nativeElement.popupIconInformation).toBe(label2); + }); + + it('can be configured with attribute binding for filterSearch', () => { + expect(directive.filterSearch).toBe(label1); + expect(nativeElement.filterSearch).toBe(label1); + + fixture.componentInstance.filterSearch = label2; + fixture.detectChanges(); + + expect(directive.filterSearch).toBe(label2); + expect(nativeElement.filterSearch).toBe(label2); + }); + + it('can be configured with attribute binding for filterNoResults', () => { + expect(directive.filterNoResults).toBe(label1); + expect(nativeElement.filterNoResults).toBe(label1); + + fixture.componentInstance.filterNoResults = label2; + fixture.detectChanges(); + + expect(directive.filterNoResults).toBe(label2); + expect(nativeElement.filterNoResults).toBe(label2); + }); }); }); diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table-with-defaults.directive.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table-with-defaults.directive.ts index cbee2fcd95..4c4d2977b6 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table-with-defaults.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table-with-defaults.directive.ts @@ -14,6 +14,8 @@ export class NimbleLabelProviderTableWithDefaultsDirective { public constructor(protected readonly renderer: Renderer2, protected readonly elementRef: ElementRef) { this.elementRef.nativeElement.groupCollapse = $localize`:Nimble table - collapse group|:Collapse group`; this.elementRef.nativeElement.groupExpand = $localize`:Nimble table - expand group|:Expand group`; + this.elementRef.nativeElement.rowCollapse = $localize`:Nimble table - collapse row|:Collapse row`; + this.elementRef.nativeElement.rowExpand = $localize`:Nimble table - expand row|:Expand row`; this.elementRef.nativeElement.collapseAll = $localize`:Nimble table - collapse all|:Collapse all`; this.elementRef.nativeElement.cellActionMenu = $localize`:Nimble table - cell action menu|:Options`; this.elementRef.nativeElement.columnHeaderGrouped = $localize`:Nimble table - column header grouped|:Grouped`; diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table.directive.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table.directive.ts index 7f68fe9cb5..ebf09e6e20 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table.directive.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/table/nimble-label-provider-table.directive.ts @@ -30,6 +30,22 @@ export class NimbleLabelProviderTableDirective { this.renderer.setProperty(this.elementRef.nativeElement, 'groupExpand', value); } + public get rowCollapse(): string | undefined { + return this.elementRef.nativeElement.rowCollapse; + } + + @Input('row-collapse') public set rowCollapse(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'rowCollapse', value); + } + + public get rowExpand(): string | undefined { + return this.elementRef.nativeElement.rowExpand; + } + + @Input('row-expand') public set rowExpand(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'rowExpand', value); + } + public get collapseAll(): string | undefined { return this.elementRef.nativeElement.collapseAll; } diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table-with-defaults.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table-with-defaults.directive.spec.ts index 6f62cb10b9..1f72c8079a 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table-with-defaults.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table-with-defaults.directive.spec.ts @@ -30,6 +30,8 @@ describe('Nimble LabelProviderTable withDefaults directive', () => { loadTranslations({ [computeMsgId('Collapse group', 'Nimble table - collapse group')]: 'Translated collapse group', [computeMsgId('Expand group', 'Nimble table - expand group')]: 'Translated expand group', + [computeMsgId('Collapse row', 'Nimble table - collapse row')]: 'Translated collapse row', + [computeMsgId('Expand row', 'Nimble table - expand row')]: 'Translated expand row', [computeMsgId('Collapse all', 'Nimble table - collapse all')]: 'Translated collapse all', [computeMsgId('Options', 'Nimble table - cell action menu')]: 'Translated options', [computeMsgId('Grouped', 'Nimble table - column header grouped')]: 'Translated grouped', @@ -50,6 +52,8 @@ describe('Nimble LabelProviderTable withDefaults directive', () => { it('applies translated values for each label', () => { expect(labelProvider.groupCollapse).toBe('Translated collapse group'); expect(labelProvider.groupExpand).toBe('Translated expand group'); + expect(labelProvider.rowCollapse).toBe('Translated collapse row'); + expect(labelProvider.rowExpand).toBe('Translated expand row'); expect(labelProvider.collapseAll).toBe('Translated collapse all'); expect(labelProvider.cellActionMenu).toBe('Translated options'); expect(labelProvider.columnHeaderGrouped).toBe('Translated grouped'); diff --git a/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table.directive.spec.ts b/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table.directive.spec.ts index 87f25ad84c..e0b96f47c4 100644 --- a/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table.directive.spec.ts +++ b/angular-workspace/projects/ni/nimble-angular/label-provider/table/tests/nimble-label-provider-table.directive.spec.ts @@ -16,6 +16,8 @@ describe('Nimble Label Provider Table', () => { const label10 = 'String 10'; const label11 = 'String 11'; const label12 = 'String 12'; + const label13 = 'String 13'; + const label14 = 'String 14'; beforeEach(() => { TestBed.configureTestingModule({ @@ -73,6 +75,16 @@ describe('Nimble Label Provider Table', () => { expect(nativeElement.groupExpand).toBeUndefined(); }); + it('has expected defaults for rowCollapse', () => { + expect(directive.rowCollapse).toBeUndefined(); + expect(nativeElement.rowCollapse).toBeUndefined(); + }); + + it('has expected defaults for rowExpand', () => { + expect(directive.rowExpand).toBeUndefined(); + expect(nativeElement.rowExpand).toBeUndefined(); + }); + it('has expected defaults for collapseAll', () => { expect(directive.collapseAll).toBeUndefined(); expect(nativeElement.collapseAll).toBeUndefined(); @@ -122,14 +134,16 @@ describe('Nimble Label Provider Table', () => { column-header-grouped="${label2}" group-collapse="${label3}" group-expand="${label4}" - collapse-all="${label5}" - column-header-sorted-ascending="${label6}" - column-header-sorted-descending="${label7}" - select-all="${label8}" - group-select-all="${label9}" - row-select="${label10}" - row-operation-column="${label11}" - row-loading="${label12}" + row-collapse="${label5}" + row-expand="${label6}" + collapse-all="${label7}" + column-header-sorted-ascending="${label8}" + column-header-sorted-descending="${label9}" + select-all="${label10}" + group-select-all="${label11}" + row-select="${label12}" + row-operation-column="${label13}" + row-loading="${label14}" > ` @@ -174,44 +188,54 @@ describe('Nimble Label Provider Table', () => { expect(nativeElement.groupExpand).toBe(label4); }); + it('will use template string values for rowCollapse', () => { + expect(directive.rowCollapse).toBe(label5); + expect(nativeElement.rowCollapse).toBe(label5); + }); + + it('will use template string values for rowExpand', () => { + expect(directive.rowExpand).toBe(label6); + expect(nativeElement.rowExpand).toBe(label6); + }); + it('will use template string values for collapseAll', () => { - expect(directive.collapseAll).toBe(label5); - expect(nativeElement.collapseAll).toBe(label5); + expect(directive.collapseAll).toBe(label7); + expect(nativeElement.collapseAll).toBe(label7); }); it('will use template string values for columnHeaderSortedAscending', () => { - expect(directive.columnHeaderSortedAscending).toBe(label6); - expect(nativeElement.columnHeaderSortedAscending).toBe(label6); + expect(directive.columnHeaderSortedAscending).toBe(label8); + expect(nativeElement.columnHeaderSortedAscending).toBe(label8); }); it('will use template string values for columnHeaderSortedDescending', () => { - expect(directive.columnHeaderSortedDescending).toBe(label7); - expect(nativeElement.columnHeaderSortedDescending).toBe(label7); + expect(directive.columnHeaderSortedDescending).toBe(label9); + expect(nativeElement.columnHeaderSortedDescending).toBe(label9); }); it('will use template string values for selectAll', () => { - expect(directive.selectAll).toBe(label8); - expect(nativeElement.selectAll).toBe(label8); + expect(directive.selectAll).toBe(label10); + expect(nativeElement.selectAll).toBe(label10); }); it('will use template string values for groupSelectAll', () => { - expect(directive.groupSelectAll).toBe(label9); - expect(nativeElement.groupSelectAll).toBe(label9); + expect(directive.groupSelectAll).toBe(label11); + expect(nativeElement.groupSelectAll).toBe(label11); }); it('will use template string values for rowSelect', () => { - expect(directive.rowSelect).toBe(label10); - expect(nativeElement.rowSelect).toBe(label10); + expect(directive.rowSelect).toBe(label12); + expect(nativeElement.rowSelect).toBe(label12); }); it('will use template string values for rowOperationColumn', () => { - expect(directive.rowOperationColumn).toBe(label11); - expect(nativeElement.rowOperationColumn).toBe(label11); + expect(directive.rowOperationColumn).toBe(label13); + expect(nativeElement.rowOperationColumn).toBe(label13); }); it('will use template string values for rowLoading', () => { - expect(directive.rowLoading).toBe(label12); - expect(nativeElement.rowLoading).toBe(label12); + expect(directive.rowLoading).toBe(label14); + expect(nativeElement.rowLoading).toBe(label14); }); }); @@ -223,6 +247,8 @@ describe('Nimble Label Provider Table', () => { [columnHeaderGrouped]="columnHeaderGrouped" [groupCollapse]="groupCollapse" [groupExpand]="groupExpand" + [rowCollapse]="rowCollapse" + [rowExpand]="rowExpand" [collapseAll]="collapseAll" [columnHeaderSortedAscending]="columnHeaderSortedAscending" [columnHeaderSortedDescending]="columnHeaderSortedDescending" @@ -242,6 +268,8 @@ describe('Nimble Label Provider Table', () => { public columnHeaderGrouped = label1; public groupCollapse = label1; public groupExpand = label1; + public rowCollapse = label1; + public rowExpand = label1; public collapseAll = label1; public columnHeaderSortedAscending = label1; public columnHeaderSortedDescending = label1; @@ -311,6 +339,28 @@ describe('Nimble Label Provider Table', () => { expect(nativeElement.groupExpand).toBe(label2); }); + it('can be configured with property binding for rowCollapse', () => { + expect(directive.rowCollapse).toBe(label1); + expect(nativeElement.rowCollapse).toBe(label1); + + fixture.componentInstance.rowCollapse = label2; + fixture.detectChanges(); + + expect(directive.rowCollapse).toBe(label2); + expect(nativeElement.rowCollapse).toBe(label2); + }); + + it('can be configured with property binding for rowExpand', () => { + expect(directive.rowExpand).toBe(label1); + expect(nativeElement.rowExpand).toBe(label1); + + fixture.componentInstance.rowExpand = label2; + fixture.detectChanges(); + + expect(directive.rowExpand).toBe(label2); + expect(nativeElement.rowExpand).toBe(label2); + }); + it('can be configured with property binding for collapseAll', () => { expect(directive.collapseAll).toBe(label1); expect(nativeElement.collapseAll).toBe(label1); @@ -408,6 +458,8 @@ describe('Nimble Label Provider Table', () => { [attr.column-header-grouped]="columnHeaderGrouped" [attr.group-collapse]="groupCollapse" [attr.group-expand]="groupExpand" + [attr.row-collapse]="rowCollapse" + [attr.row-expand]="rowExpand" [attr.collapse-all]="collapseAll" [attr.column-header-sorted-ascending]="columnHeaderSortedAscending" [attr.column-header-sorted-descending]="columnHeaderSortedDescending" @@ -427,6 +479,8 @@ describe('Nimble Label Provider Table', () => { public columnHeaderGrouped = label1; public groupCollapse = label1; public groupExpand = label1; + public rowCollapse = label1; + public rowExpand = label1; public collapseAll = label1; public columnHeaderSortedAscending = label1; public columnHeaderSortedDescending = label1; @@ -496,6 +550,28 @@ describe('Nimble Label Provider Table', () => { expect(nativeElement.groupExpand).toBe(label2); }); + it('can be configured with attribute binding for rowCollapse', () => { + expect(directive.rowCollapse).toBe(label1); + expect(nativeElement.rowCollapse).toBe(label1); + + fixture.componentInstance.rowCollapse = label2; + fixture.detectChanges(); + + expect(directive.rowCollapse).toBe(label2); + expect(nativeElement.rowCollapse).toBe(label2); + }); + + it('can be configured with attribute binding for rowExpand', () => { + expect(directive.rowExpand).toBe(label1); + expect(nativeElement.rowExpand).toBe(label1); + + fixture.componentInstance.rowExpand = label2; + fixture.detectChanges(); + + expect(directive.rowExpand).toBe(label2); + expect(nativeElement.rowExpand).toBe(label2); + }); + it('can be configured with attribute binding for collapseAll', () => { expect(directive.collapseAll).toBe(label1); expect(nativeElement.collapseAll).toBe(label1); diff --git a/change/@ni-nimble-angular-bb7e376e-ce72-4760-bb8d-f5775b8eefa8.json b/change/@ni-nimble-angular-bb7e376e-ce72-4760-bb8d-f5775b8eefa8.json new file mode 100644 index 0000000000..bc88667bdc --- /dev/null +++ b/change/@ni-nimble-angular-bb7e376e-ce72-4760-bb8d-f5775b8eefa8.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Update default values in label provider directives and expose additional label provider properties", + "packageName": "@ni/nimble-angular", + "email": "jattasNI@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-blazor-8b481f76-2252-49bf-8f00-07c884c3b2d4.json b/change/@ni-nimble-blazor-8b481f76-2252-49bf-8f00-07c884c3b2d4.json new file mode 100644 index 0000000000..b1163223b2 --- /dev/null +++ b/change/@ni-nimble-blazor-8b481f76-2252-49bf-8f00-07c884c3b2d4.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Expose additional label provider properties", + "packageName": "@ni/nimble-blazor", + "email": "jattasNI@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-components-01c69e77-25e6-4f6e-a42c-0254916345eb.json b/change/@ni-nimble-components-01c69e77-25e6-4f6e-a42c-0254916345eb.json new file mode 100644 index 0000000000..aeffcb7c25 --- /dev/null +++ b/change/@ni-nimble-components-01c69e77-25e6-4f6e-a42c-0254916345eb.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "Rename icon labels to follow naming convention", + "packageName": "@ni/nimble-components", + "email": "jattasNI@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor index 4d7f99c505..f5a2274346 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor @@ -3,5 +3,10 @@ popup-dismiss="@PopupDismiss" numeric-decrement="@NumericDecrement" numeric-increment="@NumericIncrement" + popup-icon-error="@PopupIconError" + popup-icon-warning="@PopupIconWarning" + popup-icon-information="@PopupIconInformation" + filter-search="@FilterSearch" + filter-no-results="@FilterNoResults" @attributes="AdditionalAttributes"> diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs index e2e23abe27..eeb080d23a 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderCore.razor.cs @@ -16,6 +16,21 @@ public partial class NimbleLabelProviderCore : ComponentBase [Parameter] public string? NumericDecrement { get; set; } + [Parameter] + public string? PopupIconError { get; set; } + + [Parameter] + public string? PopupIconWarning { get; set; } + + [Parameter] + public string? PopupIconInformation { get; set; } + + [Parameter] + public string? FilterSearch { get; set; } + + [Parameter] + public string? FilterNoResults { get; set; } + /// /// Gets or sets a collection of additional attributes that will be applied to the created element. /// diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor index 50351dc8bc..a71b904408 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor @@ -2,6 +2,8 @@ ` >
${when(x => x.severity === BannerSeverity.error, html` - <${iconExclamationMarkTag} role="img" aria-label="${x => errorIconLabel.getValueFor(x)}"> + <${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"> `)} ${when(x => x.severity === BannerSeverity.warning, html` - <${iconTriangleFilledTag} role="img" aria-label="${x => warningIconLabel.getValueFor(x)}"> + <${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"> `)} ${when(x => x.severity === BannerSeverity.information, html` - <${iconInfoTag} role="img" aria-label="${x => informationIconLabel.getValueFor(x)}"> + <${iconInfoTag} role="img" aria-label="${x => popupIconInformationLabel.getValueFor(x)}"> `)}
diff --git a/packages/nimble-components/src/label-provider/core/index.ts b/packages/nimble-components/src/label-provider/core/index.ts index f7c901dc12..b0a872a5e7 100644 --- a/packages/nimble-components/src/label-provider/core/index.ts +++ b/packages/nimble-components/src/label-provider/core/index.ts @@ -5,9 +5,9 @@ import { popupDismissLabel, numericDecrementLabel, numericIncrementLabel, - errorIconLabel, - warningIconLabel, - informationIconLabel, + popupIconErrorLabel, + popupIconWarningLabel, + popupIconInformationLabel, filterSearchLabel, filterNoResultsLabel } from './label-tokens'; @@ -22,9 +22,9 @@ const supportedLabels = { popupDismiss: popupDismissLabel, numericDecrement: numericDecrementLabel, numericIncrement: numericIncrementLabel, - errorIcon: errorIconLabel, - warningIcon: warningIconLabel, - informationIcon: informationIconLabel, + popupIconError: popupIconErrorLabel, + popupIconWarning: popupIconWarningLabel, + popupIconInformation: popupIconInformationLabel, filterSearch: filterSearchLabel, filterNoResults: filterNoResultsLabel } as const; @@ -44,14 +44,14 @@ export class LabelProviderCore @attr({ attribute: 'numeric-increment' }) public numericIncrement: string | undefined; - @attr({ attribute: 'error-icon' }) - public errorIcon: string | undefined; + @attr({ attribute: 'popup-icon-error' }) + public popupIconError: string | undefined; - @attr({ attribute: 'warning-icon' }) - public warningIcon: string | undefined; + @attr({ attribute: 'popup-icon-warning' }) + public popupIconWarning: string | undefined; - @attr({ attribute: 'information-icon' }) - public informationIcon: string | undefined; + @attr({ attribute: 'popup-icon-information' }) + public popupIconInformation: string | undefined; @attr({ attribute: 'filter-search' }) public filterSearch: string | undefined; diff --git a/packages/nimble-components/src/label-provider/core/label-token-defaults.ts b/packages/nimble-components/src/label-provider/core/label-token-defaults.ts index 91ed6e5993..b555c28f27 100644 --- a/packages/nimble-components/src/label-provider/core/label-token-defaults.ts +++ b/packages/nimble-components/src/label-provider/core/label-token-defaults.ts @@ -6,9 +6,9 @@ export const coreLabelDefaults: { readonly [key in TokenName]: string } = { popupDismissLabel: 'Close', numericIncrementLabel: 'Increment', numericDecrementLabel: 'Decrement', - errorIconLabel: 'Error', - warningIconLabel: 'Warning', - informationIconLabel: 'Information', + popupIconErrorLabel: 'Error', + popupIconWarningLabel: 'Warning', + popupIconInformationLabel: 'Information', filterSearchLabel: 'Search', filterNoResultsLabel: 'No items found' }; diff --git a/packages/nimble-components/src/label-provider/core/label-tokens.ts b/packages/nimble-components/src/label-provider/core/label-tokens.ts index 2cfe2debce..2f6f518ec5 100644 --- a/packages/nimble-components/src/label-provider/core/label-tokens.ts +++ b/packages/nimble-components/src/label-provider/core/label-tokens.ts @@ -16,20 +16,20 @@ export const numericIncrementLabel = DesignToken.create({ cssCustomPropertyName: null }).withDefault(coreLabelDefaults.numericIncrementLabel); -export const errorIconLabel = DesignToken.create({ - name: 'error-icon-label', +export const popupIconErrorLabel = DesignToken.create({ + name: 'popup-icon-error-label', cssCustomPropertyName: null -}).withDefault(coreLabelDefaults.errorIconLabel); +}).withDefault(coreLabelDefaults.popupIconErrorLabel); -export const warningIconLabel = DesignToken.create({ - name: 'warning-icon-label', +export const popupIconWarningLabel = DesignToken.create({ + name: 'popup-icon-warning-label', cssCustomPropertyName: null -}).withDefault(coreLabelDefaults.warningIconLabel); +}).withDefault(coreLabelDefaults.popupIconWarningLabel); -export const informationIconLabel = DesignToken.create({ - name: 'information-icon-label', +export const popupIconInformationLabel = DesignToken.create({ + name: 'popup-icon-information-label', cssCustomPropertyName: null -}).withDefault(coreLabelDefaults.informationIconLabel); +}).withDefault(coreLabelDefaults.popupIconInformationLabel); export const filterSearchLabel = DesignToken.create({ name: 'filter-search-label',