[EuiColorStops] Step value must be greater or equal to 1

[dej611]

While testing the EuiColorStops for the Lens editor we found out that the minimum step allowed by the component must be greather or equal to 1.
While there are workarounds to this, it would be useful to handle this internally within the component.

The user case that showed the bug was relative to percentage values, where min and max where set based on the data (for instance 0 - 0.92), and stops where mapped within that range. This triggered the bug:

Uncaught Error: The value of 0.9391536673440342 is not included in the possible sequence provided by the step of 1.
    at EuiRangeTrack.validateValueIsInStep (range_track.js:84)
    at EuiRangeTrack.render (range_track.js:149)
    at finishClassComponent (react-dom.development.js:18470)
    at updateClassComponent (react-dom.development.js:18423)
    at beginWork$1 (react-dom.development.js:20186)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)

[thompsongl]

Makes sense. It should just be a simple prop (rangeSteps?) that gets passed to the internal components that would use it: EuiRangeTrack, EuiColorStopThumb (arrow key fn, and valueInputProps).

[hetanthakkar]

@thompsongl I don't understand your approach! Can you please elaborate slightly more on the purpose of introducing new prop rangeSteps

[thompsongl]

The value of the new rangeSteps prop needs to be passed to the internal components and functions that currently assume a step value of 1:

eui/src/components/color_picker/color_stops/color_stops.tsx

Line 537 in c7e8cc8

step={1}>

eui/src/components/color_picker/color_stops/color_stop_thumb.tsx

Line 217 in c7e8cc8

handleStopChange(stop - 1);

eui/src/components/color_picker/color_stops/color_stop_thumb.tsx

Line 223 in c7e8cc8

handleStopChange(stop + 1);

eui/src/components/color_picker/color_stops/color_stop_thumb.tsx

Line 344 in c7e8cc8

{...valueInputProps}

(The valueInputProps object needs to have a step property)

Might be other locations, also, but these are the ones I know of without getting to code.

[andrmaz]

@thompsongl Is this issue still open ? I would like to give it a try

[JasonStoltz]

@andrmaz EuiColorStops has been deprecated, you can check our Deprecation Schedule here. In light of that, I'm going to close this issue as "Not planned". Thank you for your interest in contributing!

[andrmaz]

@JasonStoltz Noted! Thanks for letting me know