diff --git a/.vscode/settings.json b/.vscode/settings.json index f045c80f8c..8b67d4f680 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,7 +6,6 @@ "mode": "auto" } ], - "xd.globalEditor": true, "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "omnisharp.useModernNet": true } diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json index e2aab4f09b..99e6c9a64b 100644 --- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json +++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json @@ -1,6 +1,66 @@ { "name": "@ni/nimble-angular", "entries": [ + { + "date": "Thu, 22 Feb 2024 01:13:03 GMT", + "version": "20.2.5", + "tag": "@ni/nimble-angular_v20.2.5", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v21.6.2", + "commit": "not available" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 23:32:45 GMT", + "version": "20.2.4", + "tag": "@ni/nimble-angular_v20.2.4", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v21.6.1", + "commit": "not available" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 21:18:20 GMT", + "version": "20.2.3", + "tag": "@ni/nimble-angular_v20.2.3", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v21.6.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 19:48:20 GMT", + "version": "20.2.2", + "tag": "@ni/nimble-angular_v20.2.2", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v21.5.5", + "commit": "not available" + } + ] + } + }, { "date": "Tue, 20 Feb 2024 17:54:12 GMT", "version": "20.2.1", diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md index aca23ee526..b6442a2605 100644 --- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md +++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md @@ -1,9 +1,41 @@ # Change Log - @ni/nimble-angular -This log was last generated on Tue, 20 Feb 2024 17:54:12 GMT and should not be manually modified. +This log was last generated on Thu, 22 Feb 2024 01:13:03 GMT and should not be manually modified. +## 20.2.5 + +Thu, 22 Feb 2024 01:13:03 GMT + +### Patches + +- Bump @ni/nimble-components to v21.6.2 + +## 20.2.4 + +Wed, 21 Feb 2024 23:32:45 GMT + +### Patches + +- Bump @ni/nimble-components to v21.6.1 + +## 20.2.3 + +Wed, 21 Feb 2024 21:18:20 GMT + +### Patches + +- Bump @ni/nimble-components to v21.6.0 + +## 20.2.2 + +Wed, 21 Feb 2024 19:48:20 GMT + +### Patches + +- Bump @ni/nimble-components to v21.5.5 + ## 20.2.1 Tue, 20 Feb 2024 17:54:12 GMT diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json index 94ba3e4215..19778c8981 100644 --- a/angular-workspace/projects/ni/nimble-angular/package.json +++ b/angular-workspace/projects/ni/nimble-angular/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-angular", - "version": "20.2.1", + "version": "20.2.5", "description": "Angular components for the NI Nimble Design System", "scripts": { "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish" @@ -31,7 +31,7 @@ "@angular/forms": "^15.2.10", "@angular/localize": "^15.2.10", "@angular/router": "^15.2.10", - "@ni/nimble-components": "^21.5.4" + "@ni/nimble-components": "^21.6.2" }, "dependencies": { "tslib": "^2.2.0" diff --git a/package-lock.json b/package-lock.json index 06b143ad11..1c560dc652 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,7 +83,7 @@ }, "angular-workspace/projects/ni/nimble-angular": { "name": "@ni/nimble-angular", - "version": "20.2.1", + "version": "20.2.5", "license": "MIT", "dependencies": { "tslib": "^2.2.0" @@ -94,7 +94,7 @@ "@angular/forms": "^15.2.10", "@angular/localize": "^15.2.10", "@angular/router": "^15.2.10", - "@ni/nimble-components": "^21.5.4" + "@ni/nimble-components": "^21.6.2" } }, "node_modules/@11ty/dependency-tree": { @@ -33861,7 +33861,7 @@ }, "packages/jasmine-parameterized": { "name": "@ni/jasmine-parameterized", - "version": "0.2.1", + "version": "0.2.2", "license": "MIT", "devDependencies": { "@ni/eslint-config-javascript": "^4.2.0", @@ -33892,7 +33892,7 @@ }, "packages/nimble-blazor": { "name": "@ni/nimble-blazor", - "version": "14.2.3", + "version": "14.3.1", "hasInstallScript": true, "license": "MIT", "devDependencies": { @@ -33904,6 +33904,7 @@ "cross-env": "^7.0.3", "glob": "^8.1.0", "playwright": "1.40.0", + "rimraf": "^5.0.5", "rollup": "^3.10.1" } }, @@ -33947,16 +33948,80 @@ "node": ">=10" } }, + "packages/nimble-blazor/node_modules/minipass": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz", + "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==", + "dev": true, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "packages/nimble-blazor/node_modules/rimraf": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz", + "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==", + "dev": true, + "dependencies": { + "glob": "^10.3.7" + }, + "bin": { + "rimraf": "dist/esm/bin.mjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/nimble-blazor/node_modules/rimraf/node_modules/glob": { + "version": "10.3.10", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz", + "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==", + "dev": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^2.3.5", + "minimatch": "^9.0.1", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0", + "path-scurry": "^1.10.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/nimble-blazor/node_modules/rimraf/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "packages/nimble-components": { "name": "@ni/nimble-components", - "version": "21.5.4", + "version": "21.6.2", "license": "MIT", "dependencies": { "@microsoft/fast-colors": "^5.3.1", "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "2.49.4", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-tokens": "^6.10.1", + "@ni/nimble-tokens": "^6.11.1", "@tanstack/table-core": "^8.10.7", "@tanstack/virtual-core": "^3.0.0-beta.68", "@tiptap/core": "^2.2.2", @@ -33995,7 +34060,7 @@ "@microsoft/fast-react-wrapper": "0.3.22", "@ni/eslint-config-javascript": "^4.2.0", "@ni/eslint-config-typescript": "^4.2.0", - "@ni/jasmine-parameterized": "^0.2.1", + "@ni/jasmine-parameterized": "^0.2.2", "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.0.1", @@ -34068,7 +34133,7 @@ }, "packages/nimble-tokens": { "name": "@ni/nimble-tokens", - "version": "6.10.1", + "version": "6.11.1", "license": "MIT", "devDependencies": { "@microsoft/fast-colors": "^5.3.1", @@ -34076,6 +34141,7 @@ "cross-env": "^7.0.3", "glob": "^8.1.0", "lodash": "^4.17.21", + "rimraf": "^5.0.5", "sharp": "^0.32.1", "style-dictionary": "3.7.2", "svg-to-ts": "^10.1.0", @@ -34123,6 +34189,70 @@ "node": ">=10" } }, + "packages/nimble-tokens/node_modules/minipass": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz", + "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==", + "dev": true, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "packages/nimble-tokens/node_modules/rimraf": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz", + "integrity": "sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==", + "dev": true, + "dependencies": { + "glob": "^10.3.7" + }, + "bin": { + "rimraf": "dist/esm/bin.mjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/nimble-tokens/node_modules/rimraf/node_modules/glob": { + "version": "10.3.10", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz", + "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==", + "dev": true, + "dependencies": { + "foreground-child": "^3.1.0", + "jackspeak": "^2.3.5", + "minimatch": "^9.0.1", + "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0", + "path-scurry": "^1.10.1" + }, + "bin": { + "glob": "dist/esm/bin.mjs" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "packages/nimble-tokens/node_modules/rimraf/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "packages/performance": { "name": "@ni-private/performance", "version": "1.0.0", diff --git a/packages/jasmine-parameterized/CHANGELOG.json b/packages/jasmine-parameterized/CHANGELOG.json index 58d227c6aa..99cb5e9999 100644 --- a/packages/jasmine-parameterized/CHANGELOG.json +++ b/packages/jasmine-parameterized/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/jasmine-parameterized", "entries": [ + { + "date": "Wed, 21 Feb 2024 19:48:20 GMT", + "version": "0.2.2", + "tag": "@ni/jasmine-parameterized_v0.2.2", + "comments": { + "patch": [ + { + "author": "jattasNI@users.noreply.github.com", + "package": "@ni/jasmine-parameterized", + "commit": "a9ba0b6027479fe1cc2267f11957caa329910dfc", + "comment": "Add keywords to package metadata and fix typo in examples" + } + ] + } + }, { "date": "Tue, 23 Jan 2024 22:00:33 GMT", "version": "0.2.1", diff --git a/packages/jasmine-parameterized/CHANGELOG.md b/packages/jasmine-parameterized/CHANGELOG.md index ad2a01e890..aed76ed891 100644 --- a/packages/jasmine-parameterized/CHANGELOG.md +++ b/packages/jasmine-parameterized/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/jasmine-parameterized -This log was last generated on Tue, 23 Jan 2024 22:00:33 GMT and should not be manually modified. +This log was last generated on Wed, 21 Feb 2024 19:48:20 GMT and should not be manually modified. +## 0.2.2 + +Wed, 21 Feb 2024 19:48:20 GMT + +### Patches + +- Add keywords to package metadata and fix typo in examples ([ni/nimble@a9ba0b6](https://github.com/ni/nimble/commit/a9ba0b6027479fe1cc2267f11957caa329910dfc)) + ## 0.2.1 Tue, 23 Jan 2024 22:00:33 GMT diff --git a/packages/jasmine-parameterized/README.md b/packages/jasmine-parameterized/README.md index 0f5fb17288..c8bc5a791b 100644 --- a/packages/jasmine-parameterized/README.md +++ b/packages/jasmine-parameterized/README.md @@ -26,7 +26,7 @@ In the following example: import { parameterizeSpec } from '@ni/jasmine-parameterized'; const rainTests = [ { name: 'cats-and-dogs', type: 'idiom' }, - { name: 'frogs' type: 'idiom'}, + { name: 'frogs', type: 'idiom'}, { name: 'men', type: 'lyrics'} ] as const; describe('Different rains', () => { diff --git a/packages/jasmine-parameterized/package.json b/packages/jasmine-parameterized/package.json index 61edba94b6..50829b1ca5 100644 --- a/packages/jasmine-parameterized/package.json +++ b/packages/jasmine-parameterized/package.json @@ -1,7 +1,14 @@ { "name": "@ni/jasmine-parameterized", - "version": "0.2.1", + "version": "0.2.2", "description": "A utility to write parameterized jasmine tests", + "keywords": [ + "jasmine", + "parameterised", + "parameterized", + "test", + "testing" + ], "scripts": { "build": "tsc -b", "lint": "eslint .", diff --git a/packages/jasmine-parameterized/src/parameterized.ts b/packages/jasmine-parameterized/src/parameterized.ts index c8af862a78..c0cd7d7a91 100644 --- a/packages/jasmine-parameterized/src/parameterized.ts +++ b/packages/jasmine-parameterized/src/parameterized.ts @@ -85,7 +85,7 @@ type ObjectFromNamedList = { * @example * const rainTests = [ * { name: 'cats-and-dogs', type: 'idiom' }, - * { name: 'frogs' type: 'idiom'}, + * { name: 'frogs', type: 'idiom'}, * { name: 'men', type: 'lyrics'} * ] as const; * describe('Different rains', () => { diff --git a/packages/nimble-blazor/CHANGELOG.json b/packages/nimble-blazor/CHANGELOG.json index ef3ce8eb77..f8be1c847d 100644 --- a/packages/nimble-blazor/CHANGELOG.json +++ b/packages/nimble-blazor/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@ni/nimble-blazor", "entries": [ + { + "date": "Thu, 22 Feb 2024 01:13:03 GMT", + "version": "14.3.1", + "tag": "@ni/nimble-blazor_v14.3.1", + "comments": { + "patch": [ + { + "author": "rajsite@users.noreply.github.com", + "package": "@ni/nimble-blazor", + "commit": "bb9f7fcf5aeac256fe9c4bf39c782f64c26d1c52", + "comment": "Align nuget and npm package versions" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 23:32:45 GMT", + "version": "14.3.0", + "tag": "@ni/nimble-blazor_v14.3.0", + "comments": { + "minor": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-blazor", + "commit": "ff99d91bbe3dd65e8595770c9ac05cbb8ad5282d", + "comment": "Add support for delayed hierarchy in the table" + } + ] + } + }, { "date": "Mon, 19 Feb 2024 16:59:58 GMT", "version": "14.2.0", diff --git a/packages/nimble-blazor/CHANGELOG.md b/packages/nimble-blazor/CHANGELOG.md index 270dfe67fe..b80d0c3ffc 100644 --- a/packages/nimble-blazor/CHANGELOG.md +++ b/packages/nimble-blazor/CHANGELOG.md @@ -1,9 +1,25 @@ # Change Log - @ni/nimble-blazor -This log was last generated on Mon, 19 Feb 2024 16:59:58 GMT and should not be manually modified. +This log was last generated on Thu, 22 Feb 2024 01:13:03 GMT and should not be manually modified. +## 14.3.1 + +Thu, 22 Feb 2024 01:13:03 GMT + +### Patches + +- Align nuget and npm package versions ([ni/nimble@bb9f7fc](https://github.com/ni/nimble/commit/bb9f7fcf5aeac256fe9c4bf39c782f64c26d1c52)) + +## 14.3.0 + +Wed, 21 Feb 2024 23:32:45 GMT + +### Minor changes + +- Add support for delayed hierarchy in the table ([ni/nimble@ff99d91](https://github.com/ni/nimble/commit/ff99d91bbe3dd65e8595770c9ac05cbb8ad5282d)) + ## 14.2.0 Mon, 19 Feb 2024 16:59:58 GMT diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor index f6b4bdfd11..2a938b6869 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -265,6 +265,14 @@ AddTableRows(10))>Add rows +
+
Table with delayed hierarchy
+ + First name + Last name + Age + +
Tabs
diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs index 6e1768b8a8..3645f45127 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs @@ -16,9 +16,18 @@ public partial class ComponentsDemo private string? DialogClosedReason { get; set; } private NimbleDrawer? _drawer; private NimbleTable? _table; + private NimbleTable? _delayedHierarchyTable; private string? DrawerClosedReason { get; set; } private string? SelectedRadio { get; set; } = "2"; private bool BannerOpen { get; set; } + private List _delayedHierarchyTableData = new List() + { + new PersonTableRecord("jacqueline-bouvier", null, "Jacqueline", "Bouvier", 80, true), + new PersonTableRecord("mona-simpson", null, "Mona", "Simpson", 77, true), + new PersonTableRecord("agnes-skinner", null, "Agnes", "Skinner", 88, true) + }; + private HashSet _recordsLoadingChildren = new HashSet(); + private HashSet _recordsWithLoadedChildren = new HashSet(); [NotNull] public IEnumerable TableData { get; set; } = Enumerable.Empty(); @@ -38,9 +47,94 @@ public ComponentsDemo() protected override async Task OnAfterRenderAsync(bool firstRender) { await _table!.SetDataAsync(TableData); + await UpdateDelayedHierarchyTableAsync(); await base.OnAfterRenderAsync(firstRender); } + private async Task OnRowExpandToggleAsync(TableRowExpandToggleEventArgs e) + { + var recordId = e.RecordId; + if (e.NewState && !_recordsLoadingChildren.Contains(recordId) && !_recordsWithLoadedChildren.Contains(recordId)) + { + var record = _delayedHierarchyTableData.Find(person => person.Id == recordId); + if (record == null) + { + return; + } + + _recordsLoadingChildren.Add(recordId); + await UpdateDelayedHierarchyTableAsync(false); + + await Task.Delay(1500); + _recordsLoadingChildren.Remove(recordId); + _recordsWithLoadedChildren.Add(recordId); + var childrenToAdd = GetChildren(recordId); + childrenToAdd.ForEach(child => _delayedHierarchyTableData.Add(child)); + await UpdateDelayedHierarchyTableAsync(); + } + } + + private List GetChildren(string recordId) + { + switch (recordId) + { + case "jacqueline-bouvier": + return new List() + { + new PersonTableRecord("marge-simpson", recordId, "Marge", "Simpson", 35, true), + new PersonTableRecord("selma-bouvier", recordId, "Selma", "Bouvier", 45, false), + new PersonTableRecord("patty-bouvier", recordId, "Patty", "Bouvier", 45, false) + }; + case "marge-simpson": + return new List() + { + new PersonTableRecord("bart-simpson", recordId, "Bart", "Simpson", 12, false), + new PersonTableRecord("lisa-bouvier", recordId, "Lisa", "Simpson", 10, false), + new PersonTableRecord("maggie-bouvier", recordId, "Maggie", "Simpson", 1, false) + }; + case "mona-simpson": + return new List() + { + new PersonTableRecord("homer-simpson", recordId, "Homer", "Simpson", 35, false) + }; + case "agnes-skinner": + return new List() + { + new PersonTableRecord("seymour-skinner", recordId, "Seymour", "Skinner", 42, false) + }; + default: + return new List(); + } + } + + private async Task UpdateDelayedHierarchyTableAsync(bool setData = true) + { + if (setData) + { + await _delayedHierarchyTable!.SetDataAsync(_delayedHierarchyTableData); + } + + List options = new List(); + _delayedHierarchyTableData.ForEach(person => + { + if (_recordsLoadingChildren.Contains(person.Id)) + { + options.Add( + new TableSetRecordHierarchyOptions( + person.Id, + new TableRecordHierarchyOptions(TableRecordDelayedHierarchyState.LoadingChildren))); + } + else if (person.HasChildren && !_recordsWithLoadedChildren.Contains(person.Id)) + { + options.Add( + new TableSetRecordHierarchyOptions( + person.Id, + new TableRecordHierarchyOptions(TableRecordDelayedHierarchyState.CanLoadChildren))); + } + }); + await _delayedHierarchyTable!.SetRecordHierarchyOptionsAsync(options); + } + private string DrawerLocationAsString { get => _drawerLocation.ToString(); @@ -183,6 +277,26 @@ public SimpleTableRecord( public double Duration { get; } } + public class PersonTableRecord + { + public PersonTableRecord(string id, string? parentId, string firstName, string lastName, int age, bool hasChildren) + { + Id = id; + ParentId = parentId; + FirstName = firstName; + LastName = lastName; + Age = age; + HasChildren = hasChildren; + } + + public string Id { get; } + public string? ParentId { get; } + public string FirstName { get; } + public string LastName { get; } + public int Age { get; } + public bool HasChildren { get; } + } + public enum DialogResult { OK, diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor index 4aa34f6fce..50351dc8bc 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor @@ -11,5 +11,6 @@ group-select-all="@GroupSelectAll" row-select="@RowSelect" row-operation-column="@RowOperationColumn" + row-loading="@RowLoading" @attributes="AdditionalAttributes"> diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor.cs index 5c70363e40..60ab8da142 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor.cs +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleLabelProviderTable.razor.cs @@ -40,6 +40,9 @@ public partial class NimbleLabelProviderTable : ComponentBase [Parameter] public string? RowOperationColumn { get; set; } + [Parameter] + public string? RowLoading { get; set; } + /// /// Gets or sets a collection of additional attributes that will be applied to the created element. /// diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor index 5933f24f78..6c09c39dad 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor @@ -10,6 +10,7 @@ @onnimbleactionmenutoggle="(__value) => HandleActionMenuToggle(__value)" @onnimbletablerowselectionchange="(__value) => HandleSelectionChange(__value)" @onnimbletablecolumnconfigurationchange="(__value) => HandleColumnConfigurationChange(__value)" + @onnimbletablerowexpandtoggle="(__value) => HandleRowExpandToggle(__value)" > @ChildContent \ No newline at end of file diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor.cs index 781e1ddd0e..1a21f1e3cc 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor.cs +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTable.razor.cs @@ -19,6 +19,7 @@ public partial class NimbleTable : ComponentBase internal static string SetSelectedRecordIdsMethodName = "NimbleBlazor.Table.setSelectedRecordIds"; internal static string CheckTableValidityMethodName = "NimbleBlazor.Table.checkValidity"; internal static string GetTableValidityMethodName = "NimbleBlazor.Table.getValidity"; + internal static string SetRecordHierarchyOptionsMethodName = "NimbleBlazor.Table.setRecordHierarchyOptions"; [Inject] private IJSRuntime? JSRuntime { get; set; } @@ -65,6 +66,15 @@ public async Task SetSelectedRecordIdsAsync(IEnumerable recordIds) await JSRuntime!.InvokeAsync(SetSelectedRecordIdsMethodName, _table, recordIds); } + /// + /// Sets the hierarchy options for each record in the table. + /// + /// The hierarchy options + public async Task SetRecordHierarchyOptionsAsync(IEnumerable options) + { + await JSRuntime!.InvokeVoidAsync(SetRecordHierarchyOptionsMethodName, _table, options); + } + /// /// Returns whether or not the table is valid. /// @@ -105,6 +115,12 @@ public async Task GetValidityAsync() [Parameter] public EventCallback ColumnConfigurationChange { get; set; } + /// + /// Gets or sets a callback that's invoked when a column's configuration is changed. + /// + [Parameter] + public EventCallback RowExpandToggle { get; set; } + /// /// Called when 'action-menu-toggle' changes on the web component. /// @@ -140,4 +156,13 @@ protected async void HandleColumnConfigurationChange(TableColumnConfigurationEve { await ColumnConfigurationChange.InvokeAsync(eventArgs); } + + /// + /// Called when the 'row-expand-toggle' event is fired on the web component. + /// + /// The toggle state of a table row + protected async void HandleRowExpandToggle(TableRowExpandToggleEventArgs eventArgs) + { + await RowExpandToggle.InvokeAsync(eventArgs); + } } diff --git a/packages/nimble-blazor/NimbleBlazor/EventHandlers.cs b/packages/nimble-blazor/NimbleBlazor/EventHandlers.cs index 28f160eb4c..9f8818d93c 100644 --- a/packages/nimble-blazor/NimbleBlazor/EventHandlers.cs +++ b/packages/nimble-blazor/NimbleBlazor/EventHandlers.cs @@ -62,6 +62,13 @@ public class TableColumnConfiguration public double? PixelWidth { get; set; } } +public class TableRowExpandToggleEventArgs : EventArgs +{ + public string RecordId { get; set; } = string.Empty; + public bool NewState { get; set; } + public bool OldState { get; set; } +} + public class WaferMapHoverDieChangedEventArgs : EventArgs { public WaferMapDie? CurrentDie { get; set; } @@ -76,6 +83,7 @@ public class WaferMapHoverDieChangedEventArgs : EventArgs [EventHandler("onnimbleactionmenubeforetoggle", typeof(TableActionMenuToggleEventArgs), enableStopPropagation: true, enablePreventDefault: false)] [EventHandler("onnimbletablerowselectionchange", typeof(TableRowSelectionEventArgs), enableStopPropagation: true, enablePreventDefault: false)] [EventHandler("onnimbletablecolumnconfigurationchange", typeof(TableColumnConfigurationEventArgs), enableStopPropagation: true, enablePreventDefault: false)] +[EventHandler("onnimbletablerowexpandtoggle", typeof(TableRowExpandToggleEventArgs), enableStopPropagation: true, enablePreventDefault: false)] [EventHandler("onnimblewafermapdiehoverchange", typeof(WaferMapHoverDieChangedEventArgs), enableStopPropagation: true, enablePreventDefault: false)] public static class EventHandlers { diff --git a/packages/nimble-blazor/NimbleBlazor/TableHierarchyOptions.cs b/packages/nimble-blazor/NimbleBlazor/TableHierarchyOptions.cs new file mode 100644 index 0000000000..a9be899842 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/TableHierarchyOptions.cs @@ -0,0 +1,14 @@ +using System.Text.Json.Serialization; + +namespace NimbleBlazor; + +public class TableRecordHierarchyOptions +{ + public TableRecordHierarchyOptions(TableRecordDelayedHierarchyState delayedHierarchyState) + { + DelayedHierarchyState = delayedHierarchyState; + } + + [JsonConverter(typeof(TableRecordDelayedHierarchyStateConverter))] + public TableRecordDelayedHierarchyState DelayedHierarchyState { get; set; } +} diff --git a/packages/nimble-blazor/NimbleBlazor/TableRecordDelayedHierarchyState.cs b/packages/nimble-blazor/NimbleBlazor/TableRecordDelayedHierarchyState.cs new file mode 100644 index 0000000000..cc84348879 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/TableRecordDelayedHierarchyState.cs @@ -0,0 +1,15 @@ +namespace NimbleBlazor; + +public enum TableRecordDelayedHierarchyState +{ + None, + CanLoadChildren, + LoadingChildren +} + +internal static class TableRecordDelayedHierarchyStateExtensions +{ + internal static readonly Dictionary EnumValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues(); + + public static string? ToAttributeValue(this TableRecordDelayedHierarchyState? value) => (value == null || value == TableRecordDelayedHierarchyState.None) ? null : EnumValues[value.Value]; +} diff --git a/packages/nimble-blazor/NimbleBlazor/TableRecordDelayedHierarchyStateConverter.cs b/packages/nimble-blazor/NimbleBlazor/TableRecordDelayedHierarchyStateConverter.cs new file mode 100644 index 0000000000..988c098621 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/TableRecordDelayedHierarchyStateConverter.cs @@ -0,0 +1,19 @@ +using System.Text.Json; +using System.Text.Json.Serialization; + +namespace NimbleBlazor; + +internal class TableRecordDelayedHierarchyStateConverter : JsonConverter +{ + public override TableRecordDelayedHierarchyState Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options) + { + var value = reader.GetString(); + return TableRecordDelayedHierarchyStateExtensions.EnumValues.FirstOrDefault(x => x.Value == value).Key; + } + + public override void Write(Utf8JsonWriter writer, TableRecordDelayedHierarchyState value, JsonSerializerOptions options) + { + var convertedValue = (value as TableRecordDelayedHierarchyState?).ToAttributeValue(); + writer.WriteStringValue(convertedValue); + } +} diff --git a/packages/nimble-blazor/NimbleBlazor/TableSetRecordHierarchyOptions.cs b/packages/nimble-blazor/NimbleBlazor/TableSetRecordHierarchyOptions.cs new file mode 100644 index 0000000000..9aeaa0a18e --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/TableSetRecordHierarchyOptions.cs @@ -0,0 +1,14 @@ +namespace NimbleBlazor; + +public class TableSetRecordHierarchyOptions +{ + public TableSetRecordHierarchyOptions(string recordId, TableRecordHierarchyOptions options) + { + RecordId = recordId; + Options = options; + } + + public string RecordId { get; set; } + + public TableRecordHierarchyOptions Options { get; set; } +} diff --git a/packages/nimble-blazor/NimbleBlazor/wwwroot/NimbleBlazor.lib.module.js b/packages/nimble-blazor/NimbleBlazor/wwwroot/NimbleBlazor.lib.module.js index b02e0ebd30..6f0ada1426 100644 --- a/packages/nimble-blazor/NimbleBlazor/wwwroot/NimbleBlazor.lib.module.js +++ b/packages/nimble-blazor/NimbleBlazor/wwwroot/NimbleBlazor.lib.module.js @@ -118,6 +118,17 @@ export function afterStarted(Blazor) { }; } }); + // Used by NimbleTable.razor + Blazor.registerCustomEventType('nimbletablerowexpandtoggle', { + browserEventName: 'row-expand-toggle', + createEventArgs: event => { + return { + recordId: event.detail.recordId, + newState: event.detail.newState, + oldState: event.detail.oldState + }; + } + }); // Used by NimbleWaferMap.razor Blazor.registerCustomEventType('nimblewafermapdiehoverchange', { browserEventName: 'die-hover', @@ -158,6 +169,17 @@ window.NimbleBlazor = window.NimbleBlazor ?? { const dataObject = JSON.parse(data); await tableReference.setData(dataObject); }, + setRecordHierarchyOptions: async function (tableReference, options) { + // Blazor converts the 'None' delayed hierarchy state to null, + // but nimble-components expects 'None' to be passed as undefined. + // Therefore, change any null values to undefined. + for (const option of options) { + if (option.options.delayedHierarchyState === null) { + option.options.delayedHierarchyState = undefined; + } + } + await tableReference.setRecordHierarchyOptions(options); + }, getSelectedRecordIds: async function (tableReference) { return tableReference.getSelectedRecordIds(); }, diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/TableSetRecordHierarchyOptionsTest.razor b/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/TableSetRecordHierarchyOptionsTest.razor new file mode 100644 index 0000000000..3c5b87e630 --- /dev/null +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Pages/TableSetRecordHierarchyOptionsTest.razor @@ -0,0 +1,68 @@ +@page "/TableSetRecordHierarchyOptionsTest" +@namespace NimbleBlazor.Tests.Acceptance.Pages +@using System.Diagnostics.CodeAnalysis; +@inherits LayoutComponentBase + + + Column 1 + + + +@code { + [NotNull] + public IEnumerable TableData { get; set; } = Enumerable.Empty(); + [NotNull] + public IEnumerable HiearchyOptions { get; set; } = Enumerable.Empty(); + public string TextFieldText = string.Empty; + private NimbleTable? _table; + + public TableSetRecordHierarchyOptionsTest() + { + UpdateTableData(4); + } + + public void UpdateTableData(int numberOfRows) + { + var tableData = new RowData[numberOfRows]; + for (int i = 0; i < numberOfRows; i++) + { + tableData[i] = new RowData( + i.ToString(null, null), + $"A{i}"); + } + + TableData = tableData; + + var hierarchyOptions = new List() + { + new TableSetRecordHierarchyOptions("0", new TableRecordHierarchyOptions(TableRecordDelayedHierarchyState.CanLoadChildren)), + new TableSetRecordHierarchyOptions("1", new TableRecordHierarchyOptions(TableRecordDelayedHierarchyState.None)), + new TableSetRecordHierarchyOptions("2", new TableRecordHierarchyOptions(TableRecordDelayedHierarchyState.LoadingChildren)) + }; + HiearchyOptions = hierarchyOptions; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await _table!.SetDataAsync(TableData); + await _table!.SetRecordHierarchyOptionsAsync(HiearchyOptions); + await base.OnAfterRenderAsync(firstRender); + } + + private void OnRowExpandToggle(TableRowExpandToggleEventArgs e) + { + TextFieldText = $"RecordId: {e.RecordId}, OldState: {e.OldState}, NewState: {e.NewState}"; + } + + public class RowData + { + public RowData(string id, string field1) + { + Id = id; + Field1 = field1; + } + + public string Id { get; } + public string Field1 { get; } + } +} diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Tests/TableTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Tests/TableTests.cs index e6e1973a68..2ef27ad634 100644 --- a/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Tests/TableTests.cs +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests.Acceptance/Tests/TableTests.cs @@ -24,5 +24,67 @@ public async Task Table_RendersBoundDataAsync() await Assertions.Expect(rows).ToContainTextAsync(new string[] { "A0", "A1", "A2", "A3", "A4" }); } } + + [Theory] + [InlineData(0, TableRecordDelayedHierarchyState.CanLoadChildren)] + [InlineData(1, TableRecordDelayedHierarchyState.None)] + [InlineData(2, TableRecordDelayedHierarchyState.LoadingChildren)] + [InlineData(3, TableRecordDelayedHierarchyState.None)] + public async Task Table_RendersHierarchyOptionsAsync(int rowIndex, TableRecordDelayedHierarchyState expectedHierarchyState) + { + await using (var pageWrapper = await NewPageForRouteAsync("TableSetRecordHierarchyOptionsTest")) + { + var page = pageWrapper.Page; + var table = page.Locator("nimble-table"); + await Assertions.Expect(table).ToBeVisibleAsync(); + + var rows = table.Locator("nimble-table-row"); + await Assertions.Expect(rows).ToHaveCountAsync(4); + + var row = rows.Nth(rowIndex); + var rowExpandCollapseButton = row.Locator("nimble-button"); + var rowSpinner = row.Locator("nimble-spinner"); + + if (expectedHierarchyState == TableRecordDelayedHierarchyState.CanLoadChildren) + { + await Assertions.Expect(rowExpandCollapseButton).ToBeVisibleAsync(); + } + else + { + await Assertions.Expect(rowExpandCollapseButton).Not.ToBeVisibleAsync(); + } + + if (expectedHierarchyState == TableRecordDelayedHierarchyState.LoadingChildren) + { + await Assertions.Expect(rowSpinner).ToBeVisibleAsync(); + } + else + { + await Assertions.Expect(rowSpinner).Not.ToBeVisibleAsync(); + } + } + } + + [Fact] + public async Task Table_TriggersRowExpandToggleEventAsync() + { + await using (var pageWrapper = await NewPageForRouteAsync("TableSetRecordHierarchyOptionsTest")) + { + var page = pageWrapper.Page; + var table = page.Locator("nimble-table"); + await Assertions.Expect(table).ToBeVisibleAsync(); + var textField = page.Locator("nimble-text-field"); + + var rows = table.Locator("nimble-table-row"); + var expandableRow = rows.Nth(0); + var rowExpandCollapseButton = expandableRow.Locator("nimble-button"); + + await rowExpandCollapseButton.ClickAsync(); + await Assertions.Expect(textField).ToHaveAttributeAsync("current-value", "RecordId: 0, OldState: False, NewState: True"); + + await rowExpandCollapseButton.ClickAsync(); + await Assertions.Expect(textField).ToHaveAttributeAsync("current-value", "RecordId: 0, OldState: True, NewState: False"); + } + } } } diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderTableTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderTableTests.cs index a4e8fa4da2..0e607ee84d 100644 --- a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderTableTests.cs +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleLabelProviderTableTests.cs @@ -41,6 +41,7 @@ public void NimbleLabelProviderTable_SupportsAdditionalAttributes() [InlineData(nameof(NimbleLabelProviderTable.GroupSelectAll))] [InlineData(nameof(NimbleLabelProviderTable.RowSelect))] [InlineData(nameof(NimbleLabelProviderTable.RowOperationColumn))] + [InlineData(nameof(NimbleLabelProviderTable.RowLoading))] public void NimbleLabelProviderTable_LabelIsSet(string propertyName) { var labelValue = propertyName + "UpdatedValue"; diff --git a/packages/nimble-blazor/package.json b/packages/nimble-blazor/package.json index 4aac9ade89..509cf5ee35 100644 --- a/packages/nimble-blazor/package.json +++ b/packages/nimble-blazor/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-blazor", - "version": "14.2.3", + "version": "14.3.1", "description": "Blazor components for the NI Nimble Design System", "scripts": { "postinstall": "node build/generate-playwright-version-properties/source/index.js", @@ -19,7 +19,8 @@ "format:js": "eslint . --fix", "test": "dotnet test -c Release", "pack": "cross-env-shell dotnet pack NimbleBlazor -c Release -p:PackageVersion=$npm_package_version --output dist", - "invoke-publish": "npm run invoke-publish:nuget && npm run invoke-publish:npm -- ", + "invoke-publish": "npm run invoke-publish:clean-nuget && npm run pack && npm run invoke-publish:nuget && npm run invoke-publish:npm -- ", + "invoke-publish:clean-nuget": "rimraf --glob \"dist/*.nupkg\"", "invoke-publish:nuget": "cross-env-shell dotnet nuget push \"dist/*.nupkg\" -k $NUGET_SECRET_TOKEN -s \"https://api.nuget.org/v3/index.json\"", "invoke-publish:npm": "echo \"noop command to swallow npm args\"", "copy-resources": "node build/copyNimbleResources.js" @@ -44,10 +45,11 @@ "@ni/eslint-config-javascript": "^4.2.0", "@ni/nimble-components": "*", "@ni/nimble-tokens": "*", - "playwright": "1.40.0", "@rollup/plugin-node-resolve": "^15.0.1", "cross-env": "^7.0.3", "glob": "^8.1.0", + "playwright": "1.40.0", + "rimraf": "^5.0.5", "rollup": "^3.10.1" } } diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json index 1ab2167e87..9270459ed4 100644 --- a/packages/nimble-components/CHANGELOG.json +++ b/packages/nimble-components/CHANGELOG.json @@ -1,6 +1,72 @@ { "name": "@ni/nimble-components", "entries": [ + { + "date": "Thu, 22 Feb 2024 01:13:03 GMT", + "version": "21.6.2", + "tag": "@ni/nimble-components_v21.6.2", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-components", + "comment": "Bump @ni/nimble-tokens to v6.11.1", + "commit": "not available" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 23:32:45 GMT", + "version": "21.6.1", + "tag": "@ni/nimble-components_v21.6.1", + "comments": { + "patch": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "ff99d91bbe3dd65e8595770c9ac05cbb8ad5282d", + "comment": "Update `TableRecordDelayedHierarchyState` enum values to follow kebab casing convention" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 21:18:20 GMT", + "version": "21.6.0", + "tag": "@ni/nimble-components_v21.6.0", + "comments": { + "minor": [ + { + "author": "1458528+fredvisser@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "4037b7c13da51926e6fbfd774a4da19cd75cb98e", + "comment": "Add bodyEmphasizedPlus1Font tokens" + }, + { + "author": "beachball", + "package": "@ni/nimble-components", + "comment": "Bump @ni/nimble-tokens to v6.11.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 19:48:20 GMT", + "version": "21.5.5", + "tag": "@ni/nimble-components_v21.5.5", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-components", + "comment": "Bump @ni/jasmine-parameterized to v0.2.2", + "commit": "not available" + } + ] + } + }, { "date": "Tue, 20 Feb 2024 17:54:12 GMT", "version": "21.5.4", diff --git a/packages/nimble-components/CHANGELOG.md b/packages/nimble-components/CHANGELOG.md index cf1efdd18f..6fbf00294f 100644 --- a/packages/nimble-components/CHANGELOG.md +++ b/packages/nimble-components/CHANGELOG.md @@ -1,9 +1,42 @@ # Change Log - @ni/nimble-components -This log was last generated on Tue, 20 Feb 2024 17:54:12 GMT and should not be manually modified. +This log was last generated on Thu, 22 Feb 2024 01:13:03 GMT and should not be manually modified. +## 21.6.2 + +Thu, 22 Feb 2024 01:13:03 GMT + +### Patches + +- Bump @ni/nimble-tokens to v6.11.1 + +## 21.6.1 + +Wed, 21 Feb 2024 23:32:45 GMT + +### Patches + +- Update `TableRecordDelayedHierarchyState` enum values to follow kebab casing convention ([ni/nimble@ff99d91](https://github.com/ni/nimble/commit/ff99d91bbe3dd65e8595770c9ac05cbb8ad5282d)) + +## 21.6.0 + +Wed, 21 Feb 2024 21:18:20 GMT + +### Minor changes + +- Add bodyEmphasizedPlus1Font tokens ([ni/nimble@4037b7c](https://github.com/ni/nimble/commit/4037b7c13da51926e6fbfd774a4da19cd75cb98e)) +- Bump @ni/nimble-tokens to v6.11.0 + +## 21.5.5 + +Wed, 21 Feb 2024 19:48:20 GMT + +### Patches + +- Bump @ni/jasmine-parameterized to v0.2.2 + ## 21.5.4 Tue, 20 Feb 2024 17:54:12 GMT diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md index 6b755cb687..607712adff 100644 --- a/packages/nimble-components/CONTRIBUTING.md +++ b/packages/nimble-components/CONTRIBUTING.md @@ -35,7 +35,7 @@ From the `nimble` directory: Before building a new component, 3 specification documents need to be created: 1. An interaction design (IxD) spec to get agreement on the component's behavior and other core requirements. The spec process is described in the [`/specs` folder](/specs/README.md). -2. A visual design (ViD) spec to get agreement on the component's appearance, spacing, icons, and tokens. The visual design spec can be created in Adobe XD or Figma, and linked to the component work item and Storybook documentation. See [Tips for using Adobe XD to inspect component designs](/packages/nimble-components/docs/xd-tips.md) to learn more about how to navigate these specs. +2. A visual design (ViD) spec to get agreement on the component's appearance, spacing, icons, and tokens. The visual design spec should be created in Figma and linked to the component work item and Storybook [Component Status](https://nimble.ni.dev/storybook/?path=/docs/component-status--docs) page. 3. A technical design spec to get agreement on the component's behavior, API, and high-level implementation. The spec process is described in the [`/specs` folder](/specs/README.md). ## Development workflow @@ -476,7 +476,17 @@ Component custom element names are specified in `index.ts` when registering the 3. **variant** can be used to distinguish alternate configurations of one presentation. For example, `anchor-`, `card-`, `menu-`, and `toggle-` are all variants of the `button` presentation. The primary configuration can omit the `variant` segment (e.g. `nimble-button`). 4. **presentation** describes the visual presentation of the component. For example, `button`, `tab`, or `text-field`. -## Token naming +## Theme-aware tokens + +Nimble maps [base tokens](/packages/nimble-tokens/CONTRIBUTING.md#editing-base-tokens) to theme-aware tokens which are then used to style components. These tokens automatically adjust to the theme set by the `theme-provider` and relate to specific contexts or components. + +To modify the generated tokens, complete these steps: + +1. Edit the `design-tokens*` typescript files in `src/theme-provider/`. +2. Rebuild the generated token files by running the repository's build command, `npm run build`. +3. Test your changes locally and create a PR using the normal process. + +### Naming Public names for theme-aware tokens are specified in `src/theme-provider/design-token-names.ts`. Use the following structure when creating new tokens. @@ -486,3 +496,15 @@ Public names for theme-aware tokens are specified in `src/theme-provider/design- 2. Where **part** is the specific part of the element to which the token applies (e.g. 'border', 'background', or shadow). 3. Where **state** is the more specific state descriptor (e.g. 'selected' or 'disabled'). Multiple states should be sorted alphabetically. 4. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size'). + +### Size ramp + +For tokens with multiple sizes, use the following structure for **element** names. E.g. for `title`: + +| Element name | +| ------------- | +| title-plus-2 | +| title-plus-1 | +| title | +| title-minus-1 | +| title-minus-2 | diff --git a/packages/nimble-components/docs/images/xd-appearance.png b/packages/nimble-components/docs/images/xd-appearance.png deleted file mode 100644 index 7d4705c85a..0000000000 Binary files a/packages/nimble-components/docs/images/xd-appearance.png and /dev/null differ diff --git a/packages/nimble-components/docs/images/xd-components.png b/packages/nimble-components/docs/images/xd-components.png deleted file mode 100644 index 4c4d3061fd..0000000000 Binary files a/packages/nimble-components/docs/images/xd-components.png and /dev/null differ diff --git a/packages/nimble-components/docs/images/xd-home-and-pages.png b/packages/nimble-components/docs/images/xd-home-and-pages.png deleted file mode 100644 index 7bdbf8d87a..0000000000 Binary files a/packages/nimble-components/docs/images/xd-home-and-pages.png and /dev/null differ diff --git a/packages/nimble-components/docs/images/xd-parts-menu.png b/packages/nimble-components/docs/images/xd-parts-menu.png deleted file mode 100644 index b9c666c931..0000000000 Binary files a/packages/nimble-components/docs/images/xd-parts-menu.png and /dev/null differ diff --git a/packages/nimble-components/docs/images/xd-right-bar.png b/packages/nimble-components/docs/images/xd-right-bar.png deleted file mode 100644 index 881d899966..0000000000 Binary files a/packages/nimble-components/docs/images/xd-right-bar.png and /dev/null differ diff --git a/packages/nimble-components/docs/images/xd-states.png b/packages/nimble-components/docs/images/xd-states.png deleted file mode 100644 index 443b47fdea..0000000000 Binary files a/packages/nimble-components/docs/images/xd-states.png and /dev/null differ diff --git a/packages/nimble-components/docs/images/xd-zoom.png b/packages/nimble-components/docs/images/xd-zoom.png deleted file mode 100644 index 5f2290feec..0000000000 Binary files a/packages/nimble-components/docs/images/xd-zoom.png and /dev/null differ diff --git a/packages/nimble-components/docs/xd-tips.md b/packages/nimble-components/docs/xd-tips.md deleted file mode 100644 index 3e8d939e53..0000000000 --- a/packages/nimble-components/docs/xd-tips.md +++ /dev/null @@ -1,50 +0,0 @@ -# Tips for using Adobe XD to inspect component designs - -This describes tips to inspect the visual design for a component in Adobe XD and extract the information needed to develop it in code. - -## Finding the design spec - -The visual design specs are stored in the [Nimble_Components Adobe XD Document](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/) (viewable in a web browser or desktop application; these instructions cover the web browser). This is maintained by the NI Visual Design team. - -1. To navigate the document, ensure you're in "Comments" mode by clicking the "speech bubble" icon in the right bar. - -![Right bar](/packages/nimble-components/docs/images/xd-right-bar.png) - -2. To go to the table of contents, click the "home" icon at the bottom of the document. - -![Home](/packages/nimble-components/docs/images/xd-home-and-pages.png) - -3. From the table of contents, click on the button for a component to navigate to its design specs. - -![Components](/packages/nimble-components/docs/images/xd-components.png) - -4. Each component is rendered in different themes with different backgrounds. Use the page buttons to navigate between them. - -![Pages](/packages/nimble-components/docs/images/xd-home-and-pages.png) - - - -## Inspecting component parts - -1. To inspect component parts, ensure you're in "Specs" mode by clicking the "HTML tag" icon in the right bar. - -![Right bar](/packages/nimble-components/docs/images/xd-right-bar.png) - -2. Zoom in to see component parts at higher detail. - -![Zoom](/packages/nimble-components/docs/images/xd-zoom.png) - -3. Select a specific part by right-clicking the part and choosing the layer of interest. - -![Parts](/packages/nimble-components/docs/images/xd-parts-menu.png) - -4. View the tokens used to construct that part in the "Appearance" section of the right configuration pane. Colors generally map to base token names in `nimble-tokens`. Don't forget to check the opacity value; they often vary from 100%. - -![Parts](/packages/nimble-components/docs/images/xd-appearance.png) - -5. To view the component in a different state or theme, you can either: - 1. navigate to that preconfigured copy of the component on one of the theme pages - 2. configure the component you've already selected to use that state or theme by selecting it from the "Component: Default State" section of the right configuration pane - -![States](/packages/nimble-components/docs/images/xd-states.png) - diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json index 5fab301c6a..e2cc90a784 100644 --- a/packages/nimble-components/package.json +++ b/packages/nimble-components/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-components", - "version": "21.5.4", + "version": "21.6.2", "description": "Styled web components for the NI Nimble Design System", "scripts": { "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook", @@ -64,7 +64,7 @@ "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "2.49.4", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-tokens": "^6.10.1", + "@ni/nimble-tokens": "^6.11.1", "@tanstack/table-core": "^8.10.7", "@tanstack/virtual-core": "^3.0.0-beta.68", "@tiptap/core": "^2.2.2", @@ -103,7 +103,7 @@ "@microsoft/fast-react-wrapper": "0.3.22", "@ni/eslint-config-javascript": "^4.2.0", "@ni/eslint-config-typescript": "^4.2.0", - "@ni/jasmine-parameterized": "^0.2.1", + "@ni/jasmine-parameterized": "^0.2.2", "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.0.1", diff --git a/packages/nimble-components/src/table/components/row/template.ts b/packages/nimble-components/src/table/components/row/template.ts index 6b04ae9eef..fe9944ca89 100644 --- a/packages/nimble-components/src/table/components/row/template.ts +++ b/packages/nimble-components/src/table/components/row/template.ts @@ -50,7 +50,7 @@ export const template = html` aria-label="${x => tableRowLoadingLabel.getValueFor(x)}" title="${x => tableRowLoadingLabel.getValueFor(x)}" > - <${spinnerTag}> + `)} ${when(x => !x.loading, html` diff --git a/packages/nimble-components/src/table/tests/table.stories.ts b/packages/nimble-components/src/table/tests/table.stories.ts index d64c2d5848..2675fbd36d 100644 --- a/packages/nimble-components/src/table/tests/table.stories.ts +++ b/packages/nimble-components/src/table/tests/table.stories.ts @@ -441,7 +441,7 @@ export const delayedHierarchy: Meta = { }, args: { tableRef: undefined, - firstRecordState: TableRecordDelayedHierarchyState.canLoadChildren, + firstRecordState: 'canLoadChildren', updateData: x => { void (async () => { // Safari workaround: the table element instance is made at this point diff --git a/packages/nimble-components/src/table/types.ts b/packages/nimble-components/src/table/types.ts index f9be62f2c6..c048ff0f7d 100644 --- a/packages/nimble-components/src/table/types.ts +++ b/packages/nimble-components/src/table/types.ts @@ -95,8 +95,8 @@ export interface TableRecordHierarchyOptions { export const TableRecordDelayedHierarchyState = { none: undefined, - canLoadChildren: 'canLoadChildren', - loadingChildren: 'loadingChildren' + canLoadChildren: 'can-load-children', + loadingChildren: 'loading-children' } as const; export type TableRecordDelayedHierarchyState = (typeof TableRecordDelayedHierarchyState)[keyof typeof TableRecordDelayedHierarchyState]; @@ -136,9 +136,9 @@ export type TableRowSelectionMode = * The possible selection states that the table or a table row can be in. */ export const TableRowSelectionState = { - notSelected: 'notSelected', + notSelected: 'not-selected', selected: 'selected', - partiallySelected: 'partiallySelected' + partiallySelected: 'partially-selected' } as const; export type TableRowSelectionState = (typeof TableRowSelectionState)[keyof typeof TableRowSelectionState]; diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts index b1eedbc54e..7e38139d14 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -210,19 +210,33 @@ export const comments: { readonly [key in TokenName]: string | null } = { 'Font line height for the "Placeholder" base token', placeholderFallbackFontFamily: 'Fallback font family for the "Placeholder" base token', - bodyEmphasizedFont: 'Font shorthand for the "Body_Emphasized" base token', - bodyEmphasizedFontColor: 'Font color for the "Body_Emphasized" base token', + bodyEmphasizedFont: 'Font shorthand for the "BodyEmphasized" base token', + bodyEmphasizedFontColor: 'Font color for the "BodyEmphasized" base token', bodyEmphasizedDisabledFontColor: - 'Disabled font color for the "Body_Emphasized" base token', - bodyEmphasizedFontFamily: - 'Font family for the "Body_Emphasized" base token', - bodyEmphasizedFontSize: 'Font size for the "Body_Emphasized" base token', - bodyEmphasizedFontWeight: - 'Font weight for the "Body_Emphasized" base token', + 'Disabled font color for the "BodyEmphasized" base token', + bodyEmphasizedFontFamily: 'Font family for the "BodyEmphasized" base token', + bodyEmphasizedFontSize: 'Font size for the "BodyEmphasized" base token', + bodyEmphasizedFontWeight: 'Font weight for the "BodyEmphasized" base token', bodyEmphasizedFontLineHeight: - 'Font line height for the "Body_Emphasized" base token', + 'Font line height for the "BodyEmphasized" base token', bodyEmphasizedFallbackFontFamily: - 'Fallback font family for the "Body_Emphasized" base token', + 'Fallback font family for the "BodyEmphasized" base token', + bodyEmphasizedPlus1Font: + 'Font shorthand for the "BodyEmphasized_2" base token', + bodyEmphasizedPlus1FontColor: + 'Font color for the "BodyEmphasized_2" base token', + bodyEmphasizedPlus1DisabledFontColor: + 'Disabled font color for the "BodyEmphasized_2" base token', + bodyEmphasizedPlus1FontFamily: + 'Font family for the "BodyEmphasized_2" base token', + bodyEmphasizedPlus1FontSize: + 'Font size for the "BodyEmphasized_2" base token', + bodyEmphasizedPlus1FontWeight: + 'Font weight for the "BodyEmphasized_2" base token', + bodyEmphasizedPlus1FontLineHeight: + 'Font line height for the "BodyEmphasized_2" base token', + bodyEmphasizedPlus1FallbackFontFamily: + 'Fallback font family for the "BodyEmphasized_2" base token', bodyFont: 'Font shorthand for the "Body" base token', bodyFontColor: 'Font color for the "Body" base token', bodyDisabledFontColor: 'Disabled font color for the "Body" base token', diff --git a/packages/nimble-components/src/theme-provider/design-token-names.ts b/packages/nimble-components/src/theme-provider/design-token-names.ts index da2ec93366..3725fadbba 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -177,6 +177,17 @@ export const tokenNames: { readonly [key in TokenName]: string } = { bodyEmphasizedFontWeight: 'body-emphasized-font-weight', bodyEmphasizedFontLineHeight: 'body-emphasized-font-line-height', bodyEmphasizedFallbackFontFamily: 'body-emphasized-fallback-font-family', + bodyEmphasizedPlus1Font: 'body-emphasized-plus-1-font', + bodyEmphasizedPlus1FontColor: 'body-emphasized-plus-1-font-color', + bodyEmphasizedPlus1DisabledFontColor: + 'body-emphasized-plus-1-disabled-font-color', + bodyEmphasizedPlus1FontFamily: 'body-emphasized-plus-1-font-family', + bodyEmphasizedPlus1FontSize: 'body-emphasized-plus-1-font-size', + bodyEmphasizedPlus1FontWeight: 'body-emphasized-plus-1-font-weight', + bodyEmphasizedPlus1FontLineHeight: + 'body-emphasized-plus-1-font-line-height', + bodyEmphasizedPlus1FallbackFontFamily: + 'body-emphasized-plus-1-fallback-font-family', bodyFont: 'body-font', bodyFontColor: 'body-font-color', bodyDisabledFontColor: 'body-disabled-font-color', diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index ac8eb4a946..0261fe694d 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -59,6 +59,9 @@ import { BodyEmphasizedSize, BodyEmphasizedFamily, BodyEmphasizedWeight, + BodyEmphasized2Size, + BodyEmphasized2Family, + BodyEmphasized2Weight, ButtonLabel1Size, ButtonLabel1Family, ButtonLabel1Weight, @@ -78,6 +81,7 @@ import { LinkLineHeight, PlaceholderLineHeight, BodyEmphasizedLineHeight, + BodyEmphasized2LineHeight, BodyLineHeight, GroupLabel1LineHeight, ControlLabel1LineHeight, @@ -115,6 +119,7 @@ const LinkFallbackFontFamily = 'Source Sans Pro Fallback'; const PlaceholderFallbackFontFamily = 'Source Sans Pro Fallback'; const BodyFallbackFontFamily = 'Source Sans Pro Fallback'; const BodyEmphasizedFallbackFontFamily = 'Source Sans Pro Fallback'; +const BodyEmphasized2FallbackFontFamily = 'Source Sans Pro Fallback'; const GroupLabel1FallbackFontFamily = 'Source Sans Pro Fallback'; const ControlLabel1FallbackFontFamily = 'Source Sans Pro Fallback'; const ButtonLabel1FallbackFontFamily = 'Source Sans Pro Fallback'; @@ -642,6 +647,26 @@ export const [ BodyEmphasizedFallbackFontFamily ); +export const [ + bodyEmphasizedPlus1Font, + bodyEmphasizedPlus1FontColor, + bodyEmphasizedPlus1DisabledFontColor, + bodyEmphasizedPlus1FontFamily, + bodyEmphasizedPlus1FontWeight, + bodyEmphasizedPlus1FontSize, + bodyEmphasizedPlus1FontLineHeight, + bodyEmphasizedPlus1FallbackFontFamily +] = createFontTokens( + tokenNames.bodyEmphasizedPlus1Font, + (element: HTMLElement) => getDefaultFontColorForTheme(element), + (element: HTMLElement) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), + BodyEmphasized2Family, + BodyEmphasized2Weight, + BodyEmphasized2Size, + BodyEmphasized2LineHeight, + BodyEmphasized2FallbackFontFamily +); + export const [ bodyFont, bodyFontColor, diff --git a/packages/nimble-tokens/CHANGELOG.json b/packages/nimble-tokens/CHANGELOG.json index 2325463516..6d8d0477ff 100644 --- a/packages/nimble-tokens/CHANGELOG.json +++ b/packages/nimble-tokens/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@ni/nimble-tokens", "entries": [ + { + "date": "Thu, 22 Feb 2024 01:13:03 GMT", + "version": "6.11.1", + "tag": "@ni/nimble-tokens_v6.11.1", + "comments": { + "patch": [ + { + "author": "rajsite@users.noreply.github.com", + "package": "@ni/nimble-tokens", + "commit": "bb9f7fcf5aeac256fe9c4bf39c782f64c26d1c52", + "comment": "Align nuget and npm package versions" + } + ] + } + }, + { + "date": "Wed, 21 Feb 2024 21:18:20 GMT", + "version": "6.11.0", + "tag": "@ni/nimble-tokens_v6.11.0", + "comments": { + "minor": [ + { + "author": "1458528+fredvisser@users.noreply.github.com", + "package": "@ni/nimble-tokens", + "commit": "4037b7c13da51926e6fbfd774a4da19cd75cb98e", + "comment": "Add BodyEmphasized_2 font base token" + } + ] + } + }, { "date": "Fri, 16 Feb 2024 18:10:59 GMT", "version": "6.10.1", diff --git a/packages/nimble-tokens/CHANGELOG.md b/packages/nimble-tokens/CHANGELOG.md index db690d0471..5a1690bc41 100644 --- a/packages/nimble-tokens/CHANGELOG.md +++ b/packages/nimble-tokens/CHANGELOG.md @@ -1,9 +1,25 @@ # Change Log - @ni/nimble-tokens -This log was last generated on Fri, 16 Feb 2024 18:10:59 GMT and should not be manually modified. +This log was last generated on Thu, 22 Feb 2024 01:13:03 GMT and should not be manually modified. +## 6.11.1 + +Thu, 22 Feb 2024 01:13:03 GMT + +### Patches + +- Align nuget and npm package versions ([ni/nimble@bb9f7fc](https://github.com/ni/nimble/commit/bb9f7fcf5aeac256fe9c4bf39c782f64c26d1c52)) + +## 6.11.0 + +Wed, 21 Feb 2024 21:18:20 GMT + +### Minor changes + +- Add BodyEmphasized_2 font base token ([ni/nimble@4037b7c](https://github.com/ni/nimble/commit/4037b7c13da51926e6fbfd774a4da19cd75cb98e)) + ## 6.10.1 Fri, 16 Feb 2024 18:10:59 GMT diff --git a/packages/nimble-tokens/CONTRIBUTING.md b/packages/nimble-tokens/CONTRIBUTING.md index a0a5871a56..4eb44ab318 100644 --- a/packages/nimble-tokens/CONTRIBUTING.md +++ b/packages/nimble-tokens/CONTRIBUTING.md @@ -5,10 +5,9 @@ | Folder | Description | | -------------------- | --------------------------------------- | | build | Build scripts for generating files | -| data | _Managed by Adobe XD DSP plugin_ | | dist/fonts | Fonts for use in applications | | dist/icons | Icons for use in applications | -| dist/styledictionary | _Managed by Adobe XD DSP plugin_ | +| dist/styledictionary | JSON token source files | | docs | Files used by the documentation | | NimbleTokens | Project for building the Nuget package | | source/icons | Illustrator files for editing icons | @@ -16,16 +15,17 @@ ## Getting started 1. Build the monorepo, see [Getting Started](/CONTRIBUTING.md#getting-started) -2. Ensure you have the [Adobe XD extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=Adobe.xd&ssr=false#overview) installed. -## Editing Tokens +## Editing Base Tokens -Tokens are generated using the [Style Dictionary](https://amzn.github.io/style-dictionary/#/) build system, which transforms platform-agnostic token definition files into platform-specific output. These JSON definition files are the source of truth for the colors, fonts, and component design tokens in this repository. To modify the generated tokens, complete these steps: +Base tokens are generated using the [Style Dictionary](https://amzn.github.io/style-dictionary/#/) build system, which transforms platform-agnostic token definition files into platform-specific output. These JSON definition files are the source of truth for the colors, fonts, and component design tokens in this repository. To modify the generated tokens, complete these steps: 1. Edit the JSON files in `source/styledictionary/properties`. Long term these tokens will be sourced from a Figma design spec but for now it's OK to make manual edits. 2. Rebuild the generated token files by running the repository's build command, `npm run build`. 3. Test your changes locally and create a PR using the normal process. +To style a component with token values, you must first map base tokens to [theme-aware tokens](/packages/nimble-components/CONTRIBUTING.md#theme-aware-tokens). + ## Updating icons ### Icon naming diff --git a/packages/nimble-tokens/package.json b/packages/nimble-tokens/package.json index dcfd2466b2..ebabe53d8f 100644 --- a/packages/nimble-tokens/package.json +++ b/packages/nimble-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-tokens", - "version": "6.10.1", + "version": "6.11.1", "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", @@ -15,7 +15,8 @@ "pack": "npm run pack:npm && npm run pack:nuget", "pack:npm": "npm pack", "pack:nuget": "cross-env-shell dotnet pack ./NimbleTokens --configuration Release -p:PackageVersion=$npm_package_version", - "invoke-publish": "npm run invoke-publish:nuget && npm run invoke-publish:npm -- ", + "invoke-publish": "npm run invoke-publish:clean-nuget && npm run pack && npm run invoke-publish:nuget && npm run invoke-publish:npm -- ", + "invoke-publish:clean-nuget": "rimraf --glob \"NimbleTokens/bin/Release/*.nupkg\"", "invoke-publish:nuget": "cross-env-shell dotnet nuget push \"NimbleTokens/bin/Release/*.nupkg\" -k $NUGET_SECRET_TOKEN -s \"https://api.nuget.org/v3/index.json\"", "invoke-publish:npm": "npm publish" }, @@ -40,6 +41,7 @@ "cross-env": "^7.0.3", "glob": "^8.1.0", "lodash": "^4.17.21", + "rimraf": "^5.0.5", "sharp": "^0.32.1", "style-dictionary": "3.7.2", "svg-to-ts": "^10.1.0", diff --git a/packages/nimble-tokens/source/styledictionary/properties/fonts.json b/packages/nimble-tokens/source/styledictionary/properties/fonts.json index e87d3b2873..4745cd3608 100644 --- a/packages/nimble-tokens/source/styledictionary/properties/fonts.json +++ b/packages/nimble-tokens/source/styledictionary/properties/fonts.json @@ -120,6 +120,14 @@ "value": "Semibold" } }, + "BodyEmphasized_2": { + "family": { + "value": "Source Sans Pro" + }, + "weight": { + "value": "Semibold" + } + }, "Subtitle_1": { "family": { "value": "Source Sans Pro" @@ -288,6 +296,9 @@ "BodyEmphasized": { "value": "14" }, + "BodyEmphasized_2": { + "value": "16" + }, "Subtitle_1": { "value": "12.800000190734863" }, diff --git a/packages/nimble-tokens/source/styledictionary/properties/sizes.json b/packages/nimble-tokens/source/styledictionary/properties/sizes.json index 6bb7bf3420..97d1a1fa25 100644 --- a/packages/nimble-tokens/source/styledictionary/properties/sizes.json +++ b/packages/nimble-tokens/source/styledictionary/properties/sizes.json @@ -39,6 +39,9 @@ "BodyEmphasized-line-height": { "value": "18" }, + "BodyEmphasized_2-line-height": { + "value": "16" + }, "ButtonLabel_1-line-height": { "value": "16" },