[Discover] Redesign for the grid, panels and sidebar v1 #165866

jughosta · 2023-09-06T15:17:45Z

Summary

Part 1

Resolves [Discover] Update data table styles #164287
Closes [Discover] Document column field highlighting has poor contrast in dark mode #146339
Previously separate PR [Discover] Update data table grid styles #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 [UnifiedDataTable] Redesign Document column #164634)
updates Surrounding Documents side paddings

Part 2

Resolves [Discover] Design changes to main panels #164661
Previously separate PR [Discover] Design changes to main panels #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 [UnifiedFieldList] Redesign #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

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

# Conflicts: # packages/kbn-unified-data-table/src/components/data_table.scss # packages/kbn-unified-data-table/src/constants.ts

…fix'

… into 164661-discover-panels-redesign

andreadelrio · 2023-09-08T21:30:10Z

@jughosta I noticed that there is something off when Row height is set to Single.

davismcphee

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

jughosta · 2023-09-09T09:29:53Z

@andreadelrio

I noticed that there is something off when Row height is set to Single.

@davismcphee

I also noticed that when viewing the documents column in single line mode, the line below is partially visible

Addressed these issues via a93943c

[Discover Redesign] Improve Unified Field List item drag styles

jughosta · 2023-09-11T07:44:40Z

packages/kbn-dom-drag-drop/src/drag_drop.tsx

+
+        // 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);
+          });
+        }


@davismcphee helped here to improve the view of a dragging item on Discover jughosta#6

kibana-ci · 2023-09-11T17:32:47Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	632	649	+17
`eventAnnotation`	428	445	+17
`lens`	1139	1156	+17
`logExplorer`	319	336	+17
total			+68

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/unified-field-list`	275	276	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	551.0KB	556.4KB	+5.4KB
`lens`	1.4MB	1.4MB	+265.0B
`unifiedHistogram`	48.5KB	48.4KB	-154.0B
total			+5.5KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/unified-field-list`	302	303	+1

History

💔 Build #158025 failed d55d577
💔 Build #158009 failed b54538e
💔 Build #157977 failed a1173fa
💚 Build #157897 succeeded c824954
💛 Build #157883 was flaky 920ba5b

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @jughosta

andreadelrio

Design changes for v1 LGTM! Nice job @jughosta.

davismcphee

Thanks for the fixes! I did a final round of testing and confirmed the latest issues were fixed, and I didn't notice anything else. Awesome work on this, it's such a big improvement to Discover's UI, LGTM 👍

stratoula

This is indeed awesome Julia! LGTM!

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">

## 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 <[email protected]>

## 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 <[email protected]> (cherry picked from commit 6990b1a)

# Backport This will backport the following commits from `main` to `8.11`: - [[Discover] Fix tabs border above the grid (#167967)](#167967)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Julia Rechkunova <[email protected]>

## 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 <[email protected]>

qd-danh · 2023-11-17T19:58:35Z

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

jughosta and others added 30 commits August 17, 2023 16:46

[Discover] Update grid styles

6be6936

[Discover] Update tests

7c27938

[Discover] Update tests

72bc5b2

[Discover] Add a comment

0ac8342

[Discover] Update tests

69ed036

[Discover] Update tests

680641b

[Discover] Address review comments

de53757

[Discover] Enable row stripes

aca35f3

Merge remote-tracking branch 'upstream/main' into redesign-checkboxes

2c65d30

# Conflicts: # packages/kbn-unified-data-table/src/components/data_table.scss # packages/kbn-unified-data-table/src/constants.ts

[Discover] Update header background

bdcbf1d

[Discover] Update document view

1c71502

Merge branch 'main' into redesign-checkboxes

159dcbb

[Discover] Update jest snapshots

fa58fa3

Merge branch 'main' into redesign-checkboxes

e575c01

[Discover] Remove background from panels

f56a108

[Discover] Update field list styles

dbe7a7f

[Discover] Update Add Field button

f5d1996

[Discover] Remove tabs background

9a139e3

[Discover] Apply item shadow changes only for discover

2eddea6

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

15693c9

…fix'

[Discover] Swap checkbox and arrow back

604d722

[Discover] Update context app layout to remove extra horizontal margin

7e59c76

[Discover] Add top border to grid controls

46d813c

[Discover] Change how shadow is overriden

1820c3a

Merge remote-tracking branch 'origin/164661-discover-panels-redesign'…

3ffc0ff

… into 164661-discover-panels-redesign

[Discover] Fix tests

2e783c3

[Discover] Remove comment

1f86e50

Merge branch 'main' into 164661-discover-panels-redesign

cd4c90c

Merge branch 'main' into redesign-checkboxes

22637f5

Merge branch 'main' into 164661-discover-panels-redesign

5cd57a0

Fix Unified Field List drag styles

951fe65

davismcphee reviewed Sep 9, 2023

View reviewed changes

...ages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx Show resolved Hide resolved

[Discover] Fine tune row controls positioning

a93943c

Merge pull request #6 from davismcphee/discover-redesign-drag-fix

55daac1

[Discover Redesign] Improve Unified Field List item drag styles

jughosta requested a review from a team as a code owner September 11, 2023 07:42

jughosta commented Sep 11, 2023

View reviewed changes

jughosta added 7 commits September 11, 2023 09:52

Merge branch 'main' into discover-redesign-v1

920ba5b

Merge branch 'main' into discover-redesign-v1

c824954

[Discover] Make time field column a little wider

dec3d35

[Discover] Fix row controls on Surrounding Documents page

a1173fa

[Discover] Update test snapshots

b54538e

Merge branch 'main' into discover-redesign-v1

d55d577

Merge branch 'main' into discover-redesign-v1

ee7807a

andreadelrio approved these changes Sep 11, 2023

View reviewed changes

davismcphee approved these changes Sep 12, 2023

View reviewed changes

stratoula approved these changes Sep 12, 2023

View reviewed changes

jughosta merged commit 6cb937a into elastic:main Sep 12, 2023

jughosta deleted the discover-redesign-v1 branch September 12, 2023 06:51

kibanamachine added the v8.11.0 label Sep 12, 2023

jughosta mentioned this pull request Sep 29, 2023

[Discover] Use new icons for the sidebar toggle button #167625

Merged

jughosta mentioned this pull request Oct 4, 2023

[Discover] Fix tabs border above the grid #167967

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Redesign for the grid, panels and sidebar v1 #165866

[Discover] Redesign for the grid, panels and sidebar v1 #165866

jughosta commented Sep 6, 2023 •

edited

Loading

andreadelrio commented Sep 8, 2023

davismcphee left a comment

jughosta commented Sep 9, 2023

jughosta Sep 11, 2023

kibana-ci commented Sep 11, 2023

API count

andreadelrio left a comment

davismcphee left a comment

stratoula left a comment

qd-danh commented Nov 17, 2023

[Discover] Redesign for the grid, panels and sidebar v1 #165866

[Discover] Redesign for the grid, panels and sidebar v1 #165866

Conversation

jughosta commented Sep 6, 2023 • edited Loading

Summary

Part 1

Part 2

Part 3

andreadelrio commented Sep 8, 2023

davismcphee left a comment

Choose a reason for hiding this comment

jughosta commented Sep 9, 2023

jughosta Sep 11, 2023

Choose a reason for hiding this comment

kibana-ci commented Sep 11, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

API count

History

andreadelrio left a comment

Choose a reason for hiding this comment

davismcphee left a comment

Choose a reason for hiding this comment

stratoula left a comment

Choose a reason for hiding this comment

qd-danh commented Nov 17, 2023

jughosta commented Sep 6, 2023 •

edited

Loading