feat: add tag badge to palette picker

[nickofthyme]

Summary

Adds an EuiBadge to the EuiColorPalettePicker list items. This allows tagging the main palette as Default without using parenthesis (i.e. Elastic (default)), see elastic/kibana#192848 (comment).

See storybook demo here.

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
• Release checklist
  • A changelog entry exists and is marked appropriately.

[nickofthyme]

I changed this so that when the badge is placed inside a clickable component, such that clicking the badge will bubble up and trigger a click handler, the cursor should adopt to the parent component style by default. If the badge itself is clickable, this cursor style is overridden.

[cee-chen]

Rather than add an API for an extremely specific use-case, why not make title more flexible and allow it to render a React.JSX.Element? Consumers who need a badge can then then render their own flex wrappers etc as needed.

If we want to put some guard rails around custom renders, I'd also be open to a more limited titlePrepend/titleAppend API instead, which would allow for more than just badges (e.g. icons, etc.)

[nickofthyme]

Ok I made the title to be a ReactNode instead, see e6813a0.

[MichaelMarcialis]

@nickofthyme: Apologies for sticking my nose into this PR. Regardless of the technical implementation, I'm personally not a fan of appending an EuiBadge to indicate the default. The badge has a thicker font weight than the actual title of the color palette and is given far too heavy of an emphasis. I'd much prefer sticking with a basic parenthetical (default), or perhaps giving it a similar treatment to form label appends (quick example below).

Thoughts?

CCing @gvnmagni.

[nickofthyme]

No problem at all, happy to get your thoughts. I like your proposal better. Updated in fb1b41d.

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8208/
• Storybook: https://eui.elastic.co/pr_8208/storybook
• New docs: https://eui.elastic.co/pr_8208/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a31b0fa

History

• 💚 Build #3193 succeeded 53737e3
• 💔 Build #3192 failed 0f39903
• 💔 Build #3183 failed 5fddae9

[cee-chen]

I'm going to be an annoying jerk here - based on Marcialis's mocks, I'd rather add new prepend/append APIs over allowing title to be a ReactNode 🙈 It has the added benefit of less string/type shenanigans, and also matching existing APIs in EuiComboBox/EuiSelectable.