From f3bc0930745e8b82d4484130ef3483944655cdc2 Mon Sep 17 00:00:00 2001
From: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
Date: Mon, 25 Nov 2024 16:23:48 +0100
Subject: [PATCH] [Lens] Update DatatableComponent header and footer styles and
 make background transparent (#199813)

## Summary

Closes https://github.com/elastic/kibana/issues/193910

#### Description

- Update Lens' current table visualization `EuiDataGrid` prop for
`gridStyle` to use the shade value for `header` and `footer`
- Make table's background transparent

#### Screenshots

![Screenshot 2024-11-12 at 16 24
27](https://github.com/user-attachments/assets/b42d4daa-37ae-456d-9bd8-c6b6930b187b)

![Screenshot 2024-11-12 at 16 25
44](https://github.com/user-attachments/assets/6c69ea05-d915-4200-9c5c-6e19c9c32019)

![Screenshot 2024-11-13 at 11 02
47](https://github.com/user-attachments/assets/f530b74e-a238-456b-bbbc-e3d8607ec102)

### Checklist

- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
- [ ] This will appear in the **Release Notes** and follow the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../visualizations/datatable/components/table_basic.scss     | 5 +++++
 .../visualizations/datatable/components/table_basic.tsx      | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.scss b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.scss
index 0f0ed53a10021..117c6797c3620 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.scss
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.scss
@@ -1,5 +1,10 @@
 .lnsDataTableContainer {
   height: 100%;
+
+  // EUI issue to make background transparent https://github.com/elastic/eui/issues/8136
+  .euiDataGrid__content {
+    background: transparent;
+  }
 }
 
 .lnsTableCell--multiline {
diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx
index 0633c13b8097a..f30686a44a6ad 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.tsx
@@ -70,7 +70,8 @@ export const DataContext = React.createContext<DataContextType>({});
 
 const gridStyle: EuiDataGridStyle = {
   border: 'horizontal',
-  header: 'underline',
+  header: 'shade',
+  footer: 'shade',
 };
 
 export const DEFAULT_PAGE_SIZE = 10;