[Visual Refresh] Implement input design changes

[mgadewoll]

Summary

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

Important

This PR merges a feature branch into main. It mainly includes changes that were previously reviewed and QA'd separately.

This PR contains the changes of the following PRs:

• [Visual Refresh] Inputs: Add refresh design update #1 #8767
• [Visual Refresh] Inputs: Add refresh design update #2 #8778
• [Visual Refresh][EuiSelectableTemplateSitewide] Add colorModes prop #8806

Additional changes are mainly smaller bug fixes that were noticed during early QA:

• ensures correct context layers for form elements - this ensures correct compositions (like e.g. Kibanas chat input)by preventing the form element from having a higher z-index than following siblings (34ce65f)

before	after

• fixes reversed style order to ensure border radius is correctly applied (7e184e3)

before	after

• updated VRT images

Why are we making this change?

This update aligns input designs based on the Visual Refresh project. It improves visibility and consistency for input elements.

Screenshots

Impact to users

⚠️ This PR merges (visual) breaking changes from #8806

- Removed custom style overrides for `EuiSelectableTemplateSitewide` search inside `EuiHeader` - Use the `colorModes` prop on `EuiSelectableTemplateSitewide` instead to control the color mode output.

The required update for Kibana was done as part of the Visual Refresh Input PR (commit).

QA

ℹ️ The big bulk of changes was already previously reviewed in the above mentioned standalone PRs.

Review the mentioned additional changes:

• ensures correct context layers for form elements - this ensures correct compositions like e.g. Kibanas chat input
  • checkout this PR and open the newly added Story for EuiTextArea, remove the vrt-only tag and compare the updated state with the previous state toggling the added CSS
    • verify that the textarea element when focused does not overlap the button
• fixes reversed style order to ensure border radius is correctly applied
  • verify that input elements with only append OR prepend have correct indicator borders applied isInvalid state (no clipped edges) (before, after)

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)

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 762c8e6
• Documentation website

History

• 💚 Build #713 succeeded 762c8e6

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 762c8e6

History

cc @mgadewoll

[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]

It's all looking and working as expected!

I only found a small bug, the invalid state icon at the end is off in EuiDualRange, both compressed and not, it looks related to the use of prepend:

compressed=true

compressed=false

Without prepend

[acstll]

We aligned offline: the issue described here is specific to EuiDualRange in small spaces, so we'll treat it separately.

🟢 Everything else is looking great, including the new fixes. I followed the QA process as suggested.

[mgadewoll]

I only found a small bug, the invalid state icon at the end is off in EuiDualRange, both compressed and not, it looks related to the use of prepend:

ℹ️ We talked about this and decided to move ahead as is. The issue is not new, it only surfaces more in this new design. The issue is that we have limited space and the additional padding on the delimiter icon reduces the available space further.
We'd suggest to align with design separately on this in general. cc @ek-so