feat: add `append` option to palette picker options by nickofthyme · Pull Request #8208 · elastic/eui

nickofthyme · 2024-12-05T21:39:12Z

Summary

Updated EuiColorPalettePicker - adds append to EuiColorPalettePickerPaletteProps to support appending custom content to the title. This allows tagging the main elastic 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 · 2024-12-05T21:44:05Z

packages/eui/src/components/badge/badge.styles.ts

      white-space: nowrap;
      text-decoration: none;
-      cursor: default;
+      cursor: inherit;


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 · 2024-12-06T17:05:43Z

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 · 2024-12-06T19:06:28Z

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

MichaelMarcialis · 2024-12-09T18:15:36Z

@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 · 2024-12-09T18:19:07Z

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

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx

mgadewoll · 2025-01-13T09:20:45Z

@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

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx

packages/eui/changelogs/upcoming/8208.md

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx

- rename storybook story

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.

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx

packages/website/docs/components/forms/color_selection.mdx

kibanamachine · 2025-01-15T11:10:35Z

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 · 2025-01-15T11:10:46Z

💚 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

mgadewoll

🚢 🐈‍⬛ Thanks for the contribution and your patience! 🎉

to account for the `title` being mandatory on EuiColorPalettePickerPaletteProps See elastic/eui#8208 (comment)

`99.0.0-borealis.1` ⏩ `99.1.0-borealis.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- # `@elastic/eui` ## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0) - Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([#8208](elastic/eui#8208)) - Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility ([#8255](elastic/eui#8255)) - Added suppport for `titleColor` variant `warning` on `EuiStat` ([#8278](elastic/eui#8278)) # `@elastic/eui-theme-borealis` ## `v0.0.9` - [Visual Refresh] Support new theme tokens on JSON exports ([#8277](elastic/eui#8277)) - Remap few colors for EuiLoadingSpinner and EuiLoadingChart ([#8276](elastic/eui#8276)) - [Visual Refresh] Update floating border on EuiPanel ([#8270](elastic/eui#8270)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: nickofthyme <nicholas.partridge@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

`98.2.2-borealis.0` ⏩ `99.3.0-classic.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## [`v99.3.0`](https://github.com/elastic/eui/releases/v99.3.0) - Updated table components to support adding tooltips to header cells ([#8273](elastic/eui#8273)) - Added `columns.nameTooltip` on `EuiBasicTable` - Added `tooltipProps` prop on `EuiTableHeaderCell` - Added `accent` color option to `EuiCallOut` ([#8303](elastic/eui#8303)) - Updated `EuiInlineEditForm`'s `onCancel` prop type to allow uncontrolled mode usage ([#8307](elastic/eui#8307)) - Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`, `EuiMarkdownFormat`, and `EuiMarkdownEditor` components. ([#8317](elastic/eui#8317)) - Updated `EuiAccordion` to prevent content from being transitioned on initial render when `initialIsOpen=true` ([#8327](elastic/eui#8327)) **Bug fixes** - Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date would append the date instead of replace it ([#8311](elastic/eui#8311)) ## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0) - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([#8271](elastic/eui#8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([#8285](elastic/eui#8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([#8289](elastic/eui#8289)) **Bug fixes** - Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([#8251](elastic/eui#8251)) - Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. ([#8271](elastic/eui#8271)) ## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0) - Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([#8208](elastic/eui#8208)) - Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility ([#8255](elastic/eui#8255)) - Added support for `titleColor` variant `warning` on `EuiStat` ([#8278](elastic/eui#8278)) ## [`v99.0.0`](https://github.com/elastic/eui/releases/v99.0.0) - Added two new icons: `createGenericJob` and `createGeoJob` ([#8248](elastic/eui#8248)) - Added new icon `section` ([#8261](elastic/eui#8261)) **Bug fixes** - Ensures that the `values` of `EuiI18n` used in `EuiPagination` use `key` attributes to prevent potential ["unique key" warnings](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). ([#8243](elastic/eui#8243)) **Breaking changes** - Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead ([#8256](elastic/eui#8256)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Arturo Castillo Delgado <arturo.castillo@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

`98.2.2-borealis.0` ⏩ `99.3.0-classic.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## [`v99.3.0`](https://github.com/elastic/eui/releases/v99.3.0) - Updated table components to support adding tooltips to header cells ([elastic#8273](elastic/eui#8273)) - Added `columns.nameTooltip` on `EuiBasicTable` - Added `tooltipProps` prop on `EuiTableHeaderCell` - Added `accent` color option to `EuiCallOut` ([elastic#8303](elastic/eui#8303)) - Updated `EuiInlineEditForm`'s `onCancel` prop type to allow uncontrolled mode usage ([elastic#8307](elastic/eui#8307)) - Added ES|QL syntax highlighting for `EuiCode`, `EuiCodeBlock`, `EuiMarkdownFormat`, and `EuiMarkdownEditor` components. ([elastic#8317](elastic/eui#8317)) - Updated `EuiAccordion` to prevent content from being transitioned on initial render when `initialIsOpen=true` ([elastic#8327](elastic/eui#8327)) **Bug fixes** - Fixed a bug on `EuiSuperDatePicker` where pasting an absolute date would append the date instead of replace it ([elastic#8311](elastic/eui#8311)) ## [`v99.2.0`](https://github.com/elastic/eui/releases/v99.2.0) - Changed `EuiFieldText` styles to prioritize `disabled` styling over `readonly`. ([elastic#8271](elastic/eui#8271)) - Added `plugs` and `web` glyphs to `EuiIcon` ([elastic#8285](elastic/eui#8285)) - Update `title` on `EuiColorPalettePickerPaletteProps` to be optional ([elastic#8289](elastic/eui#8289)) **Bug fixes** - Fixed an issue with EuiDataGrid with auto row height resulting in a table of 0 height ([elastic#8251](elastic/eui#8251)) - Fixed `disabled` behavior of `EuiFieldText` to prevent input changes. ([elastic#8271](elastic/eui#8271)) ## [`v99.1.0`](https://github.com/elastic/eui/releases/v99.1.0) - Updated `EuiColorPalettePicker` - adds `append` to `EuiColorPalettePickerPaletteProps` to support appending custom content to the title ([elastic#8208](elastic/eui#8208)) - Updated font-weight and font-size of `EuiBetaBadge`s to improve legibility ([elastic#8255](elastic/eui#8255)) - Added support for `titleColor` variant `warning` on `EuiStat` ([elastic#8278](elastic/eui#8278)) ## [`v99.0.0`](https://github.com/elastic/eui/releases/v99.0.0) - Added two new icons: `createGenericJob` and `createGeoJob` ([elastic#8248](elastic/eui#8248)) - Added new icon `section` ([elastic#8261](elastic/eui#8261)) **Bug fixes** - Ensures that the `values` of `EuiI18n` used in `EuiPagination` use `key` attributes to prevent potential ["unique key" warnings](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). ([elastic#8243](elastic/eui#8243)) **Breaking changes** - Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead ([elastic#8256](elastic/eui#8256)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Arturo Castillo Delgado <arturo.castillo@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

feat: add tag badge to palette picker

5fddae9

nickofthyme requested a review from a team as a code owner December 5, 2024 21:39

nickofthyme commented Dec 5, 2024

View reviewed changes

refactor: make title a react node, remove tag prop api

e6813a0

nickofthyme added 2 commits December 6, 2024 13:12

chore: add changelog

0f39903

fix: linting errors

53737e3

nickofthyme and others added 2 commits December 9, 2024 15:25

chore: update story based on designer input

fb1b41d

Merge branch 'main' into palette-tagging

a31b0fa

cee-chen reviewed Dec 13, 2024

View reviewed changes

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx Outdated Show resolved Hide resolved

nickofthyme added 3 commits January 10, 2025 17:59

chore: update api to append prop

ebb9f02

Merge branch 'main' into palette-tagging

aa965a9

fix: linting errors

ab98e0e

nickofthyme requested a review from cee-chen January 11, 2025 00:03

mgadewoll requested review from mgadewoll and removed request for cee-chen January 13, 2025 09:20

JasonStoltz assigned mgadewoll Jan 13, 2025

mgadewoll reviewed Jan 14, 2025

View reviewed changes

nickofthyme added 2 commits January 14, 2025 09:49

chore: address pr comments

0b20d96

chore: add duplicate docs to website

bc39846

nickofthyme requested a review from mgadewoll January 14, 2025 16:24

mgadewoll added 4 commits January 15, 2025 11:31

docs: combine appended title sections

15417fc

- rename storybook story

refactor: ensure appended title doesn't break on mobile

abf7db2

test: update snapshot

d702d52

test(VRT): add reference images

1684acd

mgadewoll reviewed Jan 15, 2025

View reviewed changes

packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx Outdated Show resolved Hide resolved

packages/website/docs/components/forms/color_selection.mdx Outdated Show resolved Hide resolved

mgadewoll approved these changes Jan 16, 2025

View reviewed changes

mgadewoll merged commit 6a20937 into elastic:main Jan 16, 2025

nickofthyme deleted the palette-tagging branch January 16, 2025 14:57

acstll mentioned this pull request Jan 22, 2025

Upgrade EUI to v99.1.0 elastic/kibana#207724

Merged

acstll added a commit to acstll/kibana that referenced this pull request Jan 22, 2025

Update COLOR_PALETTE type

a56f391

to account for the `title` being mandatory on EuiColorPalettePickerPaletteProps See elastic/eui#8208 (comment)

nickofthyme changed the title ~~feat: add tag badge to palette picker~~ feat: add append option to palette picker options Jan 22, 2025

nickofthyme mentioned this pull request Jan 22, 2025

[EuiColorPalettePicker] Make title optional on palettes props #8289

Merged

1 task

weronikaolejniczak pushed a commit to cee-chen/eui that referenced this pull request Feb 10, 2025

feat: add tag badge to palette picker (elastic#8208)

726b4d8

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

tkajtoch mentioned this pull request Feb 20, 2025

[8.x] Upgrade EUI to v99.3.0-classic.0 elastic/kibana#211917

Merged

Conversation

nickofthyme commented Dec 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

nickofthyme Dec 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Dec 6, 2024

Uh oh!

nickofthyme commented Dec 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelMarcialis commented Dec 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nickofthyme commented Dec 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Jan 13, 2025

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Jan 15, 2025

Uh oh!

elasticmachine commented Jan 15, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

nickofthyme commented Dec 5, 2024 •

edited

Loading

nickofthyme Dec 5, 2024 •

edited

Loading

nickofthyme commented Dec 6, 2024 •

edited

Loading

MichaelMarcialis commented Dec 9, 2024 •

edited

Loading

nickofthyme commented Dec 9, 2024 •

edited

Loading