Skip to content

[Graph] Empty workspace overlay#45547

Merged
flash1293 merged 202 commits intoelastic:masterfrom
flash1293:graph/call-to-action
Oct 3, 2019
Merged

[Graph] Empty workspace overlay#45547
flash1293 merged 202 commits intoelastic:masterfrom
flash1293:graph/call-to-action

Conversation

@flash1293
Copy link
Copy Markdown
Contributor

@flash1293 flash1293 commented Sep 12, 2019

Have overlays to guide the user to get something on the screen.

Adds a function to fetch the most common terms of the selected fields and prepopulate the workspace like that.

Screenshot 2019-09-24 at 15 26 14

cc @cchaos @shaunmcgough

@flash1293
Copy link
Copy Markdown
Contributor Author

Thanks for your feedback. What about this version?

Screenshot 2019-09-30 at 14 26 14

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@elizabetdev
Copy link
Copy Markdown
Contributor

Hi @flash1293,

I've been changing the design a little based on @timroes comments. Instead of using an opacity the text is now grayed out.

I would use a checkmark to help visualize where we are and once the task is done the check icon changes to a green checkInCircleFilled icon.

Here's the link to the updated prototype:
https://www.figma.com/proto/rDcLVEfYMNah0nVvfZz2w9/Graph-Let-s-get-started-2?node-id=46%3A79&viewport=-2080%2C365%2C0.5&scaling=min-zoom

@ryankeairns
Copy link
Copy Markdown
Contributor

@miukimiu for accessibility purposes (color contrast) the disabled text will need to be darker. That makes this more challenging of a problem to solve, but the light gray won't be readable.

The lightest gray we can use (which is not light 😏) is euiColorDarkShade. For reference, you can check the Colors page on the EUI docs site: https://elastic.github.io/eui/#/guidelines/colors

@elizabetdev
Copy link
Copy Markdown
Contributor

Thanks @ryankeairns! My bad! I copied the color from the disabled button 😛. The prototype is now updated and using theeuiColorDarkShade.

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Sep 30, 2019

An alternate suggestion for the current task icon is to use the sortRight arrow, so that it's pointing to the current step. I think the checkmark is still confusing as no matter what you pair next to it will always looks complete.

@flash1293
Copy link
Copy Markdown
Contributor Author

Thanks for all of your suggestions - this is getting a real team work :)

  • checkInCircleFilled for done items @miukimiu
  • sortRight for the current item @cchaos
  • euiColorDarkShade for disabled items @ryankeairns
  • aria-label for the heading @myasonik

Screenshot 2019-09-30 at 19 32 53

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

<EuiIcon type={state === 'active' ? 'sortRight' : 'check'} />
</span>
)}
{children}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to add to your review soup, wrap this in <EuiText/> to fix your text line heights.

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@flash1293 flash1293 merged commit 127eab0 into elastic:master Oct 3, 2019
@flash1293 flash1293 deleted the graph/call-to-action branch October 3, 2019 09:13
flash1293 added a commit to flash1293/kibana that referenced this pull request Oct 3, 2019
jloleysens added a commit to jloleysens/kibana that referenced this pull request Oct 3, 2019
…ysens/kibana into console-fix-menu-actions-alignment

* 'console-fix-menu-actions-alignment' of github.com:jloleysens/kibana: (59 commits)
  [Canvas] i18n for page manager, page preview, and shape preview (elastic#46865)
  [SIEM] hide siem data on empty string or _all (elastic#47166)
  [Uptime] Shim UI exports for new platform (elastic#44722)
  [Monitoring] Metricbeat Migration Wizard Tests (elastic#47139)
  [Logs UI] Support partitioned log rate results in API (elastic#46751)
  [APM] Remove beta badge from transaction breakdown (elastic#47163)
  test: 💍 convert Interpreter font function tests to Jest (elastic#47193)
  visualizations 👉 NP-ready (elastic#47142)
  [Uptime] Update pings chart colors (elastic#46780)
  Add scroll into view to avoid tooltip overlap (elastic#47106)
  Variety of quick a11y fixes (elastic#46569)
  [Graph] Empty workspace overlay (elastic#45547)
  [ML] Converts index and saved search selection to React (elastic#47117)
  [Uptime] Change default status filter in ping list to all on monitor page  (elastic#47108)
  refactor: 💡 convert Interpreter .js -> .ts (elastic#44545)
  Add TypeScript rules to STYLEGUIDE [skip ci] (elastic#47125)
  chore(NA): fix logic behind cleaning x-pack node modules on build (elastic#47091)
  [SIEM] Update Settings Text (elastic#47147)
  Add KQL functionality in the find function of the saved objects (elastic#41136)
  [Maps] Add 'InjectedData' class and revise so File Upload Features are assigned to new InjectedData instances (elastic#46381)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Graph Graph application feature release_note:enhancement Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.5.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.