[Visual Refresh] Update form layout append/prepend API

[mgadewoll]

Summary

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

Important

This PR merges into a feature branch.

This PR implements two new components: EuiFormAppend and EuiFormPrepend.
These components are meant to be passed into form layout append and prepend slots to ensure a cohesive layout and styling.
These two components are meant to replace the current generic slot API, but for the initial introduction this implementation ensures a backwards compatible usage to make the update process smoother. This currently means that the previous usages of passing other components to the append/prepend slots still works and will results in mostly identical visual output.

Once consumers are updated fully, the idea is to remove the additional style rules that ensure backwards compatibility and rely on usages of EuiFormAppend and EuiFormPrepend only. Other usages would then result in unexpected visual output and indicate misusage.

Changes

• Added EuiFormAppend and EuiFormPrepend components (components, docs, tests)
• Added support for type="span" on EuiFormLabel to support using visual-only form labels
• Updated EuiFormControlLayout to use EuiFormAppend and EuiFormPrepend
• Updated form components EuiFormAppend/EuiFormPrepend as needed (EuiAutoRefresh, EuiColorPicker)
  • ⚠️ Breaking Change: Updated EuiQuickSelectPopover in EuiSuperDatePicker to use EuiFormPrepend: This results in more restricted quickSelectButtonProps as they reflect EuiFormPrepend instead of generic EuiButtonEmpty props.
• Updated EuiColorPicker to ensure id is correctly passed onto the internal EuiFormControlLayout

Why are we making this change?

💅 UI consistency: This update is part of the Visual Refresh project and it's purpose is to ensure a cohesive visual output for form layout append/prepend elements.

Screenshots #

Previous "generic slot" usage

before	after

New EuiFormAppend/Prepend usage

LIGHT	DARK

EuiAutoRefresh

before	after

EuiSuperDatePicker

before	after

EuiColorPicker

before	after

Impact to users

⚠️ The update to quickSelectButtonProps on EuiSuperDatePicker maybe cause breaking changes as it reflects a more restricted prop type for EuiFormPrepend instead of EuiButtonEmpty.

🟢 There are no usages of quickSelectButtonProps on EuiSuperDatePicker or EuiQuickSelectPopover directly in Kibana or Cloud.

ℹ️ The backwards compatibility of the changes ensures that existing Kibana usages work as expected.
We do however want to update simple Kibana usages to use EuiFormAppend/EuiFormPrepend already to drive adoption. This will be done as an additional step and linked here once available.

Deployment

💻 Kibana instance (credentials)

ℹ️ This instance currently does not have any usage updates yet.

QA

• review the added EuiFormAppend/EuiFormPrepend components and their usage in append/prepend usage and ensure it matches design specs (figma, figma)
• verify there is no regression for append/prepend between feature branch and staging
• verify there is no regression for append/prepend in Amsterdam (feature branch, staging)
• review the new and old API and verify both result in expected visual output (Storybook)
• review the updated documentation
• verify EuiSuperDatePicker's quick select button looks/works as expected (feature branch, staging)
• verify EuiAutoRefresh looks according to new design specs (staging)
• verify EuiColorPicker has no regression (feature branch, staging)

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)
• 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

[mgadewoll]

ℹ️ Initial design feedback:

• change append/prepend focus to :focus-visible
• remove added automatic <label> linking (focusing the input by clicking the append/prepend isn't wanted) - this would mean we can't use <label> at all and change how it works currently towards using e.g. aria-labelledby instead
• remove the testing stories that showcase the old API

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: e870cba
• Documentation website
• Storybook

History

• 💚 Build #1237 succeeded 3376ff5
• 💚 Build #1233 succeeded 166178a

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: e870cba

History

• 💚 Build #4710 succeeded 3376ff5
• 💚 Build #4707 succeeded 166178a

cc @mgadewoll