[EuiRange][EuiDualRange] Reduce min-width for range inputs #8866
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- this ensures more space is available in form compositions, e.g. dualRange where the delimiter uses more space in Borealis
mgadewoll
force-pushed
the
dualrange/reduce-input-min-width
branch
from
e0c4653 to
9dc5788
Compare
weronikaolejniczak
approved these changes
Jul 16, 2025
Contributor
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
There was a problem hiding this comment.
LGTM! 🟢 The changes are very simple, VRT tests are updated, EuiDualRange looks correct now. Thank you, Lene!
Details
Production
PR env
Contributor
Author
|
@weronikaolejniczak Thanks for the review! |
Collaborator
💚 Build SucceededHistory
cc @mgadewoll |
Collaborator
💚 Build Succeeded
History
cc @mgadewoll |
weronikaolejniczak
added a commit
to elastic/kibana
that referenced
this pull request
Jul 23, 2025
`@elastic/eui`: `106.0.0` ⏩ `106.1.0` `@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) New props and defaults have been added to `EuiFlyout`, including `includeSelectorInFocusTrap`, plus new global CSS variables for push mode offset control. Additionally, we introduced a small spacing fix for invalid `EuiDualRange` append component and added support for custom styles on `EuiTreeView` nodes via the css key. :warning: **React 16 is now deprecated:** EUI no longer tests against it or fixes issues specific to it. ## Changes - I removed forced click in: `x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts` - I removed `{enter}` in: `x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts` (see #228517) ## Package updates ### `@elastic/eui` #### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0) - Added `--euiPushFlyoutOffsetInlineStart` and `--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the `EuiFlyout` in `push` mode. ([#8872](elastic/eui#8872)) - Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange` ([#8866](elastic/eui#8866)) - Added `includeSelectorInFocusTrap` prop for `EuiFlyout` ([#8849](elastic/eui#8849)) - Added component defaults for `EuiFlyout` that include `includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap` ([#8849](elastic/eui#8849)) **Bug fixes** - Fixed flaky manual return focus behavior on `EuiFlyout` by relying on `FocusTrap` returning focus instead ([#8878](elastic/eui#8878)) - Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape` keypress ([#8878](elastic/eui#8878)) - Fixed support for `css` key in items object passed to `EuiTreeView` ([#8864](elastic/eui#8864)) **Deprecations** - Deprecated support for React 16. Please update to a modern version of React or stay on EUI version 106.0.0 if you can't switch right now. ([#8868](elastic/eui#8868)) ### `@elastic/eslint-plugin-eui` #### [`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1) **Bug fixes** - Removed `no-css_color` entry which mapped to a duplicate `no-css-color` rule ([#8888](elastic/eui#8888)) #### [`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0) - Added new `prefer-eui-icon-tip` rule. ([#8877](elastic/eui#8877))
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
`@elastic/eui`: `106.0.0` ⏩ `106.1.0` `@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) New props and defaults have been added to `EuiFlyout`, including `includeSelectorInFocusTrap`, plus new global CSS variables for push mode offset control. Additionally, we introduced a small spacing fix for invalid `EuiDualRange` append component and added support for custom styles on `EuiTreeView` nodes via the css key. :warning: **React 16 is now deprecated:** EUI no longer tests against it or fixes issues specific to it. ## Changes - I removed forced click in: `x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts` - I removed `{enter}` in: `x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts` (see elastic#228517) ## Package updates ### `@elastic/eui` #### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0) - Added `--euiPushFlyoutOffsetInlineStart` and `--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the `EuiFlyout` in `push` mode. ([elastic#8872](elastic/eui#8872)) - Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange` ([elastic#8866](elastic/eui#8866)) - Added `includeSelectorInFocusTrap` prop for `EuiFlyout` ([elastic#8849](elastic/eui#8849)) - Added component defaults for `EuiFlyout` that include `includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap` ([elastic#8849](elastic/eui#8849)) **Bug fixes** - Fixed flaky manual return focus behavior on `EuiFlyout` by relying on `FocusTrap` returning focus instead ([elastic#8878](elastic/eui#8878)) - Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape` keypress ([elastic#8878](elastic/eui#8878)) - Fixed support for `css` key in items object passed to `EuiTreeView` ([elastic#8864](elastic/eui#8864)) **Deprecations** - Deprecated support for React 16. Please update to a modern version of React or stay on EUI version 106.0.0 if you can't switch right now. ([elastic#8868](elastic/eui#8868)) ### `@elastic/eslint-plugin-eui` #### [`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1) **Bug fixes** - Removed `no-css_color` entry which mapped to a duplicate `no-css-color` rule ([elastic#8888](elastic/eui#8888)) #### [`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0) - Added new `prefer-eui-icon-tip` rule. ([elastic#8877](elastic/eui#8877))
eokoneyo
pushed a commit
to eokoneyo/kibana
that referenced
this pull request
Jul 31, 2025
`@elastic/eui`: `106.0.0` ⏩ `106.1.0` `@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) New props and defaults have been added to `EuiFlyout`, including `includeSelectorInFocusTrap`, plus new global CSS variables for push mode offset control. Additionally, we introduced a small spacing fix for invalid `EuiDualRange` append component and added support for custom styles on `EuiTreeView` nodes via the css key. :warning: **React 16 is now deprecated:** EUI no longer tests against it or fixes issues specific to it. ## Changes - I removed forced click in: `x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts` - I removed `{enter}` in: `x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts` (see elastic#228517) ## Package updates ### `@elastic/eui` #### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0) - Added `--euiPushFlyoutOffsetInlineStart` and `--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the `EuiFlyout` in `push` mode. ([elastic#8872](elastic/eui#8872)) - Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange` ([elastic#8866](elastic/eui#8866)) - Added `includeSelectorInFocusTrap` prop for `EuiFlyout` ([elastic#8849](elastic/eui#8849)) - Added component defaults for `EuiFlyout` that include `includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap` ([elastic#8849](elastic/eui#8849)) **Bug fixes** - Fixed flaky manual return focus behavior on `EuiFlyout` by relying on `FocusTrap` returning focus instead ([elastic#8878](elastic/eui#8878)) - Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape` keypress ([elastic#8878](elastic/eui#8878)) - Fixed support for `css` key in items object passed to `EuiTreeView` ([elastic#8864](elastic/eui#8864)) **Deprecations** - Deprecated support for React 16. Please update to a modern version of React or stay on EUI version 106.0.0 if you can't switch right now. ([elastic#8868](elastic/eui#8868)) ### `@elastic/eslint-plugin-eui` #### [`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1) **Bug fixes** - Removed `no-css_color` entry which mapped to a duplicate `no-css-color` rule ([elastic#8888](elastic/eui#8888)) #### [`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0) - Added new `prefer-eui-icon-tip` rule. ([elastic#8877](elastic/eui#8877))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR is a follow-up to #8850 (comment) and aims to reduce a visual issue in EuiDualRange with
isInvalid. The issue happens forEuiDualRangewhen the form wrapper reaches it's max-width (400px) while the content requires more space (e.g. due to a longprepend). This would result in theisInvalidicon to be pushed outside of the boundaries of the form wrapper.The proposed "quick fix" reduces the
min-widthfor range inputs slightly, leaving a bit more space available. This results in slightly less space for the input content to be displayed as a tradeoff. This effectively means that it won't display ~ 4 numbers anymore but rather 3 + a cut-off one.ℹ️ This approach has been aligned on with design.
Why are we making this change?
Improving a visual issue to ensure parity with the state from before introducing the Visual Refresh input changes.
Impact to users
🟢 This is a visual update only. There is no update required on consumer side.
QA
EuiDualRangelooks correctGeneral checklist
Checked in both light and dark modesChecked in both MacOS and Windows high contrast modesChecked for accessibility including keyboard-only and screenreader modesAdded documentationProps have proper autodocs (using@defaultif default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesAdded or updated jest and cypress testsUpdated visual regression testsIf applicable, added the breaking change issue label (and filled out the breaking change 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)