[ESLint] Add button-group-no-invalid-children rule

packages/eslint-plugin/README.md

@@ -328,6 +328,86 @@ it('shows tooltip on focus', async () => {
 ```
 
 
+### `@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

@@ -27,6 +27,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: {
@@ -52,6 +53,7 @@ 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: {
@@ -78,6 +80,7 @@ const config = {
         '@elastic/eui/require-href-for-link': 'warn',
         '@elastic/eui/tooltip-no-interactive-content': 'warn',
         '@elastic/eui/tooltip-button-icon-wrap': 'warn',
+        '@elastic/eui/button-group-no-invalid-children': 'warn',
       },
     },
   },