[EuiColorStops] Fixed: Standard, Random & Fixed Examples are using sa…

…me states (#4614)
elastic · Mar 5, 2021 · efe4ac2 · efe4ac2
1 parent d0d623c
commit efe4ac2
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js
@@ -5,7 +5,13 @@ import { EuiColorStops, EuiFormRow } from '../../../../src/components';
 import { useColorStopsState } from '../../../../src/services';
 
 export default () => {
-  const [colorStops, setColorStops, addColor] = useColorStopsState(true);
+  const [standardColorStops, setStandardColorStops] = useColorStopsState(true);
+  const [
+    randomColorStops,
+    setRandomColorStops,
+    addRandomColor,
+  ] = useColorStopsState(true);
+  const [fixedColorStops, setFixedColorStops] = useColorStopsState(true);
 
   const [extendedColorStops, setExtendedColorStops] = useState([
     {
@@ -46,20 +52,20 @@ export default () => {
       <EuiFormRow label="Standard">
         <EuiColorStops
           label="Standard"
-          onChange={setColorStops}
-          colorStops={colorStops}
+          onChange={setStandardColorStops}
+          colorStops={standardColorStops}
           min={0}
           max={100}
         />
       </EuiFormRow>
       <EuiFormRow label="Random new color">
         <EuiColorStops
           label="Random new color"
-          onChange={setColorStops}
-          colorStops={colorStops}
+          onChange={setRandomColorStops}
+          colorStops={randomColorStops}
           min={0}
           max={100}
-          addColor={addColor}
+          addColor={addRandomColor}
         />
       </EuiFormRow>
       <EuiFormRow label="Extended range">
@@ -74,8 +80,8 @@ export default () => {
       <EuiFormRow label="Fixed color segments">
         <EuiColorStops
           label="Fixed color segments"
-          onChange={setColorStops}
-          colorStops={colorStops}
+          onChange={setFixedColorStops}
+          colorStops={fixedColorStops}
           min={0}
           max={100}
           stopType="fixed"