feat(eui): make EuiFormControlLayoutIcons top-aligned

[weronikaolejniczak]

Summary

Relates to #8553

Before	After

This PR updates the EuiFormControlLayoutIcons component to align icons to the top instead of the center. To do this, I apply a calculated padding-top using the formula: (control height - icon size) / 2. This value is not directly tied to controlPadding or controlCompressedPadding.

For the uncompressed variant, the calculated value happens to match controlPadding ((40px - 16px) / 2 = 12px), so there's no visual difference. However, for the compressed variant, the correct top padding should be 10px ((32px - 12px) / 2 = 10px) which doesn’t align with the standard 4-based modular scale (where the nearest value would be 8px, the value of controlCompressedPadding). We want to make it work across themes and theme overrides, so we have to avoid hard-coding values.

We have to account for cases where the border is applied to the layout group and the actual control is x - 2px. This includes icon position static, append / prepend and EuiFormControlLayoutDelimited.

Instead of fixing this only for EuiComboBox, I’ve applied the change globally to all form controls, as suggested in the original issue. See the impact details below.

Note

This update should allow us to remove the local style override introduced in Kibana PR #217132.

Additional information

Component overrides

Targeting .euiFormControlLayoutIcons class:

• packages/eui/src/components/date_picker/date_picker_range.styles.ts:79
• packages/eui/src/components/date_picker/date_picker.styles.ts:42
• packages/eui/src/components/form/text_area/text_area.styles.ts:88
• packages/eui-theme-common/src/global_styling/mixins/_form.scss:211

Component impact

• Color Picker - eui/packages/eui/src/components/color_picker/color_picker.tsx
• Combo Box Input - eui/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
• Date Picker - eui/packages/eui/src/components/date_picker/date_picker.tsx
• Date Picker Range - eui/packages/eui/src/components/date_picker/date_picker_range.styles.ts
• Super Date Picker - eui/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
• Filed Number - eui/packages/eui/src/components/form/field_number/field_number.tsx
• Field Password - eui/packages/eui/src/components/form/field_password/field_password.tsx
• Field Search - eui/packages/eui/src/components/form/field_search/field_search.tsx
• Field Text - eui/packages/eui/src/components/form/field_text/field_text.tsx
• Form Control Layout Delimited - eui/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
• Select - eui/packages/eui/src/components/form/select/select.tsx
• Super Select Control - eui/packages/eui/src/components/form/super_select/super_select_control.tsx
• Text Area - eui/packages/eui/src/components/form/text_area/text_area.tsx

QA

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)

Specific checklist

• Verify that the icons stay top aligned in EuiComboBox with a lot of selected options
• Verify that the icons display as expected in the affected components (the list above), both compressed and uncompressed variants, both static and absolute icon positions
  • Color Picker
  • Combo Box Input
  • Date Picker
  • Date Picker Range
  • Super Date Picker
  • Filed Number
  • Field Password
  • Field Search
  • Field Text
  • Form Control Layout Delimited
  • Select
  • Super Select Control
  • Text Area
• (optional) Test Kibana case locally with removing local style override

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8590/
• Storybook: https://eui.elastic.co/pr_8590/storybook
• New docs: https://eui.elastic.co/pr_8590/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 8d258b3
• Documentation website

History

• 💚 Build #86 succeeded f600952
• 💚 Build #84 succeeded f72caf4
• 💚 Build #56 succeeded eea6cd3
• 💚 Build #53 succeeded 19c2546
• 💚 Build #50 succeeded 3826d82
• 💚 Build #49 succeeded bd168c4

cc @weronikaolejniczak

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: 8d258b3

Failed CI Steps

• 🔨 EUI pull request test
• 📰 EUI pull request deploy docs

History

• 💚 Build #3889 succeeded f600952
• 💚 Build #3887 succeeded f72caf4
• 💚 Build #3865 succeeded eea6cd3
• 💚 Build #3862 succeeded 19c2546
• 💚 Build #3860 succeeded 3826d82