Add interaction stories for buttons, number field, and anchor

change/@ni-nimble-components-ceebd404-0fb3-43e5-8f98-04f4eed64531.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add interaction stories for buttons, number field, and anchor",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/nimble-components/.storybook/main.js

@@ -23,7 +23,8 @@ export const addons = [
         }
     },
     '@storybook/addon-a11y',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
+    'storybook-addon-pseudo-states'
 ];
 export function webpackFinal(config) {
     config.module.rules.push({

packages/nimble-components/package.json

@@ -160,6 +160,7 @@
     "rollup-plugin-sourcemaps": "^0.6.3",
     "source-map-loader": "^5.0.0",
     "storybook": "^7.6.13",
+    "storybook-addon-pseudo-states": "^2.2.1",
     "ts-loader": "^9.2.5",
     "typescript": "~4.8.2",
     "webpack": "^5.75.0",

packages/nimble-components/src/anchor-button/tests/anchor-button-matrix.stories.ts

@@ -10,7 +10,14 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { textCustomizationWrapper } from '../../utilities/tests/text-customization';
@@ -49,33 +56,50 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${anchorButtonTag}
+        class="${() => interaction}"
         href="https://nimble.ni.dev"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconLinkTag} slot="start"></${iconLinkTag}>`)}
-            ${() => `${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
+            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Link ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderRightTag} slot="end"></${iconArrowExpanderRightTag}>`)}
     </${anchorButtonTag}>
 `;
 
 export const anchorButtonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        nonInteractionStates,
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
         partVisibilityStates
     ])
 );
 
+export const anchorButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            disabledStates,
+            appearanceStates,
+            appearanceVariantStates,
+            [[false, true, false]]
+        ],
+        disabledInteractionsFilter
+    )
+);
+
 export const hiddenAnchorButton: StoryFn = createStory(
     hiddenWrapper(
         html`<${anchorButtonTag} hidden

packages/nimble-components/src/anchor/tests/anchor-matrix.stories.ts

@@ -12,6 +12,11 @@ import { textCustomizationWrapper } from '../../utilities/tests/text-customizati
 import { AnchorAppearance } from '../types';
 import { bodyFont } from '../../theme-provider/design-tokens';
 import { anchorTag } from '..';
+import {
+    interactionStates,
+    nonInteractionStates,
+    type InteractionState
+} from '../../utilities/tests/states';
 
 const metadata: Meta = {
     title: 'Tests/Anchor',
@@ -41,26 +46,48 @@ type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, href]: DisabledState,
     [underlineHiddenName, underlineHidden]: UnderlineHiddenState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${anchorTag}
+        class="${() => interaction}"
         href=${() => href}
         ?underline-hidden="${() => underlineHidden}"
         appearance="${() => appearance}"
         style="margin-right: 8px; margin-bottom: 8px;">
-            ${() => `${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
+            ${() => `${interactionName} ${underlineHiddenName} ${appearanceName} ${disabledName} Link`}</${anchorTag}>
 `;
 
 export const anchorThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        nonInteractionStates,
         disabledStates,
         underlineHiddenStates,
         appearanceStates
     ])
 );
 
+export const anchorInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            disabledStates,
+            underlineHiddenStates,
+            appearanceStates
+        ],
+        // A custom DisabledState type is used in this file, so we can't use the shared disabledInteractionsFilter
+        (interactionState: InteractionState, disabledState: DisabledState) => {
+            return (
+                disabledState[0] !== 'Disabled'
+                || interactionState[0] === 'Hovered'
+            );
+        }
+    )
+);
+
 export const hiddenAnchor: StoryFn = createStory(
     hiddenWrapper(html`<${anchorTag} hidden>Hidden Anchor</${anchorTag}>`)
 );

packages/nimble-components/src/button/tests/button-matrix.stories.ts

@@ -7,7 +7,14 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { textCustomizationWrapper } from '../../utilities/tests/text-customization';
@@ -47,32 +54,49 @@ type AppearanceVariantState = (typeof appearanceVariantStates)[number];
 
 // prettier-ignore
 const component = (
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
     [appearanceName, appearance]: AppearanceState,
     [appearanceVariantName, appearanceVariant]: AppearanceVariantState,
     [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
 ): ViewTemplate => html`
     <${buttonTag}
+        class="${() => interaction}"
         appearance="${() => appearance}"
         appearance-variant="${() => appearanceVariant}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
+            ${() => `${interactionName} ${appearanceVariantName} ${appearanceName} Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
     </${buttonTag}>
 `;
 
 export const buttonThemeMatrix: StoryFn = createMatrixThemeStory(
     createMatrix(component, [
+        nonInteractionStates,
         disabledStates,
         appearanceStates,
         appearanceVariantStates,
         partVisibilityStates
     ])
 );
 
+export const buttonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            disabledStates,
+            appearanceStates,
+            appearanceVariantStates,
+            [[false, true, false]]
+        ],
+        disabledInteractionsFilter
+    )
+);
+
 export const hiddenButton: StoryFn = createStory(
     hiddenWrapper(html`<${buttonTag} hidden>Hidden Button</${buttonTag}>`)
 );

packages/nimble-components/src/menu-button/tests/menu-button-matrix.stories.ts

@@ -7,14 +7,19 @@ import {
     sharedMatrixParameters,
     createMatrixThemeStory
 } from '../../utilities/tests/matrix';
-import { disabledStates, DisabledState } from '../../utilities/tests/states';
+import {
+    disabledStates,
+    DisabledState,
+    InteractionState,
+    interactionStates,
+    nonInteractionStates,
+    disabledInteractionsFilter
+} from '../../utilities/tests/states';
 import { createStory } from '../../utilities/tests/storybook';
 import { hiddenWrapper } from '../../utilities/tests/hidden';
 import { iconArrowExpanderDownTag } from '../../icons/arrow-expander-down';
 import { iconKeyTag } from '../../icons/key';
 import { menuButtonTag } from '..';
-import { menuTag } from '../../menu';
-import { menuItemTag } from '../../menu-item';
 
 const metadata: Meta = {
     title: 'Tests/Menu Button',
@@ -35,39 +40,72 @@ const partVisibilityStates = [
 ] as const;
 type PartVisibilityState = (typeof partVisibilityStates)[number];
 
+const openStates = [
+    ['', false],
+    ['Open', true]
+] as const;
+type OpenState = (typeof openStates)[number];
+
 const appearanceStates = Object.entries(ButtonAppearance).map(
     ([key, value]) => [pascalCase(key), value]
 );
 type AppearanceState = (typeof appearanceStates)[number];
 
 // prettier-ignore
 const component = (
-    [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
+    [interactionName, interaction]: InteractionState,
     [disabledName, disabled]: DisabledState,
+    [iconVisible, labelVisible, endIconVisible]: PartVisibilityState,
+    [openName, open]: OpenState,
     [appearanceName, appearance]: AppearanceState
 ): ViewTemplate => html`
     <${menuButtonTag}
+        class="${() => interaction}"
         appearance="${() => appearance}"
+        ?open="${() => open}"
         ?disabled=${() => disabled}
         ?content-hidden=${() => !labelVisible}
         style="margin-right: 8px; margin-bottom: 8px;">
             ${when(() => iconVisible, html`<${iconKeyTag} slot="start"></${iconKeyTag}>`)}
-            ${() => `${appearanceName!} Menu Button ${disabledName}`}
+            ${() => `${interactionName} ${openName} ${appearanceName!} Menu Button ${disabledName}`}
             ${when(() => endIconVisible, html`<${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>`)}
-
-        <${menuTag} slot="menu">
-            <${menuItemTag}>Item 1</${menuItemTag}>
-            <${menuItemTag}>Item 2</${menuItemTag}>
-        </${menuTag}>
     </${menuButtonTag}>
 `;
 
 export const menuButtonThemeMatrix: StoryFn = createMatrixThemeStory(
-    createMatrix(component, [
-        partVisibilityStates,
-        disabledStates,
-        appearanceStates
-    ])
+    createMatrix(
+        component,
+        [
+            nonInteractionStates,
+            disabledStates,
+            partVisibilityStates,
+            openStates,
+            appearanceStates
+        ],
+        // Disabled and open is not a valid state
+        (
+            _interactionState: InteractionState,
+            disabledState: DisabledState,
+            _partVisibilityState: PartVisibilityState,
+            openState: OpenState
+        ) => {
+            return disabledState[0] !== 'Disabled' || openState[0] !== 'Open';
+        }
+    )
+);
+
+export const menuButtonInteractionsThemeMatrix: StoryFn = createMatrixThemeStory(
+    createMatrix(
+        component,
+        [
+            interactionStates,
+            disabledStates,
+            [[false, true, false]],
+            openStates,
+            appearanceStates
+        ],
+        disabledInteractionsFilter
+    )
 );
 
 export const hiddenMenuButton: StoryFn = createStory(