[ESLint][EuiCallOut] Add ESLint rules for EuiCallOut content best practices

[mgadewoll]

Summary

Important

This PR merges into a feature branch.
And it depends on changes from #9642 and requires rebase once that PR is merged.

This PR adds 2 new ESLint rules:

• @elastic/eui/callout-require-title
• @elastic/eui/callout-prefer-props-for-content

Both rules are set to warn. They are meant to help migrate from the legacy component prop usages that passes content via children towards the new API using dedicated text and actionProps props which were introduced in #9642.

Rules

callout-title-required

• Not flagged ✅

<EuiCallOut title="..." />

<EuiCallOut title={dynamicTitle} />

• Flagged 🚫

<EuiCallOut />

<EuiCallOut color="warning" />

callout-prefer-props-for-content

• Not flagged ✅

<EuiCallOut text={<p>...</p>} />

<EuiCallOut actionProps={{ primary: { ... } }} />

<EuiCallOut>
  <MyComplexWidget />
</EuiCallOut>

<EuiCallOut>
  <ComplexLayout>
    <p>...</p>
  </ComplexLayout>
</EuiCallOut>

<EuiPanel>
  <p>...</p>
  <EuiButton>...</EuiButton>
</EuiPanel> 

• Flagged 🚫

// flagged to use `text` prop

<EuiCallOut title="...">
  Plain string
</EuiCallOut>

<EuiCallOut title="...">
  <p>...</p>
</EuiCallOut>

<EuiCallOut title="...">
  <EuiText>
    <p>...</p>
  </EuiText>
</EuiCallOut>

<EuiCallOut title="...">
  <>
    <p>...</p>
  </>
</EuiCallOut>

<EuiCallOut title="...">
  {show && <p>...</p>}
</EuiCallOut>

<EuiCallOut title="...">
  <EuiFlexGroup>
    <EuiFlexItem>
      <p>...</p>
    </EuiFlexItem>
  </EuiFlexGroup>
</EuiCallOut>

// flagged to use `acctionProps` prop

<EuiCallOut title="...">
  <EuiButton onClick={onClick}>...</EuiButton>
</EuiCallOut>

<EuiCallOut title="...">
  <EuiButtonEmpty onClick={onClick}>...</EuiButtonEmpty>
</EuiCallOut>

<EuiCallOut title="...">
  <button type="button" onClick={onClick}>...</button>
</EuiCallOut>

<EuiCallOut title="...">
  <EuiLink href="/">...</EuiLink>
</EuiCallOut>

<EuiCallOut title="...">
  <a href="/">...</a>
</EuiCallOut>

<EuiCallOut title="...">
  <EuiFlexGroup>
    <EuiFlexItem>
      <p>...</p>
    </EuiFlexItem>
    <EuiFlexItem>
      <EuiButton onClick={onClick}>...</EuiButton>
    </EuiFlexItem>
  </EuiFlexGroup>
</EuiCallOut>

<EuiCallOut title="...">
  {show && <EuiButton onClick={onClick}>...</EuiButton>}
</EuiCallOut>

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 / 🟢 Low / 🟡 Moderate / 🔴 High

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

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.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: d441167
• Documentation website
• Storybook

History

• 💚 Build #3676 succeeded 8ba0548

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: d441167

History

• 💚 Build #6614 succeeded 8ba0548

cc @mgadewoll