-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Align top menus to new header design #78332
Conversation
b869dd5
to
334db08
Compare
334db08
to
e9883ff
Compare
@elasticmachine merge upstream |
💔 Build Failed
Failed CI StepsMetrics [docs]async chunks size
page load bundle size
History
To update your PR or re-run it, just comment with: |
Had a chat with Caroline and Dave, going to try one more thing here - using hollow style (bordered) buttons for the primary CTAs. That added benefit is that these will shift to a light fill in the Amsterdam theme which is targeted to be the default theme later in 7.x. I'll make those adjustments and update this PR with screenshots. |
Closing in favor of #79206 |
Relates to #72331 (comment)
Summary
➡️ There will likely be opinions on this one, so I'm not pretending that this is a slam dunk of a PR... as evidenced by all the screenshots. Please take a look, try this branch locally, try master again, and then see what you think.
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
checkInCircleFilled
andplusInCircleFilled
)Affected apps (Dashboard, Lens, Visualize, Maps)
Dashboard (edit mode)
Dashboard (view mode)
Lens
Visualize
Visualize (from Dashboard)
Maps
Alternative solutions explored for 7.10
Proposed solution in previous section ; single icon on first item provides differentiation while avoiding competing buttons
Less desirable as all items are emphasized equally; less clear CTA
Doesn't seem to address the original issue of competing buttons; less desirable visually as well
Looking ahead
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.