fix(lint): no-excessive-primary-actions rule to handle popover elements

- Added tests to ensure emphasis buttons inside popover elements are ignored.
- Implemented logic to count emphasis buttons outside popover elements, ensuring proper validation.
- Introduced a helper function to check for popover ancestors in the DOM structure.

This update improves the linting accuracy for emphasis button usage in complex UI structures.

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/lint/src/eslint/rules/no-excessive-primary-actions.test.ts

@@ -80,6 +80,51 @@ describe('noExcessivePrimaryActions', () => {
     });
   });
 
+  it('should ignore emphasis buttons inside popover elements', () => {
+    tester.run('popover emphasis buttons', rule, {
+      valid: [
+        `<nve-button interaction="emphasis">Page action one</nve-button>
+         <nve-dialog>
+           <nve-dialog-footer>
+             <nve-button interaction="emphasis">Dialog action one</nve-button>
+           </nve-dialog-footer>
+         </nve-dialog>
+         <nve-dialog>
+           <nve-dialog-footer>
+             <nve-button interaction="emphasis">Dialog action two</nve-button>
+           </nve-dialog-footer>
+         </nve-dialog>
+         <nve-button interaction="emphasis">Page action two</nve-button>`,
+        `<nve-drawer><nve-button interaction="emphasis">Drawer action</nve-button></nve-drawer>
+         <nve-dropdown><nve-button interaction="emphasis">Dropdown action</nve-button></nve-dropdown>
+         <nve-notification><nve-button interaction="emphasis">Notification action</nve-button></nve-notification>
+         <nve-notification-group><nve-button interaction="emphasis">Group action</nve-button></nve-notification-group>
+         <nve-page-loader><nve-button interaction="emphasis">Loader action</nve-button></nve-page-loader>
+         <nve-toast><nve-button interaction="emphasis">Toast action</nve-button></nve-toast>
+         <nve-toggletip><nve-button interaction="emphasis">Toggletip action</nve-button></nve-toggletip>
+         <nve-tooltip><nve-button interaction="emphasis">Tooltip action</nve-button></nve-tooltip>`
+      ],
+      invalid: []
+    });
+  });
+
+  it('should continue counting emphasis buttons outside popover elements', () => {
+    tester.run('page emphasis buttons around popovers', rule, {
+      valid: [],
+      invalid: [
+        {
+          code: `<nve-button interaction="emphasis">Page action one</nve-button>
+                 <nve-dialog>
+                   <nve-button interaction="emphasis">Dialog action</nve-button>
+                 </nve-dialog>
+                 <nve-button interaction="emphasis">Page action two</nve-button>
+                 <nve-button interaction="emphasis">Page action three</nve-button>`,
+          errors: [error]
+        }
+      ]
+    });
+  });
+
   it('should count separate tagged templates independently', () => {
     const javascriptTester = new RuleTester({
       languageOptions: {

projects/lint/src/eslint/rules/no-excessive-primary-actions.ts

@@ -4,10 +4,29 @@
 import type { Rule } from 'eslint';
 import { createVisitors } from '@html-eslint/eslint-plugin/lib/rules/utils/visitors.js';
 import { findAttr } from '@html-eslint/eslint-plugin/lib/rules/utils/node.js';
+import { elements } from '../internals/metadata.js';
 import type { HtmlTagNode } from '../rule-types.js';
 
 declare const __ELEMENTS_PAGES_BASE_URL__: string;
 const MAX_EMPHASIS_BUTTONS = 2;
+const POPOVER_ELEMENTS: ReadonlySet<string> = new Set(
+  elements
+    .filter(element => element.manifest?.metadata?.behavior === 'popover')
+    .map(element => element.name.toLowerCase())
+);
+
+function hasPopoverAncestor(node: HtmlTagNode): boolean {
+  let current = node.parent;
+
+  while (current) {
+    if (current.name && POPOVER_ELEMENTS.has(current.name.toLowerCase())) {
+      return true;
+    }
+    current = current.parent;
+  }
+
+  return false;
+}
 
 const rule = {
   meta: {
@@ -32,7 +51,7 @@ const rule = {
         emphasisButtonCount = 0;
       },
       Tag(node: HtmlTagNode) {
-        if (node.name.toLowerCase() !== 'nve-button') {
+        if (node.name.toLowerCase() !== 'nve-button' || hasPopoverAncestor(node)) {
           return;
         }