[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 EuiFormAppend/EuiFormPrepend to inherit isDisabled state from EuiFormControlLayout
• Updated EuiFormControlLayout styling:
  • Added style overrides for custom append and prepend content (that don't use EuiFormAppendPrepend)
  • 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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 11ce2d7
• Documentation website
• Storybook

History

• 💚 Build #2408 succeeded dead8b2
• 💚 Build #2405 succeeded 794ca94
• 💚 Build #2399 succeeded a7bbf0d
• 💚 Build #2398 succeeded 68418c9
• 💚 Build #2394 succeeded c275d28
• 💚 Build #2386 succeeded 668534a

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 11ce2d7

History

• 💚 Build #5584 succeeded 794ca94
• 💚 Build #5581 succeeded a7bbf0d
• 💚 Build #5580 succeeded 68418c9
• 💚 Build #5576 succeeded c275d28
• 💚 Build #5570 succeeded 668534a
• 💚 Build #5569 succeeded ad10709

cc @mgadewoll