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

[Discover] Update data table styles #164287

Closed
Tracked by #168084
kertal opened this issue Aug 21, 2023 · 5 comments · Fixed by #165866
Closed
Tracked by #168084

[Discover] Update data table styles #164287

kertal opened this issue Aug 21, 2023 · 5 comments · Fixed by #165866
Assignees
Labels
enhancement New value added to drive a business result Feature:Discover Discover Application Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.

Comments

@kertal
Copy link
Member

kertal commented Aug 21, 2023

This issue aims to improve the style of Discover's data table.

  • Vertical borders shall be removed
  • Row highlighting should be added
  • Cellpadding should be increased
  • Remove background color from header and add light grey border to the bottom
  • Enable row stripes
image
@kertal kertal added the Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. label Aug 21, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@kertal kertal added enhancement New value added to drive a business result Feature:Discover Discover Application labels Aug 21, 2023
@andreadelrio
Copy link
Contributor

@kertal I think this issue should also include the change to header: 'underline'. That way we cover #164289. I think #164289 is too small to get its own PR.

@kertal
Copy link
Member Author

kertal commented Aug 25, 2023

@andreadelrio makes sense, added it, but the underline also needs to be styled, since it ain't a black line in the Design, can you provide details about this? Thx!

@andreadelrio
Copy link
Contributor

@andreadelrio makes sense, added it, but the underline also needs to be styled, since it ain't a black line in the Design, can you provide details about this? Thx!

@kertal I updated it. Should #164292 also be included here?

@kertal
Copy link
Member Author

kertal commented Aug 28, 2023

@andreadelrio makes sense, added it, but the underline also needs to be styled, since it ain't a black line in the Design, can you provide details about this? Thx!

@kertal I updated it. Should #164292 also be included here?

@andreadelrio thx, yes, this would make sense, wouldn't it?

jughosta added a commit that referenced this issue Sep 12, 2023
## Summary

### Part 1

- Resolves #164287
- Closes #146339
- Previously separate PR #164187

Changes:
- ~~swaps checkbox and row selection~~
- removes vertical borders
- adds rows highlight
- increases cell padding
- adds row stripes
- updates header background
- removes grey background from field name and makes it bolder (part of
#164634)
- updates Surrounding Documents side paddings

### Part 2

- Resolves #164661
- Previously separate PR #165687

Changes:
- removes background from panels, tabs and sidebar
- updates "Add a field" button style
- removes shadow from field list items
- makes field search compact

### Part 3

- Resolves #164662

Changes:
- wraps "Add a field" button in its own container with a top border
- ~~adds a drag handle to sidebar items~~
- ~~adds new Show/Hide buttons to toggle sidebar~~ moves sidebar toggle
button from discover plugin to unified field list
- reduces spaces between sidebar items from 4px to 2px
- reduces padding on Single Document page
- removes border above grid tabs

<img width="600" alt="Screenshot 2023-09-07 at 14 39 48"
src="https://github.com/elastic/kibana/assets/1415710/976db247-fd70-4c9b-8634-552ece45b522">


Please note that "auto" row height is in a separate PR which is also
ready for review #164218

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:Discover Discover Application Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.
Projects
None yet
4 participants