[eslint] Update button-group-no-invalid-children rule to support selection variant and add button-group-selection-require-id rule

[mgadewoll]

Summary

Note

This PR is related to #9929 which adds variant="selection" to EuiButtonGroup.
This PR should be rebased after merging the implementation PR.

• What:
  • Extends the existing button-group-no-invalid-children ESLint rule with validation for variant="selection"
  • Adds a new button-group-selection-require-id rule that enforces a required id prop on each child button
• Why: Part of the button group redesign work. selection variant behaves the same as segmented variants an we want to enforce expected children usage.
• How:
  • Extends button-group-no-invalid-children to support checks on variant="selection"
  • Adds new rule button-group-selection-require-id which checks if button group children with variant="selection" each have an required id`
• Refactors shared constants and utils for button group rule into a centralized place

Examples - button-group-no-invalid-children for variant="selection"

✅ valid

// EuiButton children only
<EuiButtonGroup legend="Format" variant="selection">
  <EuiButton id="bold">Bold</EuiButton>
  <EuiButton id="italic">Italic</EuiButton>
</EuiButtonGroup>

// EuiButtonIcon children only
<EuiButtonGroup legend="Format" variant="selection">
  <EuiButtonIcon id="bold" iconType="bold" aria-label="Bold" />
  <EuiButtonIcon id="italic" iconType="italic" aria-label="Italic" />
</EuiButtonGroup>

// EuiToolTip wrapping a valid button
<EuiButtonGroup legend="Format" variant="selection">
  <EuiButton id="bold">Bold</EuiButton>
  <EuiToolTip content="Italic text">
    <EuiButton id="italic">Italic</EuiButton>
  </EuiToolTip>
</EuiButtonGroup>

❌ invalid

// EuiButtonEmpty is not valid for selection
<EuiButtonGroup legend="Format" variant="selection">
  <EuiButtonEmpty color="text">Cancel</EuiButtonEmpty>
</EuiButtonGroup>

// mixing EuiButton and EuiButtonIcon is not allowed
<EuiButtonGroup legend="Format" variant="selection">
  <EuiButton id="bold">Bold</EuiButton>
  <EuiButtonIcon id="italic" iconType="italic" aria-label="Italic" />
</EuiButtonGroup>

Examples - button-group-selection-require-id

✅ valid

<EuiButtonGroup legend="Format" variant="selection">
  <EuiButton id="bold">Bold</EuiButton>
  <EuiToolTip content="Italic">
    <EuiButton id="italic">Italic</EuiButton>
  </EuiToolTip>
  <EuiPopover button={<EuiButton id="more">More</EuiButton>} isOpen={false} closePopover={() => {}}>
    Panel content
  </EuiPopover>
</EuiButtonGroup>

❌ invalid

// missing id on direct child
<EuiButtonGroup legend="Format" variant="selection">
  <EuiButton>Bold</EuiButton>
</EuiButtonGroup>

// missing id on button inside EuiToolTip
<EuiButtonGroup legend="Format" variant="selection">
  <EuiToolTip content="Italic">
    <EuiButton>Italic</EuiButton>
  </EuiToolTip>
</EuiButtonGroup>

// missing id on EuiPopover trigger
<EuiButtonGroup legend="Format" variant="selection">
  <EuiPopover button={<EuiButton>More</EuiButton>} isOpen={false} closePopover={() => {}}>
    Panel content
  </EuiPopover>
</EuiButtonGroup>

What the rules validate for variant="selection"

1. button-group-no-invalid-children:

• Valid direct children: EuiButton, EuiButtonIcon
• Valid wrappers: same as other variants (EuiToolTip, EuiPopover, EuiCopy)
• Mixed types: reports invalidMixedTypes when both EuiButton and EuiButtonIcon appear in the same group

2. button-group-selection-require-id:

• Reports missingId for any EuiButton/EuiButtonIcon without an explicit id attribute
• Spread props ({...props}) are skipped conservatively (id may be passed via the spread)
• Only fires for variant="selection" (static string); dynamic variants are skipped

API Changes

⚪ No API changes

Screenshots

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

• CI passes
• verify locally the rules apply and flag invalid usages
  • checkout the PR
  • run yarn workspace @elastic/eslint-plugin-eui build on root
  • run yarn workspace @elastic/eui build:workspaces on root
  • add a testing code example (e.g. see above) and run yarn workspace @elastic/eui lint on root

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[Copilot]

Pull request overview

This PR updates the @elastic/eslint-plugin-eui rules that validate EuiButtonGroup Children API usage to support the new variant="selection" behavior and to enforce that selection children provide ids.

Changes:

• Extend button-group-no-invalid-children validation to include variant="selection" and enforce the same “no mixed EuiButton/EuiButtonIcon types” rule as segmented.
• Add button-group-selection-require-id to require id on EuiButton/EuiButtonIcon children (including supported wrappers) when variant="selection".
• Refactor shared constants/utilities into centralized utils/ modules and update docs/changelog.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/eslint-plugin/src/utils/collect_jsx_children.ts	New shared helper to collect JSX element “leaf” children via walkJsxChildren.
packages/eslint-plugin/src/utils/button_group_constants.ts	Centralizes button-group-related constants (valid buttons/wrappers).
packages/eslint-plugin/src/rules/button_group_selection_require_id.ts	New rule enforcing required id on selection-variant children (and supported wrapper patterns).
packages/eslint-plugin/src/rules/button_group_selection_require_id.test.ts	Adds unit coverage for the new button-group-selection-require-id rule.
packages/eslint-plugin/src/rules/button_group_no_invalid_children.ts	Updates existing rule to validate variant="selection" and generalizes mixed-type error messaging.
packages/eslint-plugin/src/rules/button_group_no_invalid_children.test.ts	Updates/extends tests for selection variant validation and new mixed-type message shape.
packages/eslint-plugin/src/index.ts	Registers the new rule and enables it in the recommended config.
packages/eslint-plugin/README.md	Documents selection-variant behavior for both rules, including examples.
packages/eslint-plugin/changelogs/upcoming/9950.md	Changelog entry for the rule update + new rule.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[weronikaolejniczak]

LGTM 🟢 Only one non-blocking comment.

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 0348ddb

History

• 💚 Build #7630 succeeded f4a6216
• 💚 Build #7629 succeeded 80b782e

cc @mgadewoll

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 0348ddb
• Documentation website
• Storybook
• 🚫 Visual regression tests skipped: No VRT-relevant paths changed

History

• 💚 Build #5011 succeeded f4a6216
• 💚 Build #5010 succeeded 80b782e

cc @mgadewoll