[EuiBreadcrumb] Allow popover content to close the breadcrumb popover

[cee-chen]

Summary

@sebelga pinged me with the request for serverless nav work to be given the ability to optionally control EUI's breadcrumb popover state. His use case is for consumer popover content that does something/takes the user somewhere and then closes the popover, e.g.

The approach I decided to take here was to allow popoverContent to be a render function that passes the closePopover callback to consumers. Example usage:

<EuiBreadcrumbs
  breadcrumbs={[
    {
      text: 'My deployment',
      popoverContent: (closePopover) => (
        <EuiButtonEmpty
          onClick={() => {
            goSomewhere();
            closePopover();
          }}
        >
          Go to some deployment
        </EuiButtonEmpty>
      ),
    },
    { text: 'Another breadcrumb' },
  ]}
/>

I'm open to feedback as to whether we think this is the best approach in terms of giving consumers more flexibility vs handling internals for consumers so they don't have to.

QA

• Go to https://eui.elastic.co/pr_7555/#/navigation/breadcrumbs#popover-content
• Confirm that clicking any of the links in the My deployment breadcrumb closes the breadcrumb popover

General checklist

• Browser QA
  - [ ] Checked in both light and dark modes
  - [ ] Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Updated documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
• Code quality checklist
  • Added or updated jest and cypress tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
• Designer checklist - N/A

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7555/
• Storybook: https://eui.elastic.co/pr_7555/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a768272

[1Copenut]

👍 LGTM! I tested with keyboard and mouse clicks in four evergreen browsers on MacOS.

[cee-chen]

Going to go ahead and merge this as Sebastian has approved the render function architecture as meeting his use case - if anyone else on the team feels strongly that complete consumer control would be better, please leave a comment before next week's release and I can revisit/revert as necessary.

Edit: Actually I'm going to hold on merging until tomorrow to give the EU folks time to review/leave comments, but will merge by my EOD Thursday!

[mgadewoll]

To me the updates make sense. 👍 It allows for more external control without opening all flood gates and being too invasive. Imho, if we find in the future that more control would be needed it could still be assessed then.

[cee-chen]

Thanks a ton Lene, totally agreed!