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
[](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
[](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..87bcec2032 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.0.7",
"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.1.0"
}
},
"packages/angular-workspace/spright-angular": {
"name": "@ni/spright-angular",
- "version": "0.1.16",
+ "version": "0.1.18",
"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.20"
}
},
"packages/blazor-workspace": {
@@ -32693,7 +32693,7 @@
},
"packages/blazor-workspace/NimbleBlazor": {
"name": "@ni/nimble-blazor",
- "version": "17.0.0",
+ "version": "17.0.1",
"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.1.0",
"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.20",
"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.1.0",
+ "@ni/nimble-tokens": "^6.13.6",
"tslib": "^2.2.0"
},
"devDependencies": {
diff --git a/packages/angular-workspace/nimble-angular/CHANGELOG.json b/packages/angular-workspace/nimble-angular/CHANGELOG.json
index 9d2a11b71f..53d6b42407 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.json
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.json
@@ -1,6 +1,36 @@
{
"name": "@ni/nimble-angular",
"entries": [
+ {
+ "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..5fbbff7a95 100644
--- a/packages/angular-workspace/nimble-angular/CHANGELOG.md
+++ b/packages/angular-workspace/nimble-angular/CHANGELOG.md
@@ -1,9 +1,25 @@
# 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 Thu, 09 May 2024 20:39:47 GMT and should not be manually modified.
+## 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/package.json b/packages/angular-workspace/nimble-angular/package.json
index 87dae49eb5..4375c389dd 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.0.7",
"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.1.0"
},
"dependencies": {
"tslib": "^2.2.0"
diff --git a/packages/angular-workspace/spright-angular/CHANGELOG.json b/packages/angular-workspace/spright-angular/CHANGELOG.json
index 4d53a84b93..e562ce5ff2 100644
--- a/packages/angular-workspace/spright-angular/CHANGELOG.json
+++ b/packages/angular-workspace/spright-angular/CHANGELOG.json
@@ -1,6 +1,36 @@
{
"name": "@ni/spright-angular",
"entries": [
+ {
+ "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..267caec603 100644
--- a/packages/angular-workspace/spright-angular/CHANGELOG.md
+++ b/packages/angular-workspace/spright-angular/CHANGELOG.md
@@ -1,9 +1,25 @@
# 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 Thu, 09 May 2024 20:39:47 GMT and should not be manually modified.
+## 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..585b8977fb 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.18",
"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.20"
},
"dependencies": {
"tslib": "^2.2.0"
diff --git a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
index dad16f266c..3d93d7e557 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.json
@@ -1,6 +1,21 @@
{
"name": "@ni/nimble-blazor",
"entries": [
+ {
+ "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..a66c5f718b 100644
--- a/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
+++ b/packages/blazor-workspace/NimbleBlazor/CHANGELOG.md
@@ -1,9 +1,17 @@
# 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 Thu, 09 May 2024 18:40:41 GMT and should not be manually modified.
+## 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:
-
+
### 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/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 @@
enableembeddedNI
+ README.mdhttps://github.com/ni/nimblehttps://github.com/ni/nimblegit
@@ -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
+
+[](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..1a2a56e7a0 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.0.1",
"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
-
-[](https://www.nuget.org/packages/NimbleBlazor)
-[](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
+
+[](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 @@
enableembeddedNI
+ README.mdhttps://github.com/ni/nimblehttps://github.com/ni/nimblegit
@@ -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/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json
index 18354d50d5..f7c38c283a 100644
--- a/packages/nimble-components/CHANGELOG.json
+++ b/packages/nimble-components/CHANGELOG.json
@@ -1,6 +1,42 @@
{
"name": "@ni/nimble-components",
"entries": [
+ {
+ "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..fbd9bcc712 100644
--- a/packages/nimble-components/CHANGELOG.md
+++ b/packages/nimble-components/CHANGELOG.md
@@ -1,9 +1,26 @@
# 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 Thu, 09 May 2024 20:39:47 GMT and should not be manually modified.
+## 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..b00636578e 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.1.0",
"description": "Styled web components for the NI Nimble Design System",
"scripts": {
"build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
@@ -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/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-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..24ba2dc244 100644
--- a/packages/spright-components/CHANGELOG.json
+++ b/packages/spright-components/CHANGELOG.json
@@ -1,6 +1,42 @@
{
"name": "@ni/spright-components",
"entries": [
+ {
+ "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..da6bc22c50 100644
--- a/packages/spright-components/CHANGELOG.md
+++ b/packages/spright-components/CHANGELOG.md
@@ -1,9 +1,26 @@
# 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 Thu, 09 May 2024 20:39:47 GMT and should not be manually modified.
+## 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..eab3544036 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.20",
"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.1.0",
+ "@ni/nimble-tokens": "^6.13.6",
"tslib": "^2.2.0"
},
"devDependencies": {
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