Align top menus to new header design

[ryankeairns]

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

• Replace the filled (emphasized) buttons with an empty + icon button and make it the first item.
• For Dashboard, make 'Edit' the first 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

Alternative solutions explored for 7.10

1. Convert filled/primary buttons to empty buttons with icons
   Proposed solution in previous section ; single icon on first item provides differentiation while avoiding competing buttons

2. Convert all buttons to empty buttons with icons
   Less desirable as all items are emphasized equally; less clear CTA

3. Leave menu buttons as-is, but change the Super Date Picker button style
   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.

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

[ryankeairns]

@elasticmachine merge upstream

[kibanamachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request
• Commit: 760b0f3
• Pipeline Steps (look for red circles / failed steps)
• Interpreting CI Failures

Failed CI Steps

• Check Types

Metrics [docs]

async chunks size

id	before	after	diff
lens	1010.4KB	1010.5KB	+15.0B
maps	3.3MB	3.3MB	-19.0B
visualize	271.7KB	271.7KB	+47.0B
total			+43.0B

page load bundle size

id	before	after	diff
dashboard	570.4KB	570.4KB	+9.0B

History

• 💚 Build #77646 succeeded 7264cb0
• 💔 Build #77084 failed e9883ff
• 💚 Build #76716 succeeded 334db08
• 💔 Build #76701 failed b869dd5

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

[ryankeairns]

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.

[ryankeairns]

Closing in favor of #79206