[eslint-plugin] Add button-group-no-invalid-children rule

packages/eslint-plugin/README.md

@@ -363,6 +363,86 @@ This rule reports the pattern but does not autofix it, because the tooltip's `co
 
 When the render-prop child is not an `EuiToolTip`, `beforeMessage` simply configures `EuiCopy`'s own tooltip and the pattern is left untouched.
 
+### `@elastic/eui/button-group-no-invalid-children`
+
+Enforce that `EuiButtonGroup` children (when using the Children API) are valid button components.
+
+Valid direct children are:
+- `variant="default"`: `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon`
+
+Besides those button components, these three wrapper components are also allowed: `EuiPopover`, `EuiToolTip` and `EuiCopy`.
+
+#### Examples
+
+```tsx
+// ✗ Bad - non-button elements
+<EuiButtonGroup legend="Actions">
+  <div>Not a button</div>
+  <EuiFlexGroup>...</EuiFlexGroup>
+</EuiButtonGroup>
+
+// ✓ Good - direct buttons
+<EuiButtonGroup legend="Actions">
+  <EuiButton>Save</EuiButton>
+  <EuiButtonEmpty color="text">Cancel</EuiButtonEmpty>
+</EuiButtonGroup>
+
+// ✓ Good - icon button with tooltip
+<EuiButtonGroup legend="Actions">
+  <EuiButton>Save</EuiButton>
+  <EuiToolTip content="Delete">
+    <EuiButtonIcon iconType="trash" aria-label="Delete" />
+  </EuiToolTip>
+</EuiButtonGroup>
+
+// ✓ Good - EuiCopy with render prop (expression or block body)
+<EuiButtonGroup legend="Actions">
+  <EuiCopy textToCopy="text">
+    {(copy) => <EuiButton onClick={copy}>Copy</EuiButton>}
+  </EuiCopy>
+</EuiButtonGroup>
+
+// ✓ Good - .map() with expression or block body
+<EuiButtonGroup legend="Actions">
+  {buttons.map((b) => <EuiButton key={b.id} onClick={b.onClick}>{b.label}</EuiButton>)}
+</EuiButtonGroup>
+
+// ✓ Good - EuiPopover with a button trigger
+<EuiButtonGroup legend="Actions">
+  <EuiPopover
+    button={<EuiButton onClick={togglePopover}>More</EuiButton>}
+    isOpen={isOpen}
+    closePopover={closePopover}
+  >
+    Panel content
+  </EuiPopover>
+</EuiButtonGroup>
+
+// ✓ Good - EuiPopover with an EuiToolTip-wrapped icon trigger
+<EuiButtonGroup legend="Actions">
+  <EuiPopover
+    button={
+      <EuiToolTip content="More options">
+        <EuiButtonIcon iconType="boxesVertical" aria-label="More options" />
+      </EuiToolTip>
+    }
+    isOpen={isOpen}
+    closePopover={closePopover}
+  >
+    Panel content
+  </EuiPopover>
+</EuiButtonGroup>
+```
+
+#### Custom button wrapper components
+
+If a project-specific button component (e.g. `<SaveButton />`) is used as a child and the rule cannot resolve it statically, it reports `invalidUnresolvableChild` which suggests suppressing the rule inline with a comment:
+
+```tsx
+// eslint-disable-next-line @elastic/eui/button-group-no-invalid-children -- SaveButton returns EuiButton
+<SaveButton />
+```
+
 ## Testing
 
 ### Running unit tests

packages/eslint-plugin/changelogs/upcoming/9849.md

@@ -0,0 +1 @@
+- Added `button-group-no-invalid-children` rule

packages/eslint-plugin/src/index.ts

@@ -28,6 +28,7 @@ import { EuiBadgeAccessibilityRules } from './rules/a11y/badge_accessibility_rul
 import { EuiIconAccessibilityRules } from './rules/a11y/icon_accessibility_rules';
 import { TooltipNoInteractiveContent } from './rules/a11y/tooltip_no_interactive_content';
 import { TooltipButtonIconWrap } from './rules/a11y/tooltip_button_icon_wrap';
+import { ButtonGroupNoInvalidChildren } from './rules/button_group_no_invalid_children';
 
 const config = {
   rules: {
@@ -54,12 +55,14 @@ const config = {
     'require-href-for-link': RequireHrefForLink,
     'tooltip-no-interactive-content': TooltipNoInteractiveContent,
     'tooltip-button-icon-wrap': TooltipButtonIconWrap,
+    'button-group-no-invalid-children': ButtonGroupNoInvalidChildren,
   },
   configs: {
     recommended: {
       plugins: ['@elastic/eslint-plugin-eui'],
       rules: {
         '@elastic/eui/accessible-interactive-element': 'warn',
+        '@elastic/eui/button-group-no-invalid-children': 'error',
         '@elastic/eui/callout-announce-on-mount': 'warn',
         '@elastic/eui/callout-prefer-props-for-content': 'warn',
         '@elastic/eui/consistent-is-invalid-props': 'warn',

packages/eslint-plugin/src/rules/a11y/tooltip_no_interactive_content.ts

@@ -11,6 +11,8 @@ import {
   INTERACTIVE_EUI_COMPONENTS,
   CONDITIONALLY_INTERACTIVE_EUI_COMPONENTS,
 } from '../../utils/constants';
+import { walkJsxChildren } from '../../utils/walk_jsx_children';
+import { getElementName } from '../../utils/get_element_name';
 
 const TOOLTIP_COMPONENTS = ['EuiToolTip', 'EuiIconTip'];
 const TOOLTIP_CONTENT_PROPS = ['content', 'title'];
@@ -32,43 +34,6 @@ const INTERACTIVE_ELEMENTS = new Set([
   ),
 ]);
 
-function findInteractiveElement(
-  node: TSESTree.Node
-): TSESTree.JSXOpeningElement | null {
-  if (node.type === 'JSXElement') {
-    const el = node as TSESTree.JSXElement;
-    const { name } = el.openingElement;
-
-    if (name.type === 'JSXIdentifier' && INTERACTIVE_ELEMENTS.has(name.name)) {
-      return el.openingElement;
-    }
-
-    for (const child of el.children) {
-      const found = findInteractiveElement(child);
-      if (found) return found;
-    }
-  } else if (node.type === 'JSXFragment') {
-    for (const child of (node as TSESTree.JSXFragment).children) {
-      const found = findInteractiveElement(child);
-      if (found) return found;
-    }
-  } else if (node.type === 'JSXExpressionContainer') {
-    const { expression } = node as TSESTree.JSXExpressionContainer;
-    if (expression.type !== 'JSXEmptyExpression') {
-      return findInteractiveElement(expression);
-    }
-  } else if (node.type === 'LogicalExpression') {
-    const { left, right } = node as TSESTree.LogicalExpression;
-    return findInteractiveElement(left) ?? findInteractiveElement(right);
-  } else if (node.type === 'ConditionalExpression') {
-    const { consequent, alternate } = node as TSESTree.ConditionalExpression;
-    return (
-      findInteractiveElement(consequent) ?? findInteractiveElement(alternate)
-    );
-  }
-  return null;
-}
-
 export const TooltipNoInteractiveContent = ESLintUtils.RuleCreator.withoutDocs({
   create(context) {
     return {
@@ -101,19 +66,37 @@ export const TooltipNoInteractiveContent = ESLintUtils.RuleCreator.withoutDocs({
             continue;
           }
 
-          const interactiveEl = findInteractiveElement(expression);
-          if (interactiveEl) {
-            context.report({
-              node: interactiveEl,
-              messageId: 'noInteractiveContent',
-              data: {
-                propName: (attr.name as TSESTree.JSXIdentifier).name,
-                componentName,
-                elementName: (interactiveEl.name as TSESTree.JSXIdentifier)
-                  .name,
+          let found = false;
+
+          walkJsxChildren(
+            expression,
+            (leaf) => {
+              if (found || leaf.type !== 'JSXElement') return;
+
+              const el = leaf as TSESTree.JSXElement;
+              const name = getElementName(el.openingElement);
+
+              if (!name || !INTERACTIVE_ELEMENTS.has(name)) return;
+
+              context.report({
+                node: el.openingElement,
+                messageId: 'noInteractiveContent',
+                data: {
+                  propName: (attr.name as TSESTree.JSXIdentifier).name,
+                  componentName,
+                  elementName: name,
+                },
+              });
+              found = true;
+            },
+            {
+              shouldSkip: (el) => {
+                const name = getElementName(el.openingElement);
+
+                return !name || !INTERACTIVE_ELEMENTS.has(name);
               },
-            });
-          }
+            }
+          );
         }
       },
     };