[Discover] Redesign for the grid, panels and sidebar v1 #165866
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Conflicts: # packages/kbn-unified-data-table/src/components/data_table.scss # packages/kbn-unified-data-table/src/constants.ts
… into 164661-discover-panels-redesign
|
@jughosta I noticed that there is something off when |
davismcphee
reviewed
Sep 9, 2023
There was a problem hiding this comment.
Thanks for the latest changes! They look good for the most part, but I noticed that because we added the padding back to the list item when dragging, it meant we needed to add it to the regular list item too, which doesn't match the designs. It also seems like the white background will reappear when a list item is active, which looks a bit strange:
I think I found a fix for it though where we can add a custom class to style the list item while dragging without having to change the regular list items too. I did some testing across browsers and it seems to work consistently. I opened up a PR for it here, let me know what you think and if it makes sense to merge: jughosta#6.
I also noticed that when viewing the documents column in single line mode, the line below is partially visible:
...ages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx
Show resolved
Hide resolved
Addressed these issues via a93943c |
[Discover Redesign] Improve Unified Field List item drag styles
jughosta
commented
Sep 11, 2023
Comment on lines
+313
to
+324
|
|
||
| // Apply an optional class to the element being dragged so the ghost | ||
| // can be styled. We must add it to the actual element for a single | ||
| // frame before removing it so the ghost picks up the styling. | ||
| const current = e.currentTarget; | ||
|
|
||
| if (dragClassName && !current.classList.contains(dragClassName)) { | ||
| current.classList.add(dragClassName); | ||
| requestAnimationFrame(() => { | ||
| current.classList.remove(dragClassName); | ||
| }); | ||
| } |
There was a problem hiding this comment.
@davismcphee helped here to improve the view of a dragging item on Discover jughosta#6
💚 Build Succeeded
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
History
To update your PR or re-run it, just comment with: cc @jughosta |
andreadelrio
approved these changes
Sep 11, 2023
davismcphee
approved these changes
Sep 12, 2023
stratoula
approved these changes
Sep 12, 2023
jughosta
added a commit
that referenced
this pull request
Sep 30, 2023
A follow up for #165866 ## Summary This PR replaces icons for the sidebar toggle button. <img width="200" alt="Screenshot 2023-09-29 at 13 00 39" src="https://github.com/elastic/kibana/assets/1415710/6ed10562-9a50-48ce-b6b2-030ab7b11e11"> <img width="200" alt="Screenshot 2023-09-29 at 13 00 47" src="https://github.com/elastic/kibana/assets/1415710/e286e152-a6bb-4b21-a97a-44419757dafb">
jughosta
added a commit
that referenced
this pull request
Oct 5, 2023
## Summary Since we are not merging #167179 yet, I cherry-picked a fix for the issue with the tabs border above the grid which was introduced in #165866 and can be backported to 8.11. Before: <img width="400" alt="Screenshot 2023-10-04 at 11 01 13" src="https://github.com/elastic/kibana/assets/1415710/68b85c1d-c1f5-4955-8a33-35d140157744"> <img width="400" alt="Screenshot 2023-10-04 at 11 01 52" src="https://github.com/elastic/kibana/assets/1415710/3a401fef-1f05-4a1e-8a4d-b84bd6f00be9"> After: <img width="400" alt="Screenshot 2023-10-04 at 11 02 55" src="https://github.com/elastic/kibana/assets/1415710/94907e5a-f9dc-476b-9c65-dc655ded8caa"> <img width="400" alt="Screenshot 2023-10-04 at 11 03 13" src="https://github.com/elastic/kibana/assets/1415710/a0bf0fa0-bffb-494f-ba20-aea9f566ac07"> --------- Co-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Oct 5, 2023
## Summary Since we are not merging elastic#167179 yet, I cherry-picked a fix for the issue with the tabs border above the grid which was introduced in elastic#165866 and can be backported to 8.11. Before: <img width="400" alt="Screenshot 2023-10-04 at 11 01 13" src="https://github.com/elastic/kibana/assets/1415710/68b85c1d-c1f5-4955-8a33-35d140157744"> <img width="400" alt="Screenshot 2023-10-04 at 11 01 52" src="https://github.com/elastic/kibana/assets/1415710/3a401fef-1f05-4a1e-8a4d-b84bd6f00be9"> After: <img width="400" alt="Screenshot 2023-10-04 at 11 02 55" src="https://github.com/elastic/kibana/assets/1415710/94907e5a-f9dc-476b-9c65-dc655ded8caa"> <img width="400" alt="Screenshot 2023-10-04 at 11 03 13" src="https://github.com/elastic/kibana/assets/1415710/a0bf0fa0-bffb-494f-ba20-aea9f566ac07"> --------- Co-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com> (cherry picked from commit 6990b1a)
kibanamachine
added a commit
that referenced
this pull request
Oct 5, 2023
# Backport This will backport the following commits from `main` to `8.11`: - [[Discover] Fix tabs border above the grid (#167967)](#167967) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Julia Rechkunova","email":"julia.rechkunova@elastic.co"},"sourceCommit":{"committedDate":"2023-10-05T09:49:37Z","message":"[Discover] Fix tabs border above the grid (#167967)\n\n## Summary\r\n\r\nSince we are not merging https://github.com/elastic/kibana/pull/167179\r\nyet, I cherry-picked a fix for the issue with the tabs border above the\r\ngrid which was introduced in\r\nhttps://github.com//pull/165866 and can be backported to\r\n8.11.\r\n\r\nBefore:\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 01 13\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/68b85c1d-c1f5-4955-8a33-35d140157744\">\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 01 52\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/3a401fef-1f05-4a1e-8a4d-b84bd6f00be9\">\r\n\r\nAfter:\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 02 55\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/94907e5a-f9dc-476b-9c65-dc655ded8caa\">\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 03 13\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/a0bf0fa0-bffb-494f-ba20-aea9f566ac07\">\r\n\r\n---------\r\n\r\nCo-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>","sha":"6990b1a38c9b264d8c251a2cce83697a060600fa","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:skip","Team:DataDiscovery","backport:prev-minor","v8.12.0"],"number":167967,"url":"https://github.com/elastic/kibana/pull/167967","mergeCommit":{"message":"[Discover] Fix tabs border above the grid (#167967)\n\n## Summary\r\n\r\nSince we are not merging https://github.com/elastic/kibana/pull/167179\r\nyet, I cherry-picked a fix for the issue with the tabs border above the\r\ngrid which was introduced in\r\nhttps://github.com//pull/165866 and can be backported to\r\n8.11.\r\n\r\nBefore:\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 01 13\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/68b85c1d-c1f5-4955-8a33-35d140157744\">\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 01 52\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/3a401fef-1f05-4a1e-8a4d-b84bd6f00be9\">\r\n\r\nAfter:\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 02 55\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/94907e5a-f9dc-476b-9c65-dc655ded8caa\">\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 03 13\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/a0bf0fa0-bffb-494f-ba20-aea9f566ac07\">\r\n\r\n---------\r\n\r\nCo-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>","sha":"6990b1a38c9b264d8c251a2cce83697a060600fa"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/167967","number":167967,"mergeCommit":{"message":"[Discover] Fix tabs border above the grid (#167967)\n\n## Summary\r\n\r\nSince we are not merging https://github.com/elastic/kibana/pull/167179\r\nyet, I cherry-picked a fix for the issue with the tabs border above the\r\ngrid which was introduced in\r\nhttps://github.com//pull/165866 and can be backported to\r\n8.11.\r\n\r\nBefore:\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 01 13\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/68b85c1d-c1f5-4955-8a33-35d140157744\">\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 01 52\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/3a401fef-1f05-4a1e-8a4d-b84bd6f00be9\">\r\n\r\nAfter:\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 02 55\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/94907e5a-f9dc-476b-9c65-dc655ded8caa\">\r\n<img width=\"400\" alt=\"Screenshot 2023-10-04 at 11 03 13\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1415710/a0bf0fa0-bffb-494f-ba20-aea9f566ac07\">\r\n\r\n---------\r\n\r\nCo-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>","sha":"6990b1a38c9b264d8c251a2cce83697a060600fa"}}]}] BACKPORT--> Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
dej611
pushed a commit
to dej611/kibana
that referenced
this pull request
Oct 17, 2023
## Summary Since we are not merging elastic#167179 yet, I cherry-picked a fix for the issue with the tabs border above the grid which was introduced in elastic#165866 and can be backported to 8.11. Before: <img width="400" alt="Screenshot 2023-10-04 at 11 01 13" src="https://github.com/elastic/kibana/assets/1415710/68b85c1d-c1f5-4955-8a33-35d140157744"> <img width="400" alt="Screenshot 2023-10-04 at 11 01 52" src="https://github.com/elastic/kibana/assets/1415710/3a401fef-1f05-4a1e-8a4d-b84bd6f00be9"> After: <img width="400" alt="Screenshot 2023-10-04 at 11 02 55" src="https://github.com/elastic/kibana/assets/1415710/94907e5a-f9dc-476b-9c65-dc655ded8caa"> <img width="400" alt="Screenshot 2023-10-04 at 11 03 13" src="https://github.com/elastic/kibana/assets/1415710/a0bf0fa0-bffb-494f-ba20-aea9f566ac07"> --------- Co-authored-by: Michael Marcialis <michael.l.marcialis@gmail.com>
|
not liking the look of the data grid without vertical lines. Now the data columns just seem to fall off into the empty space. Is this a global change and will remain going forward? Wish this was configurable based on a setting somewhere. before after |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Part 1
Changes:
swaps checkbox and row selectionPart 2
Changes:
Part 3
Changes:
adds a drag handle to sidebar itemsadds new Show/Hide buttons to toggle sidebarmoves sidebar toggle button from discover plugin to unified field listPlease note that "auto" row height is in a separate PR which is also ready for review #164218