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

[mgadewoll]

Summary

[!IMPORTANT] This PR merges into a feature branch. This is to allow a more scoped review on parts of the updates as well as providing time for visual reviews before merging to main. There will be 1 - 2 more PRs following that update styles for more specific components (e.g. EuiCombobox and EuiDatePicker/EuiSuperDatePicker)

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

This PR adds the first part to implement the new input design. (figma)

The main changes for inputs are updates to:

• base styles
• state indication styles
• smaller form layout adjustments

The state styles mainly concern how indicators are shown as visible borders. We're moving away from the underline indicator towards a full all-side bordered indicator. We generally keep the already available approach to use local CSS variables to style the indicator. This way we're able to reuse the base form styles and adjust mainly via CSS variables in composing components.

Why use outline as indicator style?

The proposed hover/focus/invalid styling uses outline to apply the needed state indication. The reason for this is:

• regular border introduces dimension shifts when the focus style is applied inside a form layout
• box-shadow is typically ignored or overridden in Windows forced-colors high contrast mode. If applied in HCM it doesn't allow for enough adjustments and would require us to do 2 separate approaches (HCM and non-HCM)
• applying border via pseudo-elements ::before/::after is not possible as some form elements (e.g. <input />) don't except those pseudo-elements
• outline does not apply dimension changes and provides enough control to be useful still in Windows high contrast mode (though color is overridden, which is why invalid state requires a separate solution with background-image)

Updated components

touched

• EuiFieldText
• EuiFieldNumber
• EuiFormControlLayout
• EuiFormControlLayoutDelimited
• EuiFormControlLayoutClearButton
• EuiFormControlLayoutIcons
• EuiFormLabel
• EuiFormErrorText
• EuiMarkdownEditor (not a base form component but needed update to ensure expected base invalid style)

ℹ️ Additionally the changes to base form styles affect other components that either use the above components or use or inherit form styles. This includes, but is not limited to:

• EuiFieldPassword
• EuiFieldSearch
• EuiTextarea
• EuiSelect
• ...

Changes

• added theme flag formVariant to enable toggling between "refresh" and "classic" design variants
• updated base form input styles
  • updated text, placeholder, border colors
  • updated hover, focus, invalid, disabled, readonly styles
• updated form control layout styles
  • increased size of state icons in compressed form control layouts
  • lighter background color for form clear buttons
  • updated form validation styling
  • updated focused form label text color (form labels are not highlighted as focused anymore)
  • added visible borders between append/prepend and inputs
  • updated paddings on append/prepend
  • increased spacing on delimited form layout center delimiter
• added semantic tokens: euiColorBorderInteractiveFormsHoverPlain and euiColorBorderInteractiveFormsHoverDanger
• added form component tokens:
  • components.forms.backgroundDropping
  • components.forms.borderFocused
  • components.forms.borderInvalid
  • components.forms.borderHovered
  • components.forms.borderInvalidHovered
  • components.forms.borderAutofilledHovered
• updated value for the following tokens (Borealis only):
  • borderStrongPrimary
  • borderStrongAccent
  • borderStrongAccentSecondary
  • borderStrongNeutral
  • borderStrongSuccess
  • borderStrongWarning
  • borderStrongRisk
  • borderStrongDanger
• updated value for textWarning (Borealis only)
• updated value for components.forms.backgroundReadOnly (Borealis only)

Screenshots

Toggle screenshots

LIGHT mode

base input and states

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

variant	classic	refresh
regular
delimited
compressed

form validation

classic	refresh

DARK mode

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

variant	classic	refresh
regular
delimited
compressed

form validation

classic	refresh

High contrast mode

preferred HCM

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

classic	refresh

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

form control layout

classic	refresh

forced HCM (Windows)

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

classic	refresh

state	classic	refresh
default
focus
hover
invalid
disabled
readonly

classic	refresh

QA

• EuiFieldText

• EuiFieldNumber

• EuiFormControlLayout

• EuiFormControlLayoutDelimited

• Form validation

• [ ] 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.)
  • [x] 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
  • [x] Updated visual regression tests
• Release checklist
  • [x] 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)~

[ek-so]

Thank you Lene! The changes lgtm overall (very good actually 😊)

Small note: inside the date picker, we have 2 more "inputs" that do not behave like they are inputs (what I mean is January 2013, that do not get blue outline when clicking on them). Is that smth we can quickly fix? If no, it's tiny — we can leave as is.

And a question: We have a file picker that didn't change as far as I see. At some point we discussed it might mirror better the behaviour of other inputs + reflect better the state when smth is being dragged into this area. See specs here. I assume it's smth we want to tackle in a separate task. So the questions is, should we create a follow up task to deal with that specifically for the inputs, or for example this one is enough to also include file uploader change? cc. @ryankeairns

ps. @mgadewoll I would change the border token for the file uploader however, as far as I see it's not border-base-plain now, as in other inputs.

[mgadewoll]

@ek-so Thanks for the review! 🎉

The current states for EuiDatePicker, EuiSuperDatePicker and EuiFilePicker are currently expected. This PR only updates the base input components and styles, not those specialized components yet. It'll be updated in a second PR. I mentioned this in the description, but maybe it's not clear enough 🙈 Please feel free to let me know what might work better for you in case 🙂

ℹ️ If you want to, you can check the complete update state on this test PR for the Visual Refresh PoC (deployed docs)

[ryankeairns]

Exciting! The full border is so much nicer :)

[mgadewoll]

they matches the design specs (sizes, colors, borders, states etc) for LIGHT and DARK mode

• the inline spacing for prepend/append is not exactly matching the spec: in Figma start and end have 12px (m) and a gap of 6px; in code it's 8px and 4px respectively (if I'm not mistaken) — I can imagine it's not easy to adjust while keeping Amsterdam? also it could be you agreed to keep it this way

@acstll Urgh. Tbh, I don't actually know if there was another change and if Figma is up-to-date or not here 🙈. I'll check back with design ⌛

there are no regressions for Amsterdam

• in the invalid state for EuiFormControlLayoutDelimited, the red underline does not fill the entire control, only the actual <input>s — is that expected? (I wouldn't mind this change personally)

Ah, that's a good catch. No it's not expected - I removed the Amsterdam styles here by mistake 💀 It's fixed in https://github.com/elastic/eui/pull/8767/commits/5050919190f15c690616a5099058822452f8408c

[mgadewoll]

Urgh. Tbh, I don't actually know if there was another change and if Figma is up-to-date or not here 🙈. I'll check back with design ⌛

@acstll We started a discussion about this on design side with @ek-so. This is a larger topic that would generally include alignment on spacing that includes append/prepend but goes further to include buttons as those are used within append/prepend extensively as well. Therefore we agreed to align and handle those as separate topic and keep input updates here as they are.

[mgadewoll]

ℹ️ Rebased the input feature branch and this PR with latest main.

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: fb5adda151bc32773f33a3e8daaec6148d74a169
• Documentation website

History

• :green_heart: Build #554 succeeded c366af10a63bb912c132c5f62d27a388745cdca1
• :green_heart: Build #553 succeeded 5050919190f15c690616a5099058822452f8408c
• :green_heart: Build #492 succeeded f734b9b22b85c860189c5b48165ae373931dd098
• :green_heart: Build #473 succeeded 3cc679269d79203eab3c3b858ff048100bd1f0dd
• :green_heart: Build #445 succeeded c7812c53f2dadadfe511e313fc6bd1680d933a26
• :green_heart: Build #444 succeeded c1b9a1b9c0bbcaf7c5d0249a1dd8686338891b1e

cc @mgadewoll

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: fb5adda151bc32773f33a3e8daaec6148d74a169

History

• :green_heart: Build #4215 succeeded c366af10a63bb912c132c5f62d27a388745cdca1
• :green_heart: Build #4214 succeeded 5050919190f15c690616a5099058822452f8408c
• :green_heart: Build #4163 succeeded f734b9b22b85c860189c5b48165ae373931dd098
• :green_heart: Build #4149 succeeded 3cc679269d79203eab3c3b858ff048100bd1f0dd
• :green_heart: Build #4129 succeeded c7812c53f2dadadfe511e313fc6bd1680d933a26
• :green_heart: Build #4128 succeeded c1b9a1b9c0bbcaf7c5d0249a1dd8686338891b1e

cc @mgadewoll