[DO NOT MERGE][EUI] Form append/prepend updates#248805
[DO NOT MERGE][EUI] Form append/prepend updates#248805mgadewoll wants to merge 24 commits intoelastic:mainfrom
Conversation
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
ef04ce1 to
0c9cba2
Compare
|
Cloud deployment initiated, see credentials at: https://buildkite.com/elastic/kibana-deploy-cloud-from-pr/builds/655 |
0c9cba2 to
a0965f1
Compare
🤖 GitHub commentsExpand to view the GitHub comments
Just comment with:
|
|
/oblt-deploy |
|
/oblt-deploy |
|
@mgadewoll I've done a smoke test of the ml-ui owned form components and overall looks good, but I did find a couple of visual regressions. Do reach out if you need any help fixing these.
|
- mainly updates due to emotion style updates on EuiButtonEmpty + changes to form layouts
- contains combined latest changes
- contains latest changes after design alignment and dev review
- updates button group wrapper width to account for changed button widths - removes custom height style as the new EuiFormPrepend component handles styling and positioning by itself
…ign specs" This reverts commit 9625bc1.
- includes append.prepend truncation fix
06df105 to
0eb68aa
Compare
|
ℹ️ Rebased with latest main and updated the eui package to include a small fix for append/prepend truncation (as mentioned here) |
|
@damian-polewski There was a decision made from design side to align styles for the
|
|
RE:
To make the Security Solution Endpoint page visible you can run one of our data generator: Ensure kibana is running with no URL prefix: Run the data generator (Adjust the argument values to match your local env. if necessary) It may take a few minutes after running this for the page to show up - since the loaded data needs to run through some ES transforms. Reach out if you need any help. |
|
@paul-tavares Thank you for sharing how to run the endpoints locally 🙏 The fix for truncated prepend is applied correctly ✅
|
- after append/prepend truncation fix
- due to added data-test-subj on EuiFlyoutBody scroll container
950175d to
2dd5761
Compare
2dd5761 to
4c69e25
Compare
💔 Build Failed
Failed CI Steps
Test Failures
Metrics [docs]Module Count
Any counts in public APIs
Async chunks
Page load bundle
History
cc @mgadewoll |
|
ℹ️ The changes made in this QA PR will be merged to |
## Dependency updates - `@elastic/eui` - v112.3.0 ⏩ v113.0.0 - `@elastic/eui-theme-borealis` - v5.4.0 ⏩ v6.0.0 - `@elastic/eslint-plugin-eui` - v2.8.0 ⏩ v2.9.0 --- ## Changes 1. EUI component update: API and Design updates to form layout append/prepend by using the new components `EuiFormPrepend` and `EuiFormAppend` (EUI [#9308](elastic/eui#9308)) >[!important] ❗ This upgrade PR includes all changes previously made in the specific QA PR #248805. Please see the description in that PR for detailed information about the specific changes. 2. Additional changes related to the form layout changes >[!note] 🔗 Please see the [section "Additional changes"](#248805 (comment)) in #248805 for an overview of additional changes. 3. Removed token update: Replaced `ghost` and `ink` token usages with `textInk` or `plainDark` and `textGhost` or `plainLight` respectively (EUI [#9379](elastic/eui#9379)) ## Package updates ### `@elastic/eui` [v113.0.0](https://github.com/elastic/eui/releases/tag/v113.0.0) - Updated `EuiFlyout` manager to close all flyouts when a parent flyout is closed. ([#9378](elastic/eui#9378)) - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) - Added `EuiFormAppend` and `EuiFormPrepend` components ([#9014](elastic/eui#9014)) - Added support for `type="span"` on `EuiFormLabel` for visual-only form labels ([#9014](elastic/eui#9014)) - Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed ([#9014](elastic/eui#9014)) - Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiFormAppend`/`EuiFormPrepend` styling ([#9305](elastic/eui#9305)) - Updated `EuiFormAppend`/`EuiFormPrepend` to inherit `isDisabled` state from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Updated `EuiFormControlLayout` hover, disabled and readonly styling ([#9305](elastic/eui#9305)) - Updated `EuiFormControlButton` to inherit `isDisabled`, `readOnly` and `isInvalid` states from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Added `iconSide` prop on `EuiDatePickerRange` ([#9305](elastic/eui#9305)) - Updated `EuiSuperDatePicker` valid state styling ([#9305](elastic/eui#9305)) - Removed background color transition on `EuiButtonEmpty` (other button variants don't have a transition anymore either) ([#9305](elastic/eui#9305)) - Added `isLoading` prop on `EuiFormControlButton` ([#9328](elastic/eui#9328)) - Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton` ([#8948](elastic/eui#8948)) - Updated paddings for `append`/`prepend` on `EuiFormControlLayout` ([#8948](elastic/eui#8948)) - Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container. ([#9373](elastic/eui#9373)) **Bug fixes** - Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout` ([#9014](elastic/eui#9014)) **Breaking changes** - Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases. ([#9379](elastic/eui#9379)) - Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. ([#9014](elastic/eui#9014)) - Removed `components.superDatePickerBackgroundSuccees` token ([#9305](elastic/eui#9305)) ### `@elastic/eui-theme-borealis` v6.0.0 - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) ### `@elastic/eslint-plugin-eui` v2.9.0 - Prevented `badge-accessibility-rules` rule autofix from duplicating `aria-hidden` attributes. ([#9366](elastic/eui#9366)) - Skip `badge-accessibility-rules` rule validation when a spread operator is used in a component. ([#9366](elastic/eui#9366)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>







Important
DO NOT MERGE.
This PR is used as test and QA branch for upcoming changes to form layout append/prepend elements.
Changes
This PR introduces changes to overall form layout styles, mainly affecting how
appendandprependcontent renders.EUI introduced the new specific components
EuiFormAppendandEuiFormPrependto handle the expected output (EUI documentation).There are 3 types of updates related to the
append/prependrefactor:stringonly content is automatically rendered as new EUI components under the hood (no code update needed)*: complex = contains unexpected content (e.g. multiple interactive elements or unexpected components like
EuiCheckboxorEuiSelect)Additional changes #
This PR replaces usages of
EuiFilterButtonin the embeddable controls system (PR) with theEuiFormControlButtoncomponent that's expected as button for form context usages.Fixes visual misalignments of controls with different
compressedstatesUpdates
StreamNameInputstyles to preserve the current production styles (instead of applying the new input styles)Updated draggable controls to ensure the entire prepend element is draggable for defined content.
ℹ️ A large amount of snapshot updates is due to an underlying change on the Emotion styles of
EuiButtonEmpty.Screenshots #
Note
The following list of screenshots does not showcase all changes. It only highlights the manual updates but does not showcase all automatic updates.
Draggable controls
Screen.Recording.2026-02-18.at.16.24.45.mov
Screen.Recording.2026-02-18.at.16.22.39.mov