[EuiColorStops] ignore empty values when getting range max and min (#…

…2496)

* ignore empty values when getting range max and min

* update change log with PR URL

* check for empty string instead of isNaN

* use original check for NaN instead of empty string

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added new `euiTreeView` component for rendering recursive objects such as folder structures. ([#2409](https://github.com/elastic/eui/pull/2409))
 - Added `euiXScrollWithShadows()` mixin and `.eui-xScrollWithShadows` utility class ([#2458](https://github.com/elastic/eui/pull/2458))
+- Fixed `EuiColorStops` where empty string values would cause range min or max to be NaN ([#2496](https://github.com/elastic/eui/pull/2496))
 
 **Bug fixes**
 

src/components/color_picker/color_stops/color_stops.tsx

@@ -62,9 +62,13 @@ function sortStops(colorStops: ColorStop[]) {
     .sort((a, b) => a.stop - b.stop);
 }
 
+function getValidStops(colorStops: ColorStop[]) {
+  return colorStops.map(el => el.stop).filter(stop => !isNaN(stop));
+}
+
 function getRangeMin(colorStops: ColorStop[], min?: number) {
   const rangeMin = min || DEFAULT_MIN;
-  const stops = colorStops.map(el => el.stop);
+  const stops = getValidStops(colorStops);
   const first = Math.min.apply(Math, stops); // https://johnresig.com/blog/fast-javascript-maxmin/
 
   if (first < rangeMin) {
@@ -78,7 +82,7 @@ function getRangeMin(colorStops: ColorStop[], min?: number) {
 }
 function getRangeMax(colorStops: ColorStop[], max?: number) {
   const rangeMax = max || DEFAULT_MAX;
-  const stops = colorStops.map(el => el.stop);
+  const stops = getValidStops(colorStops);
   const last = Math.max.apply(Math, stops); // https://johnresig.com/blog/fast-javascript-maxmin/
 
   if (last > rangeMax) {