Merge branch 'main' into spec-template-feedback

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

@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Thu, 29 Feb 2024 16:22:43 GMT",
+      "version": "20.2.15",
+      "tag": "@ni/nimble-angular_v20.2.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v21.8.0",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 28 Feb 2024 21:22:49 GMT",
       "version": "20.2.13",

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

@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-This log was last generated on Wed, 28 Feb 2024 21:22:49 GMT and should not be manually modified.
+This log was last generated on Thu, 29 Feb 2024 16:22:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 20.2.15
+
+Thu, 29 Feb 2024 16:22:43 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v21.8.0
+
 ## 20.2.13
 
 Wed, 28 Feb 2024 21:22:49 GMT

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

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "20.2.14",
+  "version": "20.2.15",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish"
@@ -31,7 +31,7 @@
     "@angular/forms": "^15.2.10",
     "@angular/localize": "^15.2.10",
     "@angular/router": "^15.2.10",
-    "@ni/nimble-components": "^21.7.1"
+    "@ni/nimble-components": "^21.8.0"
   },
   "dependencies": {
     "tslib": "^2.2.0"

packages/nimble-blazor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "14.3.11",
+  "version": "14.3.12",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "postinstall": "node build/generate-playwright-version-properties/source/index.js",

packages/nimble-components/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Thu, 29 Feb 2024 16:22:43 GMT",
+      "version": "21.8.0",
+      "tag": "@ni/nimble-components_v21.8.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-components",
+            "commit": "d4ca92e5d7044d8be7b26ccbc52b91747663bfe2",
+            "comment": "Allow icon mappings to specify an undefined icon"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 29 Feb 2024 07:48:58 GMT",
       "version": "21.7.1",

packages/nimble-components/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-components
 
-This log was last generated on Wed, 28 Feb 2024 21:22:49 GMT and should not be manually modified.
+This log was last generated on Thu, 29 Feb 2024 16:22:43 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 21.8.0
+
+Thu, 29 Feb 2024 16:22:43 GMT
+
+### Minor changes
+
+- Allow icon mappings to specify an undefined icon ([ni/nimble@d4ca92e](https://github.com/ni/nimble/commit/d4ca92e5d7044d8be7b26ccbc52b91747663bfe2))
+
 ## 21.7.1
 
 Wed, 28 Feb 2024 21:22:49 GMT

packages/nimble-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "21.7.1",
+  "version": "21.8.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 && npm run build-storybook",

packages/nimble-components/src/mapping/icon/tests/mapping-icon.stories.ts

@@ -28,7 +28,7 @@ export const iconMapping: StoryObj = {
         icon: {
             control: { type: 'none' },
             description:
-                'The tag name of the Nimble icon to render, e.g. `nimble-icon-check`.'
+                'The tag name of the Nimble icon to render, e.g. `nimble-icon-check`. Alternatively, set `icon` to `undefined` to render no icon for the mapping while still providing a label to be used when grouping.'
         },
         severity: {
             description:

packages/nimble-components/src/table-column/enum-base/models/mapping-icon-config.ts

@@ -6,23 +6,38 @@ export interface IconView {
     severity: IconSeverity;
     text?: string;
 }
-const createIconTemplate = (icon: string): ViewTemplate<IconView> => html`
-    <${icon}
-        title="${x => x.text}"
-        role="img"
-        aria-label="${x => x.text}"
-        severity="${x => x.severity}"
-        class="no-shrink"
-    >
-    </${icon}>`;
+
+// Create an empty template containing only a space because creating a ViewTemplate
+// with an empty string throws an exception at runtime.
+// prettier-ignore
+const emptyTemplate = html<IconView>` `;
+
+const createIconTemplate = (
+    icon: string | undefined
+): ViewTemplate<IconView> => {
+    if (icon === undefined) {
+        return emptyTemplate;
+    }
+
+    return html`
+        <${icon}
+            title="${x => x.text}"
+            role="img"
+            aria-label="${x => x.text}"
+            severity="${x => x.severity}"
+            class="no-shrink"
+        >
+        </${icon}>
+    `;
+};
 
 /**
  * Mapping configuration corresponding to a icon mapping
  */
 export class MappingIconConfig extends MappingConfig {
     public readonly iconTemplate: ViewTemplate<IconView>;
     public constructor(
-        resolvedIcon: string,
+        resolvedIcon: string | undefined,
         public readonly severity: IconSeverity,
         text: string | undefined
     ) {

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

@@ -65,9 +65,6 @@ export class TableColumnIcon extends mixinGroupableColumnAPI(
 
     protected createMappingConfig(mapping: Mapping<unknown>): MappingConfig {
         if (mapping instanceof MappingIcon) {
-            if (!mapping.resolvedIcon) {
-                throw Error('Unresolved icon');
-            }
             return new MappingIconConfig(
                 mapping.resolvedIcon,
                 mapping.severity,

packages/nimble-components/src/table-column/icon/models/table-column-icon-validator.ts

@@ -39,6 +39,13 @@ export class TableColumnIconValidator extends TableColumnEnumBaseValidator<
         );
     }
 
+    private static hasUnresolvedIcon(mappingIcon: MappingIcon): boolean {
+        return (
+            typeof mappingIcon.icon === 'string'
+            && mappingIcon.resolvedIcon === undefined
+        );
+    }
+
     public override validate(
         mappings: Mapping<unknown>[],
         keyType: MappingKeyType
@@ -52,7 +59,7 @@ export class TableColumnIconValidator extends TableColumnEnumBaseValidator<
     private validateIconNames(mappings: Mapping<unknown>[]): void {
         const invalid = mappings
             .filter(TableColumnIconValidator.isIconMappingElement)
-            .some(mappingIcon => mappingIcon.resolvedIcon === undefined);
+            .some(TableColumnIconValidator.hasUnresolvedIcon);
         this.setConditionValue('invalidIconName', invalid);
     }
 

packages/nimble-components/src/table-column/icon/tests/table-column-icon-matrix.stories.ts

@@ -32,18 +32,23 @@ const data = [
     {
         id: '2',
         code: 2
+    },
+    {
+        id: '3',
+        code: -1
     }
 ] as const;
 
 // prettier-ignore
 const component = (): ViewTemplate => html`
-    <${tableTag} id-field-name="id" style="height: 250px; ${isChromatic() ? '--ni-private-spinner-animation-play-state:paused' : ''}">
+    <${tableTag} id-field-name="id" style="height: 320px; ${isChromatic() ? '--ni-private-spinner-animation-play-state:paused' : ''}">
         <${tableColumnIconTag}
             field-name="code"
             key-type="number"
             group-index="0"
         >
             Column 1
+            <${mappingIconTag} key="-1" text="Unknown value"></${mappingIconTag}>
             <${mappingIconTag} key="0" text="Zero" icon="${iconCheckTag}"></${mappingIconTag}>
             <${mappingSpinnerTag} key="1" text="One"></${mappingSpinnerTag}>
         </${tableColumnIconTag}>
@@ -52,6 +57,7 @@ const component = (): ViewTemplate => html`
             key-type="number"
         >
             Column 2
+            <${mappingIconTag} key="-1" text="Unknown value"></${mappingIconTag}>
             <${mappingIconTag} key="0" text="Zero" icon="${iconCheckTag}" severity="success"></${mappingIconTag}>
             <${mappingIconTag} key="1" text="One" icon="${iconCheckTag}" severity="warning"></${mappingIconTag}>
             <${mappingIconTag} key="2" text="Two" icon="${iconCheckTag}" severity="error"></${mappingIconTag}>
@@ -61,6 +67,7 @@ const component = (): ViewTemplate => html`
             key-type="number"
         >
             Column 3
+            <${mappingIconTag} key="-1" text="Unknown value"></${mappingIconTag}>
             <${mappingIconTag} key="0" text="Zero" icon="${iconCheckTag}" severity="information"></${mappingIconTag}>
         </${tableColumnIconTag}>
     </${tableTag}>

packages/nimble-components/src/table-column/icon/tests/table-column-icon.spec.ts

@@ -25,7 +25,7 @@ interface SimpleTableRecord extends TableRecord {
 interface BasicIconMapping {
     key?: MappingKey;
     text?: string;
-    icon: string;
+    icon?: string;
 }
 
 interface BasicSpinnerMapping {
@@ -154,6 +154,20 @@ describe('TableColumnIcon', () => {
         expect(() => pageObject.getRenderedIconColumnCellIconTagName(0, 0)).toThrowError();
     });
 
+    it('displays blank when no icon specified for mapping', async () => {
+        ({ element, connect, disconnect, model } = await setup({
+            keyType: MappingKeyType.string,
+            iconMappings: [{ key: 'a', text: 'alpha', icon: undefined }],
+            spinnerMappings: []
+        }));
+        pageObject = new TablePageObject<SimpleTableRecord>(element);
+        await element.setData([{ field1: 'a' }]);
+        await connect();
+        await waitForUpdatesAsync();
+
+        expect(() => pageObject.getRenderedIconColumnCellIconTagName(0, 0)).toThrowError();
+    });
+
     it('changing fieldName updates display', async () => {
         ({ element, connect, disconnect, model } = await setup({
             keyType: MappingKeyType.string,
@@ -308,6 +322,23 @@ describe('TableColumnIcon', () => {
         expect(pageObject.getRenderedGroupHeaderTextContent(0)).toBe('');
     });
 
+    it('sets group header text label and no icon when icon is undefined', async () => {
+        ({ element, connect, disconnect, model } = await setup({
+            keyType: MappingKeyType.string,
+            iconMappings: [{ key: 'b', text: 'bravo', icon: undefined }],
+            spinnerMappings: []
+        }));
+        pageObject = new TablePageObject<SimpleTableRecord>(element);
+        await element.setData([{ field1: 'b' }]);
+        await connect();
+        await waitForUpdatesAsync();
+        model.col1.groupIndex = 0;
+        await waitForUpdatesAsync();
+
+        expect(() => pageObject.getRenderedIconColumnGroupHeaderIconTagName(0)).toThrowError();
+        expect(pageObject.getRenderedGroupHeaderTextContent(0)).toBe('bravo');
+    });
+
     it('clears cell when mappings removed', async () => {
         ({ element, connect, disconnect, model } = await setup({
             keyType: MappingKeyType.string,

packages/nimble-components/src/table-column/icon/tests/table-column-icon.stories.ts

@@ -40,6 +40,12 @@ const simpleData = [
         lastName: 'Simpson',
         status: 'success',
         isChild: true
+    },
+    {
+        firstName: 'Abbey',
+        lastName: '?',
+        status: 'unknown',
+        isChild: false
     }
 ] as const;
 
@@ -77,6 +83,7 @@ export const iconColumn: StoryObj<IconColumnTableArgs> = {
                 <${mappingIconTag} key="fail" icon="${iconXmarkTag}" severity="error" text="Not a Simpson"></${mappingIconTag}>
                 <${mappingIconTag} key="success" icon="${iconCheckLargeTag}" severity="success" text="Is a Simpson"></${mappingIconTag}>
                 <${mappingSpinnerTag} key="calculating" text="Calculating"></${mappingSpinnerTag}>
+                <${mappingIconTag} key="unknown" text="Unknown"></${mappingIconTag}>
             </${tableColumnIconTag}>
             <${tableColumnIconTag} field-name="isChild" key-type="boolean">
                 Is Child