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

[Emotion] Convert final EuiDataGrid cell styles (Part 5) #8013

Merged
merged 28 commits into from
Sep 12, 2024

Conversation

cee-chen
Copy link
Member

@cee-chen cee-chen commented Sep 10, 2024

Summary

closes #6394 and #5685 😭 🥳 🎉 🎊 🍾

This PR additionally includes some EuiDataGridHeaderCell cleanups from #7898 (see individual commits tagged with [refactor]), and some misc tech debt at the end of the commits.

Don't be scared by the files changed count, that's almost entirely loki VRT screenshots that I re-ran to update final differences. After this point, EuiDataGrid should be fully up to date and no screenshots should rerender differently locally 🎉

QA

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes reduced motion mode
      - [ ] Checked in mobile
  • Docs site QA - N/A
  • Code quality checklist
  • 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 - N/A

+ flatten specificity with `:where` selector
- JS logic lets us flatten and add more explanatory comments for the different height types
@cee-chen cee-chen force-pushed the emotion/datagrid-4 branch 2 times, most recently from fce624a to 44a3b6c Compare September 10, 2024 22:07
- fairly straightforward
- DRY out flex CSS between cell and focus trap div
- just inline it, it's only used once
- flatten left/right CSS since we have the prop right here

+ remove unnecessary flex-shrink CSS on the arrow - `EuiIcon` already takes care of that inherently
- just reuse EuiButtonIcon with transform/animations unset and remove `__icon` - simplifies a ton of CSS

- handle fontSize sizing of actions button in top level data grid styles

- use `:not()` CSS to handle hidden state instead, which simplifies even more CSS
+ convert inline Emotion to styles & fix line-height shenanigans

+ move complex selectors to new util

+ wrap transition in animation media query
- remove unnecessary `.euiDataGridHeaderCell__content` div element in control columns - it's not doing anything useful, so we might as well delete it

+ fix `focus_utils` rendering a `null` in control column `aria-describedby`
- font weight appears to be unused from an old theme

- let's replace it with actual english text instead that indicates what clicking the button will do
+ [enhancement] improve smoothness of dragging visibility with an `isDragging` modifier

- clean up unnecessary inline style (only useful when dragging, we don't need it during, e.g. snapshots)

+ convert enzyme tests to RTL (requires using a ref for class methods instead of `.instance()`)
…lbarVisibility` stories

- for some reason the ref was breaking the docgen??

- we didn't actually need the stateful grid for the ref tests, so just get rid of it
@cee-chen cee-chen marked this pull request as ready for review September 11, 2024 02:02
@cee-chen cee-chen requested a review from a team as a code owner September 11, 2024 02:02
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.

Overall the changes look great! I noticed 2 smaller regressions:

  1. the cell height is slightly increase (by 2px) - this might be intentional, but I couldn't really tell what caused it.
Screen.Recording.2024-09-11.at.12.42.03.mov
  1. the action button min. target size is not reached for fontSize="s" (see standalone comment)

packages/eui/src/components/datagrid/data_grid.styles.ts Outdated Show resolved Hide resolved
@cee-chen
Copy link
Member Author

cee-chen commented Sep 11, 2024

the cell height is slightly increase (by 2px) - this might be intentional, but I couldn't really tell what caused it.

This is not a regression in any styles, it's a change in the Storybook arguments (noticeable also by the way the default storybook was not correctly truncating text).

This was the previous setting for rowHeightsOptions:

rowHeightsOptions: {
defaultHeight: DEFAULT_ROW_HEIGHT,

However, this is not actually correct/equivalent to an undefined rowHeightsOptions (which I adjusted in a previous EuiDataGrid Emotion PR):

rowHeightsOptions: {
defaultHeight: undefined,

Defining a static height is what's causing the aforementioned lack of text truncation. Additionally, the cell borders (2px total) are considered "included" in any height passed to us, thus why the cells are 2px shorter.

The DEFAULT_ROW_HEIGHT const accounts for the cell border heights taking up space, hence why it's 34px instead of 36px (the true final default row height). Additionally, it's primarily intended for internal usage for our height calculations - it's not intended for external or public use. I've pushed up another quick commit removing the export on those consts to help clarify that.

…ction component

- not sure how much performance this is gaining us (if at all, it might be losing?) so IMO this is primarily a dev readability enhancement

+ make a few more props not overrideable via `setCellProps` (& update types)

+ write tests for merged `setCellProps` props
- otherwise, it continuously reads out "and 3 more items" instead of the full SR text :/
- neither the SR text or the cell actions are dependent on the renderCellValue content, and they don't need to be parsed by `HandleInteractiveChildren`, so move them out to the parent EuiDataGridCell

+ clean up now-unnecessary waterfalled props

- move screen reader text out to its own function component to continue using useEuiI18n
cleaner snapshots, less DOM rendered, and and behaves the same way for screen readers, so why not
- aria-describedby text doesn't need to be visible at all, we can just use `hidden`, which removes it from the copy clipboard

+ condense down to a single element
@cee-chen
Copy link
Member Author

@mgadewoll I was spiking out some copy shenanigans with EuiDataGrid's copy behavior and noticed some more cleanup/refactor opportunities that I've pushed up to this branch. In particular, I'd love your help QA testing 0b29898 to ensure that it works as before/correctly on JAWS/NVDA!

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

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.

🚢 🐈‍⬛ I checked the fixes and additional changes and all works as expected. Awesome additional cleanups! 🎉

@cee-chen
Copy link
Member Author

Thank you so much for the thorough testing Lene!!!! ❤️ You rock!

@cee-chen cee-chen merged commit a1a876e into elastic:main Sep 12, 2024
5 checks passed
@cee-chen cee-chen deleted the emotion/datagrid-4 branch September 12, 2024 15:29
Ikuni17 pushed a commit to elastic/kibana that referenced this pull request Sep 23, 2024
`v95.10.1`⏩`v95.11.0`

> [!note]
> The bulk of this release is **EuiDataGrid**. The component has been
fully converted to Emotion, and several UX changes have been made to
data cell actions. We recommend QA testing any data grid(s) that have
custom styles applied to them.

_[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)_

---

## [`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0)

- Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a new
`component` prop that allows changing the default rendered `<div>`
wrapper to a `<span>` or `<p>` tag.
([#7993](elastic/eui#7993))
- Updated `EuiDataGrid`'s cell actions to always consistently be
left-aligned, regardless of text content alignment
([#8011](elastic/eui#8011))
- Increased `EuiDataGrid`'s cell actions hover zone to reduce UX
friction when mousing over from the grid cell to its actions
([#8011](elastic/eui#8011))

**Bug fixes**

- Fixed `EuiPopover` to correctly inherit from `EuiProvider`'s
`componentDefaults.EuiPortal.insert`
([#8003](elastic/eui#8003))
- Fixed push `EuiFlyoutResizable`s to not potentially block scrollbars
on outside content ([#8010](elastic/eui#8010))
- Fixed an `EuiDataGrid` bug where the `setCellProps` callback passed by
`renderCellValue` was not correctly applying custom `data-test-subj`s
([#8011](elastic/eui#8011))

**Accessibility**

- Updated the `EuiBasicTable` actions button's `aria-label` by adding a
reference to the current row
([#7994](elastic/eui#7994))

**CSS-in-JS conversions**

- Converted `EuiDataGrid`'s toolbar controls to Emotion
([#7997](elastic/eui#7997))
  - Removed `$euiDataGridPopoverMaxHeight`
- Converted `EuiDataGrid` to Emotion
([#7998](elastic/eui#7998))
  - Removed `$euiZDataGrid`
  - Removed `$euiZHeaderBelowDataGrid`
- Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed the
following Sass variables and mixins:
([#8006](elastic/eui#8006))
  - `$euiDataGridCellPaddingS`
  - `$euiDataGridCellPaddingM`
  - `$euiDataGridCellPaddingL`
  - `$euiDataGridVerticalBorder`
  - `$euiDataGridPrefix`
  - `$euiDataGridStyles`
  - `@euiDataGridSelector`
  - `@euiDataGridStyles`
- Converted `EuiDataGrid`'s cell popover, actions, and focus outline to
Emotion; Removed the following Sass variables and mixins:
([#8011](elastic/eui#8011))
  - `$euiZDataGridCellPopover`
  - `@euiDataGridCellFocus`
- Converted `EuiDataGrid`'s row, header, and footer cells to Emotion;
Removed the following Sass variables and mixins:
([#8013](elastic/eui#8013))
  - `$euiDataGridColumnResizerWidth`
  - `@euiDataGridRowCell`
  - `@euiDataGridHeaderCell`
  - `@euiDataGridFooterCell`
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Sep 23, 2024
`v95.10.1`⏩`v95.11.0`

> [!note]
> The bulk of this release is **EuiDataGrid**. The component has been
fully converted to Emotion, and several UX changes have been made to
data cell actions. We recommend QA testing any data grid(s) that have
custom styles applied to them.

_[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)_

---

## [`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0)

- Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a new
`component` prop that allows changing the default rendered `<div>`
wrapper to a `<span>` or `<p>` tag.
([elastic#7993](elastic/eui#7993))
- Updated `EuiDataGrid`'s cell actions to always consistently be
left-aligned, regardless of text content alignment
([elastic#8011](elastic/eui#8011))
- Increased `EuiDataGrid`'s cell actions hover zone to reduce UX
friction when mousing over from the grid cell to its actions
([elastic#8011](elastic/eui#8011))

**Bug fixes**

- Fixed `EuiPopover` to correctly inherit from `EuiProvider`'s
`componentDefaults.EuiPortal.insert`
([elastic#8003](elastic/eui#8003))
- Fixed push `EuiFlyoutResizable`s to not potentially block scrollbars
on outside content ([elastic#8010](elastic/eui#8010))
- Fixed an `EuiDataGrid` bug where the `setCellProps` callback passed by
`renderCellValue` was not correctly applying custom `data-test-subj`s
([elastic#8011](elastic/eui#8011))

**Accessibility**

- Updated the `EuiBasicTable` actions button's `aria-label` by adding a
reference to the current row
([elastic#7994](elastic/eui#7994))

**CSS-in-JS conversions**

- Converted `EuiDataGrid`'s toolbar controls to Emotion
([elastic#7997](elastic/eui#7997))
  - Removed `$euiDataGridPopoverMaxHeight`
- Converted `EuiDataGrid` to Emotion
([elastic#7998](elastic/eui#7998))
  - Removed `$euiZDataGrid`
  - Removed `$euiZHeaderBelowDataGrid`
- Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed the
following Sass variables and mixins:
([elastic#8006](elastic/eui#8006))
  - `$euiDataGridCellPaddingS`
  - `$euiDataGridCellPaddingM`
  - `$euiDataGridCellPaddingL`
  - `$euiDataGridVerticalBorder`
  - `$euiDataGridPrefix`
  - `$euiDataGridStyles`
  - `@euiDataGridSelector`
  - `@euiDataGridStyles`
- Converted `EuiDataGrid`'s cell popover, actions, and focus outline to
Emotion; Removed the following Sass variables and mixins:
([elastic#8011](elastic/eui#8011))
  - `$euiZDataGridCellPopover`
  - `@euiDataGridCellFocus`
- Converted `EuiDataGrid`'s row, header, and footer cells to Emotion;
Removed the following Sass variables and mixins:
([elastic#8013](elastic/eui#8013))
  - `$euiDataGridColumnResizerWidth`
  - `@euiDataGridRowCell`
  - `@euiDataGridHeaderCell`
  - `@euiDataGridFooterCell`

(cherry picked from commit 9bbb296)
kibanamachine referenced this pull request in elastic/kibana Sep 27, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [Upgrade EUI to v95.11.0
(#192756)](#192756)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-23T22:45:19Z","message":"Upgrade
EUI to v95.11.0 (#192756)\n\n`v95.10.1`⏩`v95.11.0`\r\n\r\n> [!note]\r\n>
The bulk of this release is **EuiDataGrid**. The component has
been\r\nfully converted to Emotion, and several UX changes have been
made to\r\ndata cell actions. We recommend QA testing any data grid(s)
that have\r\ncustom styles applied to them.\r\n\r\n_[Questions? Please
see our Kibana
upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n##
[`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0)\r\n\r\n-
Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a
new\r\n`component` prop that allows changing the default rendered
`<div>`\r\nwrapper to a `<span>` or `<p>`
tag.\r\n([#7993](https://github.com/elastic/eui/pull/7993))\r\n- Updated
`EuiDataGrid`'s cell actions to always consistently be\r\nleft-aligned,
regardless of text content
alignment\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n-
Increased `EuiDataGrid`'s cell actions hover zone to reduce
UX\r\nfriction when mousing over from the grid cell to its
actions\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n\r\n**Bug
fixes**\r\n\r\n- Fixed `EuiPopover` to correctly inherit from
`EuiProvider`'s\r\n`componentDefaults.EuiPortal.insert`\r\n([#8003](https://github.com/elastic/eui/pull/8003))\r\n-
Fixed push `EuiFlyoutResizable`s to not potentially block
scrollbars\r\non outside content
([#8010](https://github.com/elastic/eui/pull/8010))\r\n- Fixed an
`EuiDataGrid` bug where the `setCellProps` callback passed
by\r\n`renderCellValue` was not correctly applying custom
`data-test-subj`s\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n\r\n**Accessibility**\r\n\r\n-
Updated the `EuiBasicTable` actions button's `aria-label` by adding
a\r\nreference to the current
row\r\n([#7994](https://github.com/elastic/eui/pull/7994))\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Converted `EuiDataGrid`'s toolbar controls to
Emotion\r\n([#7997](https://github.com/elastic/eui/pull/7997))\r\n -
Removed `$euiDataGridPopoverMaxHeight`\r\n- Converted `EuiDataGrid` to
Emotion\r\n([#7998](https://github.com/elastic/eui/pull/7998))\r\n -
Removed `$euiZDataGrid`\r\n - Removed `$euiZHeaderBelowDataGrid`\r\n-
Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed
the\r\nfollowing Sass variables and
mixins:\r\n([#8006](https://github.com/elastic/eui/pull/8006))\r\n -
`$euiDataGridCellPaddingS`\r\n - `$euiDataGridCellPaddingM`\r\n -
`$euiDataGridCellPaddingL`\r\n - `$euiDataGridVerticalBorder`\r\n -
`$euiDataGridPrefix`\r\n - `$euiDataGridStyles`\r\n -
`@euiDataGridSelector`\r\n - `@euiDataGridStyles`\r\n- Converted
`EuiDataGrid`'s cell popover, actions, and focus outline to\r\nEmotion;
Removed the following Sass variables and
mixins:\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n -
`$euiZDataGridCellPopover`\r\n - `@euiDataGridCellFocus`\r\n- Converted
`EuiDataGrid`'s row, header, and footer cells to Emotion;\r\nRemoved the
following Sass variables and
mixins:\r\n([#8013](https://github.com/elastic/eui/pull/8013))\r\n -
`$euiDataGridColumnResizerWidth`\r\n - `@euiDataGridRowCell`\r\n -
`@euiDataGridHeaderCell`\r\n -
`@euiDataGridFooterCell`","sha":"9bbb296078ea385561d46819001644cdb4fdc714","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0","backport:version"],"title":"Upgrade
EUI to
v95.11.0","number":192756,"url":"https://github.com/elastic/kibana/pull/192756","mergeCommit":{"message":"Upgrade
EUI to v95.11.0 (#192756)\n\n`v95.10.1`⏩`v95.11.0`\r\n\r\n> [!note]\r\n>
The bulk of this release is **EuiDataGrid**. The component has
been\r\nfully converted to Emotion, and several UX changes have been
made to\r\ndata cell actions. We recommend QA testing any data grid(s)
that have\r\ncustom styles applied to them.\r\n\r\n_[Questions? Please
see our Kibana
upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n##
[`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0)\r\n\r\n-
Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a
new\r\n`component` prop that allows changing the default rendered
`<div>`\r\nwrapper to a `<span>` or `<p>`
tag.\r\n([#7993](https://github.com/elastic/eui/pull/7993))\r\n- Updated
`EuiDataGrid`'s cell actions to always consistently be\r\nleft-aligned,
regardless of text content
alignment\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n-
Increased `EuiDataGrid`'s cell actions hover zone to reduce
UX\r\nfriction when mousing over from the grid cell to its
actions\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n\r\n**Bug
fixes**\r\n\r\n- Fixed `EuiPopover` to correctly inherit from
`EuiProvider`'s\r\n`componentDefaults.EuiPortal.insert`\r\n([#8003](https://github.com/elastic/eui/pull/8003))\r\n-
Fixed push `EuiFlyoutResizable`s to not potentially block
scrollbars\r\non outside content
([#8010](https://github.com/elastic/eui/pull/8010))\r\n- Fixed an
`EuiDataGrid` bug where the `setCellProps` callback passed
by\r\n`renderCellValue` was not correctly applying custom
`data-test-subj`s\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n\r\n**Accessibility**\r\n\r\n-
Updated the `EuiBasicTable` actions button's `aria-label` by adding
a\r\nreference to the current
row\r\n([#7994](https://github.com/elastic/eui/pull/7994))\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Converted `EuiDataGrid`'s toolbar controls to
Emotion\r\n([#7997](https://github.com/elastic/eui/pull/7997))\r\n -
Removed `$euiDataGridPopoverMaxHeight`\r\n- Converted `EuiDataGrid` to
Emotion\r\n([#7998](https://github.com/elastic/eui/pull/7998))\r\n -
Removed `$euiZDataGrid`\r\n - Removed `$euiZHeaderBelowDataGrid`\r\n-
Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed
the\r\nfollowing Sass variables and
mixins:\r\n([#8006](https://github.com/elastic/eui/pull/8006))\r\n -
`$euiDataGridCellPaddingS`\r\n - `$euiDataGridCellPaddingM`\r\n -
`$euiDataGridCellPaddingL`\r\n - `$euiDataGridVerticalBorder`\r\n -
`$euiDataGridPrefix`\r\n - `$euiDataGridStyles`\r\n -
`@euiDataGridSelector`\r\n - `@euiDataGridStyles`\r\n- Converted
`EuiDataGrid`'s cell popover, actions, and focus outline to\r\nEmotion;
Removed the following Sass variables and
mixins:\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n -
`$euiZDataGridCellPopover`\r\n - `@euiDataGridCellFocus`\r\n- Converted
`EuiDataGrid`'s row, header, and footer cells to Emotion;\r\nRemoved the
following Sass variables and
mixins:\r\n([#8013](https://github.com/elastic/eui/pull/8013))\r\n -
`$euiDataGridColumnResizerWidth`\r\n - `@euiDataGridRowCell`\r\n -
`@euiDataGridHeaderCell`\r\n -
`@euiDataGridFooterCell`","sha":"9bbb296078ea385561d46819001644cdb4fdc714"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192756","number":192756,"mergeCommit":{"message":"Upgrade
EUI to v95.11.0 (#192756)\n\n`v95.10.1`⏩`v95.11.0`\r\n\r\n> [!note]\r\n>
The bulk of this release is **EuiDataGrid**. The component has
been\r\nfully converted to Emotion, and several UX changes have been
made to\r\ndata cell actions. We recommend QA testing any data grid(s)
that have\r\ncustom styles applied to them.\r\n\r\n_[Questions? Please
see our Kibana
upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n##
[`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0)\r\n\r\n-
Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a
new\r\n`component` prop that allows changing the default rendered
`<div>`\r\nwrapper to a `<span>` or `<p>`
tag.\r\n([#7993](https://github.com/elastic/eui/pull/7993))\r\n- Updated
`EuiDataGrid`'s cell actions to always consistently be\r\nleft-aligned,
regardless of text content
alignment\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n-
Increased `EuiDataGrid`'s cell actions hover zone to reduce
UX\r\nfriction when mousing over from the grid cell to its
actions\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n\r\n**Bug
fixes**\r\n\r\n- Fixed `EuiPopover` to correctly inherit from
`EuiProvider`'s\r\n`componentDefaults.EuiPortal.insert`\r\n([#8003](https://github.com/elastic/eui/pull/8003))\r\n-
Fixed push `EuiFlyoutResizable`s to not potentially block
scrollbars\r\non outside content
([#8010](https://github.com/elastic/eui/pull/8010))\r\n- Fixed an
`EuiDataGrid` bug where the `setCellProps` callback passed
by\r\n`renderCellValue` was not correctly applying custom
`data-test-subj`s\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n\r\n**Accessibility**\r\n\r\n-
Updated the `EuiBasicTable` actions button's `aria-label` by adding
a\r\nreference to the current
row\r\n([#7994](https://github.com/elastic/eui/pull/7994))\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Converted `EuiDataGrid`'s toolbar controls to
Emotion\r\n([#7997](https://github.com/elastic/eui/pull/7997))\r\n -
Removed `$euiDataGridPopoverMaxHeight`\r\n- Converted `EuiDataGrid` to
Emotion\r\n([#7998](https://github.com/elastic/eui/pull/7998))\r\n -
Removed `$euiZDataGrid`\r\n - Removed `$euiZHeaderBelowDataGrid`\r\n-
Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed
the\r\nfollowing Sass variables and
mixins:\r\n([#8006](https://github.com/elastic/eui/pull/8006))\r\n -
`$euiDataGridCellPaddingS`\r\n - `$euiDataGridCellPaddingM`\r\n -
`$euiDataGridCellPaddingL`\r\n - `$euiDataGridVerticalBorder`\r\n -
`$euiDataGridPrefix`\r\n - `$euiDataGridStyles`\r\n -
`@euiDataGridSelector`\r\n - `@euiDataGridStyles`\r\n- Converted
`EuiDataGrid`'s cell popover, actions, and focus outline to\r\nEmotion;
Removed the following Sass variables and
mixins:\r\n([#8011](https://github.com/elastic/eui/pull/8011))\r\n -
`$euiZDataGridCellPopover`\r\n - `@euiDataGridCellFocus`\r\n- Converted
`EuiDataGrid`'s row, header, and footer cells to Emotion;\r\nRemoved the
following Sass variables and
mixins:\r\n([#8013](https://github.com/elastic/eui/pull/8013))\r\n -
`$euiDataGridColumnResizerWidth`\r\n - `@euiDataGridRowCell`\r\n -
`@euiDataGridHeaderCell`\r\n -
`@euiDataGridFooterCell`","sha":"9bbb296078ea385561d46819001644cdb4fdc714"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: Cee Chen <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Emotion] EuiDataGrid
3 participants