Merge branch 'main' into anchor-menu-item-focus-styling-fix

ni · May 2, 2024 · ccb3041 · ccb3041
2 parents b91cf2e + 9cd2548
commit ccb3041
Show file tree

Hide file tree

Showing 16 changed files with 139 additions and 16 deletions.
diff --git a/angular-workspace/projects/example-client-app/src/app/app.module.ts b/angular-workspace/projects/example-client-app/src/app/app.module.ts
@@ -9,7 +9,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
     NimbleIconAddModule, NimbleSwitchModule, NimbleToolbarModule, NimbleMenuButtonModule, NimbleComboboxModule, NimbleTooltipModule,
     NimbleCardButtonModule, NimbleDialogModule, NimbleRadioGroupModule, NimbleRadioModule, NimbleSpinnerModule,
     NimbleAnchorModule, NimbleAnchorButtonModule, NimbleAnchorTabModule, NimbleAnchorTabsModule,
-    NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule } from '@ni/nimble-angular';
+    NimbleIconCheckModule, NimbleBannerModule, NimbleAnchorMenuItemModule, NimbleAnchorTreeItemModule, NimbleIconXmarkCheckModule } from '@ni/nimble-angular';
 import { NimbleCardModule } from '@ni/nimble-angular/card';
 import { NimbleLabelProviderCoreModule } from '@ni/nimble-angular/label-provider/core';
 import { NimbleLabelProviderRichTextModule } from '@ni/nimble-angular/label-provider/rich-text';
@@ -68,6 +68,7 @@ import { HeaderComponent } from './header/header.component';
         NimbleBreadcrumbItemModule,
         NimbleIconAddModule,
         NimbleIconCheckModule,
+        NimbleIconXmarkCheckModule,
         NimbleSpinnerModule,
         NimbleSwitchModule,
         NimbleToolbarModule,

diff --git a/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html b/angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html
@@ -258,18 +258,21 @@
                 <nimble-table-column-icon
                     field-name="result"
                     key-type="string"
+                    width-mode="icon-size"
                 >
                     <nimble-mapping-icon
                         key="success"
                         text="Success"
                         icon="nimble-icon-check"
-                        severity="success">
+                        severity="success"
+                        text-hidden>
                     </nimble-mapping-icon>
                     <nimble-mapping-spinner
                         key="unknown"
-                        text="Unknown">
+                        text="Unknown"
+                        text-hidden>
                     </nimble-mapping-spinner>
-                    Result
+                    <nimble-icon-xmark-check title="Result"></nimble-icon-xmark-check>
                 </nimble-table-column-icon>
                 <nimble-table-column-number-text
                     field-name="number"

diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Thu, 02 May 2024 17:22:44 GMT",
+      "version": "23.2.0",
+      "tag": "@ni/nimble-angular_v23.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "20542556+mollykreis@users.noreply.github.com",
+            "package": "@ni/nimble-angular",
+            "commit": "7a27f45851b45e29a554e3effc812011108db80d",
+            "comment": "Add width-mode to the icon column"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 01 May 2024 21:45:37 GMT",
       "version": "23.1.11",

diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-This log was last generated on Wed, 01 May 2024 21:45:37 GMT and should not be manually modified.
+This log was last generated on Thu, 02 May 2024 17:22:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 23.2.0
+
+Thu, 02 May 2024 17:22:44 GMT
+
+### Minor changes
+
+- Add width-mode to the icon column ([ni/nimble@7a27f45](https://github.com/ni/nimble/commit/7a27f45851b45e29a554e3effc812011108db80d))
+
 ## 23.1.11
 
 Wed, 01 May 2024 21:45:37 GMT

diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "23.1.11",
+  "version": "23.2.0",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../../../dist/ni/nimble-angular && npm publish",

diff --git a/...kspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts b/...kspace/projects/ni/nimble-angular/table-column/icon/nimble-table-column-icon.directive.ts
@@ -3,8 +3,9 @@ import { type TableColumnIcon, tableColumnIconTag } from '@ni/nimble-components/
 import { BooleanValueOrAttribute, NumberValueOrAttribute, toBooleanProperty, toNullableNumberProperty } from '@ni/nimble-angular/internal-utilities';
 import { NimbleTableColumnBaseDirective } from '@ni/nimble-angular/table-column';
 import { MappingKeyType } from '@ni/nimble-components/dist/esm/table-column/enum-base/types';
+import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/icon/types';
 
-export { MappingKeyType };
+export { MappingKeyType, TableColumnMappingWidthMode };
 export type { TableColumnIcon };
 export { tableColumnIconTag };
 
@@ -63,6 +64,14 @@ export class NimbleTableColumnIconDirective extends NimbleTableColumnBaseDirecti
         this.renderer.setProperty(this.elementRef.nativeElement, 'groupingDisabled', toBooleanProperty(value));
     }
 
+    public get widthMode(): TableColumnMappingWidthMode {
+        return this.elementRef.nativeElement.widthMode;
+    }
+
+    @Input('width-mode') public set widthMode(value: TableColumnMappingWidthMode) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'widthMode', value);
+    }
+
     public constructor(renderer: Renderer2, elementRef: ElementRef<TableColumnIcon>) {
         super(renderer, elementRef);
     }

diff --git a/...ects/ni/nimble-angular/table-column/icon/tests/nimble-table-column-icon.directive.spec.ts b/...ects/ni/nimble-angular/table-column/icon/tests/nimble-table-column-icon.directive.spec.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NimbleTableModule } from '../../../table/nimble-table.module';
 import { NimbleTableColumnIconModule } from '../nimble-table-column-icon.module';
-import { NimbleTableColumnIconDirective, TableColumnIcon } from '../nimble-table-column-icon.directive';
+import { NimbleTableColumnIconDirective, TableColumnIcon, TableColumnMappingWidthMode } from '../nimble-table-column-icon.directive';
 import { TableColumnSortDirection } from '../../nimble-table-column-base.directive';
 
 describe('NimbleTableColumnIcon', () => {
@@ -36,6 +36,7 @@ describe('NimbleTableColumnIcon', () => {
                         sort-index="0"
                         group-index="0"
                         grouping-disabled
+                        width-mode="icon-size"
                     ></nimble-table-column-icon>
                 </nimble-table>
             `
@@ -119,6 +120,11 @@ describe('NimbleTableColumnIcon', () => {
             expect(directive.groupingDisabled).toBeTrue();
             expect(nativeElement.groupingDisabled).toBeTrue();
         });
+
+        it('will use template string values for widthMode', () => {
+            expect(directive.widthMode).toBe(TableColumnMappingWidthMode.iconSize);
+            expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.iconSize);
+        });
     });
 
     describe('with property bound values', () => {
@@ -139,6 +145,7 @@ describe('NimbleTableColumnIcon', () => {
                         [sort-index]="sortIndex"
                         [group-index]="groupIndex"
                         [grouping-disabled]="groupingDisabled"
+                        [width-mode]="widthMode"
                     ></nimble-table-column-icon>
                 </nimble-table>
             `
@@ -158,6 +165,7 @@ describe('NimbleTableColumnIcon', () => {
             public sortIndex: number | null = 0;
             public groupIndex: number | null = 0;
             public groupingDisabled = false;
+            public widthMode: TableColumnMappingWidthMode = TableColumnMappingWidthMode.iconSize;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -350,6 +358,17 @@ describe('NimbleTableColumnIcon', () => {
             expect(directive.groupingDisabled).toBeTrue();
             expect(nativeElement.groupingDisabled).toBeTrue();
         });
+
+        it('can be configured with property binding for widthMode', () => {
+            expect(directive.widthMode).toBe(TableColumnMappingWidthMode.iconSize);
+            expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.iconSize);
+
+            fixture.componentInstance.widthMode = TableColumnMappingWidthMode.default;
+            fixture.detectChanges();
+
+            expect(directive.widthMode).toBe(TableColumnMappingWidthMode.default);
+            expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.default);
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -370,6 +389,7 @@ describe('NimbleTableColumnIcon', () => {
                         [attr.sort-index]="sortIndex"
                         [attr.group-index]="groupIndex"
                         [attr.grouping-disabled]="groupingDisabled"
+                        [attr.width-mode]="widthMode"
                     ></nimble-table-column-icon>
                 </nimble-table>
             `
@@ -389,6 +409,7 @@ describe('NimbleTableColumnIcon', () => {
             public sortIndex: number | null = 0;
             public groupIndex: number | null = 0;
             public groupingDisabled = false;
+            public widthMode: TableColumnMappingWidthMode = TableColumnMappingWidthMode.iconSize;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -581,5 +602,16 @@ describe('NimbleTableColumnIcon', () => {
             expect(directive.groupingDisabled).toBe(true);
             expect(nativeElement.groupingDisabled).toBe(true);
         });
+
+        it('can be configured with attribute binding for widthMode', () => {
+            expect(directive.widthMode).toBe(TableColumnMappingWidthMode.iconSize);
+            expect(nativeElement.widthMode).toBe(TableColumnMappingWidthMode.iconSize);
+
+            fixture.componentInstance.widthMode = TableColumnMappingWidthMode.default;
+            fixture.detectChanges();
+
+            expect(directive.widthMode).toBeFalsy();
+            expect(nativeElement.widthMode).toBeFalsy();
+        });
     });
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor
@@ -238,18 +238,20 @@
                     <NimbleMappingText Key="101" Text="Status message 2"></NimbleMappingText>
                     Status
                 </NimbleTableColumnIcon>
-                <NimbleTableColumnIcon FieldName="Result" TKey="string">
+                <NimbleTableColumnIcon FieldName="Result" TKey="string" WidthMode="MappingColumnWidthMode.IconSize">
                     <NimbleMappingIcon
                         Key=@("success")
                         Text="Success"
                         Icon="nimble-icon-check"
-                        Severity="IconSeverity.Success">
+                        Severity="IconSeverity.Success"
+                        TextHidden="true">
                     </NimbleMappingIcon>
                     <NimbleMappingSpinner
                         Key=@("unknown")
-                        Text="Unknown">
+                        Text="Unknown"
+                        TextHidden="true">
                     </NimbleMappingSpinner>
-                    Result
+                    <NimbleIconXmarkCheck title="Result"></NimbleIconXmarkCheck>
                 </NimbleTableColumnIcon>
                 <NimbleTableColumnNumberText FieldName="Number">Number</NimbleTableColumnNumberText>
                 <NimbleTableColumnDurationText FieldName="Duration">Duration</NimbleTableColumnDurationText>

diff --git a/packages/nimble-blazor/NimbleBlazor/CHANGELOG.json b/packages/nimble-blazor/NimbleBlazor/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-blazor",
   "entries": [
+    {
+      "date": "Thu, 02 May 2024 17:22:44 GMT",
+      "version": "16.1.0",
+      "tag": "@ni/nimble-blazor_v16.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "20542556+mollykreis@users.noreply.github.com",
+            "package": "@ni/nimble-blazor",
+            "commit": "7a27f45851b45e29a554e3effc812011108db80d",
+            "comment": "Add WidthMode to icon column"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 01 May 2024 22:28:21 GMT",
       "version": "16.0.10",

diff --git a/packages/nimble-blazor/NimbleBlazor/CHANGELOG.md b/packages/nimble-blazor/NimbleBlazor/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-blazor
 
-This log was last generated on Wed, 01 May 2024 22:28:21 GMT and should not be manually modified.
+This log was last generated on Thu, 02 May 2024 17:22:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 16.1.0
+
+Thu, 02 May 2024 17:22:44 GMT
+
+### Minor changes
+
+- Add WidthMode to icon column ([ni/nimble@7a27f45](https://github.com/ni/nimble/commit/7a27f45851b45e29a554e3effc812011108db80d))
+
 ## 16.0.10
 
 Wed, 01 May 2024 22:28:21 GMT

diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor
@@ -16,6 +16,7 @@
     group-index="@GroupIndex"
     grouping-disabled="@GroupingDisabled"
     key-type="@GetTKeyAsJSType()"
+    width-mode="@WidthMode.ToAttributeValue()"
     @attributes="AdditionalAttributes"
 >
     @ChildContent

diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTableColumnIcon.razor.cs
@@ -15,4 +15,10 @@ public partial class NimbleTableColumnIcon<TKey> : NimbleTableColumnEnumBase<TKe
     /// </summary>
     [Parameter]
     public double? MinPixelWidth { get; set; }
+
+    /// <summary>
+    /// Sets the width mode on the column.
+    /// </summary>
+    [Parameter]
+    public MappingColumnWidthMode? WidthMode { get; set; }
 }
diff --git a/packages/nimble-blazor/NimbleBlazor/MappingColumnTypes.cs b/packages/nimble-blazor/NimbleBlazor/MappingColumnTypes.cs
@@ -0,0 +1,14 @@
+namespace NimbleBlazor;
+
+public enum MappingColumnWidthMode
+{
+    Default,
+    IconSize
+}
+
+internal static class MappingColumnWidthModeExtensions
+{
+    private static readonly Dictionary<MappingColumnWidthMode, string> _enumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues<MappingColumnWidthMode>();
+
+    public static string? ToAttributeValue(this MappingColumnWidthMode? value) => (value == null || value == MappingColumnWidthMode.Default) ? null : _enumValues[value.Value];
+}
diff --git a/packages/nimble-blazor/NimbleBlazor/package.json b/packages/nimble-blazor/NimbleBlazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "16.0.10",
+  "version": "16.1.0",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist",

diff --git a/...ages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTableColumnIconTests.cs b/...ages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTableColumnIconTests.cs
@@ -142,6 +142,15 @@ public void NimbleTableColumnIcon_WithFieldNameAttribute_HasMarkup()
         Assert.Contains(expectedMarkup, column.Markup);
     }
 
+    [Fact]
+    public void NimbleTableColumnIcon_WithWidthModeAttribute_HasMarkup()
+    {
+        var column = RenderWithPropertySet<int, MappingColumnWidthMode?>(x => x.WidthMode, MappingColumnWidthMode.IconSize);
+
+        var expectedMarkup = @"width-mode=""icon-size""";
+        Assert.Contains(expectedMarkup, column.Markup);
+    }
+
     private IRenderedComponent<NimbleTableColumnIcon<TKey>> RenderTableEnumColumn<TKey>()
     {
         var context = new TestContext();