From a61431e8ee9d27b66d980acd4e6bcca14eeabde5 Mon Sep 17 00:00:00 2001 From: Mridul Gogia Date: Sat, 14 Mar 2020 01:01:23 +0530 Subject: [PATCH 1/9] Moved useColorPicker from src-docs/src/views/color_picker/utils.js -> src/services --- src-docs/src/views/color_picker/alpha.js | 6 +++--- src-docs/src/views/color_picker/color_picker.js | 4 ++-- src-docs/src/views/color_picker/color_stops.js | 2 +- src-docs/src/views/color_picker/containers.js | 4 ++-- src-docs/src/views/color_picker/custom_button.js | 4 ++-- src-docs/src/views/color_picker/custom_swatches.js | 4 ++-- src-docs/src/views/color_picker/formats.js | 8 ++++---- src-docs/src/views/color_picker/inline.js | 4 ++-- src-docs/src/views/color_picker/kitchen_sink.js | 4 ++-- src-docs/src/views/color_picker/modes.js | 4 ++-- .../utils.js => src/services/color_picker/color_picker.ts | 8 ++++---- src/services/color_picker/index.ts | 1 + src/services/index.ts | 2 ++ 13 files changed, 29 insertions(+), 26 deletions(-) rename src-docs/src/views/color_picker/utils.js => src/services/color_picker/color_picker.ts (79%) create mode 100644 src/services/color_picker/index.ts diff --git a/src-docs/src/views/color_picker/alpha.js b/src-docs/src/views/color_picker/alpha.js index 801d973fd04..0ff835994cd 100644 --- a/src-docs/src/views/color_picker/alpha.js +++ b/src-docs/src/views/color_picker/alpha.js @@ -1,11 +1,11 @@ import React from 'react'; import { EuiColorPicker, EuiFormRow } from '../../../../src/components'; -import { useColorPicker } from './utils'; +import { useColorPickerState } from '../../../../src/services'; export const Alpha = () => { - const [color, setColor, errors] = useColorPicker('#D36086'); - const [color2, setColor2, errors2] = useColorPicker('211, 96, 134'); + const [color, setColor, errors] = useColorPickerState('#D36086'); + const [color2, setColor2, errors2] = useColorPickerState('211, 96, 134'); const customSwatches = [ '#54B399', diff --git a/src-docs/src/views/color_picker/color_picker.js b/src-docs/src/views/color_picker/color_picker.js index ba1f02a34d0..44694fea491 100644 --- a/src-docs/src/views/color_picker/color_picker.js +++ b/src-docs/src/views/color_picker/color_picker.js @@ -1,10 +1,10 @@ import React from 'react'; import { EuiColorPicker, EuiFormRow } from '../../../../src/components'; -import { useColorPicker } from './utils'; +import { useColorPickerState } from '../../../../src/services'; export const ColorPicker = () => { - const [color, setColor, errors] = useColorPicker('#D36086'); + const [color, setColor, errors] = useColorPickerState('#D36086'); return ( diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js index af7df586486..2f85ecf26df 100644 --- a/src-docs/src/views/color_picker/color_stops.js +++ b/src-docs/src/views/color_picker/color_stops.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { EuiColorStops, EuiFormRow } from '../../../../src/components'; -import { useColorStop } from './utils'; +import { useColorStop } from '../../../../src/services'; export const ColorStops = () => { const [colorStops, setColorStops, addColor] = useColorStop(true); diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js index 7f6923ea65d..558b43da7d9 100644 --- a/src-docs/src/views/color_picker/containers.js +++ b/src-docs/src/views/color_picker/containers.js @@ -14,10 +14,10 @@ import { EuiSpacer, } from '../../../../src/components'; -import { useColorPicker, useColorStop } from './utils'; +import { useColorPickerState, useColorStop } from '../../../../src/services'; export default () => { - const [color, setColor] = useColorPicker('#FFF'); + const [color, setColor] = useColorPickerState('#FFF'); const [colorStops, setColorStops] = useColorStop(); const [isModalVisible, setIsModalVisible] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src-docs/src/views/color_picker/custom_button.js b/src-docs/src/views/color_picker/custom_button.js index b5b0601b867..e8c227cd011 100644 --- a/src-docs/src/views/color_picker/custom_button.js +++ b/src-docs/src/views/color_picker/custom_button.js @@ -8,10 +8,10 @@ import { EuiSpacer, } from '../../../../src/components'; -import { useColorPicker } from './utils'; +import { useColorPickerState } from '../../../../src/services'; export const CustomButton = () => { - const [color, setColor, errors] = useColorPicker(''); + const [color, setColor, errors] = useColorPickerState(''); const [selectedColor, setSelectedColor] = useState(color); const handleColorChange = (text, { hex, isValid }) => { setColor(text, { hex, isValid }); diff --git a/src-docs/src/views/color_picker/custom_swatches.js b/src-docs/src/views/color_picker/custom_swatches.js index b8256d60b04..b324b67c70a 100644 --- a/src-docs/src/views/color_picker/custom_swatches.js +++ b/src-docs/src/views/color_picker/custom_swatches.js @@ -7,10 +7,10 @@ import { EuiSpacer, } from '../../../../src/components'; -import { useColorPicker, useColorStop } from './utils'; +import { useColorPickerState, useColorStop } from '../../../../src/services'; export const CustomSwatches = () => { - const [color, setColor, errors] = useColorPicker(); + const [color, setColor, errors] = useColorPickerState(); const [colorStops, setColorStops] = useColorStop(); const customSwatches = ['#333', '#666', '#999', '#CCC']; diff --git a/src-docs/src/views/color_picker/formats.js b/src-docs/src/views/color_picker/formats.js index 1f568a28716..a4c2bc699ae 100644 --- a/src-docs/src/views/color_picker/formats.js +++ b/src-docs/src/views/color_picker/formats.js @@ -1,12 +1,12 @@ import React from 'react'; import { EuiColorPicker, EuiFormRow } from '../../../../src/components'; -import { useColorPicker } from './utils'; +import { useColorPickerState } from '../../../../src/services'; export const Formats = () => { - const [color, setColor, errors] = useColorPicker('#D36086'); - const [color2, setColor2, errors2] = useColorPicker('#D36086'); - const [color3, setColor3, errors3] = useColorPicker('211, 96, 134'); + const [color, setColor, errors] = useColorPickerState('#D36086'); + const [color2, setColor2, errors2] = useColorPickerState('#D36086'); + const [color3, setColor3, errors3] = useColorPickerState('211, 96, 134'); return ( <> diff --git a/src-docs/src/views/color_picker/inline.js b/src-docs/src/views/color_picker/inline.js index 789adea7a6c..87cecf3f194 100644 --- a/src-docs/src/views/color_picker/inline.js +++ b/src-docs/src/views/color_picker/inline.js @@ -1,10 +1,10 @@ import React from 'react'; import { EuiColorPicker } from '../../../../src/components'; -import { useColorPicker } from './utils'; +import { useColorPickerState } from '../../../../src/services'; export const Inline = () => { - const [color, setColor, errors] = useColorPicker('#D36086'); + const [color, setColor, errors] = useColorPickerState('#D36086'); return ( { - const [color, setColor] = useColorPicker('#D36086'); + const [color, setColor] = useColorPickerState('#D36086'); const [colorStops, setColorStops, addStop] = useColorStop(true); return ( diff --git a/src-docs/src/views/color_picker/modes.js b/src-docs/src/views/color_picker/modes.js index f264d20ae53..73eb143a590 100644 --- a/src-docs/src/views/color_picker/modes.js +++ b/src-docs/src/views/color_picker/modes.js @@ -7,10 +7,10 @@ import { EuiSpacer, } from '../../../../src/components'; -import { useColorPicker, useColorStop } from './utils'; +import { useColorPickerState, useColorStop } from '../../../../src/services'; export const Modes = () => { - const [color, setColor, errors] = useColorPicker('#D36086'); + const [color, setColor, errors] = useColorPickerState('#D36086'); const [colorStops, setColorStops] = useColorStop(); return ( diff --git a/src-docs/src/views/color_picker/utils.js b/src/services/color_picker/color_picker.ts similarity index 79% rename from src-docs/src/views/color_picker/utils.js rename to src/services/color_picker/color_picker.ts index 317af47536d..1880e615703 100644 --- a/src-docs/src/views/color_picker/utils.js +++ b/src/services/color_picker/color_picker.ts @@ -4,7 +4,7 @@ const generateRandomColor = () => // https://www.paulirish.com/2009/random-hex-color-code-snippets/ `#${Math.floor(Math.random() * 16777215).toString(16)}`; -export const useColorStop = (useRandomColor = false) => { +export const useColorStop = (useRandomColor: boolean = false) => { const [addColor, setAddColor] = useState(generateRandomColor()); const [colorStops, setColorStops] = useState([ { @@ -21,7 +21,7 @@ export const useColorStop = (useRandomColor = false) => { }, ]); - const updateColorStops = colorStops => { + const updateColorStops = (colorStops: any) => { setColorStops(colorStops); if (useRandomColor) { setAddColor(generateRandomColor()); @@ -30,10 +30,10 @@ export const useColorStop = (useRandomColor = false) => { return [colorStops, updateColorStops, addColor]; }; -export const useColorPicker = (initialColor = '') => { +export const useColorPickerState = (initialColor = '') => { const [color, setColorValue] = useState(initialColor); const [isValid, setIsValid] = useState(true); - const setColor = (text, { isValid }) => { + const setColor = (text: string, { isValid }: { isValid: boolean }) => { setColorValue(text); setIsValid(isValid); }; diff --git a/src/services/color_picker/index.ts b/src/services/color_picker/index.ts new file mode 100644 index 00000000000..6df1b379518 --- /dev/null +++ b/src/services/color_picker/index.ts @@ -0,0 +1 @@ +export { useColorPickerState, useColorStop } from './color_picker'; diff --git a/src/services/index.ts b/src/services/index.ts index 78f6f8ff63d..cbaca05ebfa 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -45,6 +45,8 @@ export { HSV, } from './color'; +export { useColorPickerState, useColorStop } from './color_picker'; + export { copyToClipboard } from './copy_to_clipboard'; export { From 3f5e3a07d27cc0964ba2a32dfe8f62b3a1a42cf5 Mon Sep 17 00:00:00 2001 From: Mridul Gogia Date: Sat, 14 Mar 2020 01:20:26 +0530 Subject: [PATCH 2/9] Updated CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fa1c01ae42..31bbb350674 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ - Added alpha channel (opacity) support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850)) - Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991)) - Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993)) - +- Moved and renamed `useColorPicker and useColorStops` from src-docs/src/views/color_picker/utils to `useColorPickerState and useColorStops` src/services ([#3067](https://github.com/elastic/eui/pull/3067)) **Bug Fixes** - Fixed `EuiFieldNumber` so values of type `number` are now allowed ([#3020](https://github.com/elastic/eui/pull/3020)) From 012fa6112c4d1b6bea1dcac239e9bca4fc8d33be Mon Sep 17 00:00:00 2001 From: Mridul Gogia Date: Tue, 17 Mar 2020 15:18:31 +0530 Subject: [PATCH 3/9] Updated useColorStop to useColorStopState added initialColorStops param --- .../src/views/color_picker/color_stops.js | 4 +- src-docs/src/views/color_picker/containers.js | 7 +++- .../src/views/color_picker/custom_swatches.js | 7 +++- .../src/views/color_picker/kitchen_sink.js | 7 +++- src-docs/src/views/color_picker/modes.js | 7 +++- src/services/color_picker/color_picker.ts | 38 +++++++++++-------- src/services/color_picker/index.ts | 2 +- src/services/index.ts | 2 +- 8 files changed, 46 insertions(+), 28 deletions(-) diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js index 2f85ecf26df..4751866228c 100644 --- a/src-docs/src/views/color_picker/color_stops.js +++ b/src-docs/src/views/color_picker/color_stops.js @@ -2,10 +2,10 @@ import React, { useState } from 'react'; import { EuiColorStops, EuiFormRow } from '../../../../src/components'; -import { useColorStop } from '../../../../src/services'; +import { useColorStopState } from '../../../../src/services'; export const ColorStops = () => { - const [colorStops, setColorStops, addColor] = useColorStop(true); + const [colorStops, setColorStops, addColor] = useColorStopState(true); const [extendedColorStops, setExtendedColorStops] = useState([ { diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js index 558b43da7d9..b77f765263b 100644 --- a/src-docs/src/views/color_picker/containers.js +++ b/src-docs/src/views/color_picker/containers.js @@ -14,11 +14,14 @@ import { EuiSpacer, } from '../../../../src/components'; -import { useColorPickerState, useColorStop } from '../../../../src/services'; +import { + useColorPickerState, + useColorStopState, +} from '../../../../src/services'; export default () => { const [color, setColor] = useColorPickerState('#FFF'); - const [colorStops, setColorStops] = useColorStop(); + const [colorStops, setColorStops] = useColorStopState(); const [isModalVisible, setIsModalVisible] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src-docs/src/views/color_picker/custom_swatches.js b/src-docs/src/views/color_picker/custom_swatches.js index b324b67c70a..6744c2b16c2 100644 --- a/src-docs/src/views/color_picker/custom_swatches.js +++ b/src-docs/src/views/color_picker/custom_swatches.js @@ -7,11 +7,14 @@ import { EuiSpacer, } from '../../../../src/components'; -import { useColorPickerState, useColorStop } from '../../../../src/services'; +import { + useColorPickerState, + useColorStopState, +} from '../../../../src/services'; export const CustomSwatches = () => { const [color, setColor, errors] = useColorPickerState(); - const [colorStops, setColorStops] = useColorStop(); + const [colorStops, setColorStops] = useColorStopState(); const customSwatches = ['#333', '#666', '#999', '#CCC']; diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index f571da44236..dea1f6f744c 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -7,11 +7,14 @@ import { } from '../../../../src/components'; import { DisplayToggles } from '../form_controls/display_toggles'; -import { useColorPickerState, useColorStop } from '../../../../src/services'; +import { + useColorPickerState, + useColorStopState, +} from '../../../../src/services'; export const KitchenSink = () => { const [color, setColor] = useColorPickerState('#D36086'); - const [colorStops, setColorStops, addStop] = useColorStop(true); + const [colorStops, setColorStops, addStop] = useColorStopState(true); return ( diff --git a/src-docs/src/views/color_picker/modes.js b/src-docs/src/views/color_picker/modes.js index 73eb143a590..44645b948b8 100644 --- a/src-docs/src/views/color_picker/modes.js +++ b/src-docs/src/views/color_picker/modes.js @@ -7,11 +7,14 @@ import { EuiSpacer, } from '../../../../src/components'; -import { useColorPickerState, useColorStop } from '../../../../src/services'; +import { + useColorPickerState, + useColorStopState, +} from '../../../../src/services'; export const Modes = () => { const [color, setColor, errors] = useColorPickerState('#D36086'); - const [colorStops, setColorStops] = useColorStop(); + const [colorStops, setColorStops] = useColorStopState(); return ( diff --git a/src/services/color_picker/color_picker.ts b/src/services/color_picker/color_picker.ts index 1880e615703..1b180bd4441 100644 --- a/src/services/color_picker/color_picker.ts +++ b/src/services/color_picker/color_picker.ts @@ -1,26 +1,32 @@ import { useMemo, useState } from 'react'; +interface colorStopsType { + stop: number; + color: string; +} + const generateRandomColor = () => // https://www.paulirish.com/2009/random-hex-color-code-snippets/ `#${Math.floor(Math.random() * 16777215).toString(16)}`; -export const useColorStop = (useRandomColor: boolean = false) => { +export const useColorStopState = ( + initialColorStops: colorStopsType[] = [{ + stop: 20, + color: '#54B399', + }, + { + stop: 50, + color: '#D36086', + }, + { + stop: 65, + color: '#9170B8', + }], + useRandomColor: boolean = false +) => { const [addColor, setAddColor] = useState(generateRandomColor()); - const [colorStops, setColorStops] = useState([ - { - stop: 20, - color: '#54B399', - }, - { - stop: 50, - color: '#D36086', - }, - { - stop: 65, - color: '#9170B8', - }, - ]); - + const [colorStops, setColorStops] = useState(initialColorStops); + const updateColorStops = (colorStops: any) => { setColorStops(colorStops); if (useRandomColor) { diff --git a/src/services/color_picker/index.ts b/src/services/color_picker/index.ts index 6df1b379518..fb7351854ed 100644 --- a/src/services/color_picker/index.ts +++ b/src/services/color_picker/index.ts @@ -1 +1 @@ -export { useColorPickerState, useColorStop } from './color_picker'; +export { useColorPickerState, useColorStopState } from './color_picker'; diff --git a/src/services/index.ts b/src/services/index.ts index cbaca05ebfa..b016d111068 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -45,7 +45,7 @@ export { HSV, } from './color'; -export { useColorPickerState, useColorStop } from './color_picker'; +export { useColorPickerState, useColorStopState } from './color_picker'; export { copyToClipboard } from './copy_to_clipboard'; From 35efd1db49e8003af0dfc117455e306be191f789 Mon Sep 17 00:00:00 2001 From: Mridul Gogia Date: Tue, 17 Mar 2020 15:25:21 +0530 Subject: [PATCH 4/9] Updated useColorStops -> useColorStopState Added initialColorStops as param --- src/services/color_picker/color_picker.ts | 28 ++++++++++++----------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/services/color_picker/color_picker.ts b/src/services/color_picker/color_picker.ts index 1b180bd4441..8045377d1bf 100644 --- a/src/services/color_picker/color_picker.ts +++ b/src/services/color_picker/color_picker.ts @@ -10,23 +10,25 @@ const generateRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`; export const useColorStopState = ( - initialColorStops: colorStopsType[] = [{ - stop: 20, - color: '#54B399', - }, - { - stop: 50, - color: '#D36086', - }, - { - stop: 65, - color: '#9170B8', - }], + initialColorStops: colorStopsType[] = [ + { + stop: 20, + color: '#54B399', + }, + { + stop: 50, + color: '#D36086', + }, + { + stop: 65, + color: '#9170B8', + }, + ], useRandomColor: boolean = false ) => { const [addColor, setAddColor] = useState(generateRandomColor()); const [colorStops, setColorStops] = useState(initialColorStops); - + const updateColorStops = (colorStops: any) => { setColorStops(colorStops); if (useRandomColor) { From b83a7ba45baf90fa8f9eefc229183287a722376b Mon Sep 17 00:00:00 2001 From: Mridul Gogia <44144128+mridulgogia@users.noreply.github.com> Date: Tue, 17 Mar 2020 23:35:17 +0530 Subject: [PATCH 5/9] Update src/services/color_picker/color_picker.ts Co-Authored-By: Greg Thompson --- src/services/color_picker/color_picker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/services/color_picker/color_picker.ts b/src/services/color_picker/color_picker.ts index 8045377d1bf..56d61f9824e 100644 --- a/src/services/color_picker/color_picker.ts +++ b/src/services/color_picker/color_picker.ts @@ -29,7 +29,7 @@ export const useColorStopState = ( const [addColor, setAddColor] = useState(generateRandomColor()); const [colorStops, setColorStops] = useState(initialColorStops); - const updateColorStops = (colorStops: any) => { + const updateColorStops = (colorStops: colorStopsType[]) => { setColorStops(colorStops); if (useRandomColor) { setAddColor(generateRandomColor()); From 537cd7746a49baffc96b9c8ea8ecd29d42d7db48 Mon Sep 17 00:00:00 2001 From: Mridul Gogia <44144128+mridulgogia@users.noreply.github.com> Date: Tue, 17 Mar 2020 23:45:25 +0530 Subject: [PATCH 6/9] Update CHANGELOG.md Co-Authored-By: Greg Thompson --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d9eb3bfa72..010f1371f40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,7 @@ - Added RGB format support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850)) - Added alpha channel (opacity) support to `EuiColorPicker` and `EuiColorStops` ([#2850](https://github.com/elastic/eui/pull/2850)) - Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991)) -- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993)) +- Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993)) - Added `EuiMark` component ([#3060](https://github.com/elastic/eui/pull/3060)) - Moved and renamed `useColorPicker and useColorStops` from src-docs/src/views/color_picker/utils to `useColorPickerState and useColorStops` src/services ([#3067](https://github.com/elastic/eui/pull/3067)) From d796a7a312517cc8b3580a28a3a781ccc7cae62f Mon Sep 17 00:00:00 2001 From: Mridul Gogia Date: Thu, 19 Mar 2020 12:03:09 +0530 Subject: [PATCH 7/9] Renamed useColorStopState to useColorStopsState --- src-docs/src/views/color_picker/color_stops.js | 4 ++-- src-docs/src/views/color_picker/containers.js | 4 ++-- src-docs/src/views/color_picker/custom_swatches.js | 4 ++-- src-docs/src/views/color_picker/kitchen_sink.js | 4 ++-- src-docs/src/views/color_picker/modes.js | 4 ++-- src/services/color_picker/color_picker.ts | 2 +- src/services/color_picker/index.ts | 2 +- src/services/index.ts | 2 +- 8 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.js index 4751866228c..4f153a52405 100644 --- a/src-docs/src/views/color_picker/color_stops.js +++ b/src-docs/src/views/color_picker/color_stops.js @@ -2,10 +2,10 @@ import React, { useState } from 'react'; import { EuiColorStops, EuiFormRow } from '../../../../src/components'; -import { useColorStopState } from '../../../../src/services'; +import { useColorStopsState } from '../../../../src/services'; export const ColorStops = () => { - const [colorStops, setColorStops, addColor] = useColorStopState(true); + const [colorStops, setColorStops, addColor] = useColorStopsState(true); const [extendedColorStops, setExtendedColorStops] = useState([ { diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js index b77f765263b..7e70312e2bc 100644 --- a/src-docs/src/views/color_picker/containers.js +++ b/src-docs/src/views/color_picker/containers.js @@ -16,12 +16,12 @@ import { import { useColorPickerState, - useColorStopState, + useColorStopsState, } from '../../../../src/services'; export default () => { const [color, setColor] = useColorPickerState('#FFF'); - const [colorStops, setColorStops] = useColorStopState(); + const [colorStops, setColorStops] = useColorStopsState(); const [isModalVisible, setIsModalVisible] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(false); diff --git a/src-docs/src/views/color_picker/custom_swatches.js b/src-docs/src/views/color_picker/custom_swatches.js index 6744c2b16c2..bd505656584 100644 --- a/src-docs/src/views/color_picker/custom_swatches.js +++ b/src-docs/src/views/color_picker/custom_swatches.js @@ -9,12 +9,12 @@ import { import { useColorPickerState, - useColorStopState, + useColorStopsState, } from '../../../../src/services'; export const CustomSwatches = () => { const [color, setColor, errors] = useColorPickerState(); - const [colorStops, setColorStops] = useColorStopState(); + const [colorStops, setColorStops] = useColorStopsState(); const customSwatches = ['#333', '#666', '#999', '#CCC']; diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index dea1f6f744c..922c4b8ee66 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -9,12 +9,12 @@ import { DisplayToggles } from '../form_controls/display_toggles'; import { useColorPickerState, - useColorStopState, + useColorStopsState, } from '../../../../src/services'; export const KitchenSink = () => { const [color, setColor] = useColorPickerState('#D36086'); - const [colorStops, setColorStops, addStop] = useColorStopState(true); + const [colorStops, setColorStops, addStop] = useColorStopsState(true); return ( diff --git a/src-docs/src/views/color_picker/modes.js b/src-docs/src/views/color_picker/modes.js index 44645b948b8..1f1c8b60463 100644 --- a/src-docs/src/views/color_picker/modes.js +++ b/src-docs/src/views/color_picker/modes.js @@ -9,12 +9,12 @@ import { import { useColorPickerState, - useColorStopState, + useColorStopsState, } from '../../../../src/services'; export const Modes = () => { const [color, setColor, errors] = useColorPickerState('#D36086'); - const [colorStops, setColorStops] = useColorStopState(); + const [colorStops, setColorStops] = useColorStopsState(); return ( diff --git a/src/services/color_picker/color_picker.ts b/src/services/color_picker/color_picker.ts index 56d61f9824e..bdac12fa58c 100644 --- a/src/services/color_picker/color_picker.ts +++ b/src/services/color_picker/color_picker.ts @@ -9,7 +9,7 @@ const generateRandomColor = () => // https://www.paulirish.com/2009/random-hex-color-code-snippets/ `#${Math.floor(Math.random() * 16777215).toString(16)}`; -export const useColorStopState = ( +export const useColorStopsState = ( initialColorStops: colorStopsType[] = [ { stop: 20, diff --git a/src/services/color_picker/index.ts b/src/services/color_picker/index.ts index fb7351854ed..eff6a64e587 100644 --- a/src/services/color_picker/index.ts +++ b/src/services/color_picker/index.ts @@ -1 +1 @@ -export { useColorPickerState, useColorStopState } from './color_picker'; +export { useColorPickerState, useColorStopsState } from './color_picker'; diff --git a/src/services/index.ts b/src/services/index.ts index b016d111068..4aaf7acf94f 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -45,7 +45,7 @@ export { HSV, } from './color'; -export { useColorPickerState, useColorStopState } from './color_picker'; +export { useColorPickerState, useColorStopsState } from './color_picker'; export { copyToClipboard } from './copy_to_clipboard'; From b40e8b1095e1612ad3639f7a0924f2c845dbc72b Mon Sep 17 00:00:00 2001 From: Mridul Gogia Date: Tue, 24 Mar 2020 23:23:06 +0530 Subject: [PATCH 8/9] updated useColorStopsState --- src/services/color_picker/color_picker.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/services/color_picker/color_picker.ts b/src/services/color_picker/color_picker.ts index bdac12fa58c..bc18b09222e 100644 --- a/src/services/color_picker/color_picker.ts +++ b/src/services/color_picker/color_picker.ts @@ -10,6 +10,7 @@ const generateRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`; export const useColorStopsState = ( + useRandomColor: boolean = false, initialColorStops: colorStopsType[] = [ { stop: 20, @@ -23,8 +24,7 @@ export const useColorStopsState = ( stop: 65, color: '#9170B8', }, - ], - useRandomColor: boolean = false + ] ) => { const [addColor, setAddColor] = useState(generateRandomColor()); const [colorStops, setColorStops] = useState(initialColorStops); From 85be40475f008e8a8450f83c667f2428130b4d41 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Wed, 25 Mar 2020 16:16:39 -0500 Subject: [PATCH 9/9] update CL --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6859a3d2376..0d6cf9d794f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104)) +- Added `useColorPickerState` and `useColorStopsState` utilities ([#3067](https://github.com/elastic/eui/pull/3067)) ## [`22.0.0`](https://github.com/elastic/eui/tree/v22.0.0) @@ -46,10 +47,8 @@ - Added `useResizeObserver` hook ([#2991](https://github.com/elastic/eui/pull/2991)) - Added `showColumnSelector.allowHide` and `showColumnSelector.allowReorder` props to `EuiDataGrid` UI configuration ([#2993](https://github.com/elastic/eui/pull/2993)) - Added `EuiMark` component ([#3060](https://github.com/elastic/eui/pull/3060)) -- Moved and renamed `useColorPicker and useColorStops` from src-docs/src/views/color_picker/utils to `useColorPickerState and useColorStops` src/services ([#3067](https://github.com/elastic/eui/pull/3067)) - Changed `tabs.name` prop shape in `EuiTabbedContent` to accept a `node`, which aligns it with `EuiTab` ([#3100](https://github.com/elastic/eui/pull/3100)) - **Bug Fixes** - Fixed `EuiFieldNumber` so values of type `number` are now allowed ([#3020](https://github.com/elastic/eui/pull/3020))