diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index f82bdd7834..70d76d948d 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -15,7 +15,8 @@ /packages/blazor-workspace @atmgrifter00 @msmithNI /packages/nimble-components @rajsite @jattasNI /packages/nimble-components/.storybook @rajsite @jattasNI @fredvisser -/packages/nimble-components/src/wafer-map @rajsite @jattasNI @DStavilaNI @zszilagy +/packages/nimble-components/build/generate-workers @rajsite @jattasNI @DStavilaNI @munteannatan +/packages/nimble-components/src/wafer-map @rajsite @jattasNI @DStavilaNI @munteannatan /packages/nimble-components/src/rich-text @rajsite @jattasNI @vivinkrishna-ni /packages/nimble-components/src/rich-text-mention @rajsite @jattasNI @vivinkrishna-ni /packages/nimble-tokens @rajsite @jattasNI @fredvisser diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2aaf27f5dd..326c9944e5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,7 +51,7 @@ This repository uses the following tooling. See below for more info. 1. Write a spec describing the API and behavior of the component. See instructions for [component specs](/specs/README.md). 2. Ensure UX specs are up to date and tokens are generated. See instructions for [contributing to Nimble Tokens](/packages/nimble-tokens/CONTRIBUTING.md). 3. Expose any tokens in the token provider and add web component logic. See instructions for [contributing to Nimble Components](/packages/nimble-components/CONTRIBUTING.md). -4. Add wrappers for each framework. See instructions for [adding Angular wrappers](/packages/angular-workspace/nimble-angular/CONTRIBUTING.md). See instructions for [adding Blazor wrappers](/packages/nimble-blazor/CONTRIBUTING.md). +4. Add wrappers for each framework. See instructions for [adding Angular wrappers](/packages/angular-workspace/nimble-angular/CONTRIBUTING.md). See instructions for [adding Blazor wrappers](/packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md). 5. Publish and use! 🎉 ## Documentation policies diff --git a/README.md b/README.md index f080f0c256..ee7c13cdcd 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ The Nimble packages contain general-use components implementing the Nimble Desig [![Nimble Components NPM version and repo link](https://img.shields.io/npm/v/@ni/nimble-components.svg?label=@ni/nimble-components)](https://www.npmjs.com/package/@ni/nimble-components) - **[`@ni/nimble-angular`](/packages/angular-workspace/nimble-angular/)** - Angular bindings for Nimble components. -- **[`@ni/nimble-blazor`](/packages/blazor-workspace/)** - Blazor bindings for Nimble components. +- **[`@ni/nimble-blazor`](/packages/blazor-workspace/NimbleBlazor/)** - Blazor bindings for Nimble components. - **[`@ni/nimble-components`](/packages/nimble-components/)** - Nimble components to be used by [any type of application](https://custom-elements-everywhere.com/). ### Spright packages @@ -41,7 +41,7 @@ The Spright packages contain components that are built using Nimble technology a [![Spright Components NPM version and repo link](https://img.shields.io/npm/v/@ni/spright-components.svg?label=@ni/spright-components)](https://www.npmjs.com/package/@ni/spright-components) - [`@ni/spright-angular`](/packages/angular-workspace/spright-angular/) - Angular bindings for Spright components. -- [`@ni/spright-blazor`](/packages/blazor-workspace/) - Blazor bindings for Spright components. +- [`@ni/spright-blazor`](/packages/blazor-workspace/SprightBlazor/) - Blazor bindings for Spright components. - [`@ni/spright-components`](/packages/spright-components/) - Spright components to be used by [any type of application](https://custom-elements-everywhere.com/). ### Utility packages diff --git a/package-lock.json b/package-lock.json index f1390a9dde..70c6afbbd3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32647,7 +32647,7 @@ }, "packages/angular-workspace/nimble-angular": { "name": "@ni/nimble-angular", - "version": "24.0.5", + "version": "24.2.1", "license": "MIT", "dependencies": { "tslib": "^2.2.0" @@ -32658,12 +32658,12 @@ "@angular/forms": "^16.2.12", "@angular/localize": "^16.2.12", "@angular/router": "^16.2.12", - "@ni/nimble-components": "^28.0.4" + "@ni/nimble-components": "^28.3.1" } }, "packages/angular-workspace/spright-angular": { "name": "@ni/spright-angular", - "version": "0.1.16", + "version": "0.1.22", "license": "MIT", "dependencies": { "tslib": "^2.2.0" @@ -32671,7 +32671,7 @@ "peerDependencies": { "@angular/common": "^16.2.12", "@angular/core": "^16.2.12", - "@ni/spright-components": "^0.0.18" + "@ni/spright-components": "^0.0.24" } }, "packages/blazor-workspace": { @@ -32693,7 +32693,7 @@ }, "packages/blazor-workspace/NimbleBlazor": { "name": "@ni/nimble-blazor", - "version": "17.0.0", + "version": "17.2.0", "license": "MIT", "peerDependencies": { "cross-env": "^7.0.3", @@ -32719,7 +32719,7 @@ }, "packages/blazor-workspace/SprightBlazor": { "name": "@ni/spright-blazor", - "version": "0.0.4", + "version": "0.0.5", "license": "MIT", "peerDependencies": { "cross-env": "^7.0.3", @@ -32756,14 +32756,14 @@ }, "packages/nimble-components": { "name": "@ni/nimble-components", - "version": "28.0.4", + "version": "28.3.1", "license": "MIT", "dependencies": { "@microsoft/fast-colors": "^5.3.1", "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "^2.49.6", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-tokens": "^6.13.5", + "@ni/nimble-tokens": "^6.13.6", "@tanstack/table-core": "^8.10.7", "@tanstack/virtual-core": "^3.0.0-beta.68", "@tiptap/core": "^2.2.2", @@ -32842,7 +32842,7 @@ }, "packages/nimble-tokens": { "name": "@ni/nimble-tokens", - "version": "6.13.5", + "version": "6.13.6", "license": "MIT", "devDependencies": { "@microsoft/fast-colors": "^5.3.1", @@ -32904,15 +32904,15 @@ }, "packages/spright-components": { "name": "@ni/spright-components", - "version": "0.0.18", + "version": "0.0.24", "license": "MIT", "dependencies": { "@microsoft/fast-colors": "^5.3.1", "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "^2.49.6", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-components": "28.0.4", - "@ni/nimble-tokens": "^6.13.5", + "@ni/nimble-components": "28.3.1", + "@ni/nimble-tokens": "^6.13.6", "tslib": "^2.2.0" }, "devDependencies": { diff --git a/packages/angular-workspace/example-client-app/src/app/app.module.ts b/packages/angular-workspace/example-client-app/src/app/app.module.ts index fb5eb64535..b3d84b0d28 100644 --- a/packages/angular-workspace/example-client-app/src/app/app.module.ts +++ b/packages/angular-workspace/example-client-app/src/app/app.module.ts @@ -18,6 +18,7 @@ import { NimbleMappingTextModule } from '@ni/nimble-angular/mapping/text'; import { NimbleMappingIconModule } from '@ni/nimble-angular/mapping/icon'; import { NimbleMappingUserModule } from '@ni/nimble-angular/mapping/user'; import { NimbleMappingSpinnerModule } from '@ni/nimble-angular/mapping/spinner'; +import { NimbleMappingEmptyModule } from '@ni/nimble-angular/mapping/empty'; import { NimbleTableModule } from '@ni/nimble-angular/table'; import { NimbleTableColumnTextModule } from '@ni/nimble-angular/table-column/text'; import { NimbleTableColumnAnchorModule } from '@ni/nimble-angular/table-column/anchor'; @@ -101,6 +102,7 @@ import { HeaderComponent } from './header/header.component'; NimbleMappingUserModule, NimbleRichTextMentionUsersModule, NimbleMappingSpinnerModule, + NimbleMappingEmptyModule, SprightRectangleModule, RouterModule.forRoot( [ diff --git a/packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html b/packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html index a2bc7ee1d5..bebcd00058 100644 --- a/packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html +++ b/packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html @@ -268,10 +268,14 @@ text-hidden> + + { it('exports DurationPipe', () => { @@ -17,6 +17,14 @@ describe('Pipes', () => { expect(byte1024UnitScale).toBeTruthy(); }); + it('exports celsiusUnitScale', () => { + expect(celsiusUnitScale).toBeTruthy(); + }); + + it('exports fahrenheitUnitScale', () => { + expect(fahrenheitUnitScale).toBeTruthy(); + }); + it('exports voltUnitScale', () => { expect(voltUnitScale).toBeTruthy(); }); diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.json b/packages/angular-workspace/nimble-angular/CHANGELOG.json index 9d2a11b71f..e5df339373 100644 --- a/packages/angular-workspace/nimble-angular/CHANGELOG.json +++ b/packages/angular-workspace/nimble-angular/CHANGELOG.json @@ -1,6 +1,117 @@ { "name": "@ni/nimble-angular", "entries": [ + { + "date": "Mon, 13 May 2024 09:49:02 GMT", + "version": "24.2.1", + "tag": "@ni/nimble-angular_v24.2.1", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v28.3.1", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 22:37:40 GMT", + "version": "24.2.0", + "tag": "@ni/nimble-angular_v24.2.0", + "comments": { + "minor": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-angular", + "commit": "4e595cc0e67a9903510ba60da17afdb1bf2643d6", + "comment": "Add support for empty mapping component" + }, + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v28.3.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 18:51:13 GMT", + "version": "24.1.0", + "tag": "@ni/nimble-angular_v24.1.0", + "comments": { + "minor": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-angular", + "commit": "7f6a791484cc420725502f5a5e07aa037a952a1f", + "comment": "Add Angular support for Celsius and Fahrenheit number format units" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:42:46 GMT", + "version": "24.0.9", + "tag": "@ni/nimble-angular_v24.0.9", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v28.2.1", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:11:56 GMT", + "version": "24.0.8", + "tag": "@ni/nimble-angular_v24.0.8", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v28.2.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 20:39:47 GMT", + "version": "24.0.7", + "tag": "@ni/nimble-angular_v24.0.7", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v28.1.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 18:40:41 GMT", + "version": "24.0.6", + "tag": "@ni/nimble-angular_v24.0.6", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v28.0.5", + "commit": "not available" + } + ] + } + }, { "date": "Wed, 08 May 2024 22:21:34 GMT", "version": "24.0.5", diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.md b/packages/angular-workspace/nimble-angular/CHANGELOG.md index 9da6fae0ef..a61fbe6baf 100644 --- a/packages/angular-workspace/nimble-angular/CHANGELOG.md +++ b/packages/angular-workspace/nimble-angular/CHANGELOG.md @@ -1,9 +1,66 @@ # Change Log - @ni/nimble-angular -This log was last generated on Wed, 08 May 2024 22:21:34 GMT and should not be manually modified. +This log was last generated on Mon, 13 May 2024 09:49:02 GMT and should not be manually modified. +## 24.2.1 + +Mon, 13 May 2024 09:49:02 GMT + +### Patches + +- Bump @ni/nimble-components to v28.3.1 + +## 24.2.0 + +Fri, 10 May 2024 22:37:40 GMT + +### Minor changes + +- Add support for empty mapping component ([ni/nimble@4e595cc](https://github.com/ni/nimble/commit/4e595cc0e67a9903510ba60da17afdb1bf2643d6)) +- Bump @ni/nimble-components to v28.3.0 + +## 24.1.0 + +Fri, 10 May 2024 18:51:13 GMT + +### Minor changes + +- Add Angular support for Celsius and Fahrenheit number format units ([ni/nimble@7f6a791](https://github.com/ni/nimble/commit/7f6a791484cc420725502f5a5e07aa037a952a1f)) + +## 24.0.9 + +Fri, 10 May 2024 16:42:46 GMT + +### Patches + +- Bump @ni/nimble-components to v28.2.1 + +## 24.0.8 + +Fri, 10 May 2024 16:11:56 GMT + +### Patches + +- Bump @ni/nimble-components to v28.2.0 + +## 24.0.7 + +Thu, 09 May 2024 20:39:47 GMT + +### Patches + +- Bump @ni/nimble-components to v28.1.0 + +## 24.0.6 + +Thu, 09 May 2024 18:40:41 GMT + +### Patches + +- Bump @ni/nimble-components to v28.0.5 + ## 24.0.5 Wed, 08 May 2024 22:21:34 GMT diff --git a/packages/angular-workspace/nimble-angular/mapping/empty/ng-package.json b/packages/angular-workspace/nimble-angular/mapping/empty/ng-package.json new file mode 100644 index 0000000000..7945e60e70 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/mapping/empty/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + } +} \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/mapping/empty/nimble-mapping-empty.directive.ts b/packages/angular-workspace/nimble-angular/mapping/empty/nimble-mapping-empty.directive.ts new file mode 100644 index 0000000000..1853107717 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/mapping/empty/nimble-mapping-empty.directive.ts @@ -0,0 +1,27 @@ +import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; +import { NimbleMappingDirective } from '@ni/nimble-angular/mapping/base'; +import { type MappingEmpty, mappingEmptyTag } from '@ni/nimble-components/dist/esm/mapping/empty'; +import type { MappingKey } from '@ni/nimble-components/dist/esm/mapping/base/types'; + +export type { MappingEmpty, MappingKey }; +export { mappingEmptyTag }; + +/** + * Directive to provide Angular integration for the mapping empty element used by the mapping column. + */ +@Directive({ + selector: 'nimble-mapping-empty' +}) +export class NimbleMappingEmptyDirective extends NimbleMappingDirective { + public get text(): string | undefined { + return this.elementRef.nativeElement.text; + } + + @Input() public set text(value: string | undefined) { + this.renderer.setProperty(this.elementRef.nativeElement, 'text', value); + } + + public constructor(protected readonly renderer: Renderer2, protected readonly elementRef: ElementRef) { + super(renderer, elementRef); + } +} diff --git a/packages/angular-workspace/nimble-angular/mapping/empty/nimble-mapping-empty.module.ts b/packages/angular-workspace/nimble-angular/mapping/empty/nimble-mapping-empty.module.ts new file mode 100644 index 0000000000..9061d23f13 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/mapping/empty/nimble-mapping-empty.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NimbleMappingEmptyDirective } from './nimble-mapping-empty.directive'; + +import '@ni/nimble-components/dist/esm/mapping/empty'; + +@NgModule({ + declarations: [NimbleMappingEmptyDirective], + imports: [CommonModule], + exports: [NimbleMappingEmptyDirective] +}) +export class NimbleMappingEmptyModule { } \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/mapping/empty/public-api.ts b/packages/angular-workspace/nimble-angular/mapping/empty/public-api.ts new file mode 100644 index 0000000000..6a8943e769 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/mapping/empty/public-api.ts @@ -0,0 +1,2 @@ +export * from './nimble-mapping-empty.directive'; +export * from './nimble-mapping-empty.module'; \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/mapping/empty/tests/nimble-mapping-empty.directive.spec.ts b/packages/angular-workspace/nimble-angular/mapping/empty/tests/nimble-mapping-empty.directive.spec.ts new file mode 100644 index 0000000000..937f376662 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/mapping/empty/tests/nimble-mapping-empty.directive.spec.ts @@ -0,0 +1,186 @@ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NimbleTableModule } from '../../../table/nimble-table.module'; +import { NimbleTableColumnMappingModule } from '../../../table-column/mapping/nimble-table-column-mapping.module'; +import { NimbleMappingEmptyDirective, type MappingEmpty } from '../nimble-mapping-empty.directive'; +import { NimbleMappingEmptyModule } from '../nimble-mapping-empty.module'; + +describe('NimbleMappingEmpty', () => { + describe('module', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NimbleMappingEmptyModule] + }); + }); + + it('custom element is defined', () => { + expect(customElements.get('nimble-mapping-empty')).not.toBeUndefined(); + }); + }); + + describe('with template string values', () => { + @Component({ + template: ` + + + + + + + ` + }) + class TestHostComponent { + @ViewChild('mapping', { read: NimbleMappingEmptyDirective }) public directive: NimbleMappingEmptyDirective; + @ViewChild('mapping', { read: ElementRef }) public elementRef: ElementRef; + } + + let fixture: ComponentFixture; + let directive: NimbleMappingEmptyDirective; + let nativeElement: MappingEmpty; + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestHostComponent], + imports: [NimbleMappingEmptyModule, NimbleTableColumnMappingModule, NimbleTableModule] + }); + + fixture = TestBed.createComponent(TestHostComponent); + fixture.detectChanges(); + directive = fixture.componentInstance.directive; + nativeElement = fixture.componentInstance.elementRef.nativeElement; + }); + + it('will use template string values for key', () => { + expect(directive.key).toBe('false'); + expect(nativeElement.key).toBe('false'); + }); + + it('will use template string values for text', () => { + expect(directive.text).toBe('nope'); + expect(nativeElement.text).toBe('nope'); + }); + }); + + describe('with property bound values', () => { + @Component({ + template: ` + + + + + + + ` + }) + class TestHostComponent { + @ViewChild('mapping', { read: NimbleMappingEmptyDirective }) public directive: NimbleMappingEmptyDirective; + @ViewChild('mapping', { read: ElementRef }) public elementRef: ElementRef; + public key = false; + public text = 'nope'; + } + + let fixture: ComponentFixture; + let directive: NimbleMappingEmptyDirective; + let nativeElement: MappingEmpty; + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestHostComponent], + imports: [NimbleMappingEmptyModule, NimbleTableColumnMappingModule, NimbleTableModule] + }); + + fixture = TestBed.createComponent(TestHostComponent); + fixture.detectChanges(); + directive = fixture.componentInstance.directive; + nativeElement = fixture.componentInstance.elementRef.nativeElement; + }); + + it('can be configured with property binding for key', () => { + expect(directive.key).toBeFalse(); + expect(nativeElement.key).toBeFalse(); + + fixture.componentInstance.key = true; + fixture.detectChanges(); + + expect(directive.key).toBeTrue(); + expect(nativeElement.key).toBeTrue(); + }); + + it('can be configured with property binding for text', () => { + expect(directive.text).toBe('nope'); + expect(nativeElement.text).toBe('nope'); + + fixture.componentInstance.text = 'yep'; + fixture.detectChanges(); + + expect(directive.text).toBe('yep'); + expect(nativeElement.text).toBe('yep'); + }); + }); + + describe('with attribute bound values', () => { + @Component({ + template: ` + + + + + + + ` + }) + class TestHostComponent { + @ViewChild('mapping', { read: NimbleMappingEmptyDirective }) public directive: NimbleMappingEmptyDirective; + @ViewChild('mapping', { read: ElementRef }) public elementRef: ElementRef; + public key = false; + public text = 'nope'; + } + + let fixture: ComponentFixture; + let directive: NimbleMappingEmptyDirective; + let nativeElement: MappingEmpty; + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestHostComponent], + imports: [NimbleMappingEmptyModule, NimbleTableColumnMappingModule, NimbleTableModule] + }); + + fixture = TestBed.createComponent(TestHostComponent); + fixture.detectChanges(); + directive = fixture.componentInstance.directive; + nativeElement = fixture.componentInstance.elementRef.nativeElement; + }); + + it('can be configured with attribute binding for key', () => { + expect(directive.key).toBe('false'); + expect(nativeElement.key).toBe('false'); + + fixture.componentInstance.key = true; + fixture.detectChanges(); + + expect(directive.key).toBe('true'); + expect(nativeElement.key).toBe('true'); + }); + + it('can be configured with attribute binding for text', () => { + expect(directive.text).toBe('nope'); + expect(nativeElement.text).toBe('nope'); + + fixture.componentInstance.text = 'yep'; + fixture.detectChanges(); + + expect(directive.text).toBe('yep'); + expect(nativeElement.text).toBe('yep'); + }); + }); +}); diff --git a/packages/angular-workspace/nimble-angular/package.json b/packages/angular-workspace/nimble-angular/package.json index 87dae49eb5..3601b14d16 100644 --- a/packages/angular-workspace/nimble-angular/package.json +++ b/packages/angular-workspace/nimble-angular/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-angular", - "version": "24.0.5", + "version": "24.2.1", "description": "Angular components for the NI Nimble Design System", "scripts": { "invoke-publish": "npm run invoke-publish:setup && cd ../dist/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": "^28.0.4" + "@ni/nimble-components": "^28.3.1" }, "dependencies": { "tslib": "^2.2.0" diff --git a/packages/angular-workspace/nimble-angular/pipes/public-api.ts b/packages/angular-workspace/nimble-angular/pipes/public-api.ts index fc3712cdb0..8fbe350339 100644 --- a/packages/angular-workspace/nimble-angular/pipes/public-api.ts +++ b/packages/angular-workspace/nimble-angular/pipes/public-api.ts @@ -2,4 +2,6 @@ export * from './duration.pipe'; export * from './number-text.pipe'; export { byteUnitScale } from '@ni/nimble-components/dist/esm/utilities/unit-format/unit-scale/byte-unit-scale'; export { byte1024UnitScale } from '@ni/nimble-components/dist/esm/utilities/unit-format/unit-scale/byte-1024-unit-scale'; +export { celsiusUnitScale } from '@ni/nimble-components/dist/esm/utilities/unit-format/unit-scale/celsius-unit-scale'; +export { fahrenheitUnitScale } from '@ni/nimble-components/dist/esm/utilities/unit-format/unit-scale/fahrenheit-unit-scale'; export { voltUnitScale } from '@ni/nimble-components/dist/esm/utilities/unit-format/unit-scale/volt-unit-scale'; diff --git a/packages/angular-workspace/nimble-angular/unit/celsius/ng-package.json b/packages/angular-workspace/nimble-angular/unit/celsius/ng-package.json new file mode 100644 index 0000000000..7945e60e70 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/celsius/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + } +} \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/celsius/nimble-unit-celsius.directive.ts b/packages/angular-workspace/nimble-angular/unit/celsius/nimble-unit-celsius.directive.ts new file mode 100644 index 0000000000..9cbeb5985d --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/celsius/nimble-unit-celsius.directive.ts @@ -0,0 +1,14 @@ +import { Directive } from '@angular/core'; +import { type UnitCelsius, unitCelsiusTag } from '@ni/nimble-components/dist/esm/unit/celsius'; + +export type { UnitCelsius }; +export { unitCelsiusTag }; + +/** + * Directive to provide Angular integration for the Celsius unit element used by the number-text column. + */ +@Directive({ + selector: 'nimble-unit-celsius' +}) +export class NimbleUnitCelsiusDirective { +} \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/celsius/nimble-unit-celsius.module.ts b/packages/angular-workspace/nimble-angular/unit/celsius/nimble-unit-celsius.module.ts new file mode 100644 index 0000000000..f96c755b3e --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/celsius/nimble-unit-celsius.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NimbleUnitCelsiusDirective } from './nimble-unit-celsius.directive'; + +import '@ni/nimble-components/dist/esm/unit/celsius'; + +@NgModule({ + declarations: [NimbleUnitCelsiusDirective], + imports: [CommonModule], + exports: [NimbleUnitCelsiusDirective] +}) +export class NimbleUnitCelsiusModule { } \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/celsius/public-api.ts b/packages/angular-workspace/nimble-angular/unit/celsius/public-api.ts new file mode 100644 index 0000000000..56c5cde8a1 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/celsius/public-api.ts @@ -0,0 +1,2 @@ +export * from './nimble-unit-celsius.directive'; +export * from './nimble-unit-celsius.module'; \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/celsius/tests/nimble-unit-celsius.directive.spec.ts b/packages/angular-workspace/nimble-angular/unit/celsius/tests/nimble-unit-celsius.directive.spec.ts new file mode 100644 index 0000000000..9d1cb0cf9b --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/celsius/tests/nimble-unit-celsius.directive.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; +import { NimbleUnitCelsiusModule } from '../nimble-unit-celsius.module'; + +describe('Nimble Celsius unit', () => { + describe('module', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NimbleUnitCelsiusModule] + }); + }); + + it('custom element is defined', () => { + expect(customElements.get('nimble-unit-celsius')).not.toBeUndefined(); + }); + }); +}); \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/fahrenheit/ng-package.json b/packages/angular-workspace/nimble-angular/unit/fahrenheit/ng-package.json new file mode 100644 index 0000000000..7945e60e70 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/fahrenheit/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public-api.ts" + } +} \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/fahrenheit/nimble-unit-fahrenheit.directive.ts b/packages/angular-workspace/nimble-angular/unit/fahrenheit/nimble-unit-fahrenheit.directive.ts new file mode 100644 index 0000000000..2d136bafdf --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/fahrenheit/nimble-unit-fahrenheit.directive.ts @@ -0,0 +1,14 @@ +import { Directive } from '@angular/core'; +import { type UnitFahrenheit, unitFahrenheitTag } from '@ni/nimble-components/dist/esm/unit/fahrenheit'; + +export type { UnitFahrenheit }; +export { unitFahrenheitTag }; + +/** + * Directive to provide Angular integration for the Fahrenheit unit element used by the number-text column. + */ +@Directive({ + selector: 'nimble-unit-fahrenheit' +}) +export class NimbleUnitFahrenheitDirective { +} \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/fahrenheit/nimble-unit-fahrenheit.module.ts b/packages/angular-workspace/nimble-angular/unit/fahrenheit/nimble-unit-fahrenheit.module.ts new file mode 100644 index 0000000000..b397f608da --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/fahrenheit/nimble-unit-fahrenheit.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { NimbleUnitFahrenheitDirective } from './nimble-unit-fahrenheit.directive'; + +import '@ni/nimble-components/dist/esm/unit/fahrenheit'; + +@NgModule({ + declarations: [NimbleUnitFahrenheitDirective], + imports: [CommonModule], + exports: [NimbleUnitFahrenheitDirective] +}) +export class NimbleUnitFahrenheitModule { } \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/fahrenheit/public-api.ts b/packages/angular-workspace/nimble-angular/unit/fahrenheit/public-api.ts new file mode 100644 index 0000000000..6c927f8744 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/fahrenheit/public-api.ts @@ -0,0 +1,2 @@ +export * from './nimble-unit-fahrenheit.directive'; +export * from './nimble-unit-fahrenheit.module'; \ No newline at end of file diff --git a/packages/angular-workspace/nimble-angular/unit/fahrenheit/tests/nimble-unit-fahrenheit.directive.spec.ts b/packages/angular-workspace/nimble-angular/unit/fahrenheit/tests/nimble-unit-fahrenheit.directive.spec.ts new file mode 100644 index 0000000000..6759a683c1 --- /dev/null +++ b/packages/angular-workspace/nimble-angular/unit/fahrenheit/tests/nimble-unit-fahrenheit.directive.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; +import { NimbleUnitFahrenheitModule } from '../nimble-unit-fahrenheit.module'; + +describe('Nimble Fahrenheit unit', () => { + describe('module', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NimbleUnitFahrenheitModule] + }); + }); + + it('custom element is defined', () => { + expect(customElements.get('nimble-unit-fahrenheit')).not.toBeUndefined(); + }); + }); +}); \ No newline at end of file diff --git a/packages/angular-workspace/spright-angular/CHANGELOG.json b/packages/angular-workspace/spright-angular/CHANGELOG.json index 4d53a84b93..02fa56328e 100644 --- a/packages/angular-workspace/spright-angular/CHANGELOG.json +++ b/packages/angular-workspace/spright-angular/CHANGELOG.json @@ -1,6 +1,96 @@ { "name": "@ni/spright-angular", "entries": [ + { + "date": "Mon, 13 May 2024 09:49:02 GMT", + "version": "0.1.22", + "tag": "@ni/spright-angular_v0.1.22", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-angular", + "comment": "Bump @ni/spright-components to v0.0.24", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 22:37:40 GMT", + "version": "0.1.21", + "tag": "@ni/spright-angular_v0.1.21", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-angular", + "comment": "Bump @ni/spright-components to v0.0.23", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:42:46 GMT", + "version": "0.1.20", + "tag": "@ni/spright-angular_v0.1.20", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-angular", + "comment": "Bump @ni/spright-components to v0.0.22", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:11:56 GMT", + "version": "0.1.19", + "tag": "@ni/spright-angular_v0.1.19", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-angular", + "comment": "Bump @ni/spright-components to v0.0.21", + "commit": "not available" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 20:39:47 GMT", + "version": "0.1.18", + "tag": "@ni/spright-angular_v0.1.18", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-angular", + "comment": "Bump @ni/spright-components to v0.0.20", + "commit": "not available" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 18:40:41 GMT", + "version": "0.1.17", + "tag": "@ni/spright-angular_v0.1.17", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-angular", + "comment": "Bump @ni/spright-components to v0.0.19", + "commit": "not available" + } + ] + } + }, { "date": "Wed, 08 May 2024 22:21:34 GMT", "version": "0.1.16", diff --git a/packages/angular-workspace/spright-angular/CHANGELOG.md b/packages/angular-workspace/spright-angular/CHANGELOG.md index 308736e3e2..a5fe82c49a 100644 --- a/packages/angular-workspace/spright-angular/CHANGELOG.md +++ b/packages/angular-workspace/spright-angular/CHANGELOG.md @@ -1,9 +1,57 @@ # Change Log - @ni/spright-angular -This log was last generated on Wed, 08 May 2024 22:21:34 GMT and should not be manually modified. +This log was last generated on Mon, 13 May 2024 09:49:02 GMT and should not be manually modified. +## 0.1.22 + +Mon, 13 May 2024 09:49:02 GMT + +### Patches + +- Bump @ni/spright-components to v0.0.24 + +## 0.1.21 + +Fri, 10 May 2024 22:37:40 GMT + +### Patches + +- Bump @ni/spright-components to v0.0.23 + +## 0.1.20 + +Fri, 10 May 2024 16:42:46 GMT + +### Patches + +- Bump @ni/spright-components to v0.0.22 + +## 0.1.19 + +Fri, 10 May 2024 16:11:56 GMT + +### Patches + +- Bump @ni/spright-components to v0.0.21 + +## 0.1.18 + +Thu, 09 May 2024 20:39:47 GMT + +### Patches + +- Bump @ni/spright-components to v0.0.20 + +## 0.1.17 + +Thu, 09 May 2024 18:40:41 GMT + +### Patches + +- Bump @ni/spright-components to v0.0.19 + ## 0.1.16 Wed, 08 May 2024 22:21:34 GMT diff --git a/packages/angular-workspace/spright-angular/package.json b/packages/angular-workspace/spright-angular/package.json index b163a3dc28..e158abd064 100644 --- a/packages/angular-workspace/spright-angular/package.json +++ b/packages/angular-workspace/spright-angular/package.json @@ -1,6 +1,6 @@ { "name": "@ni/spright-angular", - "version": "0.1.16", + "version": "0.1.22", "description": "Angular components for NI Spright", "scripts": { "invoke-publish": "npm run invoke-publish:setup && cd ../dist/spright-angular && npm publish", @@ -24,7 +24,7 @@ "peerDependencies": { "@angular/common": "^16.2.12", "@angular/core": "^16.2.12", - "@ni/spright-components": "^0.0.18" + "@ni/spright-components": "^0.0.24" }, "dependencies": { "tslib": "^2.2.0" diff --git a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor index d0babc14e5..d2cf39488f 100644 --- a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -247,10 +247,14 @@ TextHidden="true"> + + Number diff --git a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs index 90bc666064..3a92997b16 100644 --- a/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs +++ b/packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs @@ -168,6 +168,7 @@ public async Task CloseDrawerAsync(DialogResult reason) public void AddTableRows(int numberOfRowsToAdd) { var tableData = new List(TableData); + List possibleStatuses = new() { "success", "calculating", "unknown" }; for (int i = 0; i < numberOfRowsToAdd; i++) { @@ -183,7 +184,7 @@ public void AddTableRows(int numberOfRowsToAdd) "Link", (rowCount % 2 == 0) ? new DateTime(2023, 8, 16, 2, 56, 11) : new DateTime(2022, 3, 7, 20, 28, 41), (rowCount % 2 == 0) ? 100 : 101, - (rowCount % 2 == 0) ? "success" : "unknown", + possibleStatuses.ElementAt(rowCount % 3), rowCount / 10.0, rowCount * 1000.0 * (1.1 + (2 * 60) + (3 * 3600)))); } diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json index dad16f266c..c7727ebdf3 100644 --- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json +++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json @@ -1,6 +1,51 @@ { "name": "@ni/nimble-blazor", "entries": [ + { + "date": "Fri, 10 May 2024 23:16:09 GMT", + "version": "17.2.0", + "tag": "@ni/nimble-blazor_v17.2.0", + "comments": { + "minor": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-blazor", + "commit": "93325bd0c81791411c57a4f43cdcf68843108684", + "comment": "Add Blazor support for Celsius and Fahrenheit number format units" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 22:37:40 GMT", + "version": "17.1.0", + "tag": "@ni/nimble-blazor_v17.1.0", + "comments": { + "minor": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-blazor", + "commit": "4e595cc0e67a9903510ba60da17afdb1bf2643d6", + "comment": "Add support for empty mapping component" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 18:40:41 GMT", + "version": "17.0.1", + "tag": "@ni/nimble-blazor_v17.0.1", + "comments": { + "patch": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-blazor", + "commit": "43edba8e90d0c5f414fd2b4cf19eee197b477829", + "comment": "Update Blazor docs for Spright and workspace change" + } + ] + } + }, { "date": "Wed, 08 May 2024 00:06:34 GMT", "version": "17.0.0", diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md index fa99fb1053..e9225f4e95 100644 --- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md +++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md @@ -1,9 +1,33 @@ # Change Log - @ni/nimble-blazor -This log was last generated on Mon, 06 May 2024 19:00:05 GMT and should not be manually modified. +This log was last generated on Fri, 10 May 2024 23:16:09 GMT and should not be manually modified. +## 17.2.0 + +Fri, 10 May 2024 23:16:09 GMT + +### Minor changes + +- Add Blazor support for Celsius and Fahrenheit number format units ([ni/nimble@93325bd](https://github.com/ni/nimble/commit/93325bd0c81791411c57a4f43cdcf68843108684)) + +## 17.1.0 + +Fri, 10 May 2024 22:37:40 GMT + +### Minor changes + +- Add support for empty mapping component ([ni/nimble@4e595cc](https://github.com/ni/nimble/commit/4e595cc0e67a9903510ba60da17afdb1bf2643d6)) + +## 17.0.1 + +Thu, 09 May 2024 18:40:41 GMT + +### Patches + +- Update Blazor docs for Spright and workspace change ([ni/nimble@43edba8](https://github.com/ni/nimble/commit/43edba8e90d0c5f414fd2b4cf19eee197b477829)) + ## 17.0.0 Mon, 06 May 2024 19:00:05 GMT diff --git a/packages/blazor-workspace/CONTRIBUTING.md b/packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md similarity index 97% rename from packages/blazor-workspace/CONTRIBUTING.md rename to packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md index 7662468497..323fed9080 100644 --- a/packages/blazor-workspace/CONTRIBUTING.md +++ b/packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md @@ -121,13 +121,13 @@ When creating a new project in the Blazor workspace, ensure it includes the foll ### Enabling IIS Click Start, open "Turn Windows features on or off", and configure "Web Management Tools" and "World Wide Web Services" in the following way: -![IIS Feature Configuration](/packages/nimble-blazor/docs/WindowsFeatures-IIS.jpg) +![IIS Feature Configuration](/packages/blazor-workspace/docs/WindowsFeatures-IIS.jpg) ### Running published output The commandline build will create a published distribution of the Blazor client example app, which can also be tested via IIS: - Open Internet Information Services (IIS) Manager - In the left pane, right click "Sites" and click "Add Website..." - Pick a site name -- Under "Physical Path", click [...] and browse to your `nimble-blazor\dist\blazor-client-app` directory +- Under "Physical Path", click [...] and browse to your `blazor-workspace\dist\blazor-client-app` directory - Under "Binding", pick a port other than 80 (such as 8080), then click "OK" - Open http://localhost:8080 (or whatever port you chose) \ No newline at end of file diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleMappingEmpty.razor b/packages/blazor-workspace/NimbleBlazor/Components/NimbleMappingEmpty.razor new file mode 100644 index 0000000000..b17db02d6d --- /dev/null +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleMappingEmpty.razor @@ -0,0 +1,9 @@ +@namespace NimbleBlazor +@typeparam TKey +@inherits NimbleMappingBase + + + diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleMappingEmpty.razor.cs b/packages/blazor-workspace/NimbleBlazor/Components/NimbleMappingEmpty.razor.cs new file mode 100644 index 0000000000..c536afe0ed --- /dev/null +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleMappingEmpty.razor.cs @@ -0,0 +1,12 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public partial class NimbleMappingEmpty : NimbleMappingBase +{ + /// + /// Gets or sets text for the mapped value. + /// + [Parameter] + public string? Text { get; set; } +} diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitCelsius.razor b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitCelsius.razor new file mode 100644 index 0000000000..414a05a305 --- /dev/null +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitCelsius.razor @@ -0,0 +1,5 @@ +@namespace NimbleBlazor + + + diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitCelsius.razor.cs b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitCelsius.razor.cs new file mode 100644 index 0000000000..67832aa460 --- /dev/null +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitCelsius.razor.cs @@ -0,0 +1,12 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public partial class NimbleUnitCelsius : ComponentBase +{ + /// + /// Gets or sets a collection of additional attributes that will be applied to the created element. + /// + [Parameter(CaptureUnmatchedValues = true)] + public IReadOnlyDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitFahrenheit.razor b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitFahrenheit.razor new file mode 100644 index 0000000000..33facaf1fd --- /dev/null +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitFahrenheit.razor @@ -0,0 +1,5 @@ +@namespace NimbleBlazor + + + diff --git a/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitFahrenheit.razor.cs b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitFahrenheit.razor.cs new file mode 100644 index 0000000000..749b1ef3be --- /dev/null +++ b/packages/blazor-workspace/NimbleBlazor/Components/NimbleUnitFahrenheit.razor.cs @@ -0,0 +1,12 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public partial class NimbleUnitFahrenheit : ComponentBase +{ + /// + /// Gets or sets a collection of additional attributes that will be applied to the created element. + /// + [Parameter(CaptureUnmatchedValues = true)] + public IReadOnlyDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/blazor-workspace/NimbleBlazor/NimbleBlazor.csproj b/packages/blazor-workspace/NimbleBlazor/NimbleBlazor.csproj index 2440f5fa6e..17962684fe 100644 --- a/packages/blazor-workspace/NimbleBlazor/NimbleBlazor.csproj +++ b/packages/blazor-workspace/NimbleBlazor/NimbleBlazor.csproj @@ -6,6 +6,7 @@ enable embedded NI + README.md https://github.com/ni/nimble https://github.com/ni/nimble git @@ -57,6 +58,7 @@ + diff --git a/packages/blazor-workspace/NimbleBlazor/README.md b/packages/blazor-workspace/NimbleBlazor/README.md new file mode 100644 index 0000000000..b37ff01262 --- /dev/null +++ b/packages/blazor-workspace/NimbleBlazor/README.md @@ -0,0 +1,150 @@ +# Nimble Blazor + +[![Nimble Nuget Version](https://img.shields.io/nuget/v/NimbleBlazor.svg)](https://www.nuget.org/packages/NimbleBlazor) + +## Getting Started + +### Prerequisites + +1. IDE: + - **Windows with Visual Studio**: For Blazor development on Windows, the suggested IDE is: + - Visual Studio 2022 ([Enterprise, if available](https://my.visualstudio.com/Downloads?PId=8229)): Choose the "ASP.NET and Web Development" Workload in the installer + - Ensure Visual Studio is completely up to date (v17.1.6+): In Visual Studio click "Help" then "Check for Updates" + - **Mac with Visual Studio Code**: Install [Visual Studio Code](https://code.visualstudio.com/) and open it. Open the Extensions pane ("Preferences" >> "Extensions"), and search for / install the `ms-dotnettools.csharp` extension. +2. .NET SDK: See [the main contributing doc](/CONTRIBUTING.md) for the required version. + +### Creating a new Blazor project + +The built-in Blazor template projects are good starting points. First, decide whether to create a Blazor Server or Blazor Client/WebAssembly application (see the [Blazor hosting model documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0) for more information on both models). + +**Visual Studio**: Choose "New" >> "Project", and pick "Blazor Server app" or "Blazor WebAssembly app". +**VS Code**: Create a new folder, then open it in VS Code. Choose "View" >> "Terminal", and type `dotnet new blazorserver -f net6.0` (for Blazor Server) or `dotnet new blazorwasm -f net6.0` (for Blazor WebAssembly) and press Enter. Open the Command Palette ("View" >> "Command Palette" or Ctrl-Shift-P), enter ".NET Generate Assets for Build and Debug" and press Enter. + +Additional Resources: [Microsoft tutorial: Build a web app with Blazor](https://docs.microsoft.com/en-us/learn/modules/build-blazor-webassembly-visual-studio-code/); [`dotnet new` documentation](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new) + +### Reference NimbleBlazor in a Blazor project + +1. Add a PackageReference to the NimbleBlazor NuGet package: + - Using the published NimbleBlazor NuGet package (recommended) + - Visual Studio: "Project" >> "Manage NuGet Packages", pick "nuget.org" in the "Package Source" dropdown, and ensure "Include prerelease" is checked. Search for "NimbleBlazor", select it and click the "Install" button. + - VS Code: Run the command `dotnet add package NimbleBlazor --source https://api.nuget.org/v3/index.json --prerelease` in the Terminal window. + - For Nimble developers, with a locally built NimbleBlazor NuGet (built from the Nimble repo): + - Run `npm run build`, and then `npm run pack -w @ni/nimble-blazor` from the root of the Nimble repo + - Visual Studio: "Project" >> "Manage NuGet Packages". Click the gear/Settings button. Add a new Package Source ("NimbleBlazor") as `[NimbleRepoDirectory]\packages\blazor-workspace\dist` and commit/ close Settings. Pick "NimbleBlazor" in the "Package Source" dropdown, and ensure "Include prerelease" is checked. Search for "NimbleBlazor", select it and click the "Install" button. + - VS Code: Run the command `dotnet add package NimbleBlazor --source [NimbleRepoDirectory]\packages\blazor-workspace\dist` in the Terminal window. +2. Add required references to Blazor code + - Open `_Imports.razor`, and add a new line at the bottom: `@using NimbleBlazor` + - Open `_Layout.cshtml` (BlazorServer) / `wwwroot/index.html` (Blazor WebAssembly). + At the bottom of the `` section (right before ``), add + ```html + + ``` + At the bottom of the `` section (right before ``), add + ```html + + ``` + +Additional Resources: [`dotnet add package` documentation](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-add-package) + +### Use Nimble Blazor components + +For a simple modification to the Blazor template project: open `Index.razor` and add the following code at the bottom, to add a Nimble text field that updates when a Nimble button is clicked: +```cs + +Click Me +@code { + protected string ButtonClickStatus { get; set; } = string.Empty; + private int _buttonClickCount = 0; + + private void OnButtonClicked(MouseEventArgs args) + { + _buttonClickCount++; + ButtonClickStatus = $"Button Clicked {_buttonClickCount} times"; + } +} +``` + +To test out your changes, do "Debug" >> "Start without Debugging" in Visual Studio, or `dotnet watch run` in the VS Code Terminal. + +More complete examples can be found in the Demo.Client/Server example projects. + +#### NimbleTable usage + +The `NimbleTable` requires that its data be set via the `SetDataAsync` method. The appropriate place to call this method is either in the `OnAfterRenderAsync` override of the hosting component or after that method has been called for the first time. + +As the `NimbleTable` is generic a client must supply its generic type in the markup using the `TData` property syntax. The following code represents a typical usage of the `NimbleTable`: +```html + +@code { + private NimbleTable? _table; + private IEnumerable TableData { get; set; } = Enumerable.Empty(); + ... + public override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + await _table.SetDataAsync(TableData); // populate TableData before here + } + + public class MyRecordType + { + ... + } +} +``` + +For more information regarding the Blazor component lifecycle mechanisms (such as `OnAfterRenderAsync`), please consult the [Microsoft Blazor docs](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle). + +### Theming and Design Tokens + +To use Nimble's theme-aware design tokens in a Blazor app, you should have a `` element as an ancestor to all of the Nimble components you use. The app's default layout (`MainLayout.razor` in the examples) is a good place to put the theme provider (as the root content of the page). + +#### Using Nimble Design Tokens (CSS/SCSS) + +Blazor doesn't have built-in support for using/ building SCSS files, however Nimble's design tokens can be used as CSS variables (`var(--ni-nimble-...)`) in Blazor apps without any additional work. +For a full list of supported variable names, see the [Nimble Storybook, "Tokens" >> "Theme-aware tokens"](https://nimble.ni.dev/storybook/?path=/story/tokens-theme-aware-tokens--theme-aware-tokens&args=propertyFormat:CSS). + +**Experimental: Manually including Nimble Tokens SCSS files** +There are currently extra manual steps required to use the Nimble design tokens as SCSS in Blazor projects (which results in better IntelliSense and compile-time checking for the Nimble tokens and variables): +1. Copy the Nimble tokens SCSS files into your Blazor project: Include `tokens.scss` and `tokens-internal.scss` from the `nimble-components` in your Blazor project directory. The simplest way to get these files is via `unpkg.com` (latest versions: [tokens.scss](https://unpkg.com/@ni/nimble-components/dist/tokens-internal.scss), [tokens-internal.scss](https://unpkg.com/@ni/nimble-components/dist/tokens-internal.scss)) +2. In `tokens.scss`, add a file extension to the `@import` statement at the top (`'./tokens-internal'` => `'./tokens-internal.scss'`) +3. Add a NuGet package reference to a SASS/SCSS compiler to your Blazor project. Both [LibSassBuilder](https://www.nuget.org/packages/LibSassBuilder) and [DartSassBuilder (latest/prerelease)](https://www.nuget.org/packages/DartSassBuilder) have been tested with Blazor projects and work with no additional configuration required. +4. Add new SCSS files for your Razor components (e.g. `MyComponent.razor.scss`), and `@import 'tokens.scss'` in it (updating the import relative path as needed). +5. Use the `$ni-nimble-...` variables in your Blazor application SCSS. + +The SCSS compilation happens before the rest of Blazor's compilation, so this approach works fine with Blazor CSS isolation. +Note: This approach requires periodically updating the Nimble tokens SCSS files manually (whenever the Nimble Blazor NuGet version is updated). + +### Localization (Optional) + +Most user-visible strings displayed by Nimble components are provided by the client application and are expected to be localized by the application if necessary. However, some strings are built into Nimble components and are provided only in English. + +To provide localized strings in a localized Blazor app: +1. Add the label providers as children of your ``: + - ``: Used for labels for all components besides the table + - ``: Used for labels for the table (and table sub-components / column types) +2. For each Nimble-provided label shown in the [Label Provider Storybook documentation](https://nimble.ni.dev/storybook/?path=/docs/tokens-label-providers--docs): + - Add a new entry for the label in a resource file (`.resx`). You can either add to an existing resx file, or create a new one just for the Nimble strings. The resource value should be the Nimble-provided English default string shown in Storybook. + - Follow [standard Blazor localization patterns](https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization) to localize the strings, and load the localized versions at runtime in your application. + - Provide Nimble the localized strings with the label provider APIs. For example, to provide the `popupDismiss` label on `NimbleLabelProviderCore`, if you load your string resources with a .NET `IStringLocalizer` instance, your label provider may look like the following: + ```xml + + ``` + +### Using Nimble Blazor in a Blazor Hybrid app + +There is currently an [issue in ASP.NET Core](https://github.com/dotnet/aspnetcore/issues/42349) that prevents the necessary JavaScript that Nimble Blazor relies on from loading in a Blazor Hybrid application. The Demo.Hybrid project illustrates the current required steps for getting Nimble Blazor to work properly. This simply involves adding the script `NimbleBlazor.HybridWorkaround.js` in the `index.html` file in `wwwroot`: + +wwwroot/index.html +```html + ... + + + + + +``` + +## Contributing + +Follow the instructions in [CONTRIBUTING.md](/packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md) to modify this library. diff --git a/packages/blazor-workspace/NimbleBlazor/package.json b/packages/blazor-workspace/NimbleBlazor/package.json index e437bb1ce2..2c75e70238 100644 --- a/packages/blazor-workspace/NimbleBlazor/package.json +++ b/packages/blazor-workspace/NimbleBlazor/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-blazor", - "version": "17.0.0", + "version": "17.2.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/packages/blazor-workspace/README.md b/packages/blazor-workspace/README.md index 55b39b9268..7bf51f1b69 100644 --- a/packages/blazor-workspace/README.md +++ b/packages/blazor-workspace/README.md @@ -1,161 +1,9 @@ -
-

ni | nimble | blazor

-
+# Blazor Workspace -# Nimble and Spright Blazor - -[![Nimble Nuget Version](https://img.shields.io/nuget/v/NimbleBlazor.svg)](https://www.nuget.org/packages/NimbleBlazor) -[![Spright Nuget Version](https://img.shields.io/nuget/v/SprightBlazor.svg)](https://www.nuget.org/packages/SprightBlazor) - -NI-styled UI components for Blazor applications - -This repo contains: -1. Blazor components and styles matching the NI brand. These are published as a Nuget package to be consumed by either Blazor WebAssembly or Blazor Server applications. +This workspace contains: +1. Blazor components and styles matching the NI brand. These are published as Nuget packages to be consumed by either Blazor WebAssembly or Blazor Server applications. + - `NimbleBlazor` contains general-purpose components + - `SprightBlazor` contains special-purpose or application-specific components 2. Three Blazor demo applications that consume the components: a Blazor WebAssembly application (`Demo.Client`), a Blazor Server application (`Demo.Server`), and a Blazor Hybrid application (`Demo.Hybrid`). -## Getting Started - -### Prerequisites - -1. IDE: - - **Windows with Visual Studio**: For Blazor development on Windows, the suggested IDE is: - - Visual Studio 2022 ([Enterprise, if available](https://my.visualstudio.com/Downloads?PId=8229)): Choose the "ASP.NET and Web Development" Workload in the installer - - Ensure Visual Studio is completely up to date (v17.1.6+): In Visual Studio click "Help" then "Check for Updates" - - **Mac with Visual Studio Code**: Install [Visual Studio Code](https://code.visualstudio.com/) and open it. Open the Extensions pane ("Preferences" >> "Extensions"), and search for / install the `ms-dotnettools.csharp` extension. -2. .NET SDK: See [the main contributing doc](/CONTRIBUTING.md) for the required version. - -### Creating a new Blazor project - -The built-in Blazor template projects are good starting points. First, decide whether to create a Blazor Server or Blazor Client/WebAssembly application (see the [Blazor hosting model documentation](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-6.0) for more information on both models). - -**Visual Studio**: Choose "New" >> "Project", and pick "Blazor Server app" or "Blazor WebAssembly app". -**VS Code**: Create a new folder, then open it in VS Code. Choose "View" >> "Terminal", and type `dotnet new blazorserver -f net6.0` (for Blazor Server) or `dotnet new blazorwasm -f net6.0` (for Blazor WebAssembly) and press Enter. Open the Command Palette ("View" >> "Command Palette" or Ctrl-Shift-P), enter ".NET Generate Assets for Build and Debug" and press Enter. - -Additional Resources: [Microsoft tutorial: Build a web app with Blazor](https://docs.microsoft.com/en-us/learn/modules/build-blazor-webassembly-visual-studio-code/); [`dotnet new` documentation](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new) - -### Reference NimbleBlazor in a Blazor project - -1. Add a PackageReference to the NimbleBlazor NuGet package: - - Using the published NimbleBlazor NuGet package (recommended) - - Visual Studio: "Project" >> "Manage NuGet Packages", pick "nuget.org" in the "Package Source" dropdown, and ensure "Include prerelease" is checked. Search for "NimbleBlazor", select it and click the "Install" button. - - VS Code: Run the command `dotnet add package NimbleBlazor --source https://api.nuget.org/v3/index.json --prerelease` in the Terminal window. - - For Nimble developers, with a locally built NimbleBlazor NuGet (built from the Nimble repo): - - Run `npm run build`, and then `npm run pack -w @ni/nimble-blazor` from the root of the Nimble repo - - Visual Studio: "Project" >> "Manage NuGet Packages". Click the gear/Settings button. Add a new Package Source ("NimbleBlazor") as `[NimbleRepoDirectory]\packages\nimble-blazor\dist` and commit/ close Settings. Pick "NimbleBlazor" in the "Package Source" dropdown, and ensure "Include prerelease" is checked. Search for "NimbleBlazor", select it and click the "Install" button. - - VS Code: Run the command `dotnet add package NimbleBlazor --source [NimbleRepoDirectory]\packages\nimble-blazor\dist` in the Terminal window. -2. Add required references to Blazor code - - Open `_Imports.razor`, and add a new line at the bottom: `@using NimbleBlazor` - - Open `_Layout.cshtml` (BlazorServer) / `wwwroot/index.html` (Blazor WebAssembly). - At the bottom of the `` section (right before ``), add - ```html - - ``` - At the bottom of the `` section (right before ``), add - ```html - - ``` - -Additional Resources: [`dotnet add package` documentation](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-add-package) - -### Use Nimble Blazor components - -For a simple modification to the Blazor template project: open `Index.razor` and add the following code at the bottom, to add a Nimble text field that updates when a Nimble button is clicked: -```cs - -Click Me -@code { - protected string ButtonClickStatus { get; set; } = string.Empty; - private int _buttonClickCount = 0; - - private void OnButtonClicked(MouseEventArgs args) - { - _buttonClickCount++; - ButtonClickStatus = $"Button Clicked {_buttonClickCount} times"; - } -} -``` - -To test out your changes, do "Debug" >> "Start without Debugging" in Visual Studio, or `dotnet watch run` in the VS Code Terminal. - -More complete examples can be found in the Demo.Client/Server example projects. - -#### NimbleTable usage - -The `NimbleTable` requires that its data be set via the `SetDataAsync` method. The appropriate place to call this method is either in the `OnAfterRenderAsync` override of the hosting component or after that method has been called for the first time. - -As the `NimbleTable` is generic a client must supply its generic type in the markup using the `TData` property syntax. The following code represents a typical usage of the `NimbleTable`: -```html - -@code { - private NimbleTable? _table; - private IEnumerable TableData { get; set; } = Enumerable.Empty(); - ... - public override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); - await _table.SetDataAsync(TableData); // populate TableData before here - } - - public class MyRecordType - { - ... - } -} -``` - -For more information regarding the Blazor component lifecycle mechanisms (such as `OnAfterRenderAsync`), please consult the [Microsoft Blazor docs](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle). - -### Theming and Design Tokens - -To use Nimble's theme-aware design tokens in a Blazor app, you should have a `` element as an ancestor to all of the Nimble components you use. The app's default layout (`MainLayout.razor` in the examples) is a good place to put the theme provider (as the root content of the page). - -#### Using Nimble Design Tokens (CSS/SCSS) - -Blazor doesn't have built-in support for using/ building SCSS files, however Nimble's design tokens can be used as CSS variables (`var(--ni-nimble-...)`) in Blazor apps without any additional work. -For a full list of supported variable names, see the [Nimble Storybook, "Tokens" >> "Theme-aware tokens"](https://nimble.ni.dev/storybook/?path=/story/tokens-theme-aware-tokens--theme-aware-tokens&args=propertyFormat:CSS). - -**Experimental: Manually including Nimble Tokens SCSS files** -There are currently extra manual steps required to use the Nimble design tokens as SCSS in Blazor projects (which results in better IntelliSense and compile-time checking for the Nimble tokens and variables): -1. Copy the Nimble tokens SCSS files into your Blazor project: Include `tokens.scss` and `tokens-internal.scss` from the `nimble-components` in your Blazor project directory. The simplest way to get these files is via `unpkg.com` (latest versions: [tokens.scss](https://unpkg.com/@ni/nimble-components/dist/tokens-internal.scss), [tokens-internal.scss](https://unpkg.com/@ni/nimble-components/dist/tokens-internal.scss)) -2. In `tokens.scss`, add a file extension to the `@import` statement at the top (`'./tokens-internal'` => `'./tokens-internal.scss'`) -3. Add a NuGet package reference to a SASS/SCSS compiler to your Blazor project. Both [LibSassBuilder](https://www.nuget.org/packages/LibSassBuilder) and [DartSassBuilder (latest/prerelease)](https://www.nuget.org/packages/DartSassBuilder) have been tested with Blazor projects and work with no additional configuration required. -4. Add new SCSS files for your Razor components (e.g. `MyComponent.razor.scss`), and `@import 'tokens.scss'` in it (updating the import relative path as needed). -5. Use the `$ni-nimble-...` variables in your Blazor application SCSS. - -The SCSS compilation happens before the rest of Blazor's compilation, so this approach works fine with Blazor CSS isolation. -Note: This approach requires periodically updating the Nimble tokens SCSS files manually (whenever the Nimble Blazor NuGet version is updated). - -### Localization (Optional) - -Most user-visible strings displayed by Nimble components are provided by the client application and are expected to be localized by the application if necessary. However, some strings are built into Nimble components and are provided only in English. - -To provide localized strings in a localized Blazor app: -1. Add the label providers as children of your ``: - - ``: Used for labels for all components besides the table - - ``: Used for labels for the table (and table sub-components / column types) -2. For each Nimble-provided label shown in the [Label Provider Storybook documentation](https://nimble.ni.dev/storybook/?path=/docs/tokens-label-providers--docs): - - Add a new entry for the label in a resource file (`.resx`). You can either add to an existing resx file, or create a new one just for the Nimble strings. The resource value should be the Nimble-provided English default string shown in Storybook. - - Follow [standard Blazor localization patterns](https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization) to localize the strings, and load the localized versions at runtime in your application. - - Provide Nimble the localized strings with the label provider APIs. For example, to provide the `popupDismiss` label on `NimbleLabelProviderCore`, if you load your string resources with a .NET `IStringLocalizer` instance, your label provider may look like the following: - ```xml - - ``` - -### Using Nimble Blazor in a Blazor Hybrid app - -There is currently an [issue in ASP.NET Core](https://github.com/dotnet/aspnetcore/issues/42349) that prevents the necessary JavaScript that Nimble Blazor relies on from loading in a Blazor Hybrid application. The Demo.Hybrid project illustrates the current required steps for getting Nimble Blazor to work properly. This simply involves adding the script `NimbleBlazor.HybridWorkaround.js` in the `index.html` file in `wwwroot`: - -wwwroot/index.html -```html - ... - - - - - -``` - -## Contributing - -Follow the instructions in [CONTRIBUTING.md](/packages/nimble-blazor/CONTRIBUTING.md) to modify this library. +Refer to the `README.md` files in the individual project directories for more details. diff --git a/packages/blazor-workspace/SprightBlazor/CHANGELOG.json b/packages/blazor-workspace/SprightBlazor/CHANGELOG.json index 80bb352d02..62dccd9fb3 100644 --- a/packages/blazor-workspace/SprightBlazor/CHANGELOG.json +++ b/packages/blazor-workspace/SprightBlazor/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/spright-blazor", "entries": [ + { + "date": "Thu, 09 May 2024 18:40:41 GMT", + "version": "0.0.5", + "tag": "@ni/spright-blazor_v0.0.5", + "comments": { + "patch": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/spright-blazor", + "commit": "43edba8e90d0c5f414fd2b4cf19eee197b477829", + "comment": "Update Blazor docs for Spright and workspace change" + } + ] + } + }, { "date": "Wed, 08 May 2024 00:06:34 GMT", "version": "0.0.4", diff --git a/packages/blazor-workspace/SprightBlazor/CHANGELOG.md b/packages/blazor-workspace/SprightBlazor/CHANGELOG.md index 3fca7b4684..ed47d291d9 100644 --- a/packages/blazor-workspace/SprightBlazor/CHANGELOG.md +++ b/packages/blazor-workspace/SprightBlazor/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/spright-blazor -This log was last generated on Thu, 02 May 2024 23:33:54 GMT and should not be manually modified. +This log was last generated on Thu, 09 May 2024 18:40:41 GMT and should not be manually modified. +## 0.0.5 + +Thu, 09 May 2024 18:40:41 GMT + +### Patches + +- Update Blazor docs for Spright and workspace change ([ni/nimble@43edba8](https://github.com/ni/nimble/commit/43edba8e90d0c5f414fd2b4cf19eee197b477829)) + ## 0.0.4 Thu, 02 May 2024 23:33:54 GMT diff --git a/packages/blazor-workspace/SprightBlazor/CONTRIBUTING.md b/packages/blazor-workspace/SprightBlazor/CONTRIBUTING.md new file mode 100644 index 0000000000..32395b36ca --- /dev/null +++ b/packages/blazor-workspace/SprightBlazor/CONTRIBUTING.md @@ -0,0 +1,3 @@ +# Contributing to Spright Blazor + +Contributions should follow the equivalent patterns and guidelines as for Nimble Blazor, so refer to that [CONTRIBUTING.md](/packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md) document. Any differences are listed below. \ No newline at end of file diff --git a/packages/blazor-workspace/SprightBlazor/README.md b/packages/blazor-workspace/SprightBlazor/README.md new file mode 100644 index 0000000000..5e6aab8229 --- /dev/null +++ b/packages/blazor-workspace/SprightBlazor/README.md @@ -0,0 +1,41 @@ +# Spright Blazor + +[![Spright Nuget Version](https://img.shields.io/nuget/v/SprightBlazor.svg)](https://www.nuget.org/packages/SprightBlazor) + +Spright Blazor generally works equivalently to Nimble Blazor, so refer to the Nimble Blazor [README.md](/packages/blazor-workspace/NimbleBlazor/README.md). Any Spright-specific differences are listed below. + +## Getting Started + +Any project using SprightBlazor components will typically also be using NimbleBlazor components (e.g. `NimbleThemeProvider` if nothing else). SprightBlazor is not a superset of NimbleBlazor, but the `spright-components` bundle _is_ a superset of the `nimble-components` bundle. Follow the directions below to avoid issues: + +- Add references to **both** the SprightBlazor and NimbleBlazor NuGet packages in your project + +- Include **only** the Spright all-components bundle in `_Layout.cshtml` (for BlazorServer) or `wwwroot/index.html` (for Blazor WebAssembly): + + ```html + + ... + + + + ``` + +### In a Blazor Hybrid app + +- Include **both** `SprightBlazor.HybridWorkaround.js` and `NimbleBlazor.HybridWorkaround.js` in `wwwroot/index.html`: + + ```html + + ... + + + + + + + ``` + +## Contributing + +Follow the instructions in [CONTRIBUTING.md](/packages/blazor-workspace/SprightBlazor/CONTRIBUTING.md) to modify this library. diff --git a/packages/blazor-workspace/SprightBlazor/SprightBlazor.csproj b/packages/blazor-workspace/SprightBlazor/SprightBlazor.csproj index c4a796c7f2..ae8164c97b 100644 --- a/packages/blazor-workspace/SprightBlazor/SprightBlazor.csproj +++ b/packages/blazor-workspace/SprightBlazor/SprightBlazor.csproj @@ -6,6 +6,7 @@ enable embedded NI + README.md https://github.com/ni/nimble https://github.com/ni/nimble git @@ -57,6 +58,7 @@ + diff --git a/packages/blazor-workspace/SprightBlazor/package.json b/packages/blazor-workspace/SprightBlazor/package.json index c33ea18e3e..c7db36a949 100644 --- a/packages/blazor-workspace/SprightBlazor/package.json +++ b/packages/blazor-workspace/SprightBlazor/package.json @@ -1,6 +1,6 @@ { "name": "@ni/spright-blazor", - "version": "0.0.4", + "version": "0.0.5", "description": "Blazor components for Spright", "scripts": { "pack": "cross-env-shell dotnet pack -c Release -p:PackageVersion=$npm_package_version --output ../dist", diff --git a/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleMappingEmptyTests.cs b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleMappingEmptyTests.cs new file mode 100644 index 0000000000..adbb2bbb47 --- /dev/null +++ b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleMappingEmptyTests.cs @@ -0,0 +1,47 @@ +using System; +using System.Linq.Expressions; +using Bunit; +using Xunit; + +namespace NimbleBlazor.Tests.Unit.Components; + +/// +/// Tests for +/// +public class NimbleMappingEmptyTests +{ + [Fact] + public void NimbleMappingEmpty_Rendered_HasMappingTextMarkup() + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + var expectedMarkup = "nimble-mapping-empty"; + + var element = context.RenderComponent>(); + + Assert.Contains(expectedMarkup, element.Markup); + } + + [Fact] + public void NimbleMappingEmptyKeyAttribute_HasCorrectMarkup() + { + var element = RenderWithPropertySet(x => x.Key, 1001); + + Assert.Contains($"key=\"1001\"", element.Markup); + } + + [Fact] + public void NimbleMappingEmptyTextAttribute_HasCorrectMarkup() + { + var element = RenderWithPropertySet(x => x.Text, "foo"); + + Assert.Contains($"text=\"foo\"", element.Markup); + } + + private IRenderedComponent> RenderWithPropertySet(Expression, TProperty>> propertyGetter, TProperty propertyValue) + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + return context.RenderComponent>(p => p.Add(propertyGetter, propertyValue)); + } +} diff --git a/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleUnitCelsiusTests.cs b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleUnitCelsiusTests.cs new file mode 100644 index 0000000000..33777626c3 --- /dev/null +++ b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleUnitCelsiusTests.cs @@ -0,0 +1,31 @@ +using Bunit; +using Xunit; + +namespace NimbleBlazor.Tests.Unit.Components; + +/// +/// Tests for +/// +public class NimbleUnitCelsiusTests +{ + [Fact] + public void NimbleUnitCelsius_Rendered_HasUnitCelsiusMarkup() + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + var expectedMarkup = "nimble-unit-celsius"; + + var element = context.RenderComponent(); + + Assert.Contains(expectedMarkup, element.Markup); + } + + [Fact] + public void NimbleUnitCelsius_SupportsAdditionalAttributes() + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + var exception = Record.Exception(() => context.RenderComponent(ComponentParameter.CreateParameter("class", "foo"))); + Assert.Null(exception); + } +} diff --git a/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleUnitFahrenheitTests.cs b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleUnitFahrenheitTests.cs new file mode 100644 index 0000000000..b94220c6f2 --- /dev/null +++ b/packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleUnitFahrenheitTests.cs @@ -0,0 +1,31 @@ +using Bunit; +using Xunit; + +namespace NimbleBlazor.Tests.Unit.Components; + +/// +/// Tests for +/// +public class NimbleUnitFahrenheitTests +{ + [Fact] + public void NimbleUnitFahrenheit_Rendered_HasUnitFahrenheitMarkup() + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + var expectedMarkup = "nimble-unit-fahrenheit"; + + var element = context.RenderComponent(); + + Assert.Contains(expectedMarkup, element.Markup); + } + + [Fact] + public void NimbleUnitFahrenheit_SupportsAdditionalAttributes() + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + var exception = Record.Exception(() => context.RenderComponent(ComponentParameter.CreateParameter("class", "foo"))); + Assert.Null(exception); + } +} diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json index 18354d50d5..414b43795e 100644 --- a/packages/nimble-components/CHANGELOG.json +++ b/packages/nimble-components/CHANGELOG.json @@ -1,6 +1,102 @@ { "name": "@ni/nimble-components", "entries": [ + { + "date": "Mon, 13 May 2024 09:49:02 GMT", + "version": "28.3.1", + "tag": "@ni/nimble-components_v28.3.1", + "comments": { + "patch": [ + { + "author": "33986780+munteannatan@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "dee0ac1b99f0186fe45d416ed5604e0c27469d36", + "comment": "Fixed hover die template error where width and height were NaN" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 22:37:40 GMT", + "version": "28.3.0", + "tag": "@ni/nimble-components_v28.3.0", + "comments": { + "minor": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "4e595cc0e67a9903510ba60da17afdb1bf2643d6", + "comment": "Export nimble-mapping-empty from all-components" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:42:46 GMT", + "version": "28.2.1", + "tag": "@ni/nimble-components_v28.2.1", + "comments": { + "patch": [ + { + "author": "26874831+atmgrifter00@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "9714748c8963830a41b772796cb237262f26683b", + "comment": "Fix issue with clicking option in dropdown not updating display." + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:11:55 GMT", + "version": "28.2.0", + "tag": "@ni/nimble-components_v28.2.0", + "comments": { + "minor": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "090b724be133ceceb70e742207a74cf026988ae6", + "comment": "Create empty mapping element and support it in the icon column" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 20:39:47 GMT", + "version": "28.1.0", + "tag": "@ni/nimble-components_v28.1.0", + "comments": { + "minor": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "89919eef4f938c802e3160928000ef1b5d71b083", + "comment": "Add Celsius and Fahrenheit number formatting unit support" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 18:40:41 GMT", + "version": "28.0.5", + "tag": "@ni/nimble-components_v28.0.5", + "comments": { + "patch": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "43edba8e90d0c5f414fd2b4cf19eee197b477829", + "comment": "Update Blazor docs for Spright and workspace change" + }, + { + "author": "beachball", + "package": "@ni/nimble-components", + "comment": "Bump @ni/nimble-tokens to v6.13.6", + "commit": "not available" + } + ] + } + }, { "date": "Wed, 08 May 2024 22:21:34 GMT", "version": "28.0.4", diff --git a/packages/nimble-components/CHANGELOG.md b/packages/nimble-components/CHANGELOG.md index 633ac8b323..95bc299755 100644 --- a/packages/nimble-components/CHANGELOG.md +++ b/packages/nimble-components/CHANGELOG.md @@ -1,9 +1,58 @@ # Change Log - @ni/nimble-components -This log was last generated on Wed, 08 May 2024 17:29:00 GMT and should not be manually modified. +This log was last generated on Mon, 13 May 2024 09:49:02 GMT and should not be manually modified. +## 28.3.1 + +Mon, 13 May 2024 09:49:02 GMT + +### Patches + +- Fixed hover die template error where width and height were NaN ([ni/nimble@dee0ac1](https://github.com/ni/nimble/commit/dee0ac1b99f0186fe45d416ed5604e0c27469d36)) + +## 28.3.0 + +Fri, 10 May 2024 22:37:40 GMT + +### Minor changes + +- Export nimble-mapping-empty from all-components ([ni/nimble@4e595cc](https://github.com/ni/nimble/commit/4e595cc0e67a9903510ba60da17afdb1bf2643d6)) + +## 28.2.1 + +Fri, 10 May 2024 16:42:46 GMT + +### Patches + +- Fix issue with clicking option in dropdown not updating display. ([ni/nimble@9714748](https://github.com/ni/nimble/commit/9714748c8963830a41b772796cb237262f26683b)) + +## 28.2.0 + +Fri, 10 May 2024 16:11:55 GMT + +### Minor changes + +- Create empty mapping element and support it in the icon column ([ni/nimble@090b724](https://github.com/ni/nimble/commit/090b724be133ceceb70e742207a74cf026988ae6)) + +## 28.1.0 + +Thu, 09 May 2024 20:39:47 GMT + +### Minor changes + +- Add Celsius and Fahrenheit number formatting unit support ([ni/nimble@89919ee](https://github.com/ni/nimble/commit/89919eef4f938c802e3160928000ef1b5d71b083)) + +## 28.0.5 + +Thu, 09 May 2024 18:40:41 GMT + +### Patches + +- Update Blazor docs for Spright and workspace change ([ni/nimble@43edba8](https://github.com/ni/nimble/commit/43edba8e90d0c5f414fd2b4cf19eee197b477829)) +- Bump @ni/nimble-tokens to v6.13.6 + ## 28.0.4 Wed, 08 May 2024 17:29:00 GMT diff --git a/packages/nimble-components/README.md b/packages/nimble-components/README.md index 2ea97b4eaa..e077842749 100644 --- a/packages/nimble-components/README.md +++ b/packages/nimble-components/README.md @@ -15,7 +15,7 @@ NI-styled web components for web applications. If you are using one of the following frameworks see associated wrapper documentation: 1. Angular: See the [nimble-angular](/packages/angular-workspace/nimble-angular) documentation. -2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/nimble-blazor) documentation. +2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/blazor-workspace/NimbleBlazor) documentation. ### Using in a Webpack Application diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json index 6a8e63c92e..cd7e30057c 100644 --- a/packages/nimble-components/package.json +++ b/packages/nimble-components/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-components", - "version": "28.0.4", + "version": "28.3.1", "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", @@ -66,7 +66,7 @@ "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "^2.49.6", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-tokens": "^6.13.5", + "@ni/nimble-tokens": "^6.13.6", "@tanstack/table-core": "^8.10.7", "@tanstack/virtual-core": "^3.0.0-beta.68", "@tiptap/core": "^2.2.2", diff --git a/packages/nimble-components/src/all-components.ts b/packages/nimble-components/src/all-components.ts index 201ecf9176..f2f7d8b04f 100644 --- a/packages/nimble-components/src/all-components.ts +++ b/packages/nimble-components/src/all-components.ts @@ -25,9 +25,10 @@ import './icons/all-icons'; import './label-provider/core'; import './label-provider/table'; import './list-option'; -import './mapping/text'; +import './mapping/empty'; import './mapping/icon'; import './mapping/spinner'; +import './mapping/text'; import './menu'; import './menu-button'; import './menu-item'; diff --git a/packages/nimble-components/src/mapping/empty/index.ts b/packages/nimble-components/src/mapping/empty/index.ts new file mode 100644 index 0000000000..6ad0fb3225 --- /dev/null +++ b/packages/nimble-components/src/mapping/empty/index.ts @@ -0,0 +1,28 @@ +import { DesignSystem } from '@microsoft/fast-foundation'; +import { attr } from '@microsoft/fast-element'; +import { Mapping } from '../base'; +import { template } from '../base/template'; +import type { MappingKey } from '../base/types'; + +declare global { + interface HTMLElementTagNameMap { + 'nimble-mapping-empty': MappingEmpty; + } +} + +/** + * Maps data values to text. + * One or more may be added as children of a nimble-table-column-mapping element. The + * mapping displays an empty cell and text-only group rows. + */ +export class MappingEmpty extends Mapping { + @attr() + public text?: string; +} + +const emptyMapping = MappingEmpty.compose({ + baseName: 'mapping-empty', + template +}); +DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping()); +export const mappingEmptyTag = 'nimble-mapping-empty'; diff --git a/packages/nimble-components/src/mapping/empty/tests/mapping-empty.spec.ts b/packages/nimble-components/src/mapping/empty/tests/mapping-empty.spec.ts new file mode 100644 index 0000000000..10cc1cc728 --- /dev/null +++ b/packages/nimble-components/src/mapping/empty/tests/mapping-empty.spec.ts @@ -0,0 +1,13 @@ +import { MappingEmpty, mappingEmptyTag } from '..'; + +describe('Empty Mapping', () => { + it('should export its tag', () => { + expect(mappingEmptyTag).toBe('nimble-mapping-empty'); + }); + + it('can construct an element instance', () => { + expect(document.createElement('nimble-mapping-empty')).toBeInstanceOf( + MappingEmpty + ); + }); +}); diff --git a/packages/nimble-components/src/select/index.ts b/packages/nimble-components/src/select/index.ts index 389e3920f2..83b57a85d5 100644 --- a/packages/nimble-components/src/select/index.ts +++ b/packages/nimble-components/src/select/index.ts @@ -339,13 +339,13 @@ export class Select } } - const currentIndex = this.openActiveIndex ?? this.selectedIndex; + const previousSelectedIndex = this.selectedIndex; super.clickHandler(e); this.open = this.collapsible && !this.open; if ( !this.open - && this.selectedIndex !== currentIndex + && this.selectedIndex !== previousSelectedIndex && optionClicked ) { this.updateValue(true); diff --git a/packages/nimble-components/src/select/tests/select.spec.ts b/packages/nimble-components/src/select/tests/select.spec.ts index 73b85c7b66..c4c33b2d37 100644 --- a/packages/nimble-components/src/select/tests/select.spec.ts +++ b/packages/nimble-components/src/select/tests/select.spec.ts @@ -761,14 +761,19 @@ describe('Select', () => { expect(currentSelection?.selected).toBeTrue(); }); - it('filtering out current selected item and then pressing changes value and closes popup', async () => { + it('filtering out current selected item and then pressing changes value, emits change event, and closes popup', async () => { const currentSelection = pageObject.getSelectedOption(); expect(currentSelection?.text).toBe('One'); expect(element.value).toBe('one'); + const changeEvent = jasmine.createSpy(); + element.addEventListener('change', changeEvent); await pageObject.openAndSetFilterText('T'); // Matches 'Two' and 'Three' pageObject.pressEnterKey(); + await waitForUpdatesAsync(); expect(element.value).toBe('two'); // 'Two' is first option in list so it should be selected now + expect(pageObject.getDisplayText()).toBe('Two'); + expect(changeEvent.calls.count()).toBe(1); expect(element.open).toBeFalse(); }); @@ -783,14 +788,19 @@ describe('Select', () => { expect(element.open).toBeFalse(); }); - it('filtering out current selected item and then clicking active option changes value and closes popup', async () => { + it('filtering out current selected item and then clicking active option changes value, emits change event, and closes popup', async () => { const currentSelection = pageObject.getSelectedOption(); expect(currentSelection?.text).toBe('One'); expect(element.value).toBe('one'); + const changeEvent = jasmine.createSpy(); + element.addEventListener('change', changeEvent); await pageObject.openAndSetFilterText('T'); // Matches 'Two' and 'Three' pageObject.clickActiveItem(); + await waitForUpdatesAsync(); expect(element.value).toBe('two'); // 'Two' is first option in list so it should be selected now + expect(pageObject.getDisplayText()).toBe('Two'); + expect(changeEvent.calls.count()).toBe(1); expect(element.open).toBeFalse(); }); diff --git a/packages/nimble-components/src/table-column/enum-base/models/mapping-empty-config.ts b/packages/nimble-components/src/table-column/enum-base/models/mapping-empty-config.ts new file mode 100644 index 0000000000..de22fcd1a1 --- /dev/null +++ b/packages/nimble-components/src/table-column/enum-base/models/mapping-empty-config.ts @@ -0,0 +1,6 @@ +import { MappingConfig } from './mapping-config'; + +/** + * Mapping configuration corresponding to an empty mapping + */ +export class MappingEmptyConfig extends MappingConfig {} diff --git a/packages/nimble-components/src/table-column/mapping/cell-view/index.ts b/packages/nimble-components/src/table-column/mapping/cell-view/index.ts index c851cdd23b..2a2c9db145 100644 --- a/packages/nimble-components/src/table-column/mapping/cell-view/index.ts +++ b/packages/nimble-components/src/table-column/mapping/cell-view/index.ts @@ -17,6 +17,7 @@ import { SpinnerView } from '../../enum-base/models/mapping-spinner-config'; import { MappingTextConfig } from '../../enum-base/models/mapping-text-config'; +import { MappingEmptyConfig } from '../../enum-base/models/mapping-empty-config'; declare global { interface HTMLElementTagNameMap { @@ -82,6 +83,9 @@ export class TableColumnMappingCellView } else if (mappingConfig instanceof MappingTextConfig) { this.text = mappingConfig.text; this.textHidden = false; + } else if (mappingConfig instanceof MappingEmptyConfig) { + this.text = mappingConfig.text; + this.textHidden = true; } } diff --git a/packages/nimble-components/src/table-column/mapping/group-header-view/index.ts b/packages/nimble-components/src/table-column/mapping/group-header-view/index.ts index 40f96149e5..97854ef69d 100644 --- a/packages/nimble-components/src/table-column/mapping/group-header-view/index.ts +++ b/packages/nimble-components/src/table-column/mapping/group-header-view/index.ts @@ -4,7 +4,6 @@ import { styles } from './styles'; import { template } from './template'; import type { TableColumnEnumColumnConfig } from '../../enum-base'; import type { TableFieldValue } from '../../../table/types'; -import { TableColumnTextGroupHeaderViewBase } from '../../text-base/group-header-view'; import { IconSeverity } from '../../../icon-base/types'; import { MappingIconConfig, @@ -15,6 +14,8 @@ import { SpinnerView } from '../../enum-base/models/mapping-spinner-config'; import { MappingTextConfig } from '../../enum-base/models/mapping-text-config'; +import { MappingEmptyConfig } from '../../enum-base/models/mapping-empty-config'; +import { TableGroupHeaderView } from '../../base/group-header-view'; declare global { interface HTMLElementTagNameMap { @@ -26,11 +27,15 @@ declare global { * The group header view for the mapping column */ export class TableColumnMappingGroupHeaderView - extends TableColumnTextGroupHeaderViewBase< - TableFieldValue, - TableColumnEnumColumnConfig - > + extends TableGroupHeaderView implements IconView, SpinnerView { + /** @internal */ + @observable + public hasOverflow = false; + + @observable + public text = ''; + @observable public severity: IconSeverity; @@ -41,7 +46,15 @@ export class TableColumnMappingGroupHeaderView public readonly textHidden = false; - protected updateText(): void { + private columnConfigChanged(): void { + this.updateState(); + } + + private groupHeaderValueChanged(): void { + this.updateState(); + } + + private updateState(): void { this.resetState(); if (!this.columnConfig) { @@ -58,6 +71,8 @@ export class TableColumnMappingGroupHeaderView this.visualizationTemplate = mappingConfig.spinnerTemplate; } else if (mappingConfig instanceof MappingTextConfig) { this.text = mappingConfig.text ?? ''; + } else if (mappingConfig instanceof MappingEmptyConfig) { + this.text = mappingConfig.text ?? ''; } } diff --git a/packages/nimble-components/src/table-column/mapping/index.ts b/packages/nimble-components/src/table-column/mapping/index.ts index e62b459b44..506f915f73 100644 --- a/packages/nimble-components/src/table-column/mapping/index.ts +++ b/packages/nimble-components/src/table-column/mapping/index.ts @@ -26,6 +26,8 @@ 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 { MappingEmpty } from '../../mapping/empty'; +import { MappingEmptyConfig } from '../enum-base/models/mapping-empty-config'; import { TableColumnMappingWidthMode } from './types'; declare global { @@ -89,6 +91,9 @@ export class TableColumnMapping extends mixinGroupableColumnAPI( if (mapping instanceof MappingText) { return new MappingTextConfig(mapping.text); } + if (mapping instanceof MappingEmpty) { + return new MappingEmptyConfig(mapping.text); + } // Getting here would indicate a programming error, b/c validation will prevent // this function from running when there is an unsupported mapping. throw new Error('Unsupported mapping'); diff --git a/packages/nimble-components/src/table-column/mapping/models/table-column-mapping-validator.ts b/packages/nimble-components/src/table-column/mapping/models/table-column-mapping-validator.ts index 2a3ebaa327..4162d6b151 100644 --- a/packages/nimble-components/src/table-column/mapping/models/table-column-mapping-validator.ts +++ b/packages/nimble-components/src/table-column/mapping/models/table-column-mapping-validator.ts @@ -1,4 +1,5 @@ import type { Mapping } from '../../../mapping/base'; +import { MappingEmpty } from '../../../mapping/empty'; import { MappingIcon } from '../../../mapping/icon'; import { MappingSpinner } from '../../../mapping/spinner'; import { MappingText } from '../../../mapping/text'; @@ -33,11 +34,12 @@ export class TableColumnMappingValidator extends TableColumnEnumBaseValidator< private static isSupportedMappingElement( mapping: Mapping - ): mapping is MappingIcon | MappingSpinner | MappingText { + ): mapping is MappingIcon | MappingSpinner | MappingText | MappingEmpty { return ( mapping instanceof MappingIcon || mapping instanceof MappingSpinner || mapping instanceof MappingText + || mapping instanceof MappingEmpty ); } diff --git a/packages/nimble-components/src/table-column/mapping/tests/table-column-mapping.spec.ts b/packages/nimble-components/src/table-column/mapping/tests/table-column-mapping.spec.ts index b4d4351637..27ea09be7a 100644 --- a/packages/nimble-components/src/table-column/mapping/tests/table-column-mapping.spec.ts +++ b/packages/nimble-components/src/table-column/mapping/tests/table-column-mapping.spec.ts @@ -19,6 +19,7 @@ import { spinnerTag } from '../../../spinner'; import { themeProviderTag } from '../../../theme-provider'; import { TableColumnMappingPageObject } from '../testing/table-column-mapping.pageobject'; import { mappingUserTag } from '../../../mapping/user'; +import { mappingEmptyTag } from '../../../mapping/empty'; import { TableColumnMappingWidthMode } from '../types'; import { defaultMinPixelWidth } from '../../base/types'; @@ -27,22 +28,18 @@ interface SimpleTableRecord extends TableRecord { field2?: MappingKey | null; } -interface BasicIconMapping { +interface TestBaseMapping { key?: MappingKey; text?: string; - icon?: string; - textHidden?: boolean; } -interface BasicSpinnerMapping { - key?: MappingKey; - text?: string; +interface TestIconMapping extends TestBaseMapping { + icon?: string; textHidden?: boolean; } -interface BasicTextMapping { - key?: MappingKey; - text?: string; +interface TestSpinnerMapping extends TestBaseMapping { + textHidden?: boolean; } class Model { @@ -63,9 +60,10 @@ describe('TableColumnMapping', () => { // prettier-ignore async function setup(options: { keyType: MappingKeyType, - iconMappings?: BasicIconMapping[], - spinnerMappings?: BasicSpinnerMapping[], - textMappings?: BasicTextMapping[] + iconMappings?: TestIconMapping[], + spinnerMappings?: TestSpinnerMapping[], + textMappings?: TestBaseMapping[], + emptyMappings?: TestBaseMapping[] }): Promise>> { const source = new Model(); const result = await fixture>(html` @@ -73,7 +71,7 @@ describe('TableColumnMapping', () => { <${tableTag} ${ref('table')} style="width: 700px"> <${tableColumnMappingTag} ${ref('col1')} field-name="field1" key-type="${options.keyType}"> Column 1 - ${repeat(() => options.iconMappings ?? [], html` + ${repeat(() => options.iconMappings ?? [], html` <${mappingIconTag} key="${x => x.key}" text="${x => x.text}" @@ -81,19 +79,25 @@ describe('TableColumnMapping', () => { ?text-hidden="${x => x.textHidden}"> `)} - ${repeat(() => options.spinnerMappings ?? [], html` + ${repeat(() => options.spinnerMappings ?? [], html` <${mappingSpinnerTag} key="${x => x.key}" text="${x => x.text}" ?text-hidden="${x => x.textHidden}"> `)} - ${repeat(() => options.textMappings ?? [], html` + ${repeat(() => options.textMappings ?? [], html` <${mappingTextTag} key="${x => x.key}" text="${x => x.text}" `)} + ${repeat(() => options.emptyMappings ?? [], html` + <${mappingEmptyTag} + key="${x => x.key}" + text="${x => x.text}" + + `)} <${themeProviderTag}>`, { source }); @@ -364,6 +368,38 @@ describe('TableColumnMapping', () => { expect(() => columnPageObject.getRenderedGroupHeaderIconTagName(0)).toThrowError(); }); + it('empty mapping displays no value in cell', async () => { + ({ connect, disconnect, model } = await setup({ + keyType: MappingKeyType.string, + emptyMappings: [{ key: 'a', text: 'alpha' }] + })); + pageObject = new TablePageObject(model.table); + columnPageObject = new TableColumnMappingPageObject(pageObject); + await model.table.setData([{ field1: 'a' }]); + await connect(); + await waitForUpdatesAsync(); + + expect(() => pageObject.getRenderedMappingColumnCellIconTagName(0, 0)).toThrowError(); + expect(pageObject.getRenderedCellTextContent(0, 0)).toBe(''); + }); + + it('empty mapping displays text in group row', async () => { + ({ connect, disconnect, model } = await setup({ + keyType: MappingKeyType.string, + emptyMappings: [{ key: 'a', text: 'alpha' }] + })); + pageObject = new TablePageObject(model.table); + columnPageObject = new TableColumnMappingPageObject(pageObject); + await model.table.setData([{ field1: 'a' }]); + await connect(); + await waitForUpdatesAsync(); + model.col1.groupIndex = 0; + await waitForUpdatesAsync(); + + expect(() => columnPageObject.getRenderedGroupHeaderIconTagName(0)).toThrowError(); + expect(pageObject.getRenderedGroupHeaderTextContent(0)).toBe('alpha'); + }); + describe('validation', () => { it('is valid with no mappings', async () => { ({ connect, disconnect, model } = await setup({ @@ -534,7 +570,7 @@ describe('TableColumnMapping', () => { expect(model.col1.validity.invalidIconName).toBeTrue(); }); - it('is invalid with missing spinner text value', async () => { + it('is invalid with missing text in a spinner mapping', async () => { ({ connect, disconnect, model } = await setup({ keyType: MappingKeyType.string, spinnerMappings: [{ key: 'a' }] @@ -545,7 +581,7 @@ describe('TableColumnMapping', () => { expect(model.col1.validity.missingTextValue).toBeTrue(); }); - it('is invalid with missing spinner key value', async () => { + it('is invalid with missing key in a spinner mapping', async () => { ({ connect, disconnect, model } = await setup({ keyType: MappingKeyType.string, spinnerMappings: [{ text: 'alpha' }] @@ -556,7 +592,7 @@ describe('TableColumnMapping', () => { expect(model.col1.validity.missingKeyValue).toBeTrue(); }); - it('is invalid with missing spinner text value', async () => { + it('is invalid with missing text in a text mapping', async () => { ({ connect, disconnect, model } = await setup({ keyType: MappingKeyType.string, textMappings: [{ key: 'a' }] @@ -567,7 +603,7 @@ describe('TableColumnMapping', () => { expect(model.col1.validity.missingTextValue).toBeTrue(); }); - it('is invalid with missing text key value', async () => { + it('is invalid with missing key in a text mapping', async () => { ({ connect, disconnect, model } = await setup({ keyType: MappingKeyType.string, textMappings: [{ text: 'alpha' }] @@ -577,24 +613,46 @@ describe('TableColumnMapping', () => { expect(model.col1.checkValidity()).toBeFalse(); expect(model.col1.validity.missingKeyValue).toBeTrue(); }); + + it('is invalid with missing text in an empty mapping', async () => { + ({ connect, disconnect, model } = await setup({ + keyType: MappingKeyType.string, + emptyMappings: [{ key: 'a' }] + })); + await connect(); + await waitForUpdatesAsync(); + expect(model.col1.checkValidity()).toBeFalse(); + expect(model.col1.validity.missingTextValue).toBeTrue(); + }); + + it('is invalid with missing key in an empty mapping', async () => { + ({ connect, disconnect, model } = await setup({ + keyType: MappingKeyType.string, + emptyMappings: [{ text: 'alpha' }] + })); + await connect(); + await waitForUpdatesAsync(); + expect(model.col1.checkValidity()).toBeFalse(); + expect(model.col1.validity.missingKeyValue).toBeTrue(); + }); }); - describe('placeholder', () => { + describe('placeholders are not used', () => { const testCases = [ { name: 'value is not specified', data: [{}], - groupValue: 'No value' + groupValue: '' }, { name: 'value is undefined', data: [{ field1: undefined }], - groupValue: 'No value' + groupValue: '' }, { name: 'value is null', data: [{ field1: null }], - groupValue: 'No value' + groupValue: '' }, { name: 'value is unmapped value', @@ -743,11 +801,18 @@ describe('TableColumnMapping', () => { { name: 'text mapping', type: 'text' + }, + { + name: 'empty mapping', + type: 'empty' } ] as const; - parameterizeSuite(mappingTypes, (suite, name, value) => { - suite(`in ${name}`, () => { + const mappingsWithTextInCell = mappingTypes.filter( + x => x.type !== 'empty' + ); + parameterizeSuite(mappingsWithTextInCell, (suite, name, value) => { + suite(`in cell with ${name}`, () => { const longText = 'a very long value that should get ellipsized due to not fitting within the default cell width'; const shortText = 'short value'; const longTextRowIndex = 0; @@ -775,6 +840,10 @@ describe('TableColumnMapping', () => { textMappings: [ { key: 'text-long', text: longText }, { key: 'text-short', text: shortText } + ], + emptyMappings: [ + { key: 'empty-long', text: longText }, + { key: 'empty-short', text: shortText } ] })); pageObject = new TablePageObject( @@ -793,7 +862,7 @@ describe('TableColumnMapping', () => { await waitForUpdatesAsync(); }); - it('sets title when cell text is ellipsized', async () => { + it('sets title when text is ellipsized', async () => { columnPageObject.dispatchEventToCellText( longTextRowIndex, 0, @@ -808,7 +877,7 @@ describe('TableColumnMapping', () => { ).toBe(longText); }); - it('does not set title when cell text is fully visible', async () => { + it('does not set title when text is fully visible', async () => { columnPageObject.dispatchEventToCellText( shortTextRowIndex, 0, @@ -843,8 +912,61 @@ describe('TableColumnMapping', () => { ) ).toBe(''); }); + }); + }); + + parameterizeSuite(mappingTypes, (suite, name, value) => { + suite(`in group row with ${name}`, () => { + const longText = 'a very long value that should get ellipsized due to not fitting within the default cell width'; + const shortText = 'short value'; + const longTextRowIndex = 0; + const shortTextRowIndex = 1; + + beforeEach(async () => { + ({ connect, disconnect, model } = await setup({ + keyType: MappingKeyType.string, + iconMappings: [ + { + key: 'icon-long', + text: longText, + icon: iconXmarkTag + }, + { + key: 'icon-short', + text: shortText, + icon: iconXmarkTag + } + ], + spinnerMappings: [ + { key: 'spinner-long', text: longText }, + { key: 'spinner-short', text: shortText } + ], + textMappings: [ + { key: 'text-long', text: longText }, + { key: 'text-short', text: shortText } + ], + emptyMappings: [ + { key: 'empty-long', text: longText }, + { key: 'empty-short', text: shortText } + ] + })); + pageObject = new TablePageObject( + model.table + ); + columnPageObject = new TableColumnMappingPageObject( + pageObject + ); + await model.table.setData([ + { field1: `${value.type}-long` }, + { field1: `${value.type}-short` } + ]); + await connect(); + model.table.style.width = '200px'; + model.col1.groupIndex = 0; + await waitForUpdatesAsync(); + }); - it('sets title when group header text is ellipsized', async () => { + it('sets title when text is ellipsized', async () => { columnPageObject.dispatchEventToGroupHeaderText( longTextRowIndex, new MouseEvent('mouseover') @@ -857,7 +979,7 @@ describe('TableColumnMapping', () => { ).toBe(longText); }); - it('does not set title when group header text is fully visible', async () => { + it('does not set title when text is fully visible', async () => { columnPageObject.dispatchEventToGroupHeaderText( shortTextRowIndex, new MouseEvent('mouseover') diff --git a/packages/nimble-components/src/table/specs/table-column-placeholder-hld.md b/packages/nimble-components/src/table/specs/table-column-placeholder-hld.md index 39f93b9dc8..6d36a44ada 100644 --- a/packages/nimble-components/src/table/specs/table-column-placeholder-hld.md +++ b/packages/nimble-components/src/table/specs/table-column-placeholder-hld.md @@ -119,17 +119,14 @@ The icon mapping column will not have a configuration for a placeholder. | Special-cased field values | Cell display | Group row display | | -------------------------- | ------------- | ------------------ | -| `undefined` | \ | `"No value"` | -| `null` | \ | `"No value"` | | Non-mapped value\* | \ | \ | \*This is considered invalid data from the table's perspective and should be fixed within the client application. Column best practices: -- Avoid mixing `undefined` and `null` as values for the same field. When grouping this will lead to two groups (one for `null` values and one for `undefined` values) that both have the text `"No value"`. - Avoid using values that do not correspond to a mapping for the column. -- To display an empty cell but have a non-blank group row, create a mapping of the record value to an `undefined` icon. +- To display an empty cell but have a non-blank group row, use a `nimble-mapping-empty` child element. #### Text mapping column diff --git a/packages/nimble-components/src/unit/celsius/index.ts b/packages/nimble-components/src/unit/celsius/index.ts new file mode 100644 index 0000000000..81ba0b2973 --- /dev/null +++ b/packages/nimble-components/src/unit/celsius/index.ts @@ -0,0 +1,28 @@ +import { DesignSystem } from '@microsoft/fast-foundation'; +import { template } from '../base/template'; +import { Unit } from '../base/unit'; +import { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale'; + +declare global { + interface HTMLElementTagNameMap { + 'nimble-unit-celsius': UnitCelsius; + } +} + +/** + * Element representing degrees Celsius unit + */ +export class UnitCelsius extends Unit { + public constructor() { + super(); + this.resolvedUnitScale = celsiusUnitScale; + } +} + +const nimbleUnitCelsius = UnitCelsius.compose({ + baseName: 'unit-celsius', + template +}); + +DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius()); +export const unitCelsiusTag = 'nimble-unit-celsius'; diff --git a/packages/nimble-components/src/unit/celsius/tests/unit-celsius.spec.ts b/packages/nimble-components/src/unit/celsius/tests/unit-celsius.spec.ts new file mode 100644 index 0000000000..1267dc18b4 --- /dev/null +++ b/packages/nimble-components/src/unit/celsius/tests/unit-celsius.spec.ts @@ -0,0 +1,19 @@ +import { UnitCelsius, unitCelsiusTag } from '..'; +import { celsiusUnitScale } from '../../../utilities/unit-format/unit-scale/celsius-unit-scale'; + +describe('Celsius unit', () => { + it('should export its tag', () => { + expect(unitCelsiusTag).toBe('nimble-unit-celsius'); + }); + + it('can construct an element instance', () => { + expect(document.createElement('nimble-unit-celsius')).toBeInstanceOf( + UnitCelsius + ); + }); + + it('returns expected formatter', () => { + const element = document.createElement('nimble-unit-celsius'); + expect(element.resolvedUnitScale).toBe(celsiusUnitScale); + }); +}); diff --git a/packages/nimble-components/src/unit/fahrenheit/index.ts b/packages/nimble-components/src/unit/fahrenheit/index.ts new file mode 100644 index 0000000000..13242d7010 --- /dev/null +++ b/packages/nimble-components/src/unit/fahrenheit/index.ts @@ -0,0 +1,30 @@ +import { DesignSystem } from '@microsoft/fast-foundation'; +import { template } from '../base/template'; +import { Unit } from '../base/unit'; +import { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale'; + +declare global { + interface HTMLElementTagNameMap { + 'nimble-unit-fahrenheit': UnitFahrenheit; + } +} + +/** + * Element representing degrees Fahrenheit unit + */ +export class UnitFahrenheit extends Unit { + public constructor() { + super(); + this.resolvedUnitScale = fahrenheitUnitScale; + } +} + +const nimbleUnitFahrenheit = UnitFahrenheit.compose({ + baseName: 'unit-fahrenheit', + template +}); + +DesignSystem.getOrCreate() + .withPrefix('nimble') + .register(nimbleUnitFahrenheit()); +export const unitFahrenheitTag = 'nimble-unit-fahrenheit'; diff --git a/packages/nimble-components/src/unit/fahrenheit/tests/unit-fahrenheit.spec.ts b/packages/nimble-components/src/unit/fahrenheit/tests/unit-fahrenheit.spec.ts new file mode 100644 index 0000000000..7a1dd25155 --- /dev/null +++ b/packages/nimble-components/src/unit/fahrenheit/tests/unit-fahrenheit.spec.ts @@ -0,0 +1,19 @@ +import { UnitFahrenheit, unitFahrenheitTag } from '..'; +import { fahrenheitUnitScale } from '../../../utilities/unit-format/unit-scale/fahrenheit-unit-scale'; + +describe('Fahrenheit unit', () => { + it('should export its tag', () => { + expect(unitFahrenheitTag).toBe('nimble-unit-fahrenheit'); + }); + + it('can construct an element instance', () => { + expect(document.createElement('nimble-unit-fahrenheit')).toBeInstanceOf( + UnitFahrenheit + ); + }); + + it('returns expected formatter', () => { + const element = document.createElement('nimble-unit-fahrenheit'); + expect(element.resolvedUnitScale).toBe(fahrenheitUnitScale); + }); +}); diff --git a/packages/nimble-components/src/utilities/unit-format/unit-scale/celsius-unit-scale.ts b/packages/nimble-components/src/utilities/unit-format/unit-scale/celsius-unit-scale.ts new file mode 100644 index 0000000000..f700efbf9d --- /dev/null +++ b/packages/nimble-components/src/utilities/unit-format/unit-scale/celsius-unit-scale.ts @@ -0,0 +1,27 @@ +import { ScaledUnit } from '../scaled-unit/scaled-unit'; +import { IntlNumberFormatScaledUnitFormat } from '../scaled-unit-format/intl-number-format-scaled-unit-format'; +import { UnitScale } from './unit-scale'; + +const celsiusUnitScaleOptions = [[1, 'celsius', 'short']] as const; + +/** + * Degrees Celsius units + */ +class CelsiusUnitScale extends UnitScale { + public constructor() { + super( + celsiusUnitScaleOptions.map( + ([scaleFactor, unit, unitDisplay]) => new ScaledUnit( + scaleFactor, + IntlNumberFormatScaledUnitFormat.createFactory({ + style: 'unit', + unit, + unitDisplay + }) + ) + ) + ); + } +} + +export const celsiusUnitScale = new CelsiusUnitScale(); diff --git a/packages/nimble-components/src/utilities/unit-format/unit-scale/fahrenheit-unit-scale.ts b/packages/nimble-components/src/utilities/unit-format/unit-scale/fahrenheit-unit-scale.ts new file mode 100644 index 0000000000..5cc909d0be --- /dev/null +++ b/packages/nimble-components/src/utilities/unit-format/unit-scale/fahrenheit-unit-scale.ts @@ -0,0 +1,27 @@ +import { ScaledUnit } from '../scaled-unit/scaled-unit'; +import { IntlNumberFormatScaledUnitFormat } from '../scaled-unit-format/intl-number-format-scaled-unit-format'; +import { UnitScale } from './unit-scale'; + +const fahrenheitUnitScaleOptions = [[1, 'fahrenheit', 'short']] as const; + +/** + * Degrees Fahrenheit units + */ +class FahrenheitUnitScale extends UnitScale { + public constructor() { + super( + fahrenheitUnitScaleOptions.map( + ([scaleFactor, unit, unitDisplay]) => new ScaledUnit( + scaleFactor, + IntlNumberFormatScaledUnitFormat.createFactory({ + style: 'unit', + unit, + unitDisplay + }) + ) + ) + ); + } +} + +export const fahrenheitUnitScale = new FahrenheitUnitScale(); diff --git a/packages/nimble-components/src/utilities/unit-format/unit-scale/tests/celsius-unit-scale.spec.ts b/packages/nimble-components/src/utilities/unit-format/unit-scale/tests/celsius-unit-scale.spec.ts new file mode 100644 index 0000000000..300b3aaba6 --- /dev/null +++ b/packages/nimble-components/src/utilities/unit-format/unit-scale/tests/celsius-unit-scale.spec.ts @@ -0,0 +1,66 @@ +import { parameterizeSpec } from '@ni/jasmine-parameterized'; +import { celsiusUnitScale } from '../celsius-unit-scale'; + +describe('CelsiusUnitScale', () => { + const testCases = [ + { + name: '10 ** -1', + number: 10 ** -1, + formatted: ['0.1°C', '0,1\u202f°C', '0,1 °C', '0.1°C', '0.1°C'] + }, + { + name: '1', + number: 1, + formatted: ['1°C', '1\u202f°C', '1 °C', '1°C', '1°C'] + }, + { + name: '2', + number: 2, + formatted: ['2°C', '2\u202f°C', '2 °C', '2°C', '2°C'] + }, + { + name: '10 ** 3', + number: 10 ** 3, + formatted: [ + '1,000°C', + '1\u202f000\u202f°C', + '1.000 °C', + '1,000°C', + '1,000°C' + ] + } + ] as const; + + parameterizeSpec(testCases, (spec, name, value) => { + spec(`gets expected unit for ${name}`, () => { + const { scaledValue, scaledUnit } = celsiusUnitScale.scaleNumber( + value.number + ); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'en' }) + .format(scaledValue) + ).toEqual(value.formatted[0]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'fr' }) + .format(scaledValue) + ).toEqual(value.formatted[1]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'de' }) + .format(scaledValue) + ).toEqual(value.formatted[2]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'ja' }) + .format(scaledValue) + ).toEqual(value.formatted[3]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'zh' }) + .format(scaledValue) + ).toEqual(value.formatted[4]); + }); + }); +}); diff --git a/packages/nimble-components/src/utilities/unit-format/unit-scale/tests/fahrenheit-unit-scale.spec.ts b/packages/nimble-components/src/utilities/unit-format/unit-scale/tests/fahrenheit-unit-scale.spec.ts new file mode 100644 index 0000000000..f1d9eb5da6 --- /dev/null +++ b/packages/nimble-components/src/utilities/unit-format/unit-scale/tests/fahrenheit-unit-scale.spec.ts @@ -0,0 +1,66 @@ +import { parameterizeSpec } from '@ni/jasmine-parameterized'; +import { fahrenheitUnitScale } from '../fahrenheit-unit-scale'; + +describe('FahrenheitUnitScale', () => { + const testCases = [ + { + name: '10 ** -1', + number: 10 ** -1, + formatted: ['0.1°F', '0,1\u202f°F', '0,1 °F', '0.1°F', '0.1°F'] + }, + { + name: '1', + number: 1, + formatted: ['1°F', '1\u202f°F', '1 °F', '1°F', '1°F'] + }, + { + name: '2', + number: 2, + formatted: ['2°F', '2\u202f°F', '2 °F', '2°F', '2°F'] + }, + { + name: '10 ** 3', + number: 10 ** 3, + formatted: [ + '1,000°F', + '1\u202f000\u202f°F', + '1.000 °F', + '1,000°F', + '1,000°F' + ] + } + ] as const; + + parameterizeSpec(testCases, (spec, name, value) => { + spec(`gets expected unit for ${name}`, () => { + const { scaledValue, scaledUnit } = fahrenheitUnitScale.scaleNumber( + value.number + ); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'en' }) + .format(scaledValue) + ).toEqual(value.formatted[0]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'fr' }) + .format(scaledValue) + ).toEqual(value.formatted[1]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'de' }) + .format(scaledValue) + ).toEqual(value.formatted[2]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'ja' }) + .format(scaledValue) + ).toEqual(value.formatted[3]); + expect( + scaledUnit + .scaledUnitFormatFactory({ locale: 'zh' }) + .format(scaledValue) + ).toEqual(value.formatted[4]); + }); + }); +}); diff --git a/packages/nimble-components/src/wafer-map/modules/computations.ts b/packages/nimble-components/src/wafer-map/modules/computations.ts index 75efd2b279..0569ea9ac2 100644 --- a/packages/nimble-components/src/wafer-map/modules/computations.ts +++ b/packages/nimble-components/src/wafer-map/modules/computations.ts @@ -127,9 +127,11 @@ export class Computations { gridDimensions, containerDiameter ); + const dieWidth = this.horizontalScale.bandwidth(); + const dieHeight = this.verticalScale.bandwidth(); this._dieDimensions = { - width: this.horizontalScale.bandwidth(), - height: this.verticalScale.bandwidth() + width: isNaN(dieWidth) ? 0 : dieWidth, + height: isNaN(dieHeight) ? 0 : dieHeight }; } diff --git a/packages/nimble-components/src/wafer-map/modules/experimental/worker-renderer.ts b/packages/nimble-components/src/wafer-map/modules/experimental/worker-renderer.ts index 1dd9f06bcd..d38540d977 100644 --- a/packages/nimble-components/src/wafer-map/modules/experimental/worker-renderer.ts +++ b/packages/nimble-components/src/wafer-map/modules/experimental/worker-renderer.ts @@ -85,6 +85,12 @@ export class WorkerRenderer { } public renderHover(): void { + if ( + this.wafermap.experimentalDataManager.dieDimensions === undefined + || this.wafermap.transform === undefined + ) { + return; + } this.wafermap.hoverWidth = this.wafermap.experimentalDataManager.dieDimensions.width * this.wafermap.transform.k; this.wafermap.hoverHeight = this.wafermap.experimentalDataManager.dieDimensions.height diff --git a/packages/nimble-components/src/wafer-map/modules/rendering.ts b/packages/nimble-components/src/wafer-map/modules/rendering.ts index 31e0456183..f603219042 100644 --- a/packages/nimble-components/src/wafer-map/modules/rendering.ts +++ b/packages/nimble-components/src/wafer-map/modules/rendering.ts @@ -35,6 +35,12 @@ export class RenderingModule { } public renderHover(): void { + if ( + this.wafermap.dataManager.dieDimensions === undefined + || this.wafermap.transform === undefined + ) { + return; + } this.wafermap.hoverWidth = this.wafermap.dataManager.dieDimensions.width * this.wafermap.transform.k; this.wafermap.hoverHeight = this.wafermap.dataManager.dieDimensions.height diff --git a/packages/nimble-components/src/wafer-map/tests/wafer-map.spec.ts b/packages/nimble-components/src/wafer-map/tests/wafer-map.spec.ts index f0aaa3712c..06fb92c31d 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.spec.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.spec.ts @@ -35,7 +35,7 @@ describe('WaferMap', () => { ); }); - describe('update flow', () => { + describe('update action', () => { let spy: jasmine.Spy; beforeEach(() => { spy = spyOn(element, 'update'); @@ -116,7 +116,7 @@ describe('WaferMap', () => { }); }); - describe('worker renderer draw flow', () => { + describe('worker renderer draw action', () => { let setupWaferSpy: jasmine.Spy; let drawWaferSpy: jasmine.Spy; beforeEach(() => { @@ -151,7 +151,7 @@ describe('WaferMap', () => { }); }); - describe('worker renderer flow', () => { + describe('worker renderer action', () => { let renderHoverSpy: jasmine.Spy; let experimentalUpdateSpy: jasmine.Spy; @@ -194,7 +194,7 @@ describe('WaferMap', () => { }); }); - describe('zoom flow', () => { + describe('zoom action', () => { let initialValue: string | undefined; beforeEach(() => { @@ -268,7 +268,7 @@ describe('WaferMap', () => { return element.transform.toString(); } - describe('hover flow', () => { + describe('hover action', () => { beforeEach(async () => { element.canvasWidth = 500; element.canvasHeight = 500; @@ -321,4 +321,17 @@ describe('WaferMap', () => { expect(element.hoverTransform).not.toEqual(initialTransform); }); }); + + describe('hover action with no canvas dimensions', () => { + beforeEach(async () => { + element.dies = [{ x: 1, y: 1, value: '1' }]; + element.colorScale = { colors: ['red', 'red'], values: ['1', '1'] }; + await waitForUpdatesAsync(); + }); + + it('will have hover rectangle with no dimensions', () => { + expect(element.hoverHeight).toEqual(0); + expect(element.hoverWidth).toEqual(0); + }); + }); }); diff --git a/packages/nimble-tokens/CHANGELOG.json b/packages/nimble-tokens/CHANGELOG.json index 4c5101b893..3387054549 100644 --- a/packages/nimble-tokens/CHANGELOG.json +++ b/packages/nimble-tokens/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-tokens", "entries": [ + { + "date": "Thu, 09 May 2024 18:40:41 GMT", + "version": "6.13.6", + "tag": "@ni/nimble-tokens_v6.13.6", + "comments": { + "patch": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-tokens", + "commit": "43edba8e90d0c5f414fd2b4cf19eee197b477829", + "comment": "Update Blazor docs for Spright and workspace change" + } + ] + } + }, { "date": "Wed, 08 May 2024 22:21:34 GMT", "version": "6.13.5", diff --git a/packages/nimble-tokens/CHANGELOG.md b/packages/nimble-tokens/CHANGELOG.md index 387c96f805..a0b8dbaa21 100644 --- a/packages/nimble-tokens/CHANGELOG.md +++ b/packages/nimble-tokens/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/nimble-tokens -This log was last generated on Fri, 26 Apr 2024 20:31:47 GMT and should not be manually modified. +This log was last generated on Thu, 09 May 2024 18:40:41 GMT and should not be manually modified. +## 6.13.6 + +Thu, 09 May 2024 18:40:41 GMT + +### Patches + +- Update Blazor docs for Spright and workspace change ([ni/nimble@43edba8](https://github.com/ni/nimble/commit/43edba8e90d0c5f414fd2b4cf19eee197b477829)) + ## 6.13.5 Fri, 26 Apr 2024 20:31:47 GMT diff --git a/packages/nimble-tokens/README.md b/packages/nimble-tokens/README.md index 6486f472d2..7cccd8aad6 100644 --- a/packages/nimble-tokens/README.md +++ b/packages/nimble-tokens/README.md @@ -14,7 +14,7 @@ NI base design tokens. Design tokens are primitive elements of component style l If you are using one of the following frameworks you should consume tokens via components implemented in the following libraries. These libraries provide styled components that use the design tokens to implement several color themes. 1. Angular: See the [nimble-angular](/packages/angular-workspace/nimble-angular) documentation. -2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/nimble-blazor) documentation. +2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/blazor-workspace/NimbleBlazor) documentation. 3. Vanilla / Frameworkless: See the [nimble-components](/packages/nimble-components) documentation. ## Using Theme-Aware Tokens diff --git a/packages/nimble-tokens/package.json b/packages/nimble-tokens/package.json index 9c2472d0d7..abab56020b 100644 --- a/packages/nimble-tokens/package.json +++ b/packages/nimble-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-tokens", - "version": "6.13.5", + "version": "6.13.6", "description": "Design tokens for the NI Nimble Design System", "scripts": { "build": "npm run build:svg-to-ts && npm run build:ts && npm run build:svg-to-ico && npm run build:generate-font-scss && npm run build:style-dictionary", diff --git a/packages/spright-components/CHANGELOG.json b/packages/spright-components/CHANGELOG.json index eb149dad75..fd35af45f0 100644 --- a/packages/spright-components/CHANGELOG.json +++ b/packages/spright-components/CHANGELOG.json @@ -1,6 +1,102 @@ { "name": "@ni/spright-components", "entries": [ + { + "date": "Mon, 13 May 2024 09:49:02 GMT", + "version": "0.0.24", + "tag": "@ni/spright-components_v0.0.24", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-components", + "comment": "Bump @ni/nimble-components to v28.3.1", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 22:37:40 GMT", + "version": "0.0.23", + "tag": "@ni/spright-components_v0.0.23", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-components", + "comment": "Bump @ni/nimble-components to v28.3.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:42:46 GMT", + "version": "0.0.22", + "tag": "@ni/spright-components_v0.0.22", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-components", + "comment": "Bump @ni/nimble-components to v28.2.1", + "commit": "not available" + } + ] + } + }, + { + "date": "Fri, 10 May 2024 16:11:56 GMT", + "version": "0.0.21", + "tag": "@ni/spright-components_v0.0.21", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-components", + "comment": "Bump @ni/nimble-components to v28.2.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 20:39:47 GMT", + "version": "0.0.20", + "tag": "@ni/spright-components_v0.0.20", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-components", + "comment": "Bump @ni/nimble-components to v28.1.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Thu, 09 May 2024 18:40:41 GMT", + "version": "0.0.19", + "tag": "@ni/spright-components_v0.0.19", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/spright-components", + "comment": "Bump @ni/nimble-components to v28.0.5", + "commit": "not available" + }, + { + "author": "beachball", + "package": "@ni/spright-components", + "comment": "Bump @ni/nimble-tokens to v6.13.6", + "commit": "not available" + } + ] + } + }, { "date": "Wed, 08 May 2024 17:29:00 GMT", "version": "0.0.18", diff --git a/packages/spright-components/CHANGELOG.md b/packages/spright-components/CHANGELOG.md index c2ab563104..64777e1ae2 100644 --- a/packages/spright-components/CHANGELOG.md +++ b/packages/spright-components/CHANGELOG.md @@ -1,9 +1,58 @@ # Change Log - @ni/spright-components -This log was last generated on Wed, 08 May 2024 17:29:00 GMT and should not be manually modified. +This log was last generated on Mon, 13 May 2024 09:49:02 GMT and should not be manually modified. +## 0.0.24 + +Mon, 13 May 2024 09:49:02 GMT + +### Patches + +- Bump @ni/nimble-components to v28.3.1 + +## 0.0.23 + +Fri, 10 May 2024 22:37:40 GMT + +### Patches + +- Bump @ni/nimble-components to v28.3.0 + +## 0.0.22 + +Fri, 10 May 2024 16:42:46 GMT + +### Patches + +- Bump @ni/nimble-components to v28.2.1 + +## 0.0.21 + +Fri, 10 May 2024 16:11:56 GMT + +### Patches + +- Bump @ni/nimble-components to v28.2.0 + +## 0.0.20 + +Thu, 09 May 2024 20:39:47 GMT + +### Patches + +- Bump @ni/nimble-components to v28.1.0 + +## 0.0.19 + +Thu, 09 May 2024 18:40:41 GMT + +### Patches + +- Bump @ni/nimble-components to v28.0.5 +- Bump @ni/nimble-tokens to v6.13.6 + ## 0.0.18 Wed, 08 May 2024 17:29:00 GMT diff --git a/packages/spright-components/package.json b/packages/spright-components/package.json index ef5cd5e3a2..83fede9f1f 100644 --- a/packages/spright-components/package.json +++ b/packages/spright-components/package.json @@ -1,6 +1,6 @@ { "name": "@ni/spright-components", - "version": "0.0.18", + "version": "0.0.24", "description": "NI Spright Components", "scripts": { "build": "npm run build-components && npm run bundle-components", @@ -55,8 +55,8 @@ "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "^2.49.6", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-components": "28.0.4", - "@ni/nimble-tokens": "^6.13.5", + "@ni/nimble-components": "28.3.1", + "@ni/nimble-tokens": "^6.13.6", "tslib": "^2.2.0" }, "devDependencies": { diff --git a/packages/storybook/src/nimble/mapping/empty/mapping-empty.react.tsx b/packages/storybook/src/nimble/mapping/empty/mapping-empty.react.tsx new file mode 100644 index 0000000000..f2c9b1b23a --- /dev/null +++ b/packages/storybook/src/nimble/mapping/empty/mapping-empty.react.tsx @@ -0,0 +1,4 @@ +import { MappingEmpty } from '@ni/nimble-components/dist/esm/mapping/empty'; +import { wrap } from '../../../utilities/react-wrapper'; + +export const NimbleMappingEmpty = wrap(MappingEmpty); diff --git a/packages/storybook/src/nimble/mapping/empty/mapping-empty.stories.ts b/packages/storybook/src/nimble/mapping/empty/mapping-empty.stories.ts new file mode 100644 index 0000000000..a818334157 --- /dev/null +++ b/packages/storybook/src/nimble/mapping/empty/mapping-empty.stories.ts @@ -0,0 +1,36 @@ +import { html } from '@microsoft/fast-element'; +import type { Meta, StoryObj } from '@storybook/html'; +import { mappingKeyDescription } from '../base/story-helpers'; +import { createUserSelectedThemeStory } from '../../../utilities/storybook'; +import { hiddenWrapper } from '../../../utilities/hidden'; + +const metadata: Meta = { + title: 'Internal/Mappings', + parameters: { + docs: { + description: { + component: + `The \`nimble-mapping-empty\` element can be provided as content of \`nimble-table-column-mapping\` to define data values that + should render as empty table cells while still having meaningful text on the value's group row. For each such data value, provide a + \`nimble-mapping-empty\` element that maps the value to the text to display on the group row for that value.` + } + } + } +}; + +export default metadata; + +export const emptyMapping: StoryObj = { + render: createUserSelectedThemeStory(hiddenWrapper(html``)), + argTypes: { + key: { + control: false, + description: mappingKeyDescription('nothing') + }, + text: { + control: false, + description: 'A textual description of the value. This value will be displayed in group rows, but table cells will be empty. This attribute is required.' + } + }, + args: {} +}; diff --git a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping-matrix.stories.ts b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping-matrix.stories.ts index ff3cea2b5b..221eb147e8 100644 --- a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping-matrix.stories.ts +++ b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping-matrix.stories.ts @@ -9,6 +9,7 @@ import { mappingSpinnerTag } from '@ni/nimble-components/dist/esm/mapping/spinne import { mappingTextTag } from '@ni/nimble-components/dist/esm/mapping/text'; import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping'; import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/mapping/types'; +import { mappingEmptyTag } from '@ni/nimble-components/dist/esm/mapping/empty'; import { isChromatic } from '../../../utilities/isChromatic'; import { createMatrixThemeStory, @@ -43,6 +44,10 @@ const data = [ { id: '6', code: 6 + }, + { + id: '7', + code: 7 } ] as const; @@ -57,7 +62,7 @@ export default metadata; // prettier-ignore const component = (): ViewTemplate => html` - <${tableTag} id-field-name="id" style="height: 520px; ${isChromatic() ? '--ni-private-spinner-animation-play-state:paused' : ''}"> + <${tableTag} id-field-name="id" style="height: 600px; ${isChromatic() ? '--ni-private-spinner-animation-play-state:paused' : ''}"> <${tableColumnMappingTag} field-name="code" key-type="number" @@ -70,7 +75,8 @@ const component = (): ViewTemplate => html` <${mappingSpinnerTag} key="3" text="Spinner, text-hidden" text-hidden> <${mappingIconTag} key="4" text="Undefined icon, text-hidden" text-hidden> <${mappingIconTag} key="5" text="Undefined icon"> - <${mappingTextTag} key="6" text="Text" + <${mappingTextTag} key="6" text="Text"> + <${mappingEmptyTag} key="7" text="Empty mapping"> <${tableColumnMappingTag} field-name="code" diff --git a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.mdx b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.mdx index 7638d29f9c..7e75c363ca 100644 --- a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.mdx +++ b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.mdx @@ -1,10 +1,12 @@ import { Canvas, Meta, Controls, Title, Description } from '@storybook/blocks'; import { columnOperationBehavior } from '../base/table-column-stories-utils'; import * as tableColumnMappingStories from './table-column-mapping.stories'; +import * as emptyMappingStories from '../../mapping/empty/mapping-empty.stories'; import * as iconMappingStories from '../../mapping/icon/mapping-icon.stories'; import * as spinnerMappingStories from '../../mapping/spinner/mapping-spinner.stories'; import * as textMappingStories from '../../mapping/text/mapping-text.stories'; import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping'; +import { mappingEmptyTag } from '@ni/nimble-components/dist/esm/mapping/empty'; import { tableTag } from '@ni/nimble-components/dist/esm/table'; import { spinnerTag } from '@ni/nimble-components/dist/esm/spinner'; @@ -23,8 +25,8 @@ The renders specific number, boolean, or str ### Best Practices - Provide a mapping for every expected record value. Because grouping is performed on the record value, non-mapped record values can result in multiple groups without group labels. - - To improve grouping behavior of values that don't correspond to icons, explicitly map those values to an `undefined` icon. -- Avoid having multiple values that map to the same label because grouping and sorting is done on the record value rather than the mapped label. + - To improve grouping behavior of a value that shouldn't be rendered in table cells, use a element to provide text for that value's group row. +- Avoid having multiple values that map to the same text because grouping and sorting is done on the record value rather than the mapped text. ### Blazor Usage @@ -45,3 +47,8 @@ When setting a child mapping element's `Key` value to a string, you must wrap it + +## Empty Mapping + + + diff --git a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts index b294bd5d50..d8f91595ee 100644 --- a/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts +++ b/packages/storybook/src/nimble/table-column/mapping/table-column-mapping.stories.ts @@ -9,6 +9,7 @@ import { mappingIconTag } from '@ni/nimble-components/dist/esm/mapping/icon'; import { mappingSpinnerTag } from '@ni/nimble-components/dist/esm/mapping/spinner'; import { sharedMappingValidityDescription } from '@ni/nimble-components/dist/esm/table-column/enum-base/tests/shared-storybook-docs'; import { mappingTextTag } from '@ni/nimble-components/dist/esm/mapping/text'; +import { mappingEmptyTag } from '@ni/nimble-components/dist/esm/mapping/empty'; import { TableColumnMappingWidthMode } from '@ni/nimble-components/dist/esm/table-column/mapping/types'; import { tableColumnMappingTag } from '@ni/nimble-components/dist/esm/table-column/mapping'; import { @@ -97,7 +98,7 @@ export const mappingColumn: StoryObj = { <${mappingIconTag} key="fail" icon="${iconXmarkTag}" severity="error" text="Not a Simpson"> <${mappingIconTag} key="success" icon="${iconCheckLargeTag}" severity="success" text="Is a Simpson"> <${mappingSpinnerTag} key="calculating" text="Calculating" text-hidden> - <${mappingIconTag} key="unknown" text="Unknown" text-hidden> + <${mappingEmptyTag} key="unknown" text="Unknown"> <${tableColumnMappingTag} field-name="isChild" key-type="boolean" width-mode="${x => TableColumnMappingWidthMode[x.widthMode]}"> <${iconChartDiagramChildFocusTag} title="Is child"> diff --git a/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.mdx b/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.mdx index b221b15f92..76c67644cb 100644 --- a/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.mdx +++ b/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.mdx @@ -49,7 +49,7 @@ To use it: - `numberTextFormat` - Either `NumberTextFormat.default` or `NumberTextFormat.decimal`. Defaults to `NumberTextFormat.default`. - `decimalDigits` - When `numberTextFormat` is `NumberTextFormat.decimal`, specifies the number of decimal places to show. If neither `decimalDigits` or `decimalMaximumDigits` are set, a default value of 2 is used. `decimalDigits` and `decimalMaximumDigits` cannot both be set at the same time. The value must be in the range 0 - 20 (inclusive). - `decimalMaximumDigits` - When `numberTextFormat` is `NumberTextFormat.decimal`, specifies the maximum number of decimal places to show. This differs from `decimalDigits` in that trailing zeros are omitted. `decimalDigits` and `decimalMaximumDigits` cannot both be set at the same time. The value must be in the range 0 - 20 (inclusive). - - `unitScale` - A `UnitScale` object indicating units to display. Possible values are `byteUnitScale`, `byte1024UnitScale`, and `voltUnitScale` which are exported from `@ni/nimble-angular/pipes`. + - `unitScale` - A `UnitScale` object indicating units to display. Possible values are `byteUnitScale`, `byte1024UnitScale`, `celsiusUnitScale`, `fahrenheitUnitScale`, and `voltUnitScale` which are exported from `@ni/nimble-angular/pipes`. {/* ## Examples */} diff --git a/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.stories.ts b/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.stories.ts index 2d1b95cc57..db18aa2e92 100644 --- a/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.stories.ts +++ b/packages/storybook/src/nimble/table-column/number-text/table-column-number-text.stories.ts @@ -4,6 +4,8 @@ import { withActions } from '@storybook/addon-actions/decorator'; import { tableTag } from '@ni/nimble-components/dist/esm/table'; import { tableColumnTextTag } from '@ni/nimble-components/dist/esm/table-column/text'; import { unitByteTag } from '@ni/nimble-components/dist/esm/unit/byte'; +import { unitCelsiusTag } from '@ni/nimble-components/dist/esm/unit/celsius'; +import { unitFahrenheitTag } from '@ni/nimble-components/dist/esm/unit/fahrenheit'; import { unitVoltTag } from '@ni/nimble-components/dist/esm/unit/volt'; import { tableColumnNumberTextTag } from '@ni/nimble-components/dist/esm/table-column/number-text'; import { NumberTextAlignment, NumberTextFormat } from '@ni/nimble-components/dist/esm/table-column/number-text/types'; @@ -139,6 +141,10 @@ const unitDescription = `A unit for the column may be configured by providing a
  • \`binary\` - boolean attribute that indicates a binary conversion factor of 1024 should be used rather than 1000. The resulting unit labels are \`byte\`/\`bytes\`, \`KiB\`, \`MiB\`, \`GiB\`, \`TiB\`, and \`PiB\`. Translations exist for English, French, German, Japanese, and Chinese.
    • +
  • \`nimble-unit-celsius\`: This unit label is \`°C\`. Translations exist for all languages supported by the runtime environment. +
    • +
  • \`nimble-unit-fahrenheit\`: This unit label is \`°F\`. Translations exist for all languages supported by the runtime environment. +
  • \`nimble-unit-volt\`: Labels in this unit scale are \`fV\`, \`pV\`, \`nV\`, \`μV\`, \`mV\`, \`cV\`, \`dV\`, \`volt\`/\`volts\`, \`kV\`, \`MV\`, \`GV\`, \`TV\`, \`PV\`, and \`EV\`. Translations exist for English, French, German, Japanese, and Chinese.
    • @@ -169,6 +175,8 @@ export const numberTextColumn: StoryObj = { Measurement ${when(x => x.unit === 'byte', html`<${unitByteTag}>`)} ${when(x => x.unit === 'byte (1024)', html`<${unitByteTag} binary>`)} + ${when(x => x.unit === 'degrees Celsius', html`<${unitCelsiusTag}>`)} + ${when(x => x.unit === 'degrees Fahrenheit', html`<${unitFahrenheitTag}>`)} ${when(x => x.unit === 'volt', html`<${unitVoltTag}>`)} @@ -210,7 +218,7 @@ export const numberTextColumn: StoryObj = { }, unit: { description: unitDescription, - options: ['default', 'byte', 'byte (1024)', 'volt'], + options: ['default', 'byte', 'byte (1024)', 'degrees Celsius', 'degrees Fahrenheit', 'volt'], control: { type: 'radio' } }, checkValidity: { diff --git a/specs/templates/custom-component.md b/specs/templates/custom-component.md index dee58d9827..069d11f7f8 100644 --- a/specs/templates/custom-component.md +++ b/specs/templates/custom-component.md @@ -77,7 +77,7 @@ ### Blazor integration -*Describe the plan for Blazor support, including form integration. See the [nimble-blazor CONTRIBUTING.md](/packages/nimble-blazor/CONTRIBUTING.md) for details. Depending on the contributor's needs, implementing Blazor integration may be deferred but the initial spec should still document what work will be needed.* +*Describe the plan for Blazor support, including form integration. See the [nimble-blazor CONTRIBUTING.md](/packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md) for details. Depending on the contributor's needs, implementing Blazor integration may be deferred but the initial spec should still document what work will be needed.* ### Visual Appearance diff --git a/specs/templates/fast-based-component.md b/specs/templates/fast-based-component.md index 3bd79913da..5f088f485d 100644 --- a/specs/templates/fast-based-component.md +++ b/specs/templates/fast-based-component.md @@ -45,7 +45,7 @@ ### Blazor integration -*Describe the plan for Blazor support, including form integration. See the [nimble-blazor CONTRIBUTING.md](/packages/nimble-blazor/CONTRIBUTING.md) for details. Depending on the contributor's needs, implementing Blazor integration may be deferred but the initial spec should still document what work will be needed.* +*Describe the plan for Blazor support, including form integration. See the [nimble-blazor CONTRIBUTING.md](/packages/blazor-workspace/NimbleBlazor/CONTRIBUTING.md) for details. Depending on the contributor's needs, implementing Blazor integration may be deferred but the initial spec should still document what work will be needed.* ### Additional requirements