Upgrade EUI to v95.9.0

[cee-chen]

v95.7.0 ⏩ v95.9.0

[!CAUTION] This PR contains the final set of Emotion conversions for all EuiForm components. If your plugin contains any custom CSS/styling to EuiFormRow, EuiCheckbox, EuiRadio, or EuiSwitch, ⚠️ make sure to QA your UI to ensure no visual regressions have occurred! ⚠️

---

v95.9.0

• Updated EuiSearchBar's optional box.schema prop with a new recognizedFields configuration. This allows specifying the phrases that will be parsed as field clauses (#7960)
• Updated EuiIcon with a new tokenSemanticText glyph (#7971)
• Added support for TypeScript 5 (#7980)

Bug fixes

• Fixed EuiSelectableTemplateSitewide styles when used within a dark-themed EuiHeader (#7977)

v95.8.0

• Updated EuiHeaderLinks's mobile menu to set a slight popover padding by default (#7961)
  • This can be overridden via popoverProps.panelPaddingSize if needed.
• Updated EuiHeaderLink to default to a size of s (down from m) (#7961)

Accessibility

• Updated the aria-label attribute for the EuiFieldSearch clear button (#7970)

Bug fixes

• Fixed a visual bug with <EuiDualRange showInput="inputWithPopover" /> form controls (#7957)

Deprecations

• Deprecated EuiFormRow's columnCompressedSwitch display prop. Use columnCompressed instead, which will automatically account for child EuiSwitches (#7968)
• Deprecated EuiFormRow's rowCompressed display prop. Use row instead for vertical forms, or centerCompressed for inline forms (#7968)
• (Styling) Updated EuiFormRow's hasEmptySpaceLabel prop to no longer attempt to automatically align its content to a vertical center. Use the display="center" prop for that instead (#7968)

CSS-in-JS conversions

• Converted EuiFormControlLayout to Emotion (#7954)
  • Removed .euiFormControlLayout--*icons classNames and --eui-form-control-layout-icons-padding CSS var. Use --euiFormControlRightIconsCount or --euiFormControlLeftIconsCount instead
• Converted EuiFormLayoutDelimited to Emotion (#7957)
• Fixed cloneElementWithCss throwing an error when used multiple times without a key prop (#7957)
• Updated cloneElementWithCss utility to support a third argument that allows prepending vs. appending the cloned Emotion css className (#7957)
• Removed @euiFormControlLayoutClearIcon Sass mixin (#7959)
• Converted EuiDescribedFormGroup to Emotion (#7964)
• Converted EuiForm, EuiFormHelpText, and EuiFormErrorText to Emotion (#7966)
• Converted EuiFormLabel and EuiFormLegend to Emotion; Removed @euiFormLabel mixin (#7967)
• Converted EuiFormRow to Emotion (#7968)
• Converted EuiCheckbox to Emotion (#7969)
• Converted EuiRadio to Emotion (#7969)
• Converted EuiSwitch to Emotion (#7969)
• Removed the following Sass variables: (#7969)
  • $euiFormCustomControlDisabledIconColor
  • $euiFormCustomControlBorderColor
  • $euiRadioSize
  • $euiCheckBoxSize
  • $euiCheckboxBorderRadius
  • $euiSwitchHeight (and compressed/mini variants)
  • $euiSwitchWidth (and compressed/mini variants)
  • $euiSwitchThumbSize (and compressed/mini variants)
  • $euiSwitchIconHeight
  • $euiSwitchOffColor
• Removed the following Sass mixins: (#7969)
  • euiIconBackground
  • euiCustomControl
  • euiCustomControlSelected
  • euiCustomControlDisabled
  • euiCustomControlFocused

[elasticmachine]

Pinging @elastic/eui-team (EUI)

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[cee-chen]

@Heenawter This should be fixed now from https://github.com/elastic/kibana/pull/190752/commits/ebce0ceb5c755f97bc0c0acce2c0f290459c02cf with some extra UI/UX pizazz added to the warning underline for the RangeSliderControl component, as we chatted about over Slack!

Let me know if you have any questions about the changes or if you spot any UI bugs that I missed.

[cee-chen]

I noticed that the border on the controls is noticeably lighter in this PR than on main [...] is this an intentional change?

This is an intentional change! Borders for inputs with prepend/appends (aka grouped inputs) were previously darker than inputs without them. This is now fixed so there is no change in border lightness/darkness between grouped inputs and non-grouped inputs.

[kibana-ci]

:yellow_heart: Build succeeded, but was flaky

• Buildkite Build
• Commit: 035a5c17ef64f3a9a1c7799eea67d518bd544c84
• Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-190752-035a5c17ef64

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
controls	302	437	+135
spaces	277	272	-5
total			+130

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
aiops	547.5KB	547.4KB	-97.0B
cases	480.2KB	480.1KB	-42.0B
controls	380.5KB	561.5KB	+181.0KB
infra	1.5MB	1.5MB	+118.0B
kubernetesSecurity	212.4KB	212.5KB	+118.0B
lens	1.5MB	1.5MB	-59.0B
maps	3.0MB	3.0MB	-120.0B
ml	4.6MB	4.6MB	-60.0B
presentationUtil	85.9KB	85.9KB	-30.0B
remoteClusters	78.9KB	78.8KB	-66.0B
snapshotRestore	262.1KB	261.5KB	-594.0B
spaces	185.1KB	184.4KB	-796.0B
stackConnectors	580.3KB	580.2KB	-48.0B
unifiedSearch	219.0KB	218.7KB	-346.0B
visTypeVega	1.8MB	1.8MB	+118.0B
total			+179.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
controls	57.7KB	57.8KB	+88.0B
core	418.5KB	418.6KB	+141.0B
kbnUiSharedDeps-css	178.4KB	147.8KB	-30.6KB
kbnUiSharedDeps-npmDll	6.2MB	6.2MB	+26.9KB
snapshotRestore	27.6KB	27.0KB	-606.0B
total			-4.1KB

Unknown metric groups

async chunk count

id	before	after	diff
controls	16	17	+1

History

• :yellow_heart: Build #231249 was flaky b75ee85c5b128827abd74d7d6fa927baeecee135
• :broken_heart: Build #231227 failed 1e5cc7095d3797c5f1b15ed47db37d8c22a109b7
• :yellow_heart: Build #230519 was flaky db9659699c8c6c8e7378bd859e555dab7f07c92d
• :yellow_heart: Build #230397 was flaky 6872b4f66d13fc1deb10b7a3c00a6afd29c48753
• :yellow_heart: Build #230313 was flaky ebce0ceb5c755f97bc0c0acce2c0f290459c02cf

To update your PR or re-run it, just comment with: @elasticmachine merge upstream