Merge branch 'main' into cell-placeholder

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

@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Wed, 20 Mar 2024 16:45:59 GMT",
+      "version": "20.5.1",
+      "tag": "@ni/nimble-angular_v20.5.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v22.1.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 18 Mar 2024 17:12:34 GMT",
       "version": "20.5.0",

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

@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-angular
 
-This log was last generated on Mon, 18 Mar 2024 17:12:34 GMT and should not be manually modified.
+This log was last generated on Wed, 20 Mar 2024 16:45:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 20.5.1
+
+Wed, 20 Mar 2024 16:45:59 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v22.1.1
+
 ## 20.5.0
 
 Mon, 18 Mar 2024 17:12:34 GMT

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

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "20.5.0",
+  "version": "20.5.1",
   "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": "^22.1.0"
+    "@ni/nimble-components": "^22.1.1"
   },
   "dependencies": {
     "tslib": "^2.2.0"

packages/nimble-blazor/package.json

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

packages/nimble-components/CHANGELOG.json

@@ -1,6 +1,51 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Thu, 21 Mar 2024 00:31:13 GMT",
+      "version": "22.1.1",
+      "tag": "@ni/nimble-components_v22.1.1",
+      "comments": {
+        "none": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-components",
+            "commit": "755823b11215aa2a2c48f296546d0cb8acf6f64c",
+            "comment": "Small change to design token naming scheme"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Mar 2024 16:45:59 GMT",
+      "version": "22.1.1",
+      "tag": "@ni/nimble-components_v22.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-components",
+            "commit": "83f7fd9e601eed789e8f6eb61a9d4a87a1d1835b",
+            "comment": "Remove ListOptionOwner from Combobox to address issue found in Angular"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 20 Mar 2024 15:46:00 GMT",
+      "version": "22.1.0",
+      "tag": "@ni/nimble-components_v22.1.0",
+      "comments": {
+        "none": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-components",
+            "commit": "517e9450043eb0a3797ff278985cc702c4ad0fab",
+            "comment": "Create anchor patterns story"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 18 Mar 2024 18:10:43 GMT",
       "version": "22.1.0",

packages/nimble-components/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-components
 
-This log was last generated on Mon, 18 Mar 2024 17:12:34 GMT and should not be manually modified.
+This log was last generated on Wed, 20 Mar 2024 16:45:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 22.1.1
+
+Wed, 20 Mar 2024 16:45:59 GMT
+
+### Patches
+
+- Remove ListOptionOwner from Combobox to address issue found in Angular ([ni/nimble@83f7fd9](https://github.com/ni/nimble/commit/83f7fd9e601eed789e8f6eb61a9d4a87a1d1835b))
+
 ## 22.1.0
 
 Mon, 18 Mar 2024 17:12:34 GMT

packages/nimble-components/CONTRIBUTING.md

@@ -490,12 +490,13 @@ To modify the generated tokens, complete these steps:
 
 Public names for theme-aware tokens are specified in `src/theme-provider/design-token-names.ts`. Use the following structure when creating new tokens.
 
-`[element]-[part]-[state]-[token_type]`
+`[element]-[part]-[interaction_states]-[remaining_states]-[token_type]`
 
 1. Where **element** is the type to which the token applies (e.g. 'application', 'body', or 'title-plus-1').
 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').
+3. Where **interaction_states** is one or more interaction states (e.g. 'active', 'disabled', 'hover', or 'selected'). Multiple values should be sorted alphabetically.
+4. Where **remaining_states** the remaining, non-interaction states (e.g. 'accent', 'primary, or 'large'). Multiple values should be sorted alphabetically.
+5. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size').
 
 ### Size ramp
 

packages/nimble-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "22.1.0",
+  "version": "22.1.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",

packages/nimble-components/src/combobox/index.ts

@@ -17,14 +17,10 @@ import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 
 import { styles } from './styles';
 import type { ErrorPattern } from '../patterns/error/types';
-import type {
-    DropdownPattern,
-    ListOptionOwner
-} from '../patterns/dropdown/types';
+import type { DropdownPattern } from '../patterns/dropdown/types';
 import { DropdownAppearance } from '../patterns/dropdown/types';
 import type { AnchoredRegion } from '../anchored-region';
 import { template } from './template';
-import type { ListOption } from '../list-option';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -37,7 +33,7 @@ declare global {
  */
 export class Combobox
     extends FoundationCombobox
-    implements DropdownPattern, ErrorPattern, ListOptionOwner {
+    implements DropdownPattern, ErrorPattern {
     @attr
     public appearance: DropdownAppearance = DropdownAppearance.underline;
 
@@ -211,23 +207,6 @@ export class Combobox
         return returnValue;
     }
 
-    /**
-     * @internal
-     */
-    public registerOption(option: ListOption): void {
-        if (this.options.includes(option)) {
-            return;
-        }
-
-        // Adding an option to the end, ultimately, isn't the correct
-        // thing to do, as this will mean the option's index in the options,
-        // at least temporarily, does not match the DOM order. However, it
-        // is expected that a successive run of `slottedOptionsChanged` will
-        // correct this order issue. See 'https://github.com/ni/nimble/issues/1915'
-        // for more info.
-        this.options.push(option);
-    }
-
     protected override focusAndScrollOptionIntoView(): void {
         if (this.open) {
             super.focusAndScrollOptionIntoView();

packages/nimble-components/src/combobox/tests/combobox.spec.ts

@@ -9,7 +9,7 @@ import {
     waitAnimationFrame
 } from '../../utilities/tests/component';
 import { checkFullyInViewport } from '../../utilities/tests/intersection-observer';
-import { ListOption, listOptionTag } from '../../list-option';
+import { listOptionTag } from '../../list-option';
 
 async function setup(
     position?: string,
@@ -127,33 +127,6 @@ describe('Combobox', () => {
         await disconnect();
     });
 
-    it('option added directly to DOM synchronously registers with Combobox', async () => {
-        const { element, connect, disconnect } = await setup();
-        await connect();
-        element.selectedIndex = 0;
-        await waitForUpdatesAsync();
-        const newOption = new ListOption('foo', 'foo');
-        const registerOptionSpy = spyOn(
-            element,
-            'registerOption'
-        ).and.callThrough();
-        registerOptionSpy.calls.reset();
-        element.insertBefore(newOption, element.options[0]!);
-
-        expect(registerOptionSpy.calls.count()).toBe(1);
-        expect(element.options).toContain(newOption);
-
-        // While the option is registered synchronously as shown above,
-        // properties like selectedIndex will only be correct asynchronously
-        // See https://github.com/ni/nimble/issues/1915
-        expect(element.selectedIndex).toBe(0);
-        await waitForUpdatesAsync();
-        // This assertion shows that after 'slottedOptionsChanged' runs, the
-        // 'selectedIndex' state has been corrected to expected DOM order.
-        expect(element.selectedIndex).toBe(1);
-        await disconnect();
-    });
-
     const ariaTestData: {
         attrName: string,
         propSetter: (x: Combobox, value: string) => void

packages/nimble-components/src/patterns/anchor/tests/anchor-patterns.mdx

@@ -0,0 +1,38 @@
+import { Controls, Canvas, Meta, Title } from '@storybook/blocks';
+import * as anchorPatternStories from './anchor-patterns.stories';
+
+<Meta of={anchorPatternStories} />
+<Title of={anchorPatternStories} />
+
+Anchor components in nimble should behave like native anchors in a number of different ways that are difficult to unit test in an automated manner.
+Therefore, this story contains a native anchor element along with all of the nimble components that are anchors or contain anchors.
+The following behaviors should be true of the nimble components:
+
+Mouse interactions:
+
+-   Dragging the nimble component should behave like the native anchor
+    -   Known behavior exceptions:
+        -   Chromium - The drag preview contains the href only, not the label of the anchor. See [chromium issue 329489154](https://issues.chromium.org/issues/329489154).
+        -   Firefox - The drag preview does not contain the label, and in most cases, is blank. See [mozilla bug 1589364](https://bugzilla.mozilla.org/show_bug.cgi?id=1589364).
+        -   Safari - The drag preview contains the href only, not the label of the anchor.
+-   CTRL + CLICK opens in a new tab (⌘ + CLICK on macOS)
+-   Right clicking should open the link menu
+-   Hovering over the component should show the URL preview at the bottom of the browser window
+-   Copying the link through the right-click link menu should result in the expected string to be copied to the clipboard
+-   The hover state of the component and mouse pointer should match the area of the component that navigates when clicked (i.e. clicking the white space around the control should not navigate)
+
+Keyboard interactions:
+
+-   Focusing via tab should show the URL preview at the bottom of the browser window
+    -   Known behavior exceptions:
+        -   Firefox on macOS - Links are not focusable via tab by default. [See this stackoverflow page for how to allow tab focus of links](https://stackoverflow.com/questions/11704828/how-to-allow-keyboard-focus-of-links-in-firefox).
+        -   Safari - Focusing via tab does not show the URL preview at the bottom of the browser, which matches the behavior of native anchors.
+-   Pressing ENTER when focused should activate the link
+-   Pressing the MENU KEY on the keyboard while the link is focused should open the same link menu as a right click
+
+Interactions specific to anchors visualized as text:
+
+-   Selecting the link through click and drag and then copying it should result in the expected string being copied to the clipboard
+
+<Canvas of={anchorPatternStories.anchorPatterns} />
+<Controls of={anchorPatternStories.anchorPatterns} />