Re-style and re-order top menu buttons #79206

ryankeairns · 2020-10-01T20:19:07Z

Summary

With the new stacked header design, 'top menus' (in the legacy Kibana apps) were moved from the app level to the chrome/header level. For some (author included :) ), this has resulted in an undesirable visual design/UX outcome for apps that used filled buttons in their menu. For example:

Competing buttons in Dashboard

Competing buttons in Lens

Proposed 7.10 solution introduced by this PR

Replace the filled (emphasized) buttons with a hollow/bordered + icon button and make it the last item on the right.
For Dashboard, make 'Edit' the last item and add an icon even though it was previously not emphasized.
Where possible, use a filled-style icon for additional emphasis (e.g. checkInCircleFilled and plusInCircleFilled)
Apps that did not have an emphasized button (Discover, Graph) remain unchanged.

Affected apps (Dashboard, Lens, Visualize, Maps)

Dashboard (edit mode)

Dashboard (view mode)

Lens

Visualize

Visualize (from Dashboard)

Maps

Looking ahead

The recommended approach gets even more 'bold' when viewed in the Amsterdam theme. With the changes proposed by this PR, it would look as follows when the theme is enabled. Additionally, the plan is for this new theme to become the default later in the 7.x series.

In addition to the top menu, teams may begin exploring additional UI enhancements if they desire to further emphasize core actions. For example, the Dashboard team is exploring adding a toolbar within their UI (for this and other reasons):

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios

cchaos

😍 I'm really diggin the consistent placement and look to the Save/Edit buttons. That'll go a long way for users.

The only one that fails that a bit is the dashboard one, which even the wording of that one "Add new" is confusing because of it's location in the menu bar I'd assume the "New" in that context is a new dashboard. But I know this was a decision made a while back, and by the looks of the "Looking ahead" mocks, that button might move when there's more options.

Thanks for pulling this one together @ryankeairns !

ryankeairns · 2020-10-01T20:54:25Z

😍 I'm really diggin the consistent placement and look to the Save/Edit buttons. That'll go a long way for users.

The only one that fails that a bit is the dashboard one, which even the wording of that one "Add new" is confusing because of it's location in the menu bar I'd assume the "New" in that context is a new dashboard. But I know this was a decision made a while back, and by the looks of the "Looking ahead" mocks, that button might move when there's more options.

Thanks for pulling this one together @ryankeairns !

Woo!
For those following along, the plan is to change that 'Create new' to be 'Add panel'. There are a couple of other changes that need to happen in conjunction, which I believe will be coming soon-ish.

ThomThomson

This design is looking great - my only problem with the last one was that there wasn't enough indication of which item the icon belonged to, and this addresses that. Moving the emphasized item to the right, also works quite well here.

I tested on chrome, and did run into a super tiny issue, where the hover state would slightly cut off the top outline of the button:

Otherwise though, this is really solid.

ryankeairns · 2020-10-01T21:22:52Z

Thanks @ThomThomson
I should have noted that! The clipped button will be fixed once the pending EUI upgrade is merged. The button animation has been removed from the EUI component.

ThomThomson

Knowing that the above tiny issue will be fixed, everything LGTM

nreese

Map buttons are out of order with the save and return use case. Save and return button should move to the right just like in Lens.

ryankeairns · 2020-10-02T14:41:31Z

Good catch @nreese . The order has been fixed and, as with the others, only the primary call-to-action (i.e. the button) will show an icon. In this case, when Save and Return is visible, then the icon will not show for Save As.

Default state

From Dashboard

nreese

LGTM
code review, tested in chrome

kibanamachine · 2020-10-02T16:13:02Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 7b0025d

Metrics [docs]

async chunks size

id	before	after	diff
`lens`	1010.4KB	1010.5KB	+59.0B
`maps`	3.3MB	3.3MB	+63.0B
`visualize`	271.7KB	271.8KB	+107.0B
total			+229.0B

page load bundle size

id	before	after	diff
`dashboard`	570.4KB	570.4KB	+39.0B
`navigation`	21.9KB	22.1KB	+166.0B
total			+205.0B

History

💚 Build #78938 succeeded abb848d
💔 Build #78924 failed 959673b

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Re-style and re-order top menu buttons * Update snapshot due to removed fill prop * Fix link order for Maps

Re-style and re-order top menu buttons

959673b

ryankeairns added release_note:skip Skip the PR/issue when compiling release notes v7.10.0 v8.0.0 labels Oct 1, 2020

ryankeairns marked this pull request as ready for review October 1, 2020 20:31

ryankeairns requested a review from a team October 1, 2020 20:31

ryankeairns requested review from a team as code owners October 1, 2020 20:31

ryankeairns mentioned this pull request Oct 1, 2020

Align top menus to new header design #78332

Closed

1 task

cchaos approved these changes Oct 1, 2020

View reviewed changes

Update snapshot due to removed fill prop

abb848d

ThomThomson reviewed Oct 1, 2020

View reviewed changes

ThomThomson approved these changes Oct 1, 2020

View reviewed changes

nreese reviewed Oct 2, 2020

View reviewed changes

Fix link order for Maps

7b0025d

ryankeairns requested a review from nreese October 2, 2020 15:32

nreese approved these changes Oct 2, 2020

View reviewed changes

ryankeairns merged commit d9915fd into elastic:master Oct 2, 2020

ryankeairns added a commit to ryankeairns/kibana that referenced this pull request Oct 2, 2020

Re-style and re-order top menu buttons (elastic#79206)

9fae81b

* Re-style and re-order top menu buttons * Update snapshot due to removed fill prop * Fix link order for Maps

ryankeairns mentioned this pull request Oct 2, 2020

[7.x] Re-style and re-order top menu buttons (#79206) #79320

Merged

ryankeairns added a commit that referenced this pull request Oct 2, 2020

Re-style and re-order top menu buttons (#79206) (#79320)

a39449f

* Re-style and re-order top menu buttons * Update snapshot due to removed fill prop * Fix link order for Maps

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Re-style and re-order top menu buttons #79206

Re-style and re-order top menu buttons #79206

ryankeairns commented Oct 1, 2020 •

edited

Loading

cchaos left a comment

ryankeairns commented Oct 1, 2020 •

edited

Loading

ThomThomson left a comment

ryankeairns commented Oct 1, 2020

ThomThomson left a comment

nreese left a comment •

edited

Loading

ryankeairns commented Oct 2, 2020

nreese left a comment

kibanamachine commented Oct 2, 2020

Re-style and re-order top menu buttons #79206

Re-style and re-order top menu buttons #79206

Conversation

ryankeairns commented Oct 1, 2020 • edited Loading

Summary

Competing buttons in Dashboard

Competing buttons in Lens

Proposed 7.10 solution introduced by this PR

Affected apps (Dashboard, Lens, Visualize, Maps)

Dashboard (edit mode)

Dashboard (view mode)

Lens

Visualize

Visualize (from Dashboard)

Maps

Looking ahead

Checklist

cchaos left a comment

Choose a reason for hiding this comment

ryankeairns commented Oct 1, 2020 • edited Loading

ThomThomson left a comment

Choose a reason for hiding this comment

ryankeairns commented Oct 1, 2020

ThomThomson left a comment

Choose a reason for hiding this comment

nreese left a comment • edited Loading

Choose a reason for hiding this comment

ryankeairns commented Oct 2, 2020

Default state

From Dashboard

nreese left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 2, 2020

💚 Build Succeeded

Metrics [docs]

async chunks size

page load bundle size

History

ryankeairns commented Oct 1, 2020 •

edited

Loading

ryankeairns commented Oct 1, 2020 •

edited

Loading

nreese left a comment •

edited

Loading