-
Notifications
You must be signed in to change notification settings - Fork 8.3k
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
[Lens] Update DatatableComponent header and footer styles and make background transparent #199813
Conversation
x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.scss
Show resolved
Hide resolved
Pinging @elastic/kibana-visualizations (Team:Visualizations) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me! We might want to address the accessing internal eui class at some point (let's submit an issue for it), but for now it's a good solution 👏🏼
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
Friendly reminder: Looks like this PR hasn’t been backported yet. |
…ckground transparent (elastic#199813) ## Summary Closes elastic#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 <[email protected]>
Starting backport for target branches: 8.x |
…ckground transparent (elastic#199813) ## Summary Closes elastic#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 <[email protected]> (cherry picked from commit f3bc093)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…ake background transparent (#199813) (#201914) # Backport This will backport the following commits from `main` to `8.x`: - [[Lens] Update DatatableComponent header and footer styles and make background transparent (#199813)](#199813) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Maria Iriarte","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-25T15:23:48Z","message":"[Lens] Update DatatableComponent header and footer styles and make background transparent (#199813)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana/issues/193910\r\n\r\n#### Description\r\n\r\n- Update Lens' current table visualization `EuiDataGrid` prop for\r\n`gridStyle` to use the shade value for `header` and `footer`\r\n- Make table's background transparent\r\n\r\n#### Screenshots\r\n\r\n![Screenshot 2024-11-12 at 16 24\r\n27](https://github.com/user-attachments/assets/b42d4daa-37ae-456d-9bd8-c6b6930b187b)\r\n\r\n![Screenshot 2024-11-12 at 16 25\r\n44](https://github.com/user-attachments/assets/6c69ea05-d915-4200-9c5c-6e19c9c32019)\r\n\r\n![Screenshot 2024-11-13 at 11 02\r\n47](https://github.com/user-attachments/assets/f530b74e-a238-456b-bbbc-e3d8607ec102)\r\n\r\n### Checklist\r\n\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [ ] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n- [ ] This will appear in the **Release Notes** and follow the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"f3bc0930745e8b82d4484130ef3483944655cdc2","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","release_note:skip","Feature:Lens","backport missing","v9.0.0","backport:prev-minor"],"title":"[Lens] Update DatatableComponent header and footer styles and make background transparent","number":199813,"url":"https://github.com/elastic/kibana/pull/199813","mergeCommit":{"message":"[Lens] Update DatatableComponent header and footer styles and make background transparent (#199813)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana/issues/193910\r\n\r\n#### Description\r\n\r\n- Update Lens' current table visualization `EuiDataGrid` prop for\r\n`gridStyle` to use the shade value for `header` and `footer`\r\n- Make table's background transparent\r\n\r\n#### Screenshots\r\n\r\n![Screenshot 2024-11-12 at 16 24\r\n27](https://github.com/user-attachments/assets/b42d4daa-37ae-456d-9bd8-c6b6930b187b)\r\n\r\n![Screenshot 2024-11-12 at 16 25\r\n44](https://github.com/user-attachments/assets/6c69ea05-d915-4200-9c5c-6e19c9c32019)\r\n\r\n![Screenshot 2024-11-13 at 11 02\r\n47](https://github.com/user-attachments/assets/f530b74e-a238-456b-bbbc-e3d8607ec102)\r\n\r\n### Checklist\r\n\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [ ] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n- [ ] This will appear in the **Release Notes** and follow the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"f3bc0930745e8b82d4484130ef3483944655cdc2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199813","number":199813,"mergeCommit":{"message":"[Lens] Update DatatableComponent header and footer styles and make background transparent (#199813)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana/issues/193910\r\n\r\n#### Description\r\n\r\n- Update Lens' current table visualization `EuiDataGrid` prop for\r\n`gridStyle` to use the shade value for `header` and `footer`\r\n- Make table's background transparent\r\n\r\n#### Screenshots\r\n\r\n![Screenshot 2024-11-12 at 16 24\r\n27](https://github.com/user-attachments/assets/b42d4daa-37ae-456d-9bd8-c6b6930b187b)\r\n\r\n![Screenshot 2024-11-12 at 16 25\r\n44](https://github.com/user-attachments/assets/6c69ea05-d915-4200-9c5c-6e19c9c32019)\r\n\r\n![Screenshot 2024-11-13 at 11 02\r\n47](https://github.com/user-attachments/assets/f530b74e-a238-456b-bbbc-e3d8607ec102)\r\n\r\n### Checklist\r\n\r\n- [ ] Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n- [ ] This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n- [ ] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n- [ ] This will appear in the **Release Notes** and follow the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"f3bc0930745e8b82d4484130ef3483944655cdc2"}}]}] BACKPORT--> Co-authored-by: Maria Iriarte <[email protected]>
…ckground transparent (elastic#199813) ## Summary Closes elastic#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 <[email protected]>
Summary
Closes #193910
Description
EuiDataGrid
prop forgridStyle
to use the shade value forheader
andfooter
Screenshots
Checklist
For maintainers