Field List Item Styles Across Discover & Lens

[MichaelMarcialis]

In the latest Discover design refresh concepts provided by @andreadelrio and I, we suggested that each field list item should be 32px tall with no margin in between siblings and 12px font size (across both the Discover and Lens apps). Discover currently styles these field list items to be 24px tall with 2px margin between siblings and 12px font size. Lens currently styles field list items to be 32px tall with 4px margin between siblings and 14px font size. While I can appreciate the desire for greater data density in the Discover use case, I'm not fond of the overly small vertical drag real estate such a small field list item height provides. I'm also not fond of the style inconsistencies between field lists in the Discover and Lens apps.

While I know there has been some friendly disagreement in the past regarding the ideal field list item height across both apps, I think now is a good time for us to unify these field list item styles to be consistent across both Discover and Lens using our design suggestions above. Doing so provides what I would consider to be minimal safe real estate with which users could grab and drag an item (though others tend to suggest even larger, ~38–40px minimum). While I understand there is a desire for high density in the field list, I think this needs to be balanced against usability.

The end result of this suggested change also isn't very dramatic on the field density topic. For example, in a 1440x1024 viewport, the current field list item styles show 27.5 fields in Discover. Updating the styles to match our design suggestions show 23 fields in Discover. I'm personally OK having 4.5 fields falling below the fold for the sake of better drag-and-drop usability.

CCing @jughosta.

Originating comment: #171572 (comment)

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[elasticmachine]

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