New icons (bold, italic, and numbered list) and Chromatic config changes

.github/workflows/main.yml

@@ -77,6 +77,10 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: "!startsWith(github.ref, 'refs/heads/main')" # Use TurboSnap for PR builds
           workingDir: ./packages/nimble-components
+          externals: |
+            - '.storybook/public/**'
+            - '../packages/nimble-tokens/dist/icons/svg/**'
+            - '../packages/nimble-tokens/source/styledictionary/properties/**'
           storybookBuildDir: ../../packages/site/dist/storybook
           exitOnceUploaded: true # Do not wait for test results
           exitZeroOnChanges: true # Option to prevent the workflow from failing

change/@ni-nimble-components-d54cc503-9024-4180-bc54-24741b5ca73b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "New icons for bold, italic, and numbered list",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@ni-nimble-tokens-450b6631-d061-4ca7-b043-7f289daa3f30.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "New icons for bold, italic, and numbered list",
+  "packageName": "@ni/nimble-tokens",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/icon-base/icon-metadata.ts → packages/nimble-components/src/icon-base/tests/icon-metadata.ts

@@ -1,4 +1,4 @@
-import type * as IconsNamespace from '../icons/all-icons';
+import type * as IconsNamespace from '../../icons/all-icons';
 
 type IconName = keyof typeof IconsNamespace;
 
@@ -76,6 +76,9 @@ export const iconMetadata: {
     IconBlockWithRibbon: {
         tags: ['certificate']
     },
+    IconBoldB: {
+        tags: []
+    },
     IconBookMagnifyingGlass: {
         tags: ['analyze']
     },
@@ -295,6 +298,9 @@ export const iconMetadata: {
     IconInfoCircle: {
         tags: []
     },
+    IconItalicI: {
+        tags: []
+    },
     IconKey: {
         tags: ['access-control', 'active-directory']
     },
@@ -343,6 +349,9 @@ export const iconMetadata: {
     IconNotebook: {
         tags: []
     },
+    IconNumberList: {
+        tags: ['order']
+    },
     IconPaste: {
         tags: ['clipboard']
     },

packages/nimble-components/src/icon-base/tests/icons.spec.ts

@@ -3,7 +3,7 @@ import type { NimbleIconName } from '@ni/nimble-tokens/dist/icons/js';
 import { DesignSystem } from '@microsoft/fast-foundation';
 import { getSpecTypeByNamedList } from '../../utilities/tests/parameterized';
 import * as allIconsNamespace from '../../icons/all-icons';
-import { iconMetadata } from '../icon-metadata';
+import { iconMetadata } from './icon-metadata';
 
 describe('Icons', () => {
     describe('should have correct SVG structure', () => {

packages/nimble-tokens/CONTRIBUTING.md

@@ -73,7 +73,7 @@ These steps require access to Adobe Illustrator and Perforce so will typically b
 
 3. Confirm the new icon files will build correctly by running: `npm run build -w @ni/nimble-tokens`.
 4. Generate and build icon components by running `npm run build -w @ni/nimble-components`. This step will report an error at this point but is necessary to enable the next step.
-5. Add metadata for the new icons to `nimble-components\src\icon-base\icon-metadata.ts`.
+5. Add metadata for the new icons to `nimble-components/src/icon-base/tests/icon-metadata.ts`.
 6. Run `npm run build -w @ni/nimble-components` again. It should now succeed.
 7. Preview the built files by running: `npm run storybook -w @ni/nimble-components`, and review the **Icons** story to confirm that your changes appear correctly. Inspect the icons in each **Severity** and ensure their color changes.
 8. Publish a PR with your changes. If there are any new icons, set `changeType` and `dependentChangeType` to minor in the beachball change file.