[Inputs] Append/Prepend API and design updates#9308
Conversation
|
ℹ️ Merged |
418f797 to
f830fb5
Compare
|
|
||
| /* manually remove additional label padding to reduce empty space */ | ||
| .euiButtonEmpty__text { | ||
| padding: 0; |
There was a problem hiding this comment.
ℹ️ This ensures that pagination buttons remain as they were. We don't want the new button label padding being applied here as it would add too much empty space on these elements.
Screen.Recording.2026-02-10.at.17.31.24.mov
|
ℹ️ Rebased with main on latest state (version |
- reverts changes due to generic button padding updates specifically for pagination as the buttons otherwise have too much empty space between them
f830fb5 to
3cdf101
Compare
|
ℹ️ Rebased with latest main. And added an additional small fix to ensure proper truncation on append/prepend elements (commit). |
packages/website/docs/components/forms/layouts/compressed-forms.mdx
Outdated
Show resolved
Hide resolved
...ages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.test.tsx
Outdated
Show resolved
Hide resolved
packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx
Outdated
Show resolved
Hide resolved
packages/eui/src/components/form/form_control_button/form_control_button.stories.tsx
Show resolved
Hide resolved
weronikaolejniczak
left a comment
There was a problem hiding this comment.
✅ Tested EuiPagination staging vs prod, no regression
✅ Tested EuiFormAppend / EuiFormPrepend truncation, works as expected
✅ All updated VRT referenced are as expected, I also ran VRT locally, all tests passed (except the icon tip and popover panel padding)
I only left some nits after going through the code. After reviewing I even ran an AI agent on main..HEAD and it didn't find these, not sure how to feel about that 😅
Fantastic work, Lene! 🚀
Maybe AI won't quite just yet take our jobs after all 😅 |
💚 Build SucceededHistory
cc @mgadewoll |
💚 Build Succeeded
History
cc @mgadewoll |
## 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>
Summary
Implements https://github.com/elastic/eui-private/issues/351
Note
This PR merges a feature branch.
This PR contains changes from:
append/prependAPI #9014append/prependdesign updates #9305isLoadingstate #9328Additional changes
EuiPaginationButtonto remove the newly added button label padding to ensure pagination buttons remain as they were on productionmax-widthon the append/prepend wrapper to ensure truncation works as expectedWhy are we making this change?
✨ UI modernization and consistency: This PR implements UI updates as part of the ongoing initiative to make the UI more modern and consistent.
Screenshots #
isLoadingImpact to users
Important
The changes have been tested and peer reviewed on Kibana in elastic/kibana#248805.
‼️ All changes of this PR should be included with the respective release upgrade.
quickSelectButtonPropsonEuiSuperDatePickermaybe cause breaking changes as it reflects a more restricted prop type forEuiFormPrependinstead ofEuiButtonEmpty.quickSelectButtonPropsonEuiSuperDatePickerorEuiQuickSelectPopoverdirectly in Kibana or CloudUIcomponents.superDatePickerBackgroundSucceestokenQA
ℹ️ most changes have been reviewed separately as part of the included PRs. Only the above mentioned additional changes are new.
EuiPaginationhas no regression with productionEuiFormPrepend/Appendtruncate properly in narrow layouts (Story)General checklist
@defaultif default values are missing) and playground toggles