Homepage / index pattern design cleanup #16005

snide · 2018-01-11T21:49:12Z

Replaces KUI with EUI components in the homepage / install / directory pages. This makes it look closer to the original mocks. Also fixed some small issues I saw in the EUI implementation of index patterns.

snide · 2018-01-11T21:50:19Z

src/core_plugins/kibana/public/home/components/home.js

@@ -56,7 +57,7 @@ export function Home({ addBasePath, directories }) {
    return (
      <div className="kuiVerticalRhythm">
        <KuiCardGroup>
-          <KuiCard style={cardStyle}>
+          <KuiCard style={cardStyle} className="euiPanel">


This class works for now. I'll replace with a EuiCard component once I have one built.

snide · 2018-01-11T21:51:14Z

src/core_plugins/kibana/public/home/components/home.js

+            </EuiText>
+          </EuiTextColor>
+          <EuiSpacer size="s" />
+          <a href="/app/kibana#/management/kibana/index" className="euiButton euiButton--primary euiButton--small">


EuiButton doesn't have an href ability yet, so I'm manually building the HTML. We should replace this with a component later.

snide · 2018-01-11T21:54:21Z

cc @formgeist @alexfrancoeur who were interested in this.

nreese

looks like the jest tests for tutorial needs to have updated snapshots.

cchaos · 2018-01-11T22:32:18Z

I'm not a fan that the breadcrumbs move within the page layout. Can we always keep the breadcrumbs tight to the top left but the page title and stuff can get centered?

snide · 2018-01-12T08:13:37Z

ui_framework/src/global_styling/reset/_reset.scss

 :focus {
-  @include focus;


@cjcenizal Don't need you to review this whole PR, but can you think of any reason this approach for the focus stuff is a bad idea?

formgeist · 2018-01-12T08:42:58Z

I'm with @cchaos on the breadcrumb placement shifting from the directory pages to instructions page. Wondering if "Home" breadcrumb label should be added to the Home page too. But perhaps the link colour shouldn't be blue, but rather grey and turn darker with underline on hover like in the tabs. Much like the new header breadcrumb.

I'd also suggest adding some more space between the headline and the first three solutions boxes. It all feels a little cramped now. Additionally, I'd not make the index pattern text block on top of each other. Looked better before IMO.

Awesome to see the new tabs and panels in the directory pages though 🙌

snide · 2018-01-12T08:45:25Z

The text next to the button caused too many wrapping issues. It only works with super wide screens.

…

On Jan 12, 2018 12:43 AM, "Casper Hübertz" ***@***.***> wrote: I'm with @cchaos <https://github.com/cchaos> on the breadcrumb placement shifting from the directory pages to instructions page. Wondering if "Home" breadcrumb label should be added to the Home page too. But perhaps the link colour shouldn't be blue, but rather grey and turn darker with underline on hover like in the tabs. Much like the new header breadcrumb. I'd also suggest adding some more space between the headline and the first three solutions boxes. It all feels a little cramped now. Additionally, I'd not make the index pattern text block on top of each other. Looked better before IMO. [image: screenshot 2018-01-12 09 36 56] <https://user-images.githubusercontent.com/4104278/34866360-a2668fdc-f77c-11e7-9d8f-af559cc8d37e.png> Awesome to see the new tabs and panels in the directory pages though 🙌 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16005 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATzpxOV-jKehVpdT8a3JabP7ispdVVoks5tJxsggaJpZM4RbgAF> .

formgeist · 2018-01-12T08:47:24Z

I understand - perhaps the extra space underneath that section might help it feeling less boxed up in the corner.

formgeist · 2018-01-12T08:51:33Z

Just noticed the spacing feels a little off in the instructions. The spacing from the step title to content is more than from one step to another. I'd turn this around - add less space from title to to content, possibly add the extra space to the bottom of the content to the next step.

snide · 2018-01-12T08:56:22Z

It's because of the single line against the button. Gonna be a variable problem depending on the length of the content. Adding more space between the steps themselves can help mitigate, but itll still look a little off.

…

On Jan 12, 2018 12:51 AM, "Casper Hübertz" ***@***.***> wrote: Just noticed the spacing feels a little off in the instructions. The spacing from the step title to content is more than from one step to another. I'd turn this around - add less space from title to to content, possibly add the extra space to the bottom of the content to the next step. [image: screenshot 2018-01-12 09 49 45] <https://user-images.githubusercontent.com/4104278/34866823-2ac63598-f77e-11e7-80ee-aaae7be22ba9.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16005 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATzp_53YCZx9KzsfGWBPDX8vUlfaFbjks5tJx0kgaJpZM4RbgAF> .

alexfrancoeur · 2018-01-12T12:12:13Z

loving this @snide!

I noticed that with the updates to the card's in the list view (or maybe this was the case before) we are not highlighting as we tab through. It's tabbing, but the blue border indicating the element I'm on is now missing. The tabs (All, Metrics, Logs, Security Analytics) also don't seem to highlight light blue as the tabs do in the tutorial view when you navigate via keyboard.

Probably out of scope for this PR, but things get weird when you go full screen in a large monitor. What are the thoughts around allowing for a maximum width for the cards / sections here and then just centering the content at some point? I realize this may be resolved with EUI but thought I'd throw it out there.

Also, big +1 on the breadcrumb. I mentioned this a few times in my original reviews of the PR. Seems odd to me that we shift from top left to center. While the breadcrumb is honestly a bit different with every application, it's at least consistently placed in the top left

This isn't too big of a deal and may be more for @nreese but I found it interesting that the breadcrumb didn't bring me back to the exact path I took. If you look at the gif below, I go through metrics here but then returning to add data brings me to the All tab. Again, not a priority but I just found it odd.

Can't wait to see the icons in here too! From https://github.com/elastic/dev/issues/844#issuecomment-357170834 it sounds like we may possibly need a few extra in 6.2. Though I imagine we can introduce these after FF if necessary.

Love that this is now underlining the selected tab. It looked a bit odd just being white underneath the tab you were in.

I've mentioned this a few times and would be interested in designs take here, but all URL's currently redirect you away from Kibana. I think the better user experience here would be to open tabs instead. Thoughts on general workflow and if we agree, addressing in this PR? Also the more I think about it - what's the best experience here from an accessibility perspective? I'd still lean towards new tab.

All in all, the new design changes, spacing, margins and numbered / bulleted steps look great.

nreese · 2018-01-12T14:00:37Z

@alexfrancoeur URLs should now open a new tab when clicked - #15995

alexfrancoeur · 2018-01-12T14:29:08Z

@nreese awesome! appreciate the quick turnaround on that, I think it will drastically improve the experience here

snide · 2018-01-12T19:51:29Z

OK. Think I got most of everyones issues...

Max-width set on all home/install pages. This forces the breadcrumbs to align against the content at all times. I also went through and converted as much of this to EUI as I could so that the positions of titles / breadcrumbs and the like don't shift too much.
Spacing added to the bottom of steps to give some offset to single-line / button combo rows.
Synopsis bit refactored so it allows for better focus states.

I've migrated as much of this as I could to using pure EUI components now. Still some buttons that I can't convert till we fix elastic/eui#24

alexfrancoeur · 2018-01-12T20:55:55Z

just pulled down, lgtm dave

Rebuilds most of the homepage using EUI components. Adjusts styles to be closer to mocks. Conflicts: src/core_plugins/kibana/public/home/components/tutorial/introduction.js

Rebuilds most of the homepage using EUI components. Adjusts styles to be closer to mocks.

snide requested a review from nreese January 11, 2018 21:49

snide commented Jan 11, 2018

View reviewed changes

snide added v6.2.0 v7.0.0 labels Jan 11, 2018

snide mentioned this pull request Jan 11, 2018

UI/UX Tweaks for the Add Data UI #15961

Closed

nreese reviewed Jan 11, 2018

View reviewed changes

snide commented Jan 12, 2018

View reviewed changes

snide added 5 commits January 12, 2018 13:05

Homepage / index pattern cleanup

23454ac

remove brute force focus from eui components

1b78e00

max width home pages, adjust margins on steps

0f44704

fix spacing around breadcrumbs

f030b3b

fix focus states for synopsis

5ba58c2

snide force-pushed the eui/cleanup branch from 5b5f331 to 5ba58c2 Compare January 12, 2018 21:09

snapshots

ae17c99

snide merged commit c5001b1 into elastic:master Jan 12, 2018

snide deleted the eui/cleanup branch January 12, 2018 23:59

snide mentioned this pull request Jan 13, 2018

[6.x] Homepage / index pattern design cleanup (#16005) #16026

Closed

snide mentioned this pull request Jan 13, 2018

[6.x] Homepage / index pattern design cleanup (#16005) #16032

Merged

snide added a commit to snide/kibana that referenced this pull request Jan 13, 2018

Homepage / index pattern design cleanup (elastic#16005)

852e4fc

Rebuilds most of the homepage using EUI components. Adjusts styles to be closer to mocks.

snide added a commit that referenced this pull request Jan 13, 2018

Homepage / index pattern design cleanup (#16005) (#16032)

acfaf1d

Rebuilds most of the homepage using EUI components. Adjusts styles to be closer to mocks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Homepage / index pattern design cleanup #16005

Homepage / index pattern design cleanup #16005

snide commented Jan 11, 2018

snide Jan 11, 2018

snide Jan 11, 2018

snide commented Jan 11, 2018

nreese left a comment

cchaos commented Jan 11, 2018

snide Jan 12, 2018

formgeist commented Jan 12, 2018

snide commented Jan 12, 2018 via email

formgeist commented Jan 12, 2018

formgeist commented Jan 12, 2018

snide commented Jan 12, 2018 via email

alexfrancoeur commented Jan 12, 2018

nreese commented Jan 12, 2018

alexfrancoeur commented Jan 12, 2018

snide commented Jan 12, 2018

alexfrancoeur commented Jan 12, 2018

Homepage / index pattern design cleanup #16005

Homepage / index pattern design cleanup #16005

Conversation

snide commented Jan 11, 2018

snide Jan 11, 2018

Choose a reason for hiding this comment

snide Jan 11, 2018

Choose a reason for hiding this comment

snide commented Jan 11, 2018

nreese left a comment

Choose a reason for hiding this comment

cchaos commented Jan 11, 2018

snide Jan 12, 2018

Choose a reason for hiding this comment

formgeist commented Jan 12, 2018

snide commented Jan 12, 2018 via email

formgeist commented Jan 12, 2018

formgeist commented Jan 12, 2018

snide commented Jan 12, 2018 via email

alexfrancoeur commented Jan 12, 2018

nreese commented Jan 12, 2018

alexfrancoeur commented Jan 12, 2018

snide commented Jan 12, 2018

alexfrancoeur commented Jan 12, 2018