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 EuiDataGrid toolbar control styles to Emotion (Part 2) #7997

Merged
merged 11 commits into from
Sep 5, 2024

Conversation

cee-chen
Copy link
Member

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

Summary

Part of #6394. I'm splitting up EuiDataGrid into smaller chunks for ease of review/QA, but as always, I still recommend following along by commit.

Converts the EuiDataGrid's various toolbar controls to Emotion. Also converts several Enzyme tests to RTL (largest set of changes is to column_selector.test.tsx - see git commit message)

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

- convert margin left to display flex instead
- NOTE: possibly revert this commit when data grid borders modifiers are converted to Emotion - I'd rather handle this at the topmost `.euiDataGrid` level
- we're going to replace this with individual per-control Emotion styles
+ convert Enzyme tests to RTL
+ only test render snapshot on React 18 - all other tests run on react 16/17 and should more than suffice to validate that it works there
+ remove valid droppable area test - this one is ludicrous to try and test in a jsdom/unit test
+ reduce extra div wrapper

+ update datagrid enzyme tests to account for emotion wrappers
+ improve responsive styles by moving to `auto` column width
- just inline it in the component, since it's super minor

+ update Enzyme tests to RTL, snapshot full popover
@cee-chen cee-chen changed the title [EuiDataGrid] Convert toolbar styles to Emotion [Emotion] Convert EuiDataGrid toolbar control styles to Emotion Sep 4, 2024
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@cee-chen cee-chen marked this pull request as ready for review September 5, 2024 06:05
@cee-chen cee-chen requested a review from a team as a code owner September 5, 2024 06:05
Copy link
Member Author

@cee-chen cee-chen Sep 5, 2024

Choose a reason for hiding this comment

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

Just a quick note that 052965f / these VRT snapshots & utils technically won't work without #8003, which I decided to split it out into a separate PR (but left the generated screenshots in here for easier review).

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 did not find any unexpected regression. The conversion code is straight forward and the added VRT stories and helpers are really awesome! 🚀

@@ -22,6 +22,15 @@ export const euiDataGridToolbarStyles = ({ euiTheme }: UseEuiTheme) => {
gap: ${euiTheme.size.base};
${logicalCSS('padding-vertical', euiTheme.size.xs)}
background-color: ${euiTheme.colors.emptyShade};

.euiDataGrid--bordersHorizontal & {
Copy link
Contributor

Choose a reason for hiding this comment

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

❓ Do we need a TODO comment for keeping track of this to be reverted?

Copy link
Member Author

@cee-chen cee-chen Sep 5, 2024

Choose a reason for hiding this comment

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

I'll be able to keep mental track of it! I'm not super worried either way, as the code works as-is, so even if I get hit by a bus tomorrow or we go with another direction for EuiDataGrid's Emotion conversion, this is fine to leave in the codebase.

};

testByReactVersion(
testOnReactVersion(['18'])(
Copy link
Contributor

Choose a reason for hiding this comment

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

Agreed that we can save on snapshots for v16/17 as long as other tests still run 👍

const keyboardShortcuts = useMemo(
() => (
<EuiPopover
data-test-subj="dataGridKeyboardShortcutsPopover"
isOpen={isOpen}
closePopover={() => setIsOpen(false)}
anchorPosition="downRight"
panelPaddingSize="none"
Copy link
Contributor

Choose a reason for hiding this comment

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

This change of padding placement caused a slight visual regression but I think it's a) a correct change and b) not a big visual impact.

Screen.Recording.2024-09-05.at.09.36.42.mov
Screen.Recording.2024-09-05.at.09.38.04.mov

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep, it's an intentional change! 🎉 Thanks as always for your eagle eyes Lene!

* VRT tests only
*/

export const ColumnSelector: Story = {
Copy link
Contributor

Choose a reason for hiding this comment

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

🎉 Awesome update adding these VRT stories and additional helpers. Very useful! 👏

@cee-chen cee-chen merged commit c60a91c into elastic:main Sep 5, 2024
6 checks passed
@cee-chen cee-chen deleted the emotion/datagrid-3 branch September 5, 2024 16:25
@cee-chen cee-chen changed the title [Emotion] Convert EuiDataGrid toolbar control styles to Emotion [Emotion] Convert EuiDataGrid toolbar control styles to Emotion (Part 2) Sep 5, 2024
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.

3 participants