[Lens] Field item hovers, empty state graphic, and operation not applicable callout #46864

cchaos · 2019-09-27T21:33:27Z

Waiting on text finalization and dark mode graphic

1. Better hover and focus states of field items

It also adds an info icon with tooltip explaining how to interact with the field item (click or drag).

2. Added the empty state graphic

Along with some better text.

3. Fixed #46753

Changed callout to 'warning' color and changed text but could use a final pass on the text.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

~~[ ] This was checked for cross-browser compatibility, including a check against IE11~~
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~[ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
~~[ ] This was checked for keyboard-only and screenreader accessibility~~

gchaps · 2019-09-27T22:53:38Z

Warning

I'm a little confused by the text. Do any of these work?

To use this function, select a different field.

Cannot use this function with the current field.

Tooltip

How about being more specific about the data you can view?

Click to view top values. Or, drag into visualization.

elasticmachine · 2019-09-27T22:54:41Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

AlonaNadler · 2019-09-27T22:57:28Z

I'm good with @gchaps suggestions "To use this function, select a different field ↖️ " can we add an arrow to the field drop-down?

wylieconlon

Left some suggestions on wording, they are optional. You do need to translate the <h3> text.

x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx

x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

cchaos · 2019-09-30T16:51:22Z

I guess I'll go ahead and take this out of draft. I've made some text updates. Look like maybe the field item one is still in the works. But the rest of the PR can be reviewed.

elasticmachine · 2019-09-30T16:51:38Z

Pinging @elastic/kibana-app

cchaos · 2019-09-30T16:53:02Z

@AlonaNadler I've updated the screenshots for items 2 and 3 above.

cchaos · 2019-09-30T16:54:35Z

Looks like I'm getting a type error on the chrome basepath stuff. Maybe a dev could help out:

    Error name:    "TypeError"
    Error message: "_chrome.default.addBasePath is not a function"

elasticmachine · 2019-09-30T16:58:24Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-30T17:56:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-30T19:15:37Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-30T22:56:49Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

AlonaNadler

Can we make the popup disappear when selecting another field or clicking anywhere else in the UI
currently
click to see a preview, drag to create a visualization
on the empty state preview panel, instead of build visualization, should we say create visualization? @gchaps
Message error looks much better
Empty state looks great

and adding info icon with tooltip

cchaos · 2019-10-01T20:10:30Z

This PR now also contains a few text review updates

(See commit history and gDoc).

Status

Barring any failing TS types or test, this is reviewable.

cchaos · 2019-10-01T20:24:06Z

Can we make the popup disappear when selecting another field or clicking anywhere else in the UI

This is not an issue introduced by this PR, it has to do with the drag and drop intervening in the outside click of the popover. I don't see it as critical will need a dev's attention so I'm going to defer this one.

click to see a preview, drag to create a visualization

There's been a lot of back and forth on this text in the doc. Please get with @gchaps to finalize this text together. For now I will keep what's in there since "preview" is confusing as I'd expect a "preview" of what it'd look like in the chart.

gchaps · 2019-10-01T21:05:42Z

@AlonaNadler "Create a visualization" is good for the empty state.

wylieconlon · 2019-10-01T21:11:39Z

x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

@@ -260,15 +271,15 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
  if (histogram && histogram.buckets.length && topValues && topValues.buckets.length) {
    title = (
      <EuiButtonGroup
-        buttonSize="s"
+        buttonSize="compressed"


Think this is related? The label is being cut off for "Distribution"

I don't understand why your screenshots keep showing up as all caps in those buttons. What env are you in?

I primarily develop in Firefox

That last commit should fix your issue.

wylieconlon

Tested in light and dark mode with a random base path. Only found one issue with the "Distribution" label, and that is something I can fix separately. Approving because I feel like this is safe to merge.

elasticmachine · 2019-10-01T21:21:49Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-10-01T22:15:08Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-10-01T22:34:23Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…icable callout (elastic#46864) 1. Better hover and focus states of field items 2. Added the empty state graphic 3. Fixed elastic#46753

…icable callout (#46864) (#47116) 1. Better hover and focus states of field items 2. Added the empty state graphic 3. Fixed #46753

cchaos added WIP Work in progress v8.0.0 Feature:Lens v7.5.0 labels Sep 27, 2019

cchaos requested review from wylieconlon, chrisdavies, AlonaNadler and gchaps September 27, 2019 21:33

wylieconlon reviewed Sep 30, 2019

View reviewed changes

cchaos force-pushed the lens-field-panel-design branch from c69adfa to a42dbb3 Compare September 30, 2019 15:52

cchaos marked this pull request as ready for review September 30, 2019 16:51

cchaos requested a review from a team September 30, 2019 16:51

cchaos requested a review from a team as a code owner September 30, 2019 16:51

cchaos added Team:Visualizations Visualization editors, elastic-charts and infrastructure and removed WIP Work in progress labels Sep 30, 2019

cchaos added the release_note:skip Skip the PR/issue when compiling release notes label Sep 30, 2019

cchaos force-pushed the lens-field-panel-design branch from 324a69f to cddf3a8 Compare September 30, 2019 18:02

AlonaNadler reviewed Oct 1, 2019

View reviewed changes

Fixing hover and focus states of field item

8007091

and adding info icon with tooltip

cchaos added 7 commits October 1, 2019 15:52

Add dark mode empty state graphic

1f4bf14

Final? text update

c490efe

Fix i18n & 1 test

8d2270d

Better “missing” style

504951e

Change suggestions reload button text

1946c7a

Style no fields message

639c64b

Using core instead of chrome

8bfcb57

cchaos force-pushed the lens-field-panel-design branch from ccb1a2a to 8bfcb57 Compare October 1, 2019 19:53

cchaos added 5 commits October 1, 2019 16:00

Sentence case Filter ratio

177b957

Sentence case Date histogram

2139a07

Sentence case Top values

8eb4169

Update ip icon to be ip

c6eeddb

Missed a word in aria-label

4551a87

cchaos requested a review from wylieconlon October 1, 2019 20:10

Changed “Build” to “Create”

0a88905

wylieconlon reviewed Oct 1, 2019

View reviewed changes

wylieconlon approved these changes Oct 1, 2019

View reviewed changes

for lowercase on button group

7603b13

snide approved these changes Oct 2, 2019

View reviewed changes

snide merged commit 2f80cc5 into elastic:master Oct 2, 2019

snide deleted the lens-field-panel-design branch October 2, 2019 13:13

snide mentioned this pull request Oct 2, 2019

[7.x] [Lens] Field item hovers, empty state graphic, and operation not applicable callout (#46864) #47116

Merged

snide added a commit that referenced this pull request Oct 2, 2019

[Lens] Field item hovers, empty state graphic, and operation not appl…

e685cf4

…icable callout (#46864) (#47116) 1. Better hover and focus states of field items 2. Added the empty state graphic 3. Fixed #46753

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Field item hovers, empty state graphic, and operation not applicable callout #46864

[Lens] Field item hovers, empty state graphic, and operation not applicable callout #46864

cchaos commented Sep 27, 2019 •

edited

Loading

gchaps commented Sep 27, 2019

elasticmachine commented Sep 27, 2019

AlonaNadler commented Sep 27, 2019

wylieconlon left a comment

cchaos commented Sep 30, 2019

elasticmachine commented Sep 30, 2019

cchaos commented Sep 30, 2019

cchaos commented Sep 30, 2019

elasticmachine commented Sep 30, 2019

elasticmachine commented Sep 30, 2019

elasticmachine commented Sep 30, 2019

elasticmachine commented Sep 30, 2019

AlonaNadler left a comment

cchaos commented Oct 1, 2019

cchaos commented Oct 1, 2019

gchaps commented Oct 1, 2019 •

edited

Loading

wylieconlon Oct 1, 2019

cchaos Oct 1, 2019

wylieconlon Oct 1, 2019

cchaos Oct 1, 2019

wylieconlon left a comment

elasticmachine commented Oct 1, 2019

elasticmachine commented Oct 1, 2019

elasticmachine commented Oct 1, 2019

[Lens] Field item hovers, empty state graphic, and operation not applicable callout #46864

[Lens] Field item hovers, empty state graphic, and operation not applicable callout #46864

Conversation

cchaos commented Sep 27, 2019 • edited Loading

Waiting on text finalization and dark mode graphic

1. Better hover and focus states of field items

2. Added the empty state graphic

3. Fixed #46753

Checklist

gchaps commented Sep 27, 2019

Warning

Tooltip

elasticmachine commented Sep 27, 2019

💔 Build Failed

AlonaNadler commented Sep 27, 2019

wylieconlon left a comment

Choose a reason for hiding this comment

cchaos commented Sep 30, 2019

elasticmachine commented Sep 30, 2019

cchaos commented Sep 30, 2019

cchaos commented Sep 30, 2019

elasticmachine commented Sep 30, 2019

💔 Build Failed

elasticmachine commented Sep 30, 2019

💔 Build Failed

elasticmachine commented Sep 30, 2019

💔 Build Failed

elasticmachine commented Sep 30, 2019

💔 Build Failed

AlonaNadler left a comment

Choose a reason for hiding this comment

cchaos commented Oct 1, 2019

This PR now also contains a few text review updates

Status

cchaos commented Oct 1, 2019

gchaps commented Oct 1, 2019 • edited Loading

wylieconlon Oct 1, 2019

Choose a reason for hiding this comment

cchaos Oct 1, 2019

Choose a reason for hiding this comment

wylieconlon Oct 1, 2019

Choose a reason for hiding this comment

cchaos Oct 1, 2019

Choose a reason for hiding this comment

wylieconlon left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 1, 2019

💚 Build Succeeded

elasticmachine commented Oct 1, 2019

💔 Build Failed

elasticmachine commented Oct 1, 2019

💚 Build Succeeded

cchaos commented Sep 27, 2019 •

edited

Loading

gchaps commented Oct 1, 2019 •

edited

Loading