[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) |
mbondyra
left a comment
There was a problem hiding this comment.
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    ### 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>
|
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    ### 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> (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":"106958839+mariairiartef@users.noreply.github.com"},"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\r\n\r\n\r\n\r\n\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 <42973632+kibanamachine@users.noreply.github.com>","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\r\n\r\n\r\n\r\n\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 <42973632+kibanamachine@users.noreply.github.com>","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\r\n\r\n\r\n\r\n\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 <42973632+kibanamachine@users.noreply.github.com>","sha":"f3bc0930745e8b82d4484130ef3483944655cdc2"}}]}] BACKPORT--> Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
…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    ### 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>
Summary
Closes #193910
Description
EuiDataGridprop forgridStyleto use the shade value forheaderandfooterScreenshots
Checklist
For maintainers