[Visual Refresh] Inputs: Add refresh design update #2

[mgadewoll]

Summary

[!IMPORTANT] This PR merges into a feature branch. This PR should be rebased after the first update PR is merged.

Implements https://github.com/elastic/eui-private/issues/324

This PR is the second part to implement Visual Refresh input design changes. This PR implements changes to specific components:

• EuiComboBox
• EuiDatePicker
• EuiSuperDatePicker
• EuiFilePicker

Why are we making this change?

These updates align specialized form components with the updated base form styles (done here) and applies new design updates. These include updates text colors, border colors, state styles (focus, invalid, disabled, readonly), spacings and icon sizes. Additionally we're ensuring that the components work well in high contrast modes.

Screenshots

Toggle screenshots

LIGHT mode

EuiComboBox

classic	refresh

EuiDatePicker

classic	refresh

EuiSuperDatePicker

classic	refresh

EuiFilePicker

state	classic	refresh
default
file
hover
focus
dragover
invalid
disabled
loading

DARK mode

EuiComboBox

classic	refresh

EuiDatePicker

classic	refresh

EuiSuperDatePicker

classic	refresh

EuiFilePicker

state	classic	refresh
default
file
hover
focus
dragover
invalid
disabled
loading

High contrast mode

preferred HCM

EuiComboBox

light	dark

EuiDatePicker

light	dark

EuiSuperDatePicker

light	dark

EuiFilePicker

light	dark

forced HCM

EuiComboBox

light	dark

EuiDatePicker

light	dark

EuiSuperDatePicker

light	dark
	!

EuiFilePicker

light	dark

Impact to users

QA

• EuiComboBox
• EuiDatePicker
• EuiSuperDatePicker
• EuiFilePicker

Review the directly affected components and verify:

• [ ] they matches the design specs (sizes, colors, borders, states etc) for LIGHT and DARK mode
  • [ ] there are no unexpected visual issues in HCM
  • [ ] there are no regressions for Amsterdam

General checklist

• Browser QA
  • [x] Checked in both light and dark modes
  • [x] Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • [ ] ~Checked in mobile~
  • [x] Checked in Chrome, Safari, Edge, and Firefox
  • [ ] ~Checked for accessibility including keyboard-only and screenreader modes~
• Docs site QA
  • [ ] ~Added documentation~
  • [ ] ~Props have proper autodocs (using @default if default values are missing) and playground toggles~
  • [ ] ~Checked Code Sandbox works for any docs examples~
• Code quality checklist
  • [x] Added or updated jest and cypress tests
  • [ ] Updated visual regression tests
• Release checklist
  • [ ] A changelog entry exists and is marked appropriately.
  • [ ] ~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~
• Designer checklist
  • [ ] ~If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)~

[mgadewoll]

the color for the animated line in the loading state has a red color that suggests "invalid" (in Amsterdam looks more magenta-ish)

@acstll Correct, there is no spec for it which is why I left it as is. Maybe it could rather be primary similar to loading spinners? 🤔 That would be a question for @ek-so if the color could be updated in Borealis.

[maybe out of scope] the size of the "remove" button is different, I believe they're both xs in spec and in code (not sure what's happening)

I checked and actually the xs empty button doesn't match the design specs. Looks like we missed that in the Button update. 🫠 I'll have to check if that impacts too many other places that would require it to be a separate update.

[nit, feel free to ignore] on hover, the icon grows 1px, in code it scales 1.1 which seems more, I would actually remove this animation since it reminds me of Amsterdam

Removing it would be a suggestion to design. Given that design specs provide the size change, I'd leave it here for now but I can adjust the scale(). I left it at 1.1 to not have to go to even smaller decimals but it won't hurt anyway. Updated in https://github.com/elastic/eui/pull/8778/commits/8c8c02436e5ab7a4bf0625613ce6f021e88dc1d8

EuiFilePicker in HCM, the border on hover is solid, not dashed — I wonder if this may be intended?

That was intentional from my side (sorry for not mentioning it explicitly). The idea being to improve the visibility. But thinking about it again now, it might not be needed/wanted considering other form elements don't behave that way either. I'll revert it. 👍
Updated in https://github.com/elastic/eui/pull/8778/commits/8c8c02436e5ab7a4bf0625613ce6f021e88dc1d8

[acstll]

yes to everything in the comment above 🙂

[mgadewoll]

ℹ️ Updated the button xs font-size (commit). The changes triggered a couple of VRT image updates. Those changes are expected and aligned with design.

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 5dde0f736ca9d27fd527557cbce1371be11afed7
• Documentation website

History

• :green_heart: Build #592 succeeded 8c8c02436e5ab7a4bf0625613ce6f021e88dc1d8
• :green_heart: Build #562 succeeded 3066875aeaa62b32101b55cf684634c36fd6cab0
• :green_heart: Build #559 succeeded 19cc0ed600b8e1d7ec1f764e304635ff79daf30b
• :green_heart: Build #555 succeeded 7bf8354429ae40db4f0adea596e5e15a87e3d4a7
• :green_heart: Build #496 succeeded cd72213473fa6285c13a42a6d0cede52dacd047a
• :green_heart: Build #494 succeeded bbc6c3b3165a2c82f3cdfef6eeae302bb9177bc3

cc @mgadewoll

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 5dde0f736ca9d27fd527557cbce1371be11afed7

History

• :green_heart: Build #4247 succeeded 8c8c02436e5ab7a4bf0625613ce6f021e88dc1d8
• :green_heart: Build #4220 succeeded 3066875aeaa62b32101b55cf684634c36fd6cab0
• :green_heart: Build #4218 succeeded 19cc0ed600b8e1d7ec1f764e304635ff79daf30b
• :green_heart: Build #4216 succeeded 7bf8354429ae40db4f0adea596e5e15a87e3d4a7
• :green_heart: Build #4165 succeeded cd72213473fa6285c13a42a6d0cede52dacd047a
• :green_heart: Build #4164 succeeded bbc6c3b3165a2c82f3cdfef6eeae302bb9177bc3

cc @mgadewoll