[META] EUI Amsterdam Roadmap

[johnbarrierwilson]

Purpose

According to the McKinsey Design Index report, a critical aspect of improving the market value of a company via design is continuous iteration. In short, this means that we need to begin a continuous cadence of improving EUI over the long term. To kickstart this continuous iteration, we will introduce a new theme for EUI—codenamed “Amsterdam.” This new theme will be a work in progress until it becomes adopted enough to become the new default theme. The threshold of adoption for switching the default theme will be determined at a later date.

Changes

While this is a great opportunity to advance EUI as a library, we should maintain a mindset that this theme is a layer of polish on an already excellent UI library and not a complete rethink of existing components and patterns. That said, these are the changes we expect to make for this theme:

Variables & Global Mixins (i.e. Colors, Typography, etc.)

Change	Owner
✅ Make primary blue color more saturated	@daveyholler
✅ Decrease base font-size to 14px	@daveyholler
✅ Increase font-weight for headings (concept)	@daveyholler
✅ Make default shadow color black instead of dark blue	@daveyholler

Components

Change	Owner
✅ Modify form control elements (concept) PR	@johnbarrierwilson @daveyholler @cchaos @MichaelMarcialis
✅ Make focus/error states for all components more consistent (form controls, cards, etc.)	@daveyholler
✅ Figma library updates	@daveyholler @hbharding @MichaelMarcialis
✅ EuiButtonGroup – Change medium size buttons to be 40px wide to have a square shape. Change small size border radius to 4px. Change compressed size container border radius to 4px and inner buttons border radius to 2px. Change compressed size buttons by removing background color from all unselected.	@cchaos
✅ Finish toasts updates and implement	@hbharding @daveyholler
✅ Tabs (pull request)	@daveyholler
✅ Remove borders from panels, flyouts, popovers, keypad items (pull request)	@johnbarrierwilson
✅ Add more styling to breadcrumbs (concept) (PR)	@cchaos
✅ Make the scale of shadow styles more smooth (pull request)	@daveyholler
⛔️ Blur content behind modal overlay background ping @johnbarrierwilson for more explanation. Short explanation: blurring isn't good for context awareness (concept) (pull request)	@johnbarrierwilson
✅ Use dark overlay for modal background (pull request)	@johnbarrierwilson
⏸ Paused Animation concepts (Framer motion demo from Ryan)	@brianearwood
⛔️ Modify default prop values	@johnbarrierwilson
✅ Remove borders from default button styles (concept)	TBD
✅ EuiCallout – Rounded corners. Bolder titles. (pull request)	@hbharding
✅ EuiCodeBlock – Rounded corners for inline code (pull request)	@hbharding
✅ EuiHeaderBreadcrumbs – Change 8px border radius to 6px.	TBD

Roadmap

Event	Date
✅ Preview toggle in Kibana	7.9
✅ Component changes completed	Oct 2020
✅ Testing	Oct 2020 — Feb 2021
✅ Change default EUI theme to Amsterdam	Feb 2021 // 7.12-ish

---

Found a bug?

Add the details in this spreadsheet: https://docs.google.com/spreadsheets/d/1FMCauZ-OED4QS3-eSGE18cpYkrd_ORLcko1CWxjwDH0/edit#gid=0

Note: Due to the sharing between many components, these changes will affect more than just the component we are editing. Remember to check other components after a change is made to assure that interactions and visuals are still acceptable.

[ryankeairns]

Adding a link to my initial feedback doc:
https://docs.google.com/document/d/1oQatmYcP9opzSc-IPOpqv5xQyre0YN_mrtBchH10bSU/edit#heading=h.62wogijl0wsh

[seeruk]

Enjoying the look of some of these changes! Is there a place for public contributors to submit feedback on the design too? Or to view already planned upcoming changes? (For example, the text on the secondary and danger buttons might be more readable if it were white, but I expect something like this might already be a planned change).

[snide]

@seeruk We take design feedback similar to any issue. I'll create a new tag so that we can classify them correctly, but feel free to create separate issues as you see fit. Just remember that design changes tend to be a little more subjective, and as such we'll likely be a little more liberal in what we close out without action. The general rule we've followed for these types of review is to leave issues up with a "discuss" tag to see if they have momentum of opinion. If they don't we close them out.

[cchaos]

Closing this as we're slated for default in 7.14!