POC of honoring cmd+click events in cards to open card links in a new tab

[JasonStoltz]

Summary

Using an href property in an EuiCard will force the EuiCard to render the title as an anchor tag:

Logic for this is here.

Clicking on the title of a card using href works like any other link. Nothing special here.

However, when passing an href to a card, the expectation is that the entire card is a clickable link, not just the title. For that reason, we add an additional click handler to the entire card, which will manually trigger an click event on our title anchor if anywhere other than the title anchor is clicked.

So basically, if someone clicks on on a card anywhere other than the title, we're going to pretend that they actually clicked on the title, and manually simulate that click event.

That logic is here.

The problem with this, is that many folks use cmd+click in order to open links in a new tab. This does work when clicking directly on the title link, but does not work when clicking anywhere else on the card.

Here is a codesandbox example: https://c59jqv.csb.app/

This PR resolves this issue. However, I am not sure:

1. How it works cross-browser
2. If it's OK to manually force a PointerEvent (what if the original event was a MouseEvent?)

Opening this up for thoughts and feedback.

QA

Remove or strikethrough items that do not apply to your PR.

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
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[JasonStoltz]

Apparently this is a community submitted PR.

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: a964a4d

Failed CI Steps

• 🔨 EUI pull request test

History