Skip to content

[Lens] v8 theme adjustments #95054

@flash1293

Description

@flash1293

Some parts of the Lens UI look a little weird since the update. This issues lists out all things that were found - consulted with @MichaelMarcialis about what to do with them for now.

Leave as is

Small reset button

Screenshot 2021-03-22 at 14 16 12 Screenshot 2021-03-22 at 14 16 08
  • Leave as is for now

Small drop to add button

Screenshot 2021-03-22 at 14 17 42 Screenshot 2021-03-22 at 14 17 45
  • Keep it

tooltip first link focus ring

Kapture 2021-03-24 at 10 25 03

  • is fixed already

Needs fix

Large shadows for suggestions and workspace

Especially noticable on the suggestion panels (shadow gets cut off)

Screenshot 2021-03-22 at 14 16 52

Screenshot 2021-03-22 at 14 16 57

  • Drop shadows
  • Add back borders
  • Make sure current one gets darker border

adding new layer button focus ring is gray, but overall it looks weird:

Screenshot 2021-03-23 at 17 40 16

  • use standard text button (filled)

non-matching chart area rounded border

Screenshot 2021-03-23 at 12 15 09

  • Might be EUI bug - check whether page content component is using the right variable for border rounding (or whether Lens code should use another variable)
    Used $euiBorderRadiusSmal

focus states for the fields are too similar

outer:
Screenshot 2021-04-13 at 18 02 47

inner:
Screenshot 2021-04-13 at 18 02 12

  • remove outer ring from inner focus

Weird ranges/filters

  • No padding
  • Very large shadow
  • Small add button (and missing space between items and button)

Screenshot 2021-03-22 at 14 13 55

Screenshot 2021-03-22 at 14 13 59

Screenshot 2021-03-22 at 14 14 19

Screenshot 2021-03-22 at 14 14 24

  • Disable shadow
  • Enable border
  • Add padding if necessary

add borders/change background color of buttons to distinguish them from background

Screenshot 2021-04-13 at 17 47 24

filter by looks not well:

Screenshot 2021-03-29 at 13 57 31

  • treat similar to filters/ranges for now, spin of further improvements into separate issue

Metadata

Metadata

Assignees

Labels

Feature:LensTeam:VisualizationsTeam label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t//bugFixes for quality problems that affect the customer experience

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions