feat(eui): align icons to the top

[weronikaolejniczak]

Summary

Closes #8553

This PR makes all icons in the form controls aligned to the top.

@acstll suggested a solution that works perfectly:

instead of calculating the top padding for the icons, we keep the icon wrapper on top and give it a max-block-size with the same size as the input, and then let flex do the actual centering, let me know what you think

We have to differentiate compressed / uncompressed, otherwise the implementation is much leaner.

Old PR for context: #8590

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

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

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: 56a5e06
• Documentation website

cc @weronikaolejniczak

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 56a5e06

History

• 💔 Build #3902 failed 1d8f42f

cc @weronikaolejniczak

[acstll]

LGTM 🟢 — thank you!

[acstll]

Note to self to remove the workaround in Kibana (elastic/kibana#217132)