[EuiCallOut] Add `accent` color callout #8303

ryankeairns · 2025-02-01T00:41:22Z

Related to elastic/platform-ux-team#680

Summary

This PR enables the first, bespoke example seen in the related issue by adding an accent color option to EuiCallOut.

An additional solution may be needed for more complex banners containing illustrations (or use EuiEmptyPrompt).

Preview

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)

packages/eui/src-docs/src/views/call_out/accent.tsx

ryankeairns · 2025-02-04T19:39:12Z

Not certain about including that i8ntokens.json file.

mgadewoll · 2025-02-05T03:20:57Z

Not certain about including that i8ntokens.json file.

We don't manually add those, they are added in the release step automatically. I went ahead an reverted that change (commit).
Out of curiosity, what command did you run that added it? yarn build?

mgadewoll

Thanks for updating the docs! Changes LGTM 🎉

kibanamachine · 2025-02-05T03:48:23Z

Preview staging links for this PR:

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

elasticmachine · 2025-02-05T03:48:26Z

💚 Build Succeeded

Buildkite Build
Commit: 58117d3

History

💚 Build elastic/eui#3408 succeeded b017b44
💚 Build elastic/eui#3392 succeeded 8f99905
💔 Build elastic/eui#3391 failed 80a037f
💔 Build elastic/eui#3388 failed bd67a37

ryankeairns · 2025-02-05T04:19:18Z

Not certain about including that i8ntokens.json file.

We don't manually add those, they are added in the release step automatically. I went ahead an reverted that change (commit). Out of curiosity, what command did you run that added it? yarn build?

Thanks!
Yes. When I was checking the website changes, I noticed the props table had not updated to show the new color option, so I ran the build to confirm it would appear.

mgadewoll · 2025-02-05T04:29:36Z

Thanks! Yes. When I was checking the website changes, I noticed the props table had not updated to show the new color option, so I ran the build to confirm it would appear.

Ah gotcha! Did you try the following commands first to build dependencies?
Those won't trigger i8ntokens.json to be updated.

// on main
// in /packages/website
// docs: https://github.com/elastic/eui/blob/main/packages/website/README.md#building-helper-packages

yarn workspaces foreach -Rpti --from @elastic/eui-website run build

// on eui-theme/borealis
// in /packages/website

yarn build:workspaces

`99.2.0-borealis.0` ⏩ `99.3.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) --- ## [`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)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`99.2.0-borealis.0` ⏩ `99.3.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) --- ## [`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)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit ac01a0c)

`99.2.0-borealis.0` ⏩ `99.3.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) --- ## [`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)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`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>

`99.2.0-borealis.0` ⏩ `99.3.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) --- ## [`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)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

ryankeairns added 5 commits January 31, 2025 16:36

Add accent color callout

bd67a37

Better words

071148c

Add changelog

5bc8551

Fix linting errors

80a037f

My pre-push finally completed!

8f99905

ryankeairns marked this pull request as ready for review February 3, 2025 18:14

ryankeairns requested a review from a team as a code owner February 3, 2025 18:14

mgadewoll reviewed Feb 4, 2025

View reviewed changes

packages/eui/src-docs/src/views/call_out/accent.tsx Show resolved Hide resolved

tkajtoch self-requested a review February 4, 2025 15:50

Update Callout docs on new docs site

58117d3

mgadewoll force-pushed the rk/8102-add-accent-callout branch from b017b44 to 58117d3 Compare February 5, 2025 03:20

mgadewoll approved these changes Feb 5, 2025

View reviewed changes

ryankeairns merged commit 3db18cb into main Feb 5, 2025
5 checks passed

ryankeairns deleted the rk/8102-add-accent-callout branch February 5, 2025 04:19

mgadewoll mentioned this pull request Feb 19, 2025

Upgrade EUI to v99.3.0-borealis.0 elastic/kibana#211671

Merged

tkajtoch mentioned this pull request Feb 20, 2025

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiCallOut] Add `accent` color callout #8303

[EuiCallOut] Add `accent` color callout #8303

Uh oh!

ryankeairns commented Feb 1, 2025 •

edited

Loading

Uh oh!

Uh oh!

ryankeairns commented Feb 4, 2025

Uh oh!

mgadewoll commented Feb 5, 2025

Uh oh!

mgadewoll left a comment

Uh oh!

kibanamachine commented Feb 5, 2025

Uh oh!

elasticmachine commented Feb 5, 2025

Uh oh!

ryankeairns commented Feb 5, 2025

Uh oh!

Uh oh!

mgadewoll commented Feb 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[EuiCallOut] Add accent color callout #8303

[EuiCallOut] Add accent color callout #8303

Uh oh!

Conversation

ryankeairns commented Feb 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Preview

QA

General checklist

Uh oh!

Uh oh!

ryankeairns commented Feb 4, 2025

Uh oh!

mgadewoll commented Feb 5, 2025

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Feb 5, 2025

Uh oh!

elasticmachine commented Feb 5, 2025

💚 Build Succeeded

History

Uh oh!

ryankeairns commented Feb 5, 2025

Uh oh!

Uh oh!

mgadewoll commented Feb 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[EuiCallOut] Add `accent` color callout #8303

[EuiCallOut] Add `accent` color callout #8303

ryankeairns commented Feb 1, 2025 •

edited

Loading