Merge branch 'main' into users/makinc/migrate-nimble-storybook

angular-workspace/projects/ni/nimble-angular/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Tue, 30 Apr 2024 21:26:44 GMT",
+      "version": "23.1.7",
+      "tag": "@ni/nimble-angular_v23.1.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v27.1.0",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 26 Apr 2024 21:13:31 GMT",
       "version": "23.1.6",

angular-workspace/projects/ni/nimble-angular/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-This log was last generated on Fri, 26 Apr 2024 21:13:31 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Apr 2024 21:26:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 23.1.7
+
+Tue, 30 Apr 2024 21:26:44 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v27.1.0
+
 ## 23.1.6
 
 Fri, 26 Apr 2024 21:13:31 GMT

angular-workspace/projects/ni/nimble-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "23.1.6",
+  "version": "23.1.7",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../../../dist/ni/nimble-angular && npm publish",
@@ -32,7 +32,7 @@
     "@angular/forms": "^16.2.12",
     "@angular/localize": "^16.2.12",
     "@angular/router": "^16.2.12",
-    "@ni/nimble-components": "^27.0.5"
+    "@ni/nimble-components": "^27.1.0"
   },
   "dependencies": {
     "tslib": "^2.2.0"

angular-workspace/projects/ni/spright-angular/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@ni/spright-angular",
   "entries": [
+    {
+      "date": "Tue, 30 Apr 2024 21:26:44 GMT",
+      "version": "0.1.5",
+      "tag": "@ni/spright-angular_v0.1.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/spright-angular",
+            "comment": "Bump @ni/spright-components to v0.0.8",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 26 Apr 2024 21:13:31 GMT",
       "version": "0.1.4",

angular-workspace/projects/ni/spright-angular/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @ni/spright-angular
 
-This log was last generated on Fri, 26 Apr 2024 21:13:31 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Apr 2024 21:26:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.1.5
+
+Tue, 30 Apr 2024 21:26:44 GMT
+
+### Patches
+
+- Bump @ni/spright-components to v0.0.8
+
 ## 0.1.4
 
 Fri, 26 Apr 2024 21:13:31 GMT

angular-workspace/projects/ni/spright-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/spright-angular",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Angular components for NI Spright",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../../../dist/ni/spright-angular && npm publish",
@@ -24,7 +24,7 @@
   "peerDependencies": {
     "@angular/common": "^16.2.12",
     "@angular/core": "^16.2.12",
-    "@ni/spright-components": "^0.0.7"
+    "@ni/spright-components": "^0.0.8"
   },
   "dependencies": {
     "tslib": "^2.2.0"

change/@ni-nimble-components-f028edbe-bdf4-412d-97f6-8514653f4f59.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Move anchored region import from menu to menu item",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "16.0.4",
+  "version": "16.0.5",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-hybrid && npm run build:release && npm run build:client",

packages/nimble-components/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Tue, 30 Apr 2024 21:26:44 GMT",
+      "version": "27.1.0",
+      "tag": "@ni/nimble-components_v27.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "20542556+mollykreis@users.noreply.github.com",
+            "package": "@ni/nimble-components",
+            "commit": "6b0f3371aa6b49b802d2a0d9e79365e544cef161",
+            "comment": "Add configuration to make the icon column fixed width"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 30 Apr 2024 15:26:51 GMT",
       "version": "27.0.5",

packages/nimble-components/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-components
 
-This log was last generated on Fri, 26 Apr 2024 21:13:31 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Apr 2024 21:26:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 27.1.0
+
+Tue, 30 Apr 2024 21:26:44 GMT
+
+### Minor changes
+
+- Add configuration to make the icon column fixed width ([ni/nimble@6b0f337](https://github.com/ni/nimble/commit/6b0f3371aa6b49b802d2a0d9e79365e544cef161))
+
 ## 27.0.5
 
 Fri, 26 Apr 2024 21:13:31 GMT

packages/nimble-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "27.0.5",
+  "version": "27.1.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",

packages/nimble-components/src/menu-item/index.ts

@@ -7,6 +7,10 @@ import {
 import { arrowExpanderRight16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
 
+// FAST menu item template requires an anchored region is available using tagFor DI
+// Register anchored region explicitly to make sure it is defined for the template
+import '../anchored-region';
+
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-menu-item': MenuItem;

packages/nimble-components/src/menu/index.ts

@@ -5,10 +5,6 @@ import {
 } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 
-// FAST menu template requires an anchored region is available using tagFor DI
-// Register anchored region explicitly to make sure it is defined for the template
-import '../anchored-region';
-
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-menu': Menu;

packages/nimble-components/src/table-column/base/models/column-internals.ts

@@ -140,6 +140,19 @@ export class ColumnInternals<
     @observable
     public minPixelWidth = defaultMinPixelWidth;
 
+    /**
+     * Whether or not resizing the column has been disabled.
+     */
+    @observable
+    public resizingDisabled = false;
+
+    /**
+     * Whether or not the grouping and sorting indicators should be hidden in the column header
+     * when the column is grouped or sorted.
+     */
+    @observable
+    public hideHeaderIndicators = false;
+
     /**
      * @internal Do not write to this value directly. It is used by the Table in order to store
      * the resolved value of the fractionalWidth after updates programmatic or interactive updates.

packages/nimble-components/src/table-column/base/types.ts

@@ -44,19 +44,22 @@ export type TableColumnSortOperation =
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface TableColumnValidity extends ValidityObject {}
 
-const groupIconSize = 16;
-const sortIconSize = 16;
-const spacing = 8;
-const menuDropdownSize = 24;
+const columnIconSize = 16; // `iconSize` token
+const columnSpacing = 8; // `mediumPadding` token
+const menuDropdownSize = 24; // `controlSlimHeight` token
 const oneCharPlusEllipsisSize = 21;
-export const defaultMinPixelWidth = spacing
+export const defaultMinPixelWidth = columnSpacing // left cell padding
     + oneCharPlusEllipsisSize
-    + spacing
-    + sortIconSize
-    + spacing
-    + groupIconSize
-    + spacing
+    + columnSpacing
+    + columnIconSize // sort icon
+    + columnSpacing
+    + columnIconSize // group icon
+    + columnSpacing
     + menuDropdownSize
-    + spacing;
+    + columnSpacing; // right cell padding
+
+export const singleIconColumnWidth = columnSpacing // left cell padding
+    + columnIconSize
+    + columnSpacing; // right cell padding
 
 export const defaultFractionalWidth = 1;

packages/nimble-components/src/table-column/icon/index.ts

@@ -1,12 +1,17 @@
 import { DesignSystem } from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
 import {
     MappingConfigs,
     TableColumnEnumBase,
     TableColumnEnumColumnConfig
 } from '../enum-base';
 import { styles } from '../enum-base/styles';
 import { template } from '../enum-base/template';
-import { TableColumnSortOperation } from '../base/types';
+import {
+    TableColumnSortOperation,
+    singleIconColumnWidth,
+    defaultMinPixelWidth
+} from '../base/types';
 import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
 import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column';
 import { MappingSpinner } from '../../mapping/spinner';
@@ -21,6 +26,7 @@ import { MappingIconConfig } from '../enum-base/models/mapping-icon-config';
 import { MappingSpinnerConfig } from '../enum-base/models/mapping-spinner-config';
 import { MappingText } from '../../mapping/text';
 import { MappingTextConfig } from '../enum-base/models/mapping-text-config';
+import { TableColumnMappingWidthMode } from './types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -39,6 +45,15 @@ export class TableColumnIcon extends mixinGroupableColumnAPI(
         >
     )
 ) {
+    @attr({ attribute: 'width-mode' })
+    public widthMode: TableColumnMappingWidthMode;
+
+    public override minPixelWidthChanged(): void {
+        if (this.widthMode !== TableColumnMappingWidthMode.iconSize) {
+            this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+        }
+    }
+
     protected override getColumnInternalsOptions(): ColumnInternalsOptions<TableColumnIconValidator> {
         return {
             cellRecordFieldNames: ['value'],
@@ -77,6 +92,27 @@ export class TableColumnIcon extends mixinGroupableColumnAPI(
         // this function from running when there is an unsupported mapping.
         throw new Error('Unsupported mapping');
     }
+
+    private widthModeChanged(): void {
+        if (this.widthMode === TableColumnMappingWidthMode.iconSize) {
+            this.columnInternals.resizingDisabled = true;
+            this.columnInternals.hideHeaderIndicators = true;
+            this.columnInternals.pixelWidth = singleIconColumnWidth;
+            this.columnInternals.minPixelWidth = singleIconColumnWidth;
+        } else {
+            this.columnInternals.resizingDisabled = false;
+            this.columnInternals.hideHeaderIndicators = false;
+            this.columnInternals.pixelWidth = undefined;
+            this.columnInternals.minPixelWidth = this.getConfiguredMinPixelWidth();
+        }
+    }
+
+    private getConfiguredMinPixelWidth(): number {
+        if (typeof this.minPixelWidth === 'number') {
+            return this.minPixelWidth;
+        }
+        return defaultMinPixelWidth;
+    }
 }
 
 const nimbleTableColumnIcon = TableColumnIcon.compose({