Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiBasicTable] Implement nameTooltip API in columns prop #8273

Merged
merged 23 commits into from
Feb 6, 2025

Conversation

acstll
Copy link
Contributor

@acstll acstll commented Jan 14, 2025

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

Screenshot 2025-01-20 at 14 43 34

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

After

a59e9d9f055b9fe2e617ce8479a9e273

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

@acstll acstll force-pushed the basic-table-nametooltip-7963 branch from 1f08961 to dcf3d6f Compare January 20, 2025 14:07
@acstll acstll marked this pull request as ready for review January 20, 2025 14:14
@acstll acstll requested a review from a team as a code owner January 20, 2025 14:14
@JasonStoltz JasonStoltz assigned mgadewoll and acstll and unassigned mgadewoll Jan 21, 2025
@acstll acstll force-pushed the basic-table-nametooltip-7963 branch from 570bb48 to 0f096ad Compare January 22, 2025 18:14
@acstll acstll requested a review from mgadewoll January 22, 2025 18:19
@acstll acstll marked this pull request as draft January 23, 2025 08:19
@JasonStoltz JasonStoltz linked an issue Feb 4, 2025 that may be closed by this pull request
@acstll acstll marked this pull request as ready for review February 4, 2025 16:50
@acstll
Copy link
Contributor Author

acstll commented Feb 4, 2025

@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 🙂

@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

elasticmachine commented Feb 5, 2025

💚 Build Succeeded

History

cc @acstll

@acstll acstll requested a review from mgadewoll February 5, 2025 08:01
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this and thanks for your patience 🎉

@acstll acstll merged commit 1ea74d9 into elastic:main Feb 6, 2025
5 checks passed
mgadewoll added a commit to elastic/kibana that referenced this pull request Feb 26, 2025
`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>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Feb 26, 2025
`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)
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this pull request Feb 27, 2025
`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>
mgadewoll added a commit to elastic/kibana that referenced this pull request Feb 27, 2025
`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>
SoniaSanzV pushed a commit to SoniaSanzV/kibana that referenced this pull request Mar 4, 2025
`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>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Mar 22, 2025
`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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiBasicTable] add nameTooltip API
4 participants