[EuiRange] Migrate to a function component by franciscodocapa95-stack · Pull Request #9928 · elastic/eui

franciscodocapa95-stack · 2026-08-18T16:22:51Z

Summary

Migrates EuiRange from a class component to a function component.

Replaces class context/theme access with useFormContext() and useEuiTheme().
Preserves stable IDs, popover state, track measurement, blur timing, and existing range behavior.
Removes the internal EuiRangeClass export and class-instance ref usage.
Updates the Storybook interaction to focus the real numeric input.
Adds regression coverage for IDs, input/slider synchronization, validity, callbacks, popover timing, track width, and ticks.

Closes #9494.

API Changes

There are no changes to the documented EuiRange API.

The internal EuiRangeClass export and class-instance ref access are removed as part of the class-to-function migration, as discussed in #9494.

Screenshots

No visual changes are expected.

The migrated component was tested locally in Storybook and compared with the current production documentation. Slider/input synchronization, popover behavior, ticks, levels, highlight, tooltip, and keyboard interaction remained consistent.

Impact Assessment

🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 Low

The migration preserves the existing DOM structure, class names, styles, ARIA attributes, documented props, and snapshots.

Release Readiness

Documentation: No documentation changes required
Figma: No design changes
Migration guide: No documented API or consumer migration required
Adoption plan: Not applicable; this is an internal component implementation migration

QA instructions for reviewer

Confirm slider and numeric input synchronization in both directions.
Confirm keyboard interaction.
Confirm the input popover opens on focus and retains the existing delayed blur behavior.
Confirm ticks, levels, highlight, and tooltip behavior.
Confirm invalid/out-of-range values behave as expected.
Confirm generated and custom IDs remain stable.
Confirm the InputWithPopover Storybook story focuses the real numeric input.

Checklist before marking Ready for Review

Filled out all sections above
QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
QA: Tested in CodeSandbox and Kibana
QA: Tested docs changes
Tests: Added/updated Jest, Cypress, and VRT
Changelog: No changelog required, as confirmed in [EuiRange] Migrate from class to function component #9494
Breaking changes: No breaking change label required

Validation

React 17: 37/37 EuiRange tests passed
React 18: 37/37 EuiRange tests passed
16/16 snapshots passed on both React versions
Full pre-push validation:
- 367 test suites passed
- 5,273 tests passed
- 2,753 snapshots passed
TypeScript passed
ESLint passed
git diff --check passed
No snapshots changed

Reviewer checklist

Approved Impact Assessment — Acceptable to merge given the consumer impact.
Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

cla-checker-service · 2026-08-18T16:22:56Z

💚 CLA has been signed

github-actions · 2026-08-18T16:23:00Z

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

weronikaolejniczak · 2026-08-24T08:35:59Z

buildkite test this

elastic-vault-github-plugin-prod · 2026-08-24T08:55:55Z

📷 2 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euirange (2 differences)

Story	Diff %	Before	After	Diff
input with popover `desktop`	97.26%
input with popover `mobile`	90.30%

infra-vault-gh-plugin-prod · 2026-08-24T08:55:59Z

💔 Build Failed

Buildkite Build
Commit: cefc948
Documentation website
Storybook
❌ Visual regression tests failed (view diff table)

Failed CI Steps

📷 Test visual regression

History

weronikaolejniczak · 2026-08-24T08:58:44Z

nit:

Could you update fireEvent to userEvent in the whole file?

weronikaolejniczak · 2026-08-24T11:27:14Z

-    trackWidth: 0,
-  };
+  const theme = useEuiTheme();
+  const [id] = useState(() => propsId || htmlIdGenerator()());


nit: We have a dedicated custom hook for this:

Suggested change

const [id] = useState(() => propsId || htmlIdGenerator()());

const generatedId = useGeneratedHtmlId();

const id = propsId || generatedId;

weronikaolejniczak · 2026-08-24T11:28:04Z

+        | React.ChangeEvent<HTMLInputElement>
+        | React.MouseEvent<HTMLButtonElement>


nit:

Let's destructure these types from the import using type keyword instead of using the React namespace. Applies to the rest of the file.

weronikaolejniczak · 2026-08-24T11:29:04Z

-    return thePopover ? thePopover : theRange;
-  }
-}
+  const thePopover = showInputOnly ? (


nit: Can we just name these popover and range? Adding the prefix the looks weird.

weronikaolejniczak · 2026-08-24T11:29:32Z

+    <EuiInputPopover
+      {...inputPopoverProps}
+      className={classNames('euiRange__popover', inputPopoverProps?.className)}
+      input={theInput!} // `showInputOnly` confirms existence


nit: Let's not use bangs or assertions. Those are essentially telling the TS that we know better. Let's fix the underlying issue instead.

weronikaolejniczak · 2026-08-24T11:29:48Z

+      fullWidth={fullWidth}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      disableFocusTrap={true}


nit:

This can simply be:

Suggested change

disableFocusTrap={true}

disableFocusTrap

weronikaolejniczak · 2026-08-24T11:30:57Z

blocking:

The VRTs no longer show the range component. We should fix that!

infra-vault-gh-plugin-prod · 2026-08-25T08:47:51Z

💚 Build Succeeded

Buildkite Build
Commit: cefc948

weronikaolejniczak · 2026-08-27T11:13:58Z

Hey @franciscodocapa95-stack, are you planning on continuing this community contribution?

refactor: migrate EuiRange to function component

6fc4a3d

franciscodocapa95-stack requested a review from a team as a code owner August 18, 2026 16:22

github-actions Bot added the community contribution (Don't delete - used for automation) label Aug 18, 2026

Merge branch 'main' into refactor/eui-range-function-component

cefc948

weronikaolejniczak added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Aug 24, 2026

weronikaolejniczak reviewed Aug 24, 2026

View reviewed changes

	const [id] = useState(() => propsId \|\| htmlIdGenerator()());
	const generatedId = useGeneratedHtmlId();
	const id = propsId \|\| generatedId;

		\| React.ChangeEvent<HTMLInputElement>
		\| React.MouseEvent<HTMLButtonElement>

Uh oh!

Conversation

franciscodocapa95-stack commented Aug 18, 2026

Summary

API Changes

Screenshots

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Validation

Reviewer checklist

Uh oh!

cla-checker-service Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 18, 2026

Uh oh!

weronikaolejniczak commented Aug 24, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 24, 2026

📷 2 visual difference(s) found

Uh oh!

infra-vault-gh-plugin-prod Bot commented Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💔 Build Failed

Failed CI Steps

History

Uh oh!

weronikaolejniczak Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Aug 24, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented Aug 24, 2026

Uh oh!

infra-vault-gh-plugin-prod Bot commented Aug 25, 2026

💚 Build Succeeded

Uh oh!

weronikaolejniczak commented Aug 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cla-checker-service Bot commented Aug 18, 2026 •

edited

Loading

infra-vault-gh-plugin-prod Bot commented Aug 24, 2026 •

edited

Loading

weronikaolejniczak Aug 24, 2026 •

edited

Loading