[EuiBasicTable] Implement `nameTooltip` API in `columns` prop by acstll · Pull Request #8273 · elastic/eui

acstll · 2025-01-14T14:01:31Z

Summary

This PR implements the feature request from #7963

It adds a nameTooltip prop for columns in the EuiBasicTable, in order to easily render a tooltip in a column header.

Regarding the actual API, I left a comment in the original issue with a question; and a comment in the source.

Before

name: (
  <EuiToolTip content="Their mascot is the Octokitty">
    <>
      Github{' '}
      <EuiIcon
        size="s"
        color="subdued"
        type="questionInCircle"
        className="eui-alignTop"
      />
    </>
  </EuiToolTip>
),

After

name: 'GibHub',
nameTooltip: {
  content: 'Their mascot is the Octokitty',
},

QA

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 (⚠️ there's the issue with the font rendering, so they might need an update once the issue is resolved)
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)

Resolves #7963

packages/eui/src/components/basic_table/basic_table.tsx

packages/eui/src/components/table/table_header_cell.test.tsx

packages/eui/src/components/table/table_header_cell.tsx

packages/eui/src/components/table/table_header_cell.stories.tsx

packages/eui/src/components/basic_table/table_types.ts

packages/eui/src-docs/src/views/tables/sorting/sorting.tsx

packages/eui/changelogs/upcoming/8273.md

packages/eui/src/components/table/table_header_cell.test.tsx

packages/eui/i18ntokens.json

…ltip-7963

acstll · 2025-02-04T16:53:27Z

@mgadewoll I refactored this back to the originally intended API: nameTooltip in EuiBasicTable.columns and tooltipProps in EuiTableHeaderCell — hopefully this is ready now, thanks for the patience 🙂

packages/eui/src/components/basic_table/basic_table.tsx

packages/eui/src/components/table/table_header_cell.tsx

packages/eui/src/components/table/table_header_cell.stories.tsx

…ltip-7963

kibanamachine · 2025-02-05T07:33:18Z

Preview staging links for this PR:

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

elasticmachine · 2025-02-05T07:35:04Z

💚 Build Succeeded

Buildkite Build
Commit: 40f906b

History

💚 Build #3406 succeeded c316ae4
💚 Build #3358 succeeded 4751ea5
💚 Build #3351 succeeded 0f096ad
💚 Build #3339 succeeded e977b8a
💚 Build #3335 succeeded e36fa2b

cc @acstll

mgadewoll

Great work on this and thanks for your patience 🎉

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

acstll mentioned this pull request Jan 14, 2025

[EuiBasicTable] add nameTooltip API #7963

Closed

acstll force-pushed the basic-table-nametooltip-7963 branch from 1f08961 to dcf3d6f Compare January 20, 2025 14:07

acstll marked this pull request as ready for review January 20, 2025 14:14

acstll requested a review from a team as a code owner January 20, 2025 14:14

mgadewoll reviewed Jan 21, 2025

View reviewed changes

packages/eui/src/components/table/table_header_cell.test.tsx Outdated Show resolved Hide resolved

mgadewoll reviewed Jan 21, 2025

View reviewed changes

packages/eui/src/components/table/table_header_cell.test.tsx Outdated Show resolved Hide resolved

mgadewoll reviewed Jan 21, 2025

View reviewed changes

packages/eui/src/components/table/table_header_cell.test.tsx Outdated Show resolved Hide resolved

JasonStoltz assigned mgadewoll and acstll and unassigned mgadewoll Jan 21, 2025

acstll added 16 commits January 22, 2025 19:13

[EuiBasicTable] Implement nameTooltip API in columns prop

c976d4f

[EuiBasicTable] Add unit tests for nameTooltip API

3c9f088

Update changelog

9af31c4

Restore stories

7818378

[EuiTableHeaderCell] Add story for tooltip

c069667

[EuiTableHeaderCell] Make tooltip position default to 'top'

64c49e8

Update docs for Tables

a64274a

[EuiTableHeaderCell] Add reference for VRT

90870fb

Improve comment

66734fc

Refactor EuiIconTipProps and export

a063c50

Update changelog

194683e

Refactor API to use iconTip for transparency

34f4cfa

Update docs

b7b988e

Fix type import for EuiIconTip stories

78cb22c

Fix wrong prop name in changelog

14ad751

Add parameters.loki in EuiTableHeaderCell stories (WIP)

0f096ad

acstll force-pushed the basic-table-nametooltip-7963 branch from 570bb48 to 0f096ad Compare January 22, 2025 18:14

acstll requested a review from mgadewoll January 22, 2025 18:19

acstll marked this pull request as draft January 23, 2025 08:19

Fix prop name in story

4751ea5

mgadewoll reviewed Jan 24, 2025

View reviewed changes

packages/eui/i18ntokens.json Outdated Show resolved Hide resolved

JasonStoltz linked an issue Feb 4, 2025 that may be closed by this pull request

[EuiBasicTable] add nameTooltip API #7963

Closed

acstll added 4 commits February 4, 2025 17:40

Revert changes in i18ntokens.json

dd6d255

Make API as originally intended (nameTooltip)

a471856

Remove loki parameters in stories for now

e175489

Merge remote-tracking branch 'upstream/main' into basic-table-nametoo…

c316ae4

…ltip-7963

acstll marked this pull request as ready for review February 4, 2025 16:50

mgadewoll reviewed Feb 5, 2025

View reviewed changes

packages/eui/src/components/basic_table/basic_table.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/table/table_header_cell.tsx Outdated Show resolved Hide resolved

mgadewoll reviewed Feb 5, 2025

View reviewed changes

packages/eui/src/components/table/table_header_cell.stories.tsx Outdated Show resolved Hide resolved

acstll added 2 commits February 5, 2025 08:03

Rename story, remove comment

52806be

Merge remote-tracking branch 'upstream/main' into basic-table-nametoo…

40f906b

…ltip-7963

acstll requested a review from mgadewoll February 5, 2025 08:01

mgadewoll approved these changes Feb 6, 2025

View reviewed changes

acstll merged commit 1ea74d9 into elastic:main Feb 6, 2025

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

bryce-b mentioned this pull request Feb 20, 2025

[Universal Profiling] Sorting of table entries in the Storage Explorer does not work elastic/kibana#197448

Closed

alexwizp mentioned this pull request Mar 25, 2025

[Obs Infrastructure > Hosts][SCREEN READER]: Tooltips must be able to take keyboard focus: 0006 elastic/kibana#195040

Closed

mgadewoll mentioned this pull request Apr 24, 2025

[EuiBasicTable][A11y] Ensure nameTooltip tooltip is read on cell focus #8622

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiBasicTable] Implement `nameTooltip` API in `columns` prop#8273

[EuiBasicTable] Implement `nameTooltip` API in `columns` prop#8273
acstll merged 23 commits intoelastic:mainfrom
acstll:basic-table-nametooltip-7963

acstll commented Jan 14, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll commented Feb 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Feb 5, 2025

Uh oh!

elasticmachine commented Feb 5, 2025 •

edited

Loading

Uh oh!

mgadewoll left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

acstll commented Jan 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Before

After

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll commented Feb 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Feb 5, 2025

Uh oh!

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

Uh oh!

💚 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!

4 participants

acstll commented Jan 14, 2025 •

edited

Loading

elasticmachine commented Feb 5, 2025 •

edited

Loading