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.

[mgadewoll]

@nickofthyme Fyi, I'll be taking over as reviewer on this 🙂

[mgadewoll]

I think we can also update this section in our EUI docs to mention the possibility to add custom content and add an append to one option for the examples:

• packages/eui/src-docs/src/views/color_picker/color_picker_example.js
• packages/website/docs/components/forms/color_selection.mdx

[mgadewoll]

@nickofthyme I took the liberty to add the mentioned changes to your branch. I hope you don't mind.

Additionally I ran snapshot updates to unblock the pipeline and ran VRT to add images for the newly added story.

[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: 1684acd

History

• 💔 Build #3320 failed bc39846
• 💔 Build #3314 failed ab98e0e
• 💚 Build #3203 succeeded a31b0fa
• 💚 Build #3193 succeeded 53737e3
• 💔 Build #3192 failed 0f39903
• 💔 Build #3183 failed 5fddae9

cc @mgadewoll