Clearable select integration for Angular/Blazor (#2124)

# Pull Request ## 🤨 Rationale - #1951
ni · May 21, 2024 · 89e3bc8 · 89e3bc8
1 parent 63403fc
commit 89e3bc8
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 2 deletions.
diff --git a/change/@ni-nimble-angular-49a2a358-14eb-4711-b0fe-17aef922206b.json 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
@@ -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
@@ -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/...ular-workspace/nimble-angular/src/directives/select/tests/nimble-select.directive.spec.ts b/...ular-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
@@ -5,7 +5,8 @@
             <Word>args</Word>
             <Word>blazor</Word>
             <Word>bool</Word>
-            <Word>combobox</Word>
+			<Word>clearable</Word>
+			<Word>combobox</Word>
             <Word>dropdown</Word>
             <Word>enum</Word>
             <Word>frameless</Word>

diff --git a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor
@@ -170,7 +170,7 @@
         </div>
         <div class="sub-container">
             <div class="container-label">Select</div>
-            <NimbleSelect Appearance="DropdownAppearance.Underline" FilterMode="FilterMode.Standard">
+            <NimbleSelect Appearance="DropdownAppearance.Underline" FilterMode="FilterMode.Standard" Clearable="true">
                 <NimbleListOption>Option 1</NimbleListOption>
                 <NimbleListOption>Option 2</NimbleListOption>
                 <NimbleListOption>Option 3</NimbleListOption>

diff --git 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
@@ -38,6 +38,12 @@ public partial class NimbleSelect : NimbleInputBase<string?>
     [Parameter]
     public FilterMode? FilterMode { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether the select can be cleared.
+    /// </summary>
+    [Parameter]
+    public bool? Clearable { get; set; }
+
     /// <summary>
     /// Gets or sets the select error text
     /// </summary>

diff --git 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<NimbleSelect> RenderWithPropertySet<TProperty>(Expression<Func<NimbleSelect, TProperty>> propertyGetter, TProperty propertyValue)
     {
         var context = new TestContext();