[Inputs] Implement form element append/prepend design updates

[mgadewoll]

Summary

Important

This PR merges into a feature branch.

closes https://github.com/elastic/eui-private/issues/496

Changes

• Updated EuiFormAppend/EuiFormPrepend styling:
  • Removed background color
  • Changed the padding
  • Changed the divider styling
  • Changed the interactive variant style to match EuiButtonEmpty with variant primary
  • Updated the gap value from xs to s
• Updated EuiFormAppend/EuiFormPrepend to inherit isDisabled state from EuiFormControlLayout
• Updated EuiFormControlLayout styling:
  • Updated hover styling from the control element to the layout wrapper element
  • Added disabled and autofill background color to the layout wrapper instead of only the form control
  • Removed border radius overrides for child form control elements (rendering with euiTheme.border.radius.small instead of 0 now)
• Updated EuiFormControlButton to inherit isDisabled, readOnly and isInvalid states from EuiFormControlLayout
• Added iconSide prop on EuiDatePickerRange
• Updated EuiSuperDatePicker styling:
  • Added a checkCircle icon on valid input data
  • Removed valid state background color
• Removed background color transition on EuiButtonEmpty (other button variants don't have a transition anymore either)

Breaking changes

• Removed components.superDatePickerBackgroundSuccees token

Why are we making this change?

✨ UI modernization: The design updates are part of the global UI modernization efforts.

Screenshots #

EuiFormControlLayout append/prepend - New API (using EuiFormAppend/EuiFormPrepend)

before (feature branch)	after

EuiFormControlLayout append/prepend - Custom (old) API (custom content)

production	feature branch	after

EuiFormControlLayoutDelimited

production	feature branch	after

EuiFormControlButton inside EuiFormControlLayout

light	dark

Autofill styles (Chrome)

before	after

EuiSuperDatePicker valid styles

before	after

EuiDatePickerRange iconSide="right" + iconType

Impact to users

⚠️ This PR contains breaking changes due to the removed components.superDatePickerBackgroundSuccees token

ℹ️ The token is not in use but e.g. Kibana requires snapshot updates:

• x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
• x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap
• x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap

QA

Review stories:

• EuiFormAppend (PR, feature branch)
• EuiFormPrepend (PR, feature branch)
• EuiFormControlLayout append/prepend with old API to compare with current production (PR, production)
• EuiFormControlLayout append/prepend with new API (PR, feature branch)
• EuiFormControlLayout append/prepend with new & old API side by side (PR, feature branch)
• EuiFormControlLayout with EuiFormControlButton (PR)
• EuiFormControlLayoutDelimited (PR, feature branch, production)
• EuiSuperDatePicker (PR, feature branch, production)

Review checks:

• verify the updated design changes for form layout append/prepend and EuiFormAppend/EuiFormPrepend match design specs
• verify form control layouts render as expected for:
  • default state
  • hover
  • focus
  • invalid
  • disabled
  • readonly
  • autofill
• verify there are no unexpected regressions for
  • EuiFormControlLayout
  • EuiFormControlLayoutDelimited
  • single form controls like EuiFieldText and EuiFieldNumber
  • EuiSuperDatePicker and EuiDatePickerRange
• verify EuiSuperDatePicker renders an icon and no background when a valid time span is selected

General checklist

• Browser QA
  • Checked in both light and dark modes
  • 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
  • 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
  • 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)
  • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
• 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)

[github-actions]

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

• If this PR contains prop/API changes:
  • Search through Kibana for <EuiComponent usages (example search)
  • In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
• If this PR contains CSS changes:
  • Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
  • In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
• 🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
• ⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
  • Using a pre-release release candidate to test Kibana CI ahead of time
  • Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

[acstll]

A couple of mid-review comments, mostly so you know I'm at it:

• code is looking good, I want to have a second look at components/form/form_control_layout/form_control_layout.styles.ts where most of the meat is, I guess
• (not a change in this PR though): the story for EuiFormAppend is being rendered as prepend and it looks weird, is that intended @mgadewoll? (link)
• I will do a round of visual QA, as usual

[mgadewoll]

(not a change in this PR though): the story for EuiFormAppend is being rendered as prepend and it looks weird, is that intended @mgadewoll? (link)

@acstll Woops, that's a mistake, it should use append 😅 Thanks for the catch!
Fixed in cd52c39

[acstll]

Code-wise it looks correct, only a single comment which is a nit!

I followed the guide for the QA — thanks a lot for providing it!

I found 3 things design-wise worth pointing out (I left a brief comment in the code where I thought it might be related but it could be wrong 😛)

(1) padding in FormControlLayout's side

I think the 4px padding in the "side" in the FormControlLayout is not present in the spec when there's a label, only when there's a button

code	spec

(2) gap in prepend/append

this seems to be 8px and not 4px in the spec, otherwise items are too close to each other when there's no label

code	spec

(3) font size for buttons

in the spec, font size for buttons seems larger (~2px) than labels only, I wonder if that should be the case for element="button"

code	spec

[mgadewoll]

(3) font size for buttons
in the spec, font size for buttons seems larger (~2px) than labels only, I wonder if that should be the case for element="button"

@acstll We aligned with @JoseLuisGJ that we keep the matching xs font size, meaning buttons are adjusted.
Effectively nothing to change here as it's already being applied.

[mgadewoll]

@acstll I added a couple small additional updates to this PR that I noticed while checking Kibana usages:

• ensure expected styling for EuiFieldPassword when readOnly (commit)

before	after

• ensure that custom nested form element label text color is not adjusted when the layout is disabled (e.g. nested EuiCheckbox) (commit)

before	after

• prevent EuiNotificationBadge text color inheriting automatically -webkit-text-fill-color (commit) - we'd rather want to adjust it where/if needed manually

[acstll]

Thanks for the updates @mgadewoll! I checked the ones from my comments and the other ones you described (#9305 (comment)).

All changes look good and the outcome is correct.

I was about to approve but there is this one suggestion about the label padding I think is worth sharing. Let me know what you think!

[acstll]

🟢 Thanks a lot for that last one update!

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 9a55d71
• Documentation website
• Storybook

History

• 💚 Build #2474 succeeded 8afc8f5
• 💚 Build #2465 succeeded aef8d36
• 💚 Build #2439 succeeded 56422e1
• 💚 Build #2435 succeeded cd52c39
• 💚 Build #2426 succeeded e12520c
• 💔 Build #2421 failed 43d3fc6

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 9a55d71

History

• 💚 Build #5626 succeeded aef8d36
• 💚 Build #5607 succeeded 56422e1
• 💚 Build #5596 succeeded e12520c
• 💔 Build #5594 failed 43d3fc6
• 💚 Build #5588 succeeded 11ce2d7
• 💚 Build #5584 succeeded 794ca94

cc @mgadewoll