diff --git a/change/@ni-nimble-angular-49a2a358-14eb-4711-b0fe-17aef922206b.json b/change/@ni-nimble-angular-49a2a358-14eb-4711-b0fe-17aef922206b.json new file mode 100644 index 0000000000..dd758d3b66 --- /dev/null +++ b/change/@ni-nimble-angular-49a2a358-14eb-4711-b0fe-17aef922206b.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Adding clearable API for Select.", + "packageName": "@ni/nimble-angular", + "email": "26874831+atmgrifter00@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-blazor-14cb8077-de1b-4dfb-ab0b-a085e911680a.json b/change/@ni-nimble-blazor-14cb8077-de1b-4dfb-ab0b-a085e911680a.json new file mode 100644 index 0000000000..979d9c6a2c --- /dev/null +++ b/change/@ni-nimble-blazor-14cb8077-de1b-4dfb-ab0b-a085e911680a.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Adding Clearable API for Select", + "packageName": "@ni/nimble-blazor", + "email": "26874831+atmgrifter00@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts b/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts index ef01f25446..73414668d7 100644 --- a/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts +++ b/packages/angular-workspace/nimble-angular/src/directives/select/nimble-select.directive.ts @@ -31,6 +31,14 @@ export class NimbleSelectDirective { this.renderer.setProperty(this.elementRef.nativeElement, 'filterMode', value); } + public get clearable(): boolean { + return this.elementRef.nativeElement.clearable; + } + + @Input() public set clearable(value: BooleanValueOrAttribute) { + this.renderer.setProperty(this.elementRef.nativeElement, 'clearable', toBooleanProperty(value)); + } + public get disabled(): boolean { return this.elementRef.nativeElement.disabled; } diff --git a/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts b/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts index ab439f1d9e..1bc5fc741b 100644 --- a/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts +++ b/packages/angular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts @@ -57,6 +57,11 @@ describe('Nimble select', () => { expect(nativeElement.filterMode).toBe(FilterMode.none); }); + it('has expected defaults for clearable', () => { + expect(directive.clearable).toBe(false); + expect(nativeElement.clearable).toBe(false); + }); + it('has expected defaults for errorText', () => { expect(directive.errorText).toBeUndefined(); expect(nativeElement.errorText).toBeUndefined(); @@ -86,6 +91,7 @@ describe('Nimble select', () => { disabled appearance="${DropdownAppearance.block}" filter-mode="${FilterMode.standard}" + clearable error-text="error text" error-visible > @@ -127,6 +133,11 @@ describe('Nimble select', () => { expect(nativeElement.filterMode).toBe(FilterMode.standard); }); + it('will use template string values for clearable', () => { + expect(directive.clearable).toBeTrue(); + expect(nativeElement.clearable).toBeTrue(); + }); + it('will use template string values for errorText', () => { expect(directive.errorText).toBe('error text'); expect(nativeElement.errorText).toBe('error text'); @@ -145,6 +156,7 @@ describe('Nimble select', () => { [disabled] = "disabled" [appearance]="appearance" [filter-mode]="filterMode" + [clearable]="clearable" [error-text]="errorText" [error-visible]="errorVisible" > @@ -157,6 +169,7 @@ describe('Nimble select', () => { public disabled = false; public appearance: DropdownAppearance = DropdownAppearance.block; public filterMode: FilterMode = FilterMode.standard; + public clearable = false; public errorText = 'initial value'; public errorVisible = false; } @@ -209,6 +222,17 @@ describe('Nimble select', () => { expect(nativeElement.filterMode).toBe(FilterMode.none); }); + it('can be configured with property binding for clearable', () => { + expect(directive.clearable).toBeFalse(); + expect(nativeElement.clearable).toBeFalse(); + + fixture.componentInstance.clearable = true; + fixture.detectChanges(); + + expect(directive.clearable).toBeTrue(); + expect(nativeElement.clearable).toBeTrue(); + }); + it('can be configured with property binding for errorText', () => { expect(directive.errorText).toBe('initial value'); expect(nativeElement.errorText).toBe('initial value'); @@ -239,6 +263,7 @@ describe('Nimble select', () => { [attr.disabled]="disabled" [attr.appearance]="appearance" [attr.filter-mode]="filterMode" + [attr.clearable]="clearable" [attr.error-text]="errorText" [attr.error-visible]="errorVisible" > @@ -251,6 +276,7 @@ describe('Nimble select', () => { public disabled: BooleanValueOrAttribute = null; public appearance: DropdownAppearance = DropdownAppearance.block; public filterMode: FilterMode; + public clearable: BooleanValueOrAttribute = null; public errorText = 'initial value'; public errorVisible: BooleanValueOrAttribute = null; } @@ -303,6 +329,17 @@ describe('Nimble select', () => { expect(nativeElement.filterMode).toBe(FilterMode.standard); }); + it('can be configured with attribute binding for clearable', () => { + expect(directive.clearable).toBeFalse(); + expect(nativeElement.clearable).toBeFalse(); + + fixture.componentInstance.clearable = ''; + fixture.detectChanges(); + + expect(directive.clearable).toBeTrue(); + expect(nativeElement.clearable).toBeTrue(); + }); + it('can be configured with attribute binding for errorText', () => { expect(directive.errorText).toBe('initial value'); expect(nativeElement.errorText).toBe('initial value'); diff --git a/packages/blazor-workspace/CodeAnalysisDictionary.xml b/packages/blazor-workspace/CodeAnalysisDictionary.xml index 4a88b4c9ae..627b77da6a 100644 --- a/packages/blazor-workspace/CodeAnalysisDictionary.xml +++ b/packages/blazor-workspace/CodeAnalysisDictionary.xml @@ -5,7 +5,8 @@ args blazor bool - combobox + clearable + combobox dropdown enum frameless diff --git a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor index d2cf39488f..f89c63dfa0 100644 --- a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -170,7 +170,7 @@
Select
- + Option 1 Option 2 Option 3 diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor b/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor index 5e18f48922..a56ec1c52a 100644 --- a/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor @@ -9,6 +9,7 @@ position="@Position.ToAttributeValue()" appearance="@Appearance.ToAttributeValue()" filter-mode="@FilterMode.ToAttributeValue()" + clearable="@Clearable" error-text="@ErrorText" error-visible="@ErrorVisible" @attributes="AdditionalAttributes"> diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor.cs b/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor.cs index 6c07e85686..af349c67a9 100644 --- a/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor.cs +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor.cs @@ -38,6 +38,12 @@ public partial class NimbleSelect : NimbleInputBase [Parameter] public FilterMode? FilterMode { get; set; } + /// + /// Gets or sets whether the select can be cleared. + /// + [Parameter] + public bool? Clearable { get; set; } + /// /// Gets or sets the select error text /// diff --git a/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleSelectTests.cs b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleSelectTests.cs index 03403fef01..d16cfee732 100644 --- a/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleSelectTests.cs +++ b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleSelectTests.cs @@ -94,6 +94,14 @@ public void Select_FilterModeNoneIsSet() Assert.DoesNotContain("filter-mode", select.Markup); } + [Fact] + public void SelectClearable_AttributeIsSet() + { + var select = RenderWithPropertySet(x => x.Clearable, true); + + Assert.Contains("clearable", select.Markup); + } + private IRenderedComponent RenderWithPropertySet(Expression> propertyGetter, TProperty propertyValue) { var context = new TestContext();