From 7620c69b56951ca2d6dc096044e29b67dd5d1543 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 30 Mar 2020 03:32:31 +0100 Subject: [PATCH 01/45] Adding initial code --- .../color_picker/color_palette_picker.js | 189 ++++++++++++++++++ .../color_picker/color_picker_example.js | 67 ++++++- .../src/views/color_picker/kitchen_sink.js | 36 ++++ .../_color_palette_picker.scss | 20 ++ .../color_palette_picker/_index.scss | 1 + .../color_palette_picker.tsx | 150 ++++++++++++++ src/components/color_palette_picker/index.ts | 4 + src/components/index.js | 2 + src/components/index.scss | 1 + 9 files changed, 467 insertions(+), 3 deletions(-) create mode 100644 src-docs/src/views/color_picker/color_palette_picker.js create mode 100644 src/components/color_palette_picker/_color_palette_picker.scss create mode 100644 src/components/color_palette_picker/_index.scss create mode 100644 src/components/color_palette_picker/color_palette_picker.tsx create mode 100644 src/components/color_palette_picker/index.ts diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.js new file mode 100644 index 00000000000..f8e8c854ecb --- /dev/null +++ b/src-docs/src/views/color_picker/color_palette_picker.js @@ -0,0 +1,189 @@ +import React, { useState } from 'react'; + +import { + EuiColorPalettePicker, + EuiFormRow, + EuiButtonIcon, + EuiToolTip, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiOverlayMask, + EuiButton, + EuiButtonEmpty, + EuiColorStops, +} from '../../../../src/components'; + +import { + euiPaletteColorBlind, + euiPaletteComplimentary, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteCool, + euiPaletteGray, + useColorStopsState, +} from '../../../../src/services'; + +const basicExample = [ + { + value: 'basicExample1', + title: 'EUI basicPalette Cool', + palette: euiPaletteCool(), + type: 'stops', + }, + { + value: 'basicExample2', + title: 'Paul Tor 14', + palette: euiPaletteColorBlind(2), + type: 'stops', + }, + { + value: 'basicExample3', + title: 'EUI basicPalette for Status', + palette: euiPaletteForStatus(), + type: 'stops', + }, + { + value: 'basicExample4', + title: 'Liner Gradient', + palette: + 'linear-gradient(to right, rgb(0, 104, 55) 0%, rgb(45, 161, 84) 14%, rgb(134, 203, 102) 28%, rgb(205, 233, 131) 42%, rgb(255, 254, 189) 57%, rgb(253, 210, 127) 71%, rgb(248, 139, 81) 85%, rgb(164, 0, 37) 100%)', + type: 'gradient', + }, + // { + // title: 'Custom Option', + // type: 'button', + // }, +]; + +const customExample = [ + { + value: 'customExample1', + title: 'EUI basicPalette Color Blind', + palette: euiPaletteColorBlind(), + type: 'stops', + }, + { + value: 'customExample2', + title: 'EUI basicPalette Complimentary', + palette: euiPaletteComplimentary(2), + type: 'stops', + }, + { + value: 'customExample3', + title: 'EUI basicPalette for Temperature', + palette: euiPaletteForTemperature(), + type: 'stops', + }, + { + value: 'customExample4', + title: 'EUI basicPalette Gray', + palette: euiPaletteGray(), + type: 'stops', + }, +]; + +export const ColorPalettePicker = () => { + const [basicPalette, setBasicPalette] = useState('basicExample1'); + const [customPalette, setCustomPalette] = useState('customExample1'); + const [colorStops, setColorStops] = useColorStopsState(true); + const [isShowing, setIsShowing] = useState(false); + + const onBasicPaletteChange = value => { + setBasicPalette(value); + }; + + const onCustomPaletteChange = value => { + setCustomPalette(value); + }; + + const toggleModal = () => { + setIsShowing(!isShowing); + }; + + const customPaletteAppend = ( + + + + ); + + const newCustomPaletteArray = colorStops.map(item => item.color); + + const extendedCustomExample = customExample.concat({ + value: 'customExample5', + title: 'Custom basicPalette', + palette: newCustomPaletteArray, + type: 'stops', + }); + + const saveAndCloseModal = () => { + setCustomPalette( + extendedCustomExample[extendedCustomExample.length - 1].value + ); + toggleModal(); + }; + + let modal; + + if (isShowing) { + modal = ( + + + + Custom Palette + + + + + + + + + + Cancel + + + Save and Apply + + + + + ); + } + + return ( + <> + + + + + + + {modal} + + ); +}; diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 07e65a97995..9803c6cb98f 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -7,6 +7,7 @@ import { GuideSectionTypes } from '../../components'; import { EuiCode, EuiColorPicker, + EuiColorPalettePicker, EuiColorStops, EuiSpacer, EuiText, @@ -23,6 +24,12 @@ const colorPickerSnippet = ` `; +import { ColorPalettePicker } from './color_palette_picker'; +const colorPalettePickerSource = require('!!raw-loader!./color_palette_picker'); +const colorPalettePickerHtml = renderToHtml(ColorPalettePicker); +const colorPalettePickerSnippet = ` +`; + import { ColorStops } from './color_stops'; const colorStopsSource = require('!!raw-loader!./color_stops'); const colorStopsHtml = renderToHtml(ColorStops); @@ -246,9 +253,10 @@ export const ColorPickerExample = {

- Two components exist to aid color selection:{' '} - EuiColorPicker and EuiColorStops - . + Three components exist to aid color selection:{' '} + EuiColorPicker,{' '} + EuiColorPalettePicker and{' '} + EuiColorStops.

@@ -290,6 +298,59 @@ export const ColorPickerExample = { snippet: colorPickerSnippet, demo: , }, + { + title: 'Color Palette picker', + text: ( + + +

+ Use ColorPalettePicker to apply color to data + like maps, bar charts or any other type of data visualization. + This component is perfect to assign colors automatically without + mapping the colors to a value or category. +

+

To display palettes simply pass an array of objects with:

+
    +
  • + value: a unique value +
    • +
  • + title: the name of your palette (not + required) +
    • +
  • + type: specify if your palette is a{' '} + gradient + or stops +
    • +
  • + palette: if your palette is a gradient a CSS + linear gradient or if it's stops pass an + array of hexadecimals +
    • +
+

+ When you need to create a custom palette it's recommended to + prepend a button and trigger an EuiModal with + all the logic to create the palette. +

+ + + ), + source: [ + { + type: GuideSectionTypes.JS, + code: colorPalettePickerSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPalettePickerHtml, + }, + ], + props: { EuiColorPalettePicker }, + snippet: colorPalettePickerSnippet, + demo: , + }, { title: 'Color stops', text: ( diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index 922c4b8ee66..d0d0bb44c54 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -2,6 +2,7 @@ import React from 'react'; import { EuiColorPicker, + EuiColorPalettePicker, EuiColorStops, EuiSpacer, } from '../../../../src/components'; @@ -10,12 +11,43 @@ import { DisplayToggles } from '../form_controls/display_toggles'; import { useColorPickerState, useColorStopsState, + euiPaletteColorBlind, + euiPaletteForStatus, + euiPaletteCool, } from '../../../../src/services'; export const KitchenSink = () => { const [color, setColor] = useColorPickerState('#D36086'); const [colorStops, setColorStops, addStop] = useColorStopsState(true); + const customPalettes = [ + { + value: 'basicExample1', + title: 'EUI basicPalette Cool', + palette: euiPaletteCool(), + type: 'stops', + }, + { + value: 'basicExample2', + title: 'Paul Tor 14', + palette: euiPaletteColorBlind(2), + type: 'stops', + }, + { + value: 'basicExample3', + title: 'EUI basicPalette for Status', + palette: euiPaletteForStatus(), + type: 'stops', + }, + { + value: 'basicExample4', + title: 'Liner Gradient', + palette: + 'linear-gradient(to right, rgb(0, 104, 55) 0%, rgb(45, 161, 84) 14%, rgb(134, 203, 102) 28%, rgb(205, 233, 131) 42%, rgb(255, 254, 189) 57%, rgb(253, 210, 127) 71%, rgb(248, 139, 81) 85%, rgb(164, 0, 37) 100%)', + type: 'gradient', + }, + ]; + return ( {/* DisplayToggles wrapper for Docs only */} @@ -37,6 +69,10 @@ export const KitchenSink = () => { addStop={addStop} /> + + + + ); }; diff --git a/src/components/color_palette_picker/_color_palette_picker.scss b/src/components/color_palette_picker/_color_palette_picker.scss new file mode 100644 index 00000000000..9c9a83026d7 --- /dev/null +++ b/src/components/color_palette_picker/_color_palette_picker.scss @@ -0,0 +1,20 @@ +.euiColorPalettePicker { + &__colorContainer { + display: flex; + flex-direction: row; + border-radius: $euiBorderRadius; + overflow: hidden; + height: $euiSizeS; + border: $euiBorderThin; + } + + &__colorStop { + flex: 1; + width: auto; + height: $euiSizeS; + } + + &__paletteTitle { + min-width: $euiSizeXL * 3; + } +} diff --git a/src/components/color_palette_picker/_index.scss b/src/components/color_palette_picker/_index.scss new file mode 100644 index 00000000000..d3ac33fbc4d --- /dev/null +++ b/src/components/color_palette_picker/_index.scss @@ -0,0 +1 @@ +@import 'color_palette_picker'; \ No newline at end of file diff --git a/src/components/color_palette_picker/color_palette_picker.tsx b/src/components/color_palette_picker/color_palette_picker.tsx new file mode 100644 index 00000000000..5c92c4817d6 --- /dev/null +++ b/src/components/color_palette_picker/color_palette_picker.tsx @@ -0,0 +1,150 @@ +import React, { FunctionComponent } from 'react'; + +import { + EuiSuperSelect, + EuiSuperSelectProps, + EuiFormControlLayoutProps, +} from '../form'; + +import { EuiText } from '../text'; + +import { EuiFlexGroup, EuiFlexItem } from '../flex'; +import { CommonProps } from '../common'; + +import { EuiIcon } from '../icon'; + +export type EuiColorPalettePickerProps = CommonProps & { + /** + * Use the compressed style for EuiColorPalette + */ + compressed?: boolean; + disabled?: boolean; + fullWidth?: boolean; + id?: string; + readOnly?: boolean; + isInvalid?: boolean; + /** + * Creates an input group with element(s) coming before input. It only shows when the `display` is set to `default`. + * `string` | `ReactElement` or an array of these + */ + prepend?: EuiFormControlLayoutProps['prepend']; + + /** + * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`. + * `string` | `ReactElement` or an array of these + */ + append?: EuiFormControlLayoutProps['append']; + /** + * Whether to render the alpha channel (opacity) value range slider. + */ + /** + * Will format the text input in the provided format when possible (hue and saturation selection) + * Exceptions: Manual text input and swatches will display as-authored + * Default is to display the last format entered by the user + */ + valueOfSelected?: any; + + /** + * You must pass an `onChange` function to handle the update of the value + */ + onChange?: (options: any) => void; + /** + * An array of objects. `value`: a unique value | `title`: the name of your palette (not required) | `type`: specify if your palette is a `gradient` or `stops` | `palette`: if your palette is a gradient pass a CSS linear gradient or if it's stops pass an array of hexadecimals + */ + palettes: EuiSuperSelectProps['options']; +}; + +export const EuiColorPalettePicker: FunctionComponent< + EuiColorPalettePickerProps +> = ({ + className, + compressed = false, + disabled, + fullWidth = false, + isInvalid = false, + onChange, + readOnly = false, + valueOfSelected, + palettes, + append, + prepend, +}) => { + const getPalette = (palettes: any, type: string) => + type === 'stops' ? ( +
+ {palettes.map((hexCode: string) => ( + + ))} +
+ ) : ( +
+ ); + + const getButton = (title: any) => ( + + + + {title} + + + + + + + ); + + const paletteOptions = palettes.map((item: any) => { + return { + value: String(item.value), + inputDisplay: + item.type !== 'button' + ? getPalette(item.palette, item.type) + : getButton(item.title), + dropdownDisplay: ( + + {item.title && item.type !== 'button' && ( + + + {item.title} + + + )} + + + {item.type !== 'button' + ? getPalette(item.palette, item.type) + : getButton(item.title)} + + + ), + }; + }); + + return ( + + ); +}; diff --git a/src/components/color_palette_picker/index.ts b/src/components/color_palette_picker/index.ts new file mode 100644 index 00000000000..f5166628de7 --- /dev/null +++ b/src/components/color_palette_picker/index.ts @@ -0,0 +1,4 @@ +export { + EuiColorPalettePicker, + EuiColorPalettePickerProps, +} from './color_palette_picker'; diff --git a/src/components/index.js b/src/components/index.js index 9dcc3991767..f3905eeace9 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -47,6 +47,8 @@ export { EuiSaturation, } from './color_picker'; +export { EuiColorPalettePicker } from './color_palette_picker'; + export { EuiComboBox } from './combo_box'; export { EuiContext, EuiI18nConsumer } from './context'; diff --git a/src/components/index.scss b/src/components/index.scss index dce5687119d..feebd060cb5 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -15,6 +15,7 @@ @import 'code/index'; @import 'code_editor/index'; @import 'collapsible_nav/index'; +@import 'color_palette_picker/index'; @import 'color_picker/index'; @import 'combo_box/index'; @import 'context_menu/index'; From c13ec9c8fd7a0b59e3e05faa6612f8075435d9e1 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 30 Mar 2020 03:32:31 +0100 Subject: [PATCH 02/45] Adding initial code --- .../color_picker/color_palette_picker.js | 206 ++++++++++++++++++ .../color_picker/color_picker_example.js | 67 +++++- .../src/views/color_picker/kitchen_sink.js | 36 +++ .../_color_palette_picker.scss | 20 ++ .../color_palette_picker/_index.scss | 1 + .../color_palette_picker.tsx | 151 +++++++++++++ src/components/color_palette_picker/index.ts | 4 + src/components/index.js | 2 + src/components/index.scss | 1 + 9 files changed, 485 insertions(+), 3 deletions(-) create mode 100644 src-docs/src/views/color_picker/color_palette_picker.js create mode 100644 src/components/color_palette_picker/_color_palette_picker.scss create mode 100644 src/components/color_palette_picker/_index.scss create mode 100644 src/components/color_palette_picker/color_palette_picker.tsx create mode 100644 src/components/color_palette_picker/index.ts diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.js new file mode 100644 index 00000000000..5b36f98e654 --- /dev/null +++ b/src-docs/src/views/color_picker/color_palette_picker.js @@ -0,0 +1,206 @@ +import React, { useState } from 'react'; + +import { + EuiColorPalettePicker, + EuiFormRow, + EuiButtonIcon, + EuiToolTip, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiOverlayMask, + EuiButton, + EuiButtonEmpty, + EuiColorStops, +} from '../../../../src/components'; + +import { + euiPaletteColorBlind, + euiPaletteComplimentary, + euiPaletteForStatus, + euiPaletteForTemperature, + euiPaletteCool, + euiPaletteGray, + useColorStopsState, +} from '../../../../src/services'; + +const basicExample = [ + { + value: 'basicExample1', + title: 'EUI basicPalette Cool', + palette: euiPaletteCool(), + type: 'stops', + }, + { + value: 'basicExample2', + title: 'Paul Tor 14', + palette: euiPaletteColorBlind(2), + type: 'stops', + }, + { + value: 'basicExample3', + title: 'EUI basicPalette for Status', + palette: euiPaletteForStatus(), + type: 'stops', + }, + { + value: 'basicExample4', + title: 'Liner Gradient', + palette: + 'linear-gradient(to right, rgb(0, 104, 55) 0%, rgb(45, 161, 84) 14%, rgb(134, 203, 102) 28%, rgb(205, 233, 131) 42%, rgb(255, 254, 189) 57%, rgb(253, 210, 127) 71%, rgb(248, 139, 81) 85%, rgb(164, 0, 37) 100%)', + type: 'gradient', + }, + { + title: 'Custom Option', + type: 'button', + }, +]; + +// palette type: 'gradient' should use this format, +// [ +// { +// stop: 100, +// color: '#54B399', +// }, +// { +// stop: 250, +// color: '#D36086', +// }, +// { +// stop: 350, +// color: '#9170B8', +// }, +// ] + +const customExample = [ + { + value: 'customExample1', + title: 'EUI basicPalette Color Blind', + palette: euiPaletteColorBlind(), + type: 'stops', + }, + { + value: 'customExample2', + title: 'EUI basicPalette Complimentary', + palette: euiPaletteComplimentary(2), + type: 'stops', + }, + { + value: 'customExample3', + title: 'EUI basicPalette for Temperature', + palette: euiPaletteForTemperature(), + type: 'stops', + }, + { + value: 'customExample4', + title: 'EUI basicPalette Gray', + palette: euiPaletteGray(), + type: 'stops', + }, +]; + +export const ColorPalettePicker = () => { + const [basicPalette, setBasicPalette] = useState('basicExample1'); + const [customPalette, setCustomPalette] = useState('customExample1'); + const [colorStops, setColorStops] = useColorStopsState(true); + const [isShowing, setIsShowing] = useState(false); + + console.log('basicExample', basicExample); + + const onBasicPaletteChange = value => { + setBasicPalette(value); + }; + + const onCustomPaletteChange = value => { + setCustomPalette(value); + }; + + const toggleModal = () => { + setIsShowing(!isShowing); + }; + + const customPaletteAppend = ( + + + + ); + + const newCustomPaletteArray = colorStops.map(item => item.color); + + const extendedCustomExample = customExample.concat({ + value: 'customExample5', + title: 'Custom basicPalette', + palette: newCustomPaletteArray, + type: 'stops', + }); + + const saveAndCloseModal = () => { + setCustomPalette( + extendedCustomExample[extendedCustomExample.length - 1].value + ); + toggleModal(); + }; + + let modal; + + if (isShowing) { + modal = ( + + + + Custom Palette + + + + + + + + + + Cancel + + + Save and Apply + + + + + ); + } + + return ( + <> + + + + + + + {modal} + + ); +}; diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 07e65a97995..9803c6cb98f 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -7,6 +7,7 @@ import { GuideSectionTypes } from '../../components'; import { EuiCode, EuiColorPicker, + EuiColorPalettePicker, EuiColorStops, EuiSpacer, EuiText, @@ -23,6 +24,12 @@ const colorPickerSnippet = ` `; +import { ColorPalettePicker } from './color_palette_picker'; +const colorPalettePickerSource = require('!!raw-loader!./color_palette_picker'); +const colorPalettePickerHtml = renderToHtml(ColorPalettePicker); +const colorPalettePickerSnippet = ` +`; + import { ColorStops } from './color_stops'; const colorStopsSource = require('!!raw-loader!./color_stops'); const colorStopsHtml = renderToHtml(ColorStops); @@ -246,9 +253,10 @@ export const ColorPickerExample = {

- Two components exist to aid color selection:{' '} - EuiColorPicker and EuiColorStops - . + Three components exist to aid color selection:{' '} + EuiColorPicker,{' '} + EuiColorPalettePicker and{' '} + EuiColorStops.

@@ -290,6 +298,59 @@ export const ColorPickerExample = { snippet: colorPickerSnippet, demo: , }, + { + title: 'Color Palette picker', + text: ( + + +

+ Use ColorPalettePicker to apply color to data + like maps, bar charts or any other type of data visualization. + This component is perfect to assign colors automatically without + mapping the colors to a value or category. +

+

To display palettes simply pass an array of objects with:

+
    +
  • + value: a unique value +
    • +
  • + title: the name of your palette (not + required) +
    • +
  • + type: specify if your palette is a{' '} + gradient + or stops +
    • +
  • + palette: if your palette is a gradient a CSS + linear gradient or if it's stops pass an + array of hexadecimals +
    • +
+

+ When you need to create a custom palette it's recommended to + prepend a button and trigger an EuiModal with + all the logic to create the palette. +

+ + + ), + source: [ + { + type: GuideSectionTypes.JS, + code: colorPalettePickerSource, + }, + { + type: GuideSectionTypes.HTML, + code: colorPalettePickerHtml, + }, + ], + props: { EuiColorPalettePicker }, + snippet: colorPalettePickerSnippet, + demo: , + }, { title: 'Color stops', text: ( diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index 922c4b8ee66..d0d0bb44c54 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -2,6 +2,7 @@ import React from 'react'; import { EuiColorPicker, + EuiColorPalettePicker, EuiColorStops, EuiSpacer, } from '../../../../src/components'; @@ -10,12 +11,43 @@ import { DisplayToggles } from '../form_controls/display_toggles'; import { useColorPickerState, useColorStopsState, + euiPaletteColorBlind, + euiPaletteForStatus, + euiPaletteCool, } from '../../../../src/services'; export const KitchenSink = () => { const [color, setColor] = useColorPickerState('#D36086'); const [colorStops, setColorStops, addStop] = useColorStopsState(true); + const customPalettes = [ + { + value: 'basicExample1', + title: 'EUI basicPalette Cool', + palette: euiPaletteCool(), + type: 'stops', + }, + { + value: 'basicExample2', + title: 'Paul Tor 14', + palette: euiPaletteColorBlind(2), + type: 'stops', + }, + { + value: 'basicExample3', + title: 'EUI basicPalette for Status', + palette: euiPaletteForStatus(), + type: 'stops', + }, + { + value: 'basicExample4', + title: 'Liner Gradient', + palette: + 'linear-gradient(to right, rgb(0, 104, 55) 0%, rgb(45, 161, 84) 14%, rgb(134, 203, 102) 28%, rgb(205, 233, 131) 42%, rgb(255, 254, 189) 57%, rgb(253, 210, 127) 71%, rgb(248, 139, 81) 85%, rgb(164, 0, 37) 100%)', + type: 'gradient', + }, + ]; + return ( {/* DisplayToggles wrapper for Docs only */} @@ -37,6 +69,10 @@ export const KitchenSink = () => { addStop={addStop} /> + + + + ); }; diff --git a/src/components/color_palette_picker/_color_palette_picker.scss b/src/components/color_palette_picker/_color_palette_picker.scss new file mode 100644 index 00000000000..9c9a83026d7 --- /dev/null +++ b/src/components/color_palette_picker/_color_palette_picker.scss @@ -0,0 +1,20 @@ +.euiColorPalettePicker { + &__colorContainer { + display: flex; + flex-direction: row; + border-radius: $euiBorderRadius; + overflow: hidden; + height: $euiSizeS; + border: $euiBorderThin; + } + + &__colorStop { + flex: 1; + width: auto; + height: $euiSizeS; + } + + &__paletteTitle { + min-width: $euiSizeXL * 3; + } +} diff --git a/src/components/color_palette_picker/_index.scss b/src/components/color_palette_picker/_index.scss new file mode 100644 index 00000000000..d3ac33fbc4d --- /dev/null +++ b/src/components/color_palette_picker/_index.scss @@ -0,0 +1 @@ +@import 'color_palette_picker'; \ No newline at end of file diff --git a/src/components/color_palette_picker/color_palette_picker.tsx b/src/components/color_palette_picker/color_palette_picker.tsx new file mode 100644 index 00000000000..d9f3f9a5bfe --- /dev/null +++ b/src/components/color_palette_picker/color_palette_picker.tsx @@ -0,0 +1,151 @@ +import React, { FunctionComponent } from 'react'; + +import { + EuiSuperSelect, + EuiSuperSelectProps, + EuiFormControlLayoutProps, +} from '../form'; + +import { EuiText } from '../text'; + +import { EuiFlexGroup, EuiFlexItem } from '../flex'; +import { CommonProps } from '../common'; + +import { EuiIcon } from '../icon'; + +export type EuiColorPalettePickerProps = CommonProps & { + /** + * Use the compressed style for EuiColorPalette + */ + compressed?: boolean; + disabled?: boolean; + fullWidth?: boolean; + id?: string; + readOnly?: boolean; + isInvalid?: boolean; + /** + * Creates an input group with element(s) coming before input. It only shows when the `display` is set to `default`. + * `string` | `ReactElement` or an array of these + */ + prepend?: EuiFormControlLayoutProps['prepend']; + + /** + * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`. + * `string` | `ReactElement` or an array of these + */ + append?: EuiFormControlLayoutProps['append']; + /** + * Whether to render the alpha channel (opacity) value range slider. + */ + /** + * Will format the text input in the provided format when possible (hue and saturation selection) + * Exceptions: Manual text input and swatches will display as-authored + * Default is to display the last format entered by the user + */ + valueOfSelected?: any; + + /** + * You must pass an `onChange` function to handle the update of the value + */ + onChange?: (options: any) => void; + /** + * An array of objects. `value`: a unique value | `title`: the name of your palette (not required) | `type`: specify if your palette is a `gradient` or `stops` | `palette`: if your palette is a gradient pass a CSS linear gradient or if it's stops pass an array of hexadecimals + */ + palettes: EuiSuperSelectProps['options']; +}; + +export const EuiColorPalettePicker: FunctionComponent< + EuiColorPalettePickerProps +> = ({ + className, + compressed = false, + disabled, + fullWidth = false, + isInvalid = false, + onChange, + readOnly = false, + valueOfSelected, + palettes, + append, + prepend, + ...rest +}) => { + const getPalette = (palettes: any, type: string) => + type === 'stops' ? ( +
+ {palettes.map((hexCode: string) => ( + + ))} +
+ ) : ( +
+ ); + + const getButton = (title: any) => ( + + + + {title} + + + + + + + ); + + const paletteOptions = palettes.map((item: any) => { + return { + value: String(item.value), + inputDisplay: + item.type !== 'button' + ? getPalette(item.palette, item.type) + : getButton(item.title), + dropdownDisplay: ( + + {item.title && item.type !== 'button' && ( + + + {item.title} + + + )} + + + {item.type !== 'button' + ? getPalette(item.palette, item.type) + : getButton(item.title)} + + + ), + }; + }); + + return ( + + ); +}; diff --git a/src/components/color_palette_picker/index.ts b/src/components/color_palette_picker/index.ts new file mode 100644 index 00000000000..f5166628de7 --- /dev/null +++ b/src/components/color_palette_picker/index.ts @@ -0,0 +1,4 @@ +export { + EuiColorPalettePicker, + EuiColorPalettePickerProps, +} from './color_palette_picker'; diff --git a/src/components/index.js b/src/components/index.js index 9dcc3991767..f3905eeace9 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -47,6 +47,8 @@ export { EuiSaturation, } from './color_picker'; +export { EuiColorPalettePicker } from './color_palette_picker'; + export { EuiComboBox } from './combo_box'; export { EuiContext, EuiI18nConsumer } from './context'; diff --git a/src/components/index.scss b/src/components/index.scss index dce5687119d..feebd060cb5 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -15,6 +15,7 @@ @import 'code/index'; @import 'code_editor/index'; @import 'collapsible_nav/index'; +@import 'color_palette_picker/index'; @import 'color_picker/index'; @import 'combo_box/index'; @import 'context_menu/index'; From 079488a0a2c8d492ed7f8ba8c04c95ac10e38e83 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 24 Apr 2020 11:22:32 +0100 Subject: [PATCH 03/45] Adding getLinearGradient method --- .../color_picker/color_palette_picker.js | 178 +++--------------- .../src/views/color_picker/kitchen_sink.js | 22 ++- src/components/color_picker/_index.scss | 1 + .../_color_palette_picker.scss | 0 .../color_palette_picker/_index.scss | 0 .../color_palette_picker.tsx | 65 +++---- .../color_palette_picker/index.ts | 0 src/components/color_picker/utils.ts | 44 +++++ src/components/index.js | 2 +- src/components/index.scss | 1 - 10 files changed, 126 insertions(+), 187 deletions(-) rename src/components/{ => color_picker}/color_palette_picker/_color_palette_picker.scss (100%) rename src/components/{ => color_picker}/color_palette_picker/_index.scss (100%) rename src/components/{ => color_picker}/color_palette_picker/color_palette_picker.tsx (76%) rename src/components/{ => color_picker}/color_palette_picker/index.ts (100%) diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.js index 0754a66f436..bd6062611a6 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.js +++ b/src-docs/src/views/color_picker/color_palette_picker.js @@ -1,42 +1,23 @@ import React, { useState } from 'react'; -import { - EuiColorPalettePicker, - EuiFormRow, - EuiButtonIcon, - EuiToolTip, - EuiModal, - EuiModalBody, - EuiModalFooter, - EuiModalHeader, - EuiModalHeaderTitle, - EuiOverlayMask, - EuiButton, - EuiButtonEmpty, - EuiColorStops, -} from '../../../../src/components'; +import { EuiColorPalettePicker, EuiFormRow } from '../../../../src/components'; import { euiPaletteColorBlind, - euiPaletteComplimentary, euiPaletteForStatus, - euiPaletteForTemperature, - euiPaletteCool, - euiPaletteGray, - useColorStopsState, } from '../../../../src/services'; const basicExample = [ { value: 'basicExample1', title: 'EUI basicPalette Cool', - palette: euiPaletteCool(), + palette: euiPaletteColorBlind(), type: 'stops', }, { value: 'basicExample2', title: 'Paul Tor 14', - palette: euiPaletteColorBlind(2), + palette: ['red', 'blue'], type: 'stops', }, { @@ -47,140 +28,46 @@ const basicExample = [ }, { value: 'basicExample4', - title: 'Liner Gradient', - palette: - 'linear-gradient(to right, rgb(0, 104, 55) 0%, rgb(45, 161, 84) 14%, rgb(134, 203, 102) 28%, rgb(205, 233, 131) 42%, rgb(255, 254, 189) 57%, rgb(253, 210, 127) 71%, rgb(248, 139, 81) 85%, rgb(164, 0, 37) 100%)', + title: 'Linear Gradient', + palette: [ + { + stop: 100, + color: '#54B399', + }, + { + stop: 250, + color: '#D36086', + }, + { + stop: 350, + color: '#9170B8', + }, + { + stop: 470, + color: '#F5A700', + }, + ], type: 'gradient', }, { - title: 'Custom Option', - type: 'button', - }, -]; - -// palette type: 'gradient' should use this format, -// [ -// { -// stop: 100, -// color: '#54B399', -// }, -// { -// stop: 250, -// color: '#D36086', -// }, -// { -// stop: 350, -// color: '#9170B8', -// }, -// ] - -const customExample = [ - { - value: 'customExample1', - title: 'EUI basicPalette Color Blind', - palette: euiPaletteColorBlind(), - type: 'stops', - }, - { - value: 'customExample2', - title: 'EUI basicPalette Complimentary', - palette: euiPaletteComplimentary(2), - type: 'stops', - }, - { - value: 'customExample3', - title: 'EUI basicPalette for Temperature', - palette: euiPaletteForTemperature(), - type: 'stops', + value: 'basicExample5', + title: 'Linear For Status', + palette: euiPaletteForStatus(), + type: 'gradient', }, { - value: 'customExample4', - title: 'EUI basicPalette Gray', - palette: euiPaletteGray(), - type: 'stops', + title: 'Custom Option', + type: 'button', }, ]; export const ColorPalettePicker = () => { const [basicPalette, setBasicPalette] = useState('basicExample1'); - const [customPalette, setCustomPalette] = useState('customExample1'); - const [colorStops, setColorStops] = useColorStopsState(true); - const [isShowing, setIsShowing] = useState(false); const onBasicPaletteChange = value => { setBasicPalette(value); }; - const onCustomPaletteChange = value => { - setCustomPalette(value); - }; - - const toggleModal = () => { - setIsShowing(!isShowing); - }; - - const customPaletteAppend = ( - - - - ); - - const newCustomPaletteArray = colorStops.map(item => item.color); - - const extendedCustomExample = customExample.concat({ - value: 'customExample5', - title: 'Custom basicPalette', - palette: newCustomPaletteArray, - type: 'stops', - }); - - const saveAndCloseModal = () => { - setCustomPalette( - extendedCustomExample[extendedCustomExample.length - 1].value - ); - toggleModal(); - }; - - let modal; - - if (isShowing) { - modal = ( - - - - Custom Palette - - - - - - - - - - Cancel - - - Save and Apply - - - - - ); - } - return ( <> @@ -190,15 +77,6 @@ export const ColorPalettePicker = () => { valueOfSelected={basicPalette} /> - - - - {modal} ); }; diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index d0d0bb44c54..6ed26310954 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -41,9 +41,25 @@ export const KitchenSink = () => { }, { value: 'basicExample4', - title: 'Liner Gradient', - palette: - 'linear-gradient(to right, rgb(0, 104, 55) 0%, rgb(45, 161, 84) 14%, rgb(134, 203, 102) 28%, rgb(205, 233, 131) 42%, rgb(255, 254, 189) 57%, rgb(253, 210, 127) 71%, rgb(248, 139, 81) 85%, rgb(164, 0, 37) 100%)', + title: 'Linear Gradient', + palette: [ + { + stop: 100, + color: '#54B399', + }, + { + stop: 250, + color: '#D36086', + }, + { + stop: 350, + color: '#9170B8', + }, + { + stop: 470, + color: '#F5A700', + }, + ], type: 'gradient', }, ]; diff --git a/src/components/color_picker/_index.scss b/src/components/color_picker/_index.scss index b42d746aef0..cd7341001db 100644 --- a/src/components/color_picker/_index.scss +++ b/src/components/color_picker/_index.scss @@ -4,3 +4,4 @@ @import 'hue'; @import 'saturation'; @import 'color_stops/index'; +@import 'color_palette_picker/index'; \ No newline at end of file diff --git a/src/components/color_palette_picker/_color_palette_picker.scss b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss similarity index 100% rename from src/components/color_palette_picker/_color_palette_picker.scss rename to src/components/color_picker/color_palette_picker/_color_palette_picker.scss diff --git a/src/components/color_palette_picker/_index.scss b/src/components/color_picker/color_palette_picker/_index.scss similarity index 100% rename from src/components/color_palette_picker/_index.scss rename to src/components/color_picker/color_palette_picker/_index.scss diff --git a/src/components/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx similarity index 76% rename from src/components/color_palette_picker/color_palette_picker.tsx rename to src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 2cef189bec5..942b7fd43d2 100644 --- a/src/components/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -23,14 +23,16 @@ import { EuiSuperSelect, EuiSuperSelectProps, EuiFormControlLayoutProps, -} from '../form'; +} from '../../form'; -import { EuiText } from '../text'; +import { EuiText } from '../../text'; -import { EuiFlexGroup, EuiFlexItem } from '../flex'; -import { CommonProps } from '../common'; +import { EuiFlexGroup, EuiFlexItem } from '../../flex'; +import { CommonProps } from '../../common'; -import { EuiIcon } from '../icon'; +import { EuiIcon } from '../../icon'; + +import { getLinearGradient } from '../utils'; export type EuiColorPalettePickerProps = CommonProps & { /** @@ -53,14 +55,6 @@ export type EuiColorPalettePickerProps = CommonProps & { * `string` | `ReactElement` or an array of these */ append?: EuiFormControlLayoutProps['append']; - /** - * Whether to render the alpha channel (opacity) value range slider. - */ - /** - * Will format the text input in the provided format when possible (hue and saturation selection) - * Exceptions: Manual text input and swatches will display as-authored - * Default is to display the last format entered by the user - */ valueOfSelected?: any; /** @@ -68,7 +62,7 @@ export type EuiColorPalettePickerProps = CommonProps & { */ onChange?: (options: any) => void; /** - * An array of objects. `value`: a unique value | `title`: the name of your palette (not required) | `type`: specify if your palette is a `gradient` or `stops` | `palette`: if your palette is a gradient pass a CSS linear gradient or if it's stops pass an array of hexadecimals + * An array of objects. `value`: a unique value | `title`: the name of your palette (not required) | `type`: specify if your palette is a `gradient` or `stops` | `palette`: pass an array of hexadecimals */ palettes: EuiSuperSelectProps['options']; }; @@ -89,24 +83,31 @@ export const EuiColorPalettePicker: FunctionComponent< prepend, ...rest }) => { - const getPalette = (palettes: any, type: string) => - type === 'stops' ? ( -
- {palettes.map((hexCode: string) => ( - - ))} -
- ) : ( -
- ); + const getPalette = (palette: [], type: string) => { + if (type === 'stops') { + return ( +
+ {palette.map((hexCode: string, index: number) => ( + + ))} +
+ ); + } else { + const background = getLinearGradient(palette); + + return ( +
+ ); + } + }; const getButton = (title: any) => ( diff --git a/src/components/color_palette_picker/index.ts b/src/components/color_picker/color_palette_picker/index.ts similarity index 100% rename from src/components/color_palette_picker/index.ts rename to src/components/color_picker/color_palette_picker/index.ts diff --git a/src/components/color_picker/utils.ts b/src/components/color_picker/utils.ts index d8b3f63a847..8caf6c92f30 100644 --- a/src/components/color_picker/utils.ts +++ b/src/components/color_picker/utils.ts @@ -156,3 +156,47 @@ export const getChromaColor = (input?: string | null, allowOpacity = false) => { } return null; }; + +// Given an array of objects with key value pairs stop/color or +// given just an array of objects with hex colors returns a css linear-gradient +export const getLinearGradient = (palette: any) => { + const intervals = palette.length; + + const paletteHasStops = palette.some((item: any) => { + return typeof item === 'object'; + }); + + let linearGradient; + + if (paletteHasStops) { + linearGradient = `linear-gradient(to right, ${palette[0].color} 0%,`; + + const divider = 100 / palette[palette.length - 1].stop; + + for (let i = 1; i < intervals - 1; i++) { + linearGradient = `${linearGradient} ${palette[i].color}\ ${Math.round( + palette[i].stop * divider + )}%,`; + } + + const linearGradientStyle = `${linearGradient} ${ + palette[palette.length - 1].color + } 100%)`; + + return linearGradientStyle; + } else { + linearGradient = `linear-gradient(to right, ${palette[0]} 0%,`; + + for (let i = 1; i < intervals - 1; i++) { + linearGradient = `${linearGradient} ${palette[i]}\ ${Math.floor( + (100 * i) / (intervals - 1) + )}%,`; + } + + const linearGradientStyle = `${linearGradient} ${ + palette[palette.length - 1] + } 100%)`; + + return linearGradientStyle; + } +}; diff --git a/src/components/index.js b/src/components/index.js index 3c89585d793..d982466e34d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -68,7 +68,7 @@ export { EuiSaturation, } from './color_picker'; -export { EuiColorPalettePicker } from './color_palette_picker'; +export { EuiColorPalettePicker } from './color_picker/color_palette_picker'; export { EuiComboBox } from './combo_box'; diff --git a/src/components/index.scss b/src/components/index.scss index 63a8182e1d1..3045ea6286c 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -16,7 +16,6 @@ @import 'code/index'; @import 'code_editor/index'; @import 'collapsible_nav/index'; -@import 'color_palette_picker/index'; @import 'color_picker/index'; @import 'combo_box/index'; @import 'comment_list/index'; From 5541dbc32fee97429ec4109c7ace78613b169015 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 24 Apr 2020 12:57:22 +0100 Subject: [PATCH 04/45] Improving palettes --- .../color_picker/color_palette_picker.js | 32 +++++++++---------- .../color_picker/color_picker_example.js | 16 +++------- .../_color_palette_picker.scss | 2 +- .../color_palette_picker.tsx | 2 +- 4 files changed, 22 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.js index bd6062611a6..09fc0d50266 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.js +++ b/src-docs/src/views/color_picker/color_palette_picker.js @@ -7,27 +7,21 @@ import { euiPaletteForStatus, } from '../../../../src/services'; -const basicExample = [ +const palettesExample = [ { - value: 'basicExample1', - title: 'EUI basicPalette Cool', + value: 'palette1', + title: 'EUI Color Blind', palette: euiPaletteColorBlind(), type: 'stops', }, { - value: 'basicExample2', - title: 'Paul Tor 14', - palette: ['red', 'blue'], + value: 'palette2', + title: 'Summer Colors', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], type: 'stops', }, { - value: 'basicExample3', - title: 'EUI basicPalette for Status', - palette: euiPaletteForStatus(), - type: 'stops', - }, - { - value: 'basicExample4', + value: 'palette4', title: 'Linear Gradient', palette: [ { @@ -50,11 +44,17 @@ const basicExample = [ type: 'gradient', }, { - value: 'basicExample5', + value: 'palette5', title: 'Linear For Status', palette: euiPaletteForStatus(), type: 'gradient', }, + { + value: 'palette6', + title: 'Electric Pop', + palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], + type: 'stops', + }, { title: 'Custom Option', type: 'button', @@ -62,7 +62,7 @@ const basicExample = [ ]; export const ColorPalettePicker = () => { - const [basicPalette, setBasicPalette] = useState('basicExample1'); + const [basicPalette, setBasicPalette] = useState('palette1'); const onBasicPaletteChange = value => { setBasicPalette(value); @@ -72,7 +72,7 @@ export const ColorPalettePicker = () => { <> diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 34d37396c6f..051f5f4d430 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -306,10 +306,9 @@ export const ColorPickerExample = {

- Use ColorPalettePicker to apply color to data - like maps, bar charts or any other type of data visualization. - This component is perfect to assign colors automatically without - mapping the colors to a value or category. + Use EuiColorPalettePicker to select palettes to + further apply to data like maps, bar charts, or any other type of + data visualization.

To display palettes simply pass an array of objects with:

    @@ -326,16 +325,9 @@ export const ColorPickerExample = { or stops
  • - palette: if your palette is a gradient a CSS - linear gradient or if it's stops pass an - array of hexadecimals + palette: pass an array of hex colors
-

- When you need to create a custom palette it's recommended to - prepend a button and trigger an EuiModal with - all the logic to create the palette. -

), diff --git a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss index 9c9a83026d7..2af0b05e3cb 100644 --- a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss +++ b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss @@ -6,11 +6,11 @@ overflow: hidden; height: $euiSizeS; border: $euiBorderThin; + margin: 2px; } &__colorStop { flex: 1; - width: auto; height: $euiSizeS; } diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 942b7fd43d2..289118163f1 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -88,7 +88,7 @@ export const EuiColorPalettePicker: FunctionComponent< return (
{palette.map((hexCode: string, index: number) => ( - Date: Fri, 24 Apr 2020 13:51:28 +0100 Subject: [PATCH 05/45] initial tests --- .../color_palette_picker.test.tsx.snap | 113 ++++++++++++++++++ .../color_palette_picker.test.tsx | 79 ++++++++++++ .../color_palette_picker.tsx | 10 +- 3 files changed, 195 insertions(+), 7 deletions(-) create mode 100644 src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap create mode 100644 src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap new file mode 100644 index 00000000000..ef3b820b4bf --- /dev/null +++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -0,0 +1,113 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiColorPalettePicker is rendered 1`] = ` +
+
+ +
+
+ + Select an option: +
+
+
+
+
+
+
+ , is selected + + +
+ + +
+
+
+
+`; diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx new file mode 100644 index 00000000000..66623ce9396 --- /dev/null +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx @@ -0,0 +1,79 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render } from 'enzyme'; + +import { EuiColorPalettePicker } from './color_palette_picker'; +import { requiredProps } from '../../../test'; + +jest.mock('./../../../services/accessibility', () => ({ + htmlIdGenerator: () => () => 'generated-id', +})); + +const palettes = [ + { + value: 'palette1', + title: 'Summer Colors', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + type: 'stops', + }, + { + value: 'palette2', + title: 'Linear Gradient', + palette: [ + { + stop: 100, + color: '#54B399', + }, + { + stop: 250, + color: '#D36086', + }, + { + stop: 350, + color: '#9170B8', + }, + { + stop: 470, + color: '#F5A700', + }, + ], + type: 'gradient', + }, + { + title: 'Custom Option', + type: 'button', + }, +]; + +describe('EuiColorPalettePicker', () => { + test('is rendered', () => { + const component = render( + {}} + valueOfSelected="palette1" + /> + ); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 289118163f1..65fd88bfdb2 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -19,11 +19,7 @@ import React, { FunctionComponent } from 'react'; -import { - EuiSuperSelect, - EuiSuperSelectProps, - EuiFormControlLayoutProps, -} from '../../form'; +import { EuiSuperSelect, EuiFormControlLayoutProps } from '../../form'; import { EuiText } from '../../text'; @@ -55,7 +51,7 @@ export type EuiColorPalettePickerProps = CommonProps & { * `string` | `ReactElement` or an array of these */ append?: EuiFormControlLayoutProps['append']; - valueOfSelected?: any; + valueOfSelected?: string; /** * You must pass an `onChange` function to handle the update of the value @@ -64,7 +60,7 @@ export type EuiColorPalettePickerProps = CommonProps & { /** * An array of objects. `value`: a unique value | `title`: the name of your palette (not required) | `type`: specify if your palette is a `gradient` or `stops` | `palette`: pass an array of hexadecimals */ - palettes: EuiSuperSelectProps['options']; + palettes: any[]; }; export const EuiColorPalettePicker: FunctionComponent< From 2c353dce18322f87368f429f48dc9ddfe1847ba3 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 24 Apr 2020 15:26:12 +0100 Subject: [PATCH 06/45] More improvements --- .../color_picker/color_palette_picker.js | 81 +++---------------- .../color_picker/color_picker_example.js | 2 +- .../src/views/color_picker/kitchen_sink.js | 60 +++----------- src-docs/src/views/color_picker/palettes.js | 58 +++++++++++++ 4 files changed, 82 insertions(+), 119 deletions(-) create mode 100644 src-docs/src/views/color_picker/palettes.js diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.js index 09fc0d50266..be996cce544 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.js +++ b/src-docs/src/views/color_picker/color_palette_picker.js @@ -2,81 +2,22 @@ import React, { useState } from 'react'; import { EuiColorPalettePicker, EuiFormRow } from '../../../../src/components'; -import { - euiPaletteColorBlind, - euiPaletteForStatus, -} from '../../../../src/services'; - -const palettesExample = [ - { - value: 'palette1', - title: 'EUI Color Blind', - palette: euiPaletteColorBlind(), - type: 'stops', - }, - { - value: 'palette2', - title: 'Summer Colors', - palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], - type: 'stops', - }, - { - value: 'palette4', - title: 'Linear Gradient', - palette: [ - { - stop: 100, - color: '#54B399', - }, - { - stop: 250, - color: '#D36086', - }, - { - stop: 350, - color: '#9170B8', - }, - { - stop: 470, - color: '#F5A700', - }, - ], - type: 'gradient', - }, - { - value: 'palette5', - title: 'Linear For Status', - palette: euiPaletteForStatus(), - type: 'gradient', - }, - { - value: 'palette6', - title: 'Electric Pop', - palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], - type: 'stops', - }, - { - title: 'Custom Option', - type: 'button', - }, -]; +import { palettes } from './palettes'; export const ColorPalettePicker = () => { - const [basicPalette, setBasicPalette] = useState('palette1'); + const [palette, setPalette] = useState('palette1'); - const onBasicPaletteChange = value => { - setBasicPalette(value); + const onPaletteChange = value => { + setPalette(value); }; return ( - <> - - - - + + + ); }; diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 051f5f4d430..edea6eb3b6b 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -301,7 +301,7 @@ export const ColorPickerExample = { demo: , }, { - title: 'Color Palette picker', + title: 'Color palette picker', text: ( diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index 6ed26310954..a400cb2f77d 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { EuiColorPicker, @@ -11,58 +11,18 @@ import { DisplayToggles } from '../form_controls/display_toggles'; import { useColorPickerState, useColorStopsState, - euiPaletteColorBlind, - euiPaletteForStatus, - euiPaletteCool, } from '../../../../src/services'; +import { palettes } from './palettes'; + export const KitchenSink = () => { const [color, setColor] = useColorPickerState('#D36086'); const [colorStops, setColorStops, addStop] = useColorStopsState(true); + const [palette, setPalette] = useState('palette1'); - const customPalettes = [ - { - value: 'basicExample1', - title: 'EUI basicPalette Cool', - palette: euiPaletteCool(), - type: 'stops', - }, - { - value: 'basicExample2', - title: 'Paul Tor 14', - palette: euiPaletteColorBlind(2), - type: 'stops', - }, - { - value: 'basicExample3', - title: 'EUI basicPalette for Status', - palette: euiPaletteForStatus(), - type: 'stops', - }, - { - value: 'basicExample4', - title: 'Linear Gradient', - palette: [ - { - stop: 100, - color: '#54B399', - }, - { - stop: 250, - color: '#D36086', - }, - { - stop: 350, - color: '#9170B8', - }, - { - stop: 470, - color: '#F5A700', - }, - ], - type: 'gradient', - }, - ]; + const onPaletteChange = value => { + setPalette(value); + }; return ( @@ -87,7 +47,11 @@ export const KitchenSink = () => { - + ); diff --git a/src-docs/src/views/color_picker/palettes.js b/src-docs/src/views/color_picker/palettes.js new file mode 100644 index 00000000000..bc1aaf8128e --- /dev/null +++ b/src-docs/src/views/color_picker/palettes.js @@ -0,0 +1,58 @@ +import { + euiPaletteColorBlind, + euiPaletteForStatus, +} from '../../../../src/services'; + +export const palettes = [ + { + value: 'palette1', + title: 'EUI Color Blind (stops)', + palette: euiPaletteColorBlind(), + type: 'stops', + }, + { + value: 'palette2', + title: 'Summer Colors (stops)', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + type: 'stops', + }, + { + value: 'palette4', + title: 'Beautiful Gradient (gradient)', + palette: [ + { + stop: 100, + color: '#54B399', + }, + { + stop: 250, + color: '#D36086', + }, + { + stop: 350, + color: '#9170B8', + }, + { + stop: 470, + color: '#F5A700', + }, + ], + type: 'gradient', + }, + { + value: 'palette5', + title: 'For Status (gradient)', + palette: euiPaletteForStatus(), + type: 'gradient', + }, + { + value: 'palette6', + title: 'Electric Pop (stops)', + palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], + type: 'stops', + }, + { + title: 'Custom Option', + type: 'button', + }, +]; From b3357fe4d10f2533a947bc7c4df6196f5076ff51 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 27 Apr 2020 18:30:24 +0100 Subject: [PATCH 07/45] Deleting palettes file --- .../color_picker/color_palette_picker.js | 58 ++++++++++++++++++- .../src/views/color_picker/kitchen_sink.js | 56 +++++++++++++++++- src-docs/src/views/color_picker/palettes.js | 58 ------------------- 3 files changed, 112 insertions(+), 60 deletions(-) delete mode 100644 src-docs/src/views/color_picker/palettes.js diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.js index be996cce544..bfcf601a1cf 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.js +++ b/src-docs/src/views/color_picker/color_palette_picker.js @@ -1,8 +1,64 @@ import React, { useState } from 'react'; +import { + euiPaletteColorBlind, + euiPaletteForStatus, +} from '../../../../src/services'; import { EuiColorPalettePicker, EuiFormRow } from '../../../../src/components'; -import { palettes } from './palettes'; +const palettes = [ + { + value: 'palette1', + title: 'EUI Color Blind (stops)', + palette: euiPaletteColorBlind(), + type: 'stops', + }, + { + value: 'palette2', + title: 'Summer Colors (stops)', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + type: 'stops', + }, + { + value: 'palette4', + title: 'Beautiful Gradient (gradient)', + palette: [ + { + stop: 100, + color: '#54B399', + }, + { + stop: 250, + color: '#D36086', + }, + { + stop: 350, + color: '#9170B8', + }, + { + stop: 470, + color: '#F5A700', + }, + ], + type: 'gradient', + }, + { + value: 'palette5', + title: 'For Status (gradient)', + palette: euiPaletteForStatus(), + type: 'gradient', + }, + { + value: 'palette6', + title: 'Electric Pop (stops)', + palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], + type: 'stops', + }, + { + title: 'Custom Option', + type: 'button', + }, +]; export const ColorPalettePicker = () => { const [palette, setPalette] = useState('palette1'); diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index a400cb2f77d..7e73fd7eb2b 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -11,9 +11,63 @@ import { DisplayToggles } from '../form_controls/display_toggles'; import { useColorPickerState, useColorStopsState, + euiPaletteColorBlind, + euiPaletteForStatus, } from '../../../../src/services'; -import { palettes } from './palettes'; +const palettes = [ + { + value: 'palette1', + title: 'EUI Color Blind (stops)', + palette: euiPaletteColorBlind(), + type: 'stops', + }, + { + value: 'palette2', + title: 'Summer Colors (stops)', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + type: 'stops', + }, + { + value: 'palette4', + title: 'Beautiful Gradient (gradient)', + palette: [ + { + stop: 100, + color: '#54B399', + }, + { + stop: 250, + color: '#D36086', + }, + { + stop: 350, + color: '#9170B8', + }, + { + stop: 470, + color: '#F5A700', + }, + ], + type: 'gradient', + }, + { + value: 'palette5', + title: 'For Status (gradient)', + palette: euiPaletteForStatus(), + type: 'gradient', + }, + { + value: 'palette6', + title: 'Electric Pop (stops)', + palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], + type: 'stops', + }, + { + title: 'Custom Option', + type: 'button', + }, +]; export const KitchenSink = () => { const [color, setColor] = useColorPickerState('#D36086'); diff --git a/src-docs/src/views/color_picker/palettes.js b/src-docs/src/views/color_picker/palettes.js deleted file mode 100644 index bc1aaf8128e..00000000000 --- a/src-docs/src/views/color_picker/palettes.js +++ /dev/null @@ -1,58 +0,0 @@ -import { - euiPaletteColorBlind, - euiPaletteForStatus, -} from '../../../../src/services'; - -export const palettes = [ - { - value: 'palette1', - title: 'EUI Color Blind (stops)', - palette: euiPaletteColorBlind(), - type: 'stops', - }, - { - value: 'palette2', - title: 'Summer Colors (stops)', - palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], - type: 'stops', - }, - { - value: 'palette4', - title: 'Beautiful Gradient (gradient)', - palette: [ - { - stop: 100, - color: '#54B399', - }, - { - stop: 250, - color: '#D36086', - }, - { - stop: 350, - color: '#9170B8', - }, - { - stop: 470, - color: '#F5A700', - }, - ], - type: 'gradient', - }, - { - value: 'palette5', - title: 'For Status (gradient)', - palette: euiPaletteForStatus(), - type: 'gradient', - }, - { - value: 'palette6', - title: 'Electric Pop (stops)', - palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], - type: 'stops', - }, - { - title: 'Custom Option', - type: 'button', - }, -]; From 9858418b7d6758022775ba4361e6f9554a5b6fb4 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 28 Apr 2020 18:31:19 +0100 Subject: [PATCH 08/45] Adding display togles --- .../color_picker/color_palette_picker.js | 8 +-- .../color_picker/color_picker_example.js | 25 +++++-- .../src/views/color_picker/kitchen_sink.js | 72 +------------------ 3 files changed, 26 insertions(+), 79 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.js index bfcf601a1cf..2d2596b1ee1 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.js +++ b/src-docs/src/views/color_picker/color_palette_picker.js @@ -3,8 +3,8 @@ import { euiPaletteColorBlind, euiPaletteForStatus, } from '../../../../src/services'; - -import { EuiColorPalettePicker, EuiFormRow } from '../../../../src/components'; +import { EuiColorPalettePicker } from '../../../../src/components'; +import { DisplayToggles } from '../form_controls/display_toggles'; const palettes = [ { @@ -68,12 +68,12 @@ export const ColorPalettePicker = () => { }; return ( - + - + ); }; diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index edea6eb3b6b..acc4b5e99ef 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -27,7 +27,18 @@ const colorPickerSnippet = ` +const colorPalettePickerSnippet = ` `; import { ColorStops } from './color_stops'; @@ -321,11 +332,17 @@ export const ColorPickerExample = {
  • type: specify if your palette is a{' '} - gradient - or stops + {'"gradient"'} + or {'"stops"'}
  • - palette: pass an array of hex colors + palette: an array of hex colors{' '} + {'["#1fb0b2", "#ffdb6d"]'}. For + {'type: "gradient"'} you can + specify the stops{' '} + + {'{ stop: 100, color: "#54B399" }'} +
    • diff --git a/src-docs/src/views/color_picker/kitchen_sink.js b/src-docs/src/views/color_picker/kitchen_sink.js index 7e73fd7eb2b..922c4b8ee66 100644 --- a/src-docs/src/views/color_picker/kitchen_sink.js +++ b/src-docs/src/views/color_picker/kitchen_sink.js @@ -1,8 +1,7 @@ -import React, { useState } from 'react'; +import React from 'react'; import { EuiColorPicker, - EuiColorPalettePicker, EuiColorStops, EuiSpacer, } from '../../../../src/components'; @@ -11,72 +10,11 @@ import { DisplayToggles } from '../form_controls/display_toggles'; import { useColorPickerState, useColorStopsState, - euiPaletteColorBlind, - euiPaletteForStatus, } from '../../../../src/services'; -const palettes = [ - { - value: 'palette1', - title: 'EUI Color Blind (stops)', - palette: euiPaletteColorBlind(), - type: 'stops', - }, - { - value: 'palette2', - title: 'Summer Colors (stops)', - palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], - type: 'stops', - }, - { - value: 'palette4', - title: 'Beautiful Gradient (gradient)', - palette: [ - { - stop: 100, - color: '#54B399', - }, - { - stop: 250, - color: '#D36086', - }, - { - stop: 350, - color: '#9170B8', - }, - { - stop: 470, - color: '#F5A700', - }, - ], - type: 'gradient', - }, - { - value: 'palette5', - title: 'For Status (gradient)', - palette: euiPaletteForStatus(), - type: 'gradient', - }, - { - value: 'palette6', - title: 'Electric Pop (stops)', - palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], - type: 'stops', - }, - { - title: 'Custom Option', - type: 'button', - }, -]; - export const KitchenSink = () => { const [color, setColor] = useColorPickerState('#D36086'); const [colorStops, setColorStops, addStop] = useColorStopsState(true); - const [palette, setPalette] = useState('palette1'); - - const onPaletteChange = value => { - setPalette(value); - }; return ( @@ -99,14 +37,6 @@ export const KitchenSink = () => { addStop={addStop} /> - - - - ); }; From 5740a20a34b26944c2a271a73c60178cec36798a Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 28 Apr 2020 19:32:21 +0100 Subject: [PATCH 09/45] Simplifying button --- ...palette_picker.js => color_palette_picker.tsx} | 7 ++++--- .../color_palette_picker/color_palette_picker.tsx | 15 +-------------- src/components/color_picker/index.ts | 1 + 3 files changed, 6 insertions(+), 17 deletions(-) rename src-docs/src/views/color_picker/{color_palette_picker.js => color_palette_picker.tsx} (92%) diff --git a/src-docs/src/views/color_picker/color_palette_picker.js b/src-docs/src/views/color_picker/color_palette_picker.tsx similarity index 92% rename from src-docs/src/views/color_picker/color_palette_picker.js rename to src-docs/src/views/color_picker/color_palette_picker.tsx index 2d2596b1ee1..637baef13c9 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.js +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -3,7 +3,8 @@ import { euiPaletteColorBlind, euiPaletteForStatus, } from '../../../../src/services'; -import { EuiColorPalettePicker } from '../../../../src/components'; +import { EuiColorPalettePicker } from '../../../../src/components/color_picker/color_palette_picker'; +// @ts-ignore import { DisplayToggles } from '../form_controls/display_toggles'; const palettes = [ @@ -45,7 +46,7 @@ const palettes = [ { value: 'palette5', title: 'For Status (gradient)', - palette: euiPaletteForStatus(), + palette: euiPaletteForStatus(5), type: 'gradient', }, { @@ -63,7 +64,7 @@ const palettes = [ export const ColorPalettePicker = () => { const [palette, setPalette] = useState('palette1'); - const onPaletteChange = value => { + const onPaletteChange = (value: any) => { setPalette(value); }; diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 65fd88bfdb2..7dc256093a8 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -26,8 +26,6 @@ import { EuiText } from '../../text'; import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { CommonProps } from '../../common'; -import { EuiIcon } from '../../icon'; - import { getLinearGradient } from '../utils'; export type EuiColorPalettePickerProps = CommonProps & { @@ -105,18 +103,7 @@ export const EuiColorPalettePicker: FunctionComponent< } }; - const getButton = (title: any) => ( - - - - {title} - - - - - - - ); + const getButton = (title: any) => title; const paletteOptions = palettes.map((item: any) => { return { diff --git a/src/components/color_picker/index.ts b/src/components/color_picker/index.ts index d51e16e9cb4..d644d7c60bd 100644 --- a/src/components/color_picker/index.ts +++ b/src/components/color_picker/index.ts @@ -22,3 +22,4 @@ export { EuiColorPickerSwatch } from './color_picker_swatch'; export { EuiHue } from './hue'; export { EuiSaturation } from './saturation'; export { EuiColorStops } from './color_stops'; +export { EuiColorPalettePicker } from './color_palette_picker'; From 59968037c9407148055c08d49af198acd25596a6 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 28 Apr 2020 20:29:12 +0100 Subject: [PATCH 10/45] Custom option value --- src-docs/src/views/color_picker/color_palette_picker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 637baef13c9..72fe7f3da3b 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -56,6 +56,7 @@ const palettes = [ type: 'stops', }, { + value: 'customOption', title: 'Custom Option', type: 'button', }, From d695167880871bbee298ead30dfe3ee7e022c168 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 5 May 2020 11:33:04 -0400 Subject: [PATCH 11/45] Update some types --- .../color_picker/color_palette_picker.tsx | 18 +++++------ .../color_picker/color_picker_example.js | 5 +-- src-docs/src/views/color_picker/props.tsx | 7 +++++ .../_color_palette_picker.scss | 4 ++- .../color_palette_picker.test.tsx | 13 ++++---- .../color_palette_picker.tsx | 31 ++++++++++++++++--- .../color_palette_picker/index.ts | 1 + 7 files changed, 54 insertions(+), 25 deletions(-) create mode 100644 src-docs/src/views/color_picker/props.tsx diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 72fe7f3da3b..e80a8a820ff 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -3,22 +3,25 @@ import { euiPaletteColorBlind, euiPaletteForStatus, } from '../../../../src/services'; -import { EuiColorPalettePicker } from '../../../../src/components/color_picker/color_palette_picker'; +import { + EuiColorPalettePicker, + EuiColorPalettePickerPaletteProps, +} from '../../../../src/components/color_picker/color_palette_picker'; // @ts-ignore import { DisplayToggles } from '../form_controls/display_toggles'; -const palettes = [ +const palettes: EuiColorPalettePickerPaletteProps[] = [ { value: 'palette1', title: 'EUI Color Blind (stops)', palette: euiPaletteColorBlind(), - type: 'stops', + type: 'fixed', }, { value: 'palette2', title: 'Summer Colors (stops)', palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], - type: 'stops', + type: 'fixed', }, { value: 'palette4', @@ -53,12 +56,7 @@ const palettes = [ value: 'palette6', title: 'Electric Pop (stops)', palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], - type: 'stops', - }, - { - value: 'customOption', - title: 'Custom Option', - type: 'button', + type: 'fixed', }, ]; diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index acc4b5e99ef..40bd1652a66 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -12,6 +12,7 @@ import { EuiSpacer, EuiText, } from '../../../../src/components'; +import { EuiColorPalettePickerPalette } from './props'; import { ColorPicker } from './color_picker'; const colorPickerSource = require('!!raw-loader!./color_picker'); @@ -27,7 +28,7 @@ const colorPickerSnippet = `, }, diff --git a/src-docs/src/views/color_picker/props.tsx b/src-docs/src/views/color_picker/props.tsx new file mode 100644 index 00000000000..f4cb616a8eb --- /dev/null +++ b/src-docs/src/views/color_picker/props.tsx @@ -0,0 +1,7 @@ +import React, { FunctionComponent } from 'react'; + +import { EuiColorPalettePickerPaletteProps } from '../../../../src/components/color_picker/color_palette_picker'; + +export const EuiColorPalettePickerPalette: FunctionComponent< + EuiColorPalettePickerPaletteProps +> = () =>
    ; diff --git a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss index 2af0b05e3cb..397dbfb061c 100644 --- a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss +++ b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss @@ -5,8 +5,10 @@ border-radius: $euiBorderRadius; overflow: hidden; height: $euiSizeS; - border: $euiBorderThin; + // border: $euiBorderThin; margin: 2px; + box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .98); + } &__colorStop { diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx index 66623ce9396..c18763da531 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx @@ -20,19 +20,22 @@ import React from 'react'; import { render } from 'enzyme'; -import { EuiColorPalettePicker } from './color_palette_picker'; +import { + EuiColorPalettePicker, + EuiColorPalettePickerPaletteProps, +} from './color_palette_picker'; import { requiredProps } from '../../../test'; jest.mock('./../../../services/accessibility', () => ({ htmlIdGenerator: () => () => 'generated-id', })); -const palettes = [ +const palettes: EuiColorPalettePickerPaletteProps[] = [ { value: 'palette1', title: 'Summer Colors', palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], - type: 'stops', + type: 'fixed', }, { value: 'palette2', @@ -57,10 +60,6 @@ const palettes = [ ], type: 'gradient', }, - { - title: 'Custom Option', - type: 'button', - }, ]; describe('EuiColorPalettePicker', () => { diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 7dc256093a8..4f82f0eae7e 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -27,6 +27,29 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { CommonProps } from '../../common'; import { getLinearGradient } from '../utils'; +import { ColorStop } from '../color_stops'; + +export interface EuiColorPalettePickerPaletteProps { + /** + * A unique value + */ + value: string; + /** + * The name of your palette + */ + title?: string; + /** + * Specify if the palette is + * `fixed`: individual color blocks; or + * `gradient`: each color fades into the next + */ + type: 'fixed' | 'gradient'; + /** + * Array of color `strings` or `ColorStops` in the form of + * { stop: number, color: string } + */ + palette: string[] | ColorStop[]; +} export type EuiColorPalettePickerProps = CommonProps & { /** @@ -43,22 +66,20 @@ export type EuiColorPalettePickerProps = CommonProps & { * `string` | `ReactElement` or an array of these */ prepend?: EuiFormControlLayoutProps['prepend']; - /** * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`. * `string` | `ReactElement` or an array of these */ append?: EuiFormControlLayoutProps['append']; valueOfSelected?: string; - /** * You must pass an `onChange` function to handle the update of the value */ onChange?: (options: any) => void; /** - * An array of objects. `value`: a unique value | `title`: the name of your palette (not required) | `type`: specify if your palette is a `gradient` or `stops` | `palette`: pass an array of hexadecimals + * An array of #EuiColorPalettePickerPalette objects */ - palettes: any[]; + palettes: EuiColorPalettePickerPaletteProps[]; }; export const EuiColorPalettePicker: FunctionComponent< @@ -78,7 +99,7 @@ export const EuiColorPalettePicker: FunctionComponent< ...rest }) => { const getPalette = (palette: [], type: string) => { - if (type === 'stops') { + if (type === 'fixed') { return (
    {palette.map((hexCode: string, index: number) => ( diff --git a/src/components/color_picker/color_palette_picker/index.ts b/src/components/color_picker/color_palette_picker/index.ts index a173a7f1f6d..33fc24197d9 100644 --- a/src/components/color_picker/color_palette_picker/index.ts +++ b/src/components/color_picker/color_palette_picker/index.ts @@ -20,4 +20,5 @@ export { EuiColorPalettePicker, EuiColorPalettePickerProps, + EuiColorPalettePickerPaletteProps, } from './color_palette_picker'; From f57b8012e7fa519e85745d6cd8ce47d10eaa8d13 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 6 May 2020 12:43:13 +0100 Subject: [PATCH 12/45] getFixedLinearGradient --- .../color_picker/color_palette_picker.tsx | 16 +++-- .../color_picker/color_picker_example.js | 24 -------- src-docs/src/views/color_picker/props.tsx | 2 +- .../color_palette_picker.test.tsx.snap | 58 ++----------------- .../_color_palette_picker.scss | 4 +- .../color_palette_picker.tsx | 34 ++++------- src/components/color_picker/index.ts | 6 +- src/components/color_picker/utils.ts | 40 ++++++++++--- 8 files changed, 66 insertions(+), 118 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index e80a8a820ff..480e1d8f3cf 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -13,19 +13,19 @@ import { DisplayToggles } from '../form_controls/display_toggles'; const palettes: EuiColorPalettePickerPaletteProps[] = [ { value: 'palette1', - title: 'EUI Color Blind (stops)', + title: 'EUI Color Blind (fixed)', palette: euiPaletteColorBlind(), type: 'fixed', }, { value: 'palette2', - title: 'Summer Colors (stops)', + title: 'Summer Colors (fixed)', palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], type: 'fixed', }, { value: 'palette4', - title: 'Beautiful Gradient (gradient)', + title: 'Beautiful Gradient (gradient with stops)', palette: [ { stop: 100, @@ -54,8 +54,14 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [ }, { value: 'palette6', - title: 'Electric Pop (stops)', - palette: ['#ff3f3f', '#ffcc06', '#0a9ad7', '#030000', '#fdf2dd'], + title: 'CSS color names (fixed)', + palette: ['red', 'gold', 'deepskyblue', 'black', 'linen'], + type: 'fixed', + }, + { + value: 'palette7', + title: 'RGBA colors (fixed)', + palette: ['rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.2)'], type: 'fixed', }, ]; diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 40bd1652a66..d3a073559c8 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -322,30 +322,6 @@ export const ColorPickerExample = { further apply to data like maps, bar charts, or any other type of data visualization.

    -

    To display palettes simply pass an array of objects with:

    -
      -
    • - value: a unique value -
      • -
    • - title: the name of your palette (not - required) -
      • -
    • - type: specify if your palette is a{' '} - {'"gradient"'} - or {'"stops"'} -
      • -
    • - palette: an array of hex colors{' '} - {'["#1fb0b2", "#ffdb6d"]'}. For - {'type: "gradient"'} you can - specify the stops{' '} - - {'{ stop: 100, color: "#54B399" }'} - -
      • -
    ), diff --git a/src-docs/src/views/color_picker/props.tsx b/src-docs/src/views/color_picker/props.tsx index f4cb616a8eb..a4e2a3c5565 100644 --- a/src-docs/src/views/color_picker/props.tsx +++ b/src-docs/src/views/color_picker/props.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from 'react'; -import { EuiColorPalettePickerPaletteProps } from '../../../../src/components/color_picker/color_palette_picker'; +import { EuiColorPalettePickerPaletteProps } from '../../../../src/components/color_picker/'; export const EuiColorPalettePickerPalette: FunctionComponent< EuiColorPalettePickerPaletteProps diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap index ef3b820b4bf..a4f4e891d22 100644 --- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap +++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -24,33 +24,8 @@ exports[`EuiColorPalettePicker is rendered 1`] = ` Select an option:
    -
    -
    -
    -
    -
    -
    + style="background:linear-gradient(to right, #1fb0b2 0%, #1fb0b2 20%, #ffdb6d 20%, #ffdb6d 40%, #ee9191 40%, #ee9191 60%, #ffffff 60%, #ffffff 80%, #888094 80%, #888094 100%)" + /> , is selected
    { const getPalette = (palette: [], type: string) => { - if (type === 'fixed') { - return ( -
    - {palette.map((hexCode: string, index: number) => ( -
    - ))} -
    - ); - } else { - const background = getLinearGradient(palette); + const background = + type === 'fixed' + ? getFixedLinearGradient(palette) + : getLinearGradient(palette); - return ( -
    - ); - } + return ( +
    + ); }; const getButton = (title: any) => title; diff --git a/src/components/color_picker/index.ts b/src/components/color_picker/index.ts index d644d7c60bd..6d38e67bfdf 100644 --- a/src/components/color_picker/index.ts +++ b/src/components/color_picker/index.ts @@ -22,4 +22,8 @@ export { EuiColorPickerSwatch } from './color_picker_swatch'; export { EuiHue } from './hue'; export { EuiSaturation } from './saturation'; export { EuiColorStops } from './color_stops'; -export { EuiColorPalettePicker } from './color_palette_picker'; +export { + EuiColorPalettePicker, + EuiColorPalettePickerProps, + EuiColorPalettePickerPaletteProps, +} from './color_palette_picker'; diff --git a/src/components/color_picker/utils.ts b/src/components/color_picker/utils.ts index 8caf6c92f30..f0466611a07 100644 --- a/src/components/color_picker/utils.ts +++ b/src/components/color_picker/utils.ts @@ -157,25 +157,25 @@ export const getChromaColor = (input?: string | null, allowOpacity = false) => { return null; }; -// Given an array of objects with key value pairs stop/color or -// given just an array of objects with hex colors returns a css linear-gradient +// Given an array of objects with key value pairs stop/color +// Or given just an array of hex colors returns a css linear-gradient export const getLinearGradient = (palette: any) => { const intervals = palette.length; + let linearGradient; + const paletteHasStops = palette.some((item: any) => { return typeof item === 'object'; }); - let linearGradient; - if (paletteHasStops) { linearGradient = `linear-gradient(to right, ${palette[0].color} 0%,`; - const divider = 100 / palette[palette.length - 1].stop; + const decimal = 100 / palette[palette.length - 1].stop; for (let i = 1; i < intervals - 1; i++) { - linearGradient = `${linearGradient} ${palette[i].color}\ ${Math.round( - palette[i].stop * divider + linearGradient = `${linearGradient} ${palette[i].color}\ ${Math.floor( + palette[i].stop * decimal )}%,`; } @@ -200,3 +200,29 @@ export const getLinearGradient = (palette: any) => { return linearGradientStyle; } }; + +// Given an array of hex values +export const getFixedLinearGradient = (palette: any) => { + const intervals = palette.length; + + let fixedLinearGradient; + + for (let i = 0; i < intervals; i++) { + const initialColorStop = `${palette[0]} 0%, ${palette[0]}\ ${Math.floor( + (100 * 1) / intervals + )}%`; + const colorStop = `${palette[i]}\ ${Math.floor((100 * i) / intervals)}%, ${ + palette[i] + }\ ${Math.floor((100 * (i + 1)) / intervals)}%`; + + if (i === 0) { + fixedLinearGradient = `linear-gradient(to right, ${initialColorStop},`; + } else if (i === palette.length - 1) { + fixedLinearGradient = `${fixedLinearGradient} ${colorStop})`; + } else { + fixedLinearGradient = `${fixedLinearGradient} ${colorStop},`; + } + } + + return fixedLinearGradient; +}; From c3ae30bc591b624dc9fabfef64f1b2a5b657e724 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 8 May 2020 17:14:22 +0100 Subject: [PATCH 13/45] Text as an option --- .../views/color_picker/color_palette_picker.tsx | 5 +++++ .../views/color_picker/color_picker_example.js | 2 +- src-docs/src/views/color_picker/props.tsx | 2 +- .../color_palette_picker.tsx | 17 +++++++++-------- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 480e1d8f3cf..70787f484a7 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -64,6 +64,11 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [ palette: ['rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.2)'], type: 'fixed', }, + { + value: 'custom', + title: 'Just a text as an option', + type: 'text', + }, ]; export const ColorPalettePicker = () => { diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index d3a073559c8..4916a54f3a9 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -34,7 +34,7 @@ const colorPalettePickerSnippet = ` title; + const getText = (title: any) => title; const paletteOptions = palettes.map((item: any) => { return { value: String(item.value), inputDisplay: - item.type !== 'button' + item.type !== 'text' ? getPalette(item.palette, item.type) - : getButton(item.title), + : getText(item.title), dropdownDisplay: ( - {item.title && item.type !== 'button' && ( + {item.title && item.type !== 'text' && ( - {item.type !== 'button' + {item.type !== 'text' ? getPalette(item.palette, item.type) - : getButton(item.title)} + : getText(item.title)} ), From 1ae241c891460fc8f1101f12db420892a256ebd1 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 12 May 2020 15:59:43 +0100 Subject: [PATCH 14/45] Improving props description --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index c2d49b5cc98..5a4840d3e8c 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -42,7 +42,7 @@ export interface EuiColorPalettePickerPaletteProps { * Specify if the palette is * `fixed`: individual color blocks; or * `gradient`: each color fades into the next - * `text`: a text as an option. A title is required. + * `text`: a text as an option (a title is required). */ type: 'fixed' | 'gradient' | 'text'; /** From 94c0efdd5e6d0afaf1665450f6a4e7168f8e2bd6 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 12 May 2020 16:39:52 +0100 Subject: [PATCH 15/45] Improving sass --- .../color_picker/color_palette_picker/_color_palette_picker.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss index 1bbfb7752eb..bc398c72499 100644 --- a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss +++ b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss @@ -6,7 +6,6 @@ overflow: hidden; height: $euiSizeS; box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .9); - } &__colorStop { From c2ebf330af4aa7e115db5f2d1963474544b8ad21 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 14 May 2020 13:27:26 +0100 Subject: [PATCH 16/45] Adding selectionDisplay --- .../color_palette_picker.tsx | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 5a4840d3e8c..0d82220373e 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -63,15 +63,19 @@ export type EuiColorPalettePickerProps = CommonProps & { readOnly?: boolean; isInvalid?: boolean; /** - * Creates an input group with element(s) coming before input. It only shows when the `display` is set to `default`. + * Creates an input group with element(s) coming before input. * `string` | `ReactElement` or an array of these */ prepend?: EuiFormControlLayoutProps['prepend']; /** - * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`. + * Creates an input group with element(s) coming after input. * `string` | `ReactElement` or an array of these */ append?: EuiFormControlLayoutProps['append']; + /** + * Specify what should be displayed after a selection: a `palette` or `title` + */ + selectionDisplay?: 'palette' | 'title'; valueOfSelected?: string; /** * You must pass an `onChange` function to handle the update of the value @@ -97,6 +101,7 @@ export const EuiColorPalettePicker: FunctionComponent< palettes, append, prepend, + selectionDisplay = 'palette', ...rest }) => { const getPalette = (palette: [], type: string) => { @@ -115,13 +120,18 @@ export const EuiColorPalettePicker: FunctionComponent< const getText = (title: any) => title; + const getInputDisplay = (title: string, palette: [], type: string) => { + if (selectionDisplay === 'title') { + return getText(title); + } else { + return type === 'text' ? getText(title) : getPalette(palette, type); + } + }; + const paletteOptions = palettes.map((item: any) => { return { value: String(item.value), - inputDisplay: - item.type !== 'text' - ? getPalette(item.palette, item.type) - : getText(item.title), + inputDisplay: getInputDisplay(item.title, item.palette, item.type), dropdownDisplay: ( {item.title && item.type !== 'text' && ( @@ -133,7 +143,6 @@ export const EuiColorPalettePicker: FunctionComponent< )} - {item.type !== 'text' ? getPalette(item.palette, item.type) From 18d79dab84aebb5302eb8785d98b1758c2e16819 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 14 May 2020 14:37:47 +0100 Subject: [PATCH 17/45] More examples --- .../color_picker/color_palette_picker.tsx | 105 ++++++++++++++---- 1 file changed, 86 insertions(+), 19 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 70787f484a7..a1b3a02e9cf 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -3,6 +3,8 @@ import { euiPaletteColorBlind, euiPaletteForStatus, } from '../../../../src/services'; +// @ts-ignore +import { EuiFormRow } from '../../../../src/components'; import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps, @@ -10,21 +12,21 @@ import { // @ts-ignore import { DisplayToggles } from '../form_controls/display_toggles'; -const palettes: EuiColorPalettePickerPaletteProps[] = [ +const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ { - value: 'palette1', + value: 'palletteExample1_1', title: 'EUI Color Blind (fixed)', palette: euiPaletteColorBlind(), type: 'fixed', }, { - value: 'palette2', + value: 'palletteExample1_2', title: 'Summer Colors (fixed)', palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], type: 'fixed', }, { - value: 'palette4', + value: 'palletteExample1_3', title: 'Beautiful Gradient (gradient with stops)', palette: [ { @@ -47,19 +49,19 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [ type: 'gradient', }, { - value: 'palette5', + value: 'palletteExample1_4', title: 'For Status (gradient)', palette: euiPaletteForStatus(5), type: 'gradient', }, { - value: 'palette6', + value: 'palletteExample1_5', title: 'CSS color names (fixed)', palette: ['red', 'gold', 'deepskyblue', 'black', 'linen'], type: 'fixed', }, { - value: 'palette7', + value: 'palletteExample1_6', title: 'RGBA colors (fixed)', palette: ['rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.2)'], type: 'fixed', @@ -71,20 +73,85 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [ }, ]; -export const ColorPalettePicker = () => { - const [palette, setPalette] = useState('palette1'); +const palettesExample2: EuiColorPalettePickerPaletteProps[] = [ + { + value: 'palletteExample2_1', + title: 'EUI Color Blind', + palette: euiPaletteColorBlind(), + type: 'fixed', + }, + { + value: 'palletteExample2_2', + title: 'Summer Colors', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + type: 'fixed', + }, + { + value: 'palletteExample2_3', + title: 'For Status', + palette: euiPaletteForStatus(5), + type: 'fixed', + }, +]; - const onPaletteChange = (value: any) => { - setPalette(value); - }; +const palettesExample3: EuiColorPalettePickerPaletteProps[] = [ + { + value: 'palletteExample3_1', + title: 'For Status', + palette: euiPaletteForStatus(5), + type: 'fixed', + }, + { + value: 'palletteExample3_2', + title: 'Summer Colors', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + type: 'fixed', + }, + { + value: 'palletteExample3_3', + title: 'EUI Color Blind', + palette: euiPaletteColorBlind(), + type: 'fixed', + }, +]; + +export const ColorPalettePicker = () => { + const [palletteExample1, setPalletteExample1] = useState( + 'palletteExample1_1' + ); + const [palletteExample2, setPalletteExample2] = useState( + 'palletteExample2_1' + ); + const [palletteExample3, setPalletteExample3] = useState( + 'palletteExample3_1' + ); return ( - - - + <> + + + + + + + + + + + + ); }; From aaa3692a3d3a2689ac78e1c07559dda613994399 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 15 May 2020 12:26:49 +0100 Subject: [PATCH 18/45] Addressing pr review --- .../color_picker/color_palette_picker.tsx | 59 ++++++++----------- 1 file changed, 24 insertions(+), 35 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index a1b3a02e9cf..2afee43c91f 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -2,9 +2,11 @@ import React, { useState } from 'react'; import { euiPaletteColorBlind, euiPaletteForStatus, + euiPaletteForTemperature, + euiPalettePositive, } from '../../../../src/services'; -// @ts-ignore -import { EuiFormRow } from '../../../../src/components'; +import { EuiFormRow } from '../../../../src/components/form'; +import { EuiSpacer } from '../../../../src/components/spacer'; import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps, @@ -15,14 +17,14 @@ import { DisplayToggles } from '../form_controls/display_toggles'; const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ { value: 'palletteExample1_1', - title: 'EUI Color Blind (fixed)', + title: 'EUI color blind (fixed)', palette: euiPaletteColorBlind(), type: 'fixed', }, { value: 'palletteExample1_2', - title: 'Summer Colors (fixed)', - palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + title: 'EUI palette for temperature (fixed)', + palette: euiPaletteForTemperature(5), type: 'fixed', }, { @@ -50,22 +52,10 @@ const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ }, { value: 'palletteExample1_4', - title: 'For Status (gradient)', + title: 'EUI palette for status (gradient)', palette: euiPaletteForStatus(5), type: 'gradient', }, - { - value: 'palletteExample1_5', - title: 'CSS color names (fixed)', - palette: ['red', 'gold', 'deepskyblue', 'black', 'linen'], - type: 'fixed', - }, - { - value: 'palletteExample1_6', - title: 'RGBA colors (fixed)', - palette: ['rgba(0, 0, 0, 0.5)', 'rgba(255, 255, 255, 0.2)'], - type: 'fixed', - }, { value: 'custom', title: 'Just a text as an option', @@ -76,19 +66,19 @@ const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ const palettesExample2: EuiColorPalettePickerPaletteProps[] = [ { value: 'palletteExample2_1', - title: 'EUI Color Blind', + title: 'EUI color blind', palette: euiPaletteColorBlind(), type: 'fixed', }, { value: 'palletteExample2_2', - title: 'Summer Colors', - palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + title: 'EUI palette for temperature', + palette: euiPaletteForTemperature(5), type: 'fixed', }, { value: 'palletteExample2_3', - title: 'For Status', + title: 'EUI palette for status', palette: euiPaletteForStatus(5), type: 'fixed', }, @@ -97,19 +87,19 @@ const palettesExample2: EuiColorPalettePickerPaletteProps[] = [ const palettesExample3: EuiColorPalettePickerPaletteProps[] = [ { value: 'palletteExample3_1', - title: 'For Status', + title: 'EUI palette for status', palette: euiPaletteForStatus(5), type: 'fixed', }, { value: 'palletteExample3_2', - title: 'Summer Colors', - palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + title: 'EUI palette positive', + palette: euiPalettePositive(5), type: 'fixed', }, { value: 'palletteExample3_3', - title: 'EUI Color Blind', + title: 'EUI color blind', palette: euiPaletteColorBlind(), type: 'fixed', }, @@ -128,15 +118,14 @@ export const ColorPalettePicker = () => { return ( <> - - - - - + + + + Date: Fri, 15 May 2020 12:33:51 +0100 Subject: [PATCH 19/45] Update src-docs/src/views/color_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/color_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index a1b3a02e9cf..74cbbacf8df 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -68,7 +68,7 @@ const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ }, { value: 'custom', - title: 'Just a text as an option', + title: 'Plain text as a custom option', type: 'text', }, ]; From 391e49d10bc46a72fb2e4ab2cb8f6587d5c6a51a Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 15 May 2020 12:34:00 +0100 Subject: [PATCH 20/45] Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 0d82220373e..06eb59c6a13 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -41,7 +41,7 @@ export interface EuiColorPalettePickerPaletteProps { /** * Specify if the palette is * `fixed`: individual color blocks; or - * `gradient`: each color fades into the next + * `gradient`: each color fades into the next; or * `text`: a text as an option (a title is required). */ type: 'fixed' | 'gradient' | 'text'; From 16aeb06dd6554391707987524cdf338aac9efbd9 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Fri, 15 May 2020 12:34:11 +0100 Subject: [PATCH 21/45] Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 06eb59c6a13..8ef803c6fa8 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -42,7 +42,7 @@ export interface EuiColorPalettePickerPaletteProps { * Specify if the palette is * `fixed`: individual color blocks; or * `gradient`: each color fades into the next; or - * `text`: a text as an option (a title is required). + * `text`: a text only option (a title is required). */ type: 'fixed' | 'gradient' | 'text'; /** From 1f9c89a0d2a5567e5410afb46b3d0582264af8e0 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 15 May 2020 13:45:29 +0100 Subject: [PATCH 22/45] Extending EuiSuperSelectProp --- .../color_picker/color_palette_picker.tsx | 2 +- .../color_palette_picker.tsx | 55 +++++++------------ 2 files changed, 20 insertions(+), 37 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 08b10b30b56..5dd4a323f0c 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -10,7 +10,7 @@ import { EuiSpacer } from '../../../../src/components/spacer'; import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps, -} from '../../../../src/components/color_picker/color_palette_picker'; +} from '../../../../src/components/color_picker/'; // @ts-ignore import { DisplayToggles } from '../form_controls/display_toggles'; diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 8ef803c6fa8..d20f39fe059 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -19,7 +19,7 @@ import React, { FunctionComponent } from 'react'; -import { EuiSuperSelect, EuiFormControlLayoutProps } from '../../form'; +import { EuiSuperSelect } from '../../form'; import { EuiText } from '../../text'; @@ -29,6 +29,8 @@ import { CommonProps } from '../../common'; import { getLinearGradient, getFixedLinearGradient } from '../utils'; import { ColorStop } from '../color_stops'; +import { EuiSuperSelectProps } from '../../form/super_select'; + export interface EuiColorPalettePickerPaletteProps { /** * A unique value @@ -52,43 +54,24 @@ export interface EuiColorPalettePickerPaletteProps { palette?: string[] | ColorStop[]; } -export type EuiColorPalettePickerProps = CommonProps & { - /** - * Use the compressed style for EuiColorPalette - */ - compressed?: boolean; - disabled?: boolean; - fullWidth?: boolean; - id?: string; - readOnly?: boolean; - isInvalid?: boolean; - /** - * Creates an input group with element(s) coming before input. - * `string` | `ReactElement` or an array of these - */ - prepend?: EuiFormControlLayoutProps['prepend']; - /** - * Creates an input group with element(s) coming after input. - * `string` | `ReactElement` or an array of these - */ - append?: EuiFormControlLayoutProps['append']; - /** - * Specify what should be displayed after a selection: a `palette` or `title` - */ - selectionDisplay?: 'palette' | 'title'; - valueOfSelected?: string; - /** - * You must pass an `onChange` function to handle the update of the value - */ - onChange?: (options: any) => void; - /** - * An array of #EuiColorPalettePickerPalette objects - */ - palettes: EuiColorPalettePickerPaletteProps[]; -}; +export type EuiColorPalettePickerProps = CommonProps & + Omit< + EuiSuperSelectProps, + 'options' | 'itemLayoutAlign' | 'hasDividers' + > & { + /** + * Specify what should be displayed after a selection: a `palette` or `title` + */ + selectionDisplay?: 'palette' | 'title'; + + /** + * An array of #EuiColorPalettePickerPalette objects + */ + palettes: EuiColorPalettePickerPaletteProps[]; + }; export const EuiColorPalettePicker: FunctionComponent< - EuiColorPalettePickerProps + EuiColorPalettePickerProps > = ({ className, compressed = false, From ddec2cadf60714c656bb2cc3873294bea9daa95d Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 15 May 2020 17:35:13 +0100 Subject: [PATCH 23/45] Simplifying structure --- .../color_picker/color_palette_picker.tsx | 12 ++++----- .../color_palette_picker.test.tsx.snap | 4 +-- .../_color_palette_picker.scss | 22 ++++++++-------- .../color_palette_picker.tsx | 25 ++++++------------- 4 files changed, 27 insertions(+), 36 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 5dd4a323f0c..b2f6e52ffca 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -56,11 +56,6 @@ const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ palette: euiPaletteForStatus(5), type: 'gradient', }, - { - value: 'custom', - title: 'Plain text as a custom option', - type: 'text', - }, ]; const palettesExample2: EuiColorPalettePickerPaletteProps[] = [ @@ -103,6 +98,11 @@ const palettesExample3: EuiColorPalettePickerPaletteProps[] = [ palette: euiPaletteColorBlind(), type: 'fixed', }, + { + value: 'custom', + title: 'Plain text as a custom option', + type: 'text', + }, ]; export const ColorPalettePicker = () => { @@ -134,7 +134,7 @@ export const ColorPalettePicker = () => { selectionDisplay="title" /> - + Select an option:
    , is selected @@ -39,7 +39,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = ` type="button" >
    diff --git a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss index bc398c72499..3800a85460f 100644 --- a/src/components/color_picker/color_palette_picker/_color_palette_picker.scss +++ b/src/components/color_picker/color_palette_picker/_color_palette_picker.scss @@ -1,5 +1,16 @@ .euiColorPalettePicker { - &__colorContainer { + &__item { + > div + div { + margin-top: $euiSizeXS; + } + } + + &__itemTitle { + @include euiText; + @include euiFontSizeXS; + } + + &__itemGradient { display: flex; flex-direction: row; border-radius: $euiBorderRadius; @@ -7,13 +18,4 @@ height: $euiSizeS; box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .9); } - - &__colorStop { - flex: 1; - height: $euiSizeS; - } - - &__paletteTitle { - min-width: $euiSizeXL * 3; - } } diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index d20f39fe059..d2ce1e9c576 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -21,9 +21,6 @@ import React, { FunctionComponent } from 'react'; import { EuiSuperSelect } from '../../form'; -import { EuiText } from '../../text'; - -import { EuiFlexGroup, EuiFlexItem } from '../../flex'; import { CommonProps } from '../../common'; import { getLinearGradient, getFixedLinearGradient } from '../utils'; @@ -95,7 +92,7 @@ export const EuiColorPalettePicker: FunctionComponent< return (
    ); @@ -116,22 +113,14 @@ export const EuiColorPalettePicker: FunctionComponent< value: String(item.value), inputDisplay: getInputDisplay(item.title, item.palette, item.type), dropdownDisplay: ( - +
    {item.title && item.type !== 'text' && ( - - - {item.title} - - +
    {item.title}
    )} - - {item.type !== 'text' - ? getPalette(item.palette, item.type) - : getText(item.title)} - - + {item.type !== 'text' + ? getPalette(item.palette, item.type) + : getText(item.title)} +
    ), }; }); From 1ad70053769bce91cdf29192d1bc541c754cd407 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 15 May 2020 17:51:56 +0100 Subject: [PATCH 24/45] Changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 090dc01bcf9..37d49bbf448 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451)) - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462)) - Added `EuiColorPalettePicker` component ([#3192](https://github.com/elastic/eui/pull/3192)) -- + ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0) - Added `null` as acceptable `icon` prop for `EuiCard` ([#3470](https://github.com/elastic/eui/pull/3470)) From b4bd5c386656c3ae4117a74db83c9bdc5813e737 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 15 May 2020 18:19:31 +0100 Subject: [PATCH 25/45] Improving example --- .../color_picker/color_palette_picker.tsx | 100 ++++-------------- .../color_picker/color_picker_example.js | 2 +- 2 files changed, 24 insertions(+), 78 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index b2f6e52ffca..f207f809a91 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -3,10 +3,10 @@ import { euiPaletteColorBlind, euiPaletteForStatus, euiPaletteForTemperature, - euiPalettePositive, } from '../../../../src/services'; -import { EuiFormRow } from '../../../../src/components/form'; +import { EuiSwitch } from '../../../../src/components/form'; import { EuiSpacer } from '../../../../src/components/spacer'; +import { EuiCode } from '../../../../src/components/code'; import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps, @@ -14,21 +14,21 @@ import { // @ts-ignore import { DisplayToggles } from '../form_controls/display_toggles'; -const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ +const palettes: EuiColorPalettePickerPaletteProps[] = [ { - value: 'palletteExample1_1', + value: 'pallette_1', title: 'EUI color blind (fixed)', palette: euiPaletteColorBlind(), type: 'fixed', }, { - value: 'palletteExample1_2', + value: 'pallette_2', title: 'EUI palette for temperature (fixed)', palette: euiPaletteForTemperature(5), type: 'fixed', }, { - value: 'palletteExample1_3', + value: 'pallette_3', title: 'Beautiful Gradient (gradient with stops)', palette: [ { @@ -51,53 +51,11 @@ const palettesExample1: EuiColorPalettePickerPaletteProps[] = [ type: 'gradient', }, { - value: 'palletteExample1_4', + value: 'pallette_4', title: 'EUI palette for status (gradient)', palette: euiPaletteForStatus(5), type: 'gradient', }, -]; - -const palettesExample2: EuiColorPalettePickerPaletteProps[] = [ - { - value: 'palletteExample2_1', - title: 'EUI color blind', - palette: euiPaletteColorBlind(), - type: 'fixed', - }, - { - value: 'palletteExample2_2', - title: 'EUI palette for temperature', - palette: euiPaletteForTemperature(5), - type: 'fixed', - }, - { - value: 'palletteExample2_3', - title: 'EUI palette for status', - palette: euiPaletteForStatus(5), - type: 'fixed', - }, -]; - -const palettesExample3: EuiColorPalettePickerPaletteProps[] = [ - { - value: 'palletteExample3_1', - title: 'EUI palette for status', - palette: euiPaletteForStatus(5), - type: 'fixed', - }, - { - value: 'palletteExample3_2', - title: 'EUI palette positive', - palette: euiPalettePositive(5), - type: 'fixed', - }, - { - value: 'palletteExample3_3', - title: 'EUI color blind', - palette: euiPaletteColorBlind(), - type: 'fixed', - }, { value: 'custom', title: 'Plain text as a custom option', @@ -106,41 +64,29 @@ const palettesExample3: EuiColorPalettePickerPaletteProps[] = [ ]; export const ColorPalettePicker = () => { - const [palletteExample1, setPalletteExample1] = useState( - 'palletteExample1_1' - ); - const [palletteExample2, setPalletteExample2] = useState( - 'palletteExample2_1' - ); - const [palletteExample3, setPalletteExample3] = useState( - 'palletteExample3_1' - ); + const [selectionDisplay, setSelectionDisplay] = useState(false); + const [pallette, setPallette] = useState('pallette_1'); return ( <> + + Display selection as title + + } + checked={selectionDisplay} + onChange={() => setSelectionDisplay(!selectionDisplay)} + /> + - - - - - - - ); }; diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 4916a54f3a9..0bb96476082 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -319,7 +319,7 @@ export const ColorPickerExample = {

    Use EuiColorPalettePicker to select palettes to - further apply to data like maps, bar charts, or any other type of + apply colors to data like maps, bar charts, or any other type of data visualization.

    From 12d841db03531f1733c49b89a13f72d1119c5e1f Mon Sep 17 00:00:00 2001 From: miukimiu Date: Fri, 15 May 2020 18:28:14 +0100 Subject: [PATCH 26/45] Improving snippet --- src-docs/src/views/color_picker/color_palette_picker.tsx | 2 +- src-docs/src/views/color_picker/color_picker_example.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index f207f809a91..10d0632d627 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -72,7 +72,7 @@ export const ColorPalettePicker = () => { - Display selection as title + Display selected item as a title } checked={selectionDisplay} diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 0bb96476082..31407f7487d 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -33,7 +33,7 @@ const colorPalettePickerSnippet = ` Date: Wed, 20 May 2020 13:52:37 +0100 Subject: [PATCH 27/45] Adding more tests --- .../color_picker/color_palette_picker.tsx | 2 +- .../color_palette_picker.test.tsx.snap | 294 ++++++++++++++++++ .../color_palette_picker.test.tsx | 139 +++++++-- 3 files changed, 409 insertions(+), 26 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 10d0632d627..43bd61b0502 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -10,7 +10,7 @@ import { EuiCode } from '../../../../src/components/code'; import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps, -} from '../../../../src/components/color_picker/'; +} from '../../../../src/components/color_picker/color_palette_picker'; // @ts-ignore import { DisplayToggles } from '../form_controls/display_toggles'; diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap index 7821906f565..afa4ac5e8b2 100644 --- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap +++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -1,6 +1,68 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiColorPalettePicker is rendered 1`] = ` +
    +
    + +
    +
    + + Select an option: +
    + , is selected + + +
    + + +
    +
    +
    +
    +`; + +exports[`EuiColorPalettePicker props palettes with type fixed is rendered 1`] = `
    @@ -61,3 +123,235 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
    `; + +exports[`EuiColorPalettePicker props palettes with type gradient is rendered 1`] = ` +
    +
    + +
    +
    + + Select an option: +
    + , is selected + + +
    + + +
    +
    +
    +
    +`; + +exports[`EuiColorPalettePicker props palettes with type gradient with stops is rendered 1`] = ` +
    +
    + +
    +
    + + Select an option: +
    + , is selected + + +
    + + +
    +
    +
    +
    +`; + +exports[`EuiColorPalettePicker props palettes with type text is rendered 1`] = ` +
    +
    + +
    +
    + + Select an option: Plain text as a custom option, is selected + + +
    + + +
    +
    +
    +
    +`; + +exports[`EuiColorPalettePicker props selectionDisplay title is rendered 1`] = ` +
    +
    + +
    +
    + + Select an option: Palette 1, is selected + + +
    + + +
    +
    +
    +
    +`; diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx index c18763da531..548d96f6559 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.test.tsx @@ -33,33 +33,10 @@ jest.mock('./../../../services/accessibility', () => ({ const palettes: EuiColorPalettePickerPaletteProps[] = [ { value: 'palette1', - title: 'Summer Colors', - palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + title: 'Palette 1', + palette: ['#1fb0b2', '#ffdb6d'], type: 'fixed', }, - { - value: 'palette2', - title: 'Linear Gradient', - palette: [ - { - stop: 100, - color: '#54B399', - }, - { - stop: 250, - color: '#D36086', - }, - { - stop: 350, - color: '#9170B8', - }, - { - stop: 470, - color: '#F5A700', - }, - ], - type: 'gradient', - }, ]; describe('EuiColorPalettePicker', () => { @@ -75,4 +52,116 @@ describe('EuiColorPalettePicker', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + test('selectionDisplay title is rendered', () => { + const component = render( + {}} + valueOfSelected="palette1" + selectionDisplay="title" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('palettes with type fixed is rendered', () => { + const component = render( + {}} + valueOfSelected="palette1" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('palettes with type gradient is rendered', () => { + const component = render( + {}} + valueOfSelected="palette1" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('palettes with type gradient with stops is rendered', () => { + const component = render( + {}} + valueOfSelected="palette1" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('palettes with type text is rendered', () => { + const component = render( + {}} + valueOfSelected="custom" + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); }); From b16546333e9eebdf810ae7b0dea98425be8f7d15 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 20 May 2020 13:58:19 +0100 Subject: [PATCH 28/45] Improving props description --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index d2ce1e9c576..bb41008fab1 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -30,7 +30,7 @@ import { EuiSuperSelectProps } from '../../form/super_select'; export interface EuiColorPalettePickerPaletteProps { /** - * A unique value + * For storing unique value of item */ value: string; /** From 32d3ea1a0a3403941c9b61ddb5c6af2d83900c2c Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 20 May 2020 20:37:40 +0100 Subject: [PATCH 29/45] Improving docs text --- .../color_picker/color_picker_example.js | 9 + .../color_palette_picker.test.tsx.snap | 68 +++--- .../color_palette_picker.test.tsx | 213 ++++++++---------- 3 files changed, 138 insertions(+), 152 deletions(-) diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 31407f7487d..87f0365986f 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -322,6 +322,15 @@ export const ColorPickerExample = { apply colors to data like maps, bar charts, or any other type of data visualization.

    +

    + Use the palettes prop to pass your palettes as + an array of objects. For each object, you should pass a palette as + an array of hex values and you should specify if the{' '} + type is fixed or{' '} + gradient. Use fixed palettes + for categorical data and gradient palettes for{' '} + continuous data. +

    ), diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap index afa4ac5e8b2..90d8ed2e996 100644 --- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap +++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -9,7 +9,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = ` >
    - Select an option: -
    - , is selected + Select an option: , is selected + />
    @@ -62,7 +52,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
    `; -exports[`EuiColorPalettePicker props palettes with type fixed is rendered 1`] = ` +exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
    @@ -71,7 +61,7 @@ exports[`EuiColorPalettePicker props palettes with type fixed is rendered 1`] = >
    - Select an option: -
    - , is selected + Select an option: Plain text as a custom option, is selected
    `; -exports[`EuiColorPalettePicker props palettes with type gradient is rendered 1`] = ` +exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
    @@ -133,7 +115,7 @@ exports[`EuiColorPalettePicker props palettes with type gradient is rendered 1`] >
    , is selected @@ -164,7 +146,7 @@ exports[`EuiColorPalettePicker props palettes with type gradient is rendered 1`] >
    `; -exports[`EuiColorPalettePicker props palettes with type gradient with stops is rendered 1`] = ` +exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`] = `
    @@ -195,7 +177,7 @@ exports[`EuiColorPalettePicker props palettes with type gradient with stops is r >
    , is selected @@ -226,7 +208,7 @@ exports[`EuiColorPalettePicker props palettes with type gradient with stops is r >
    `; -exports[`EuiColorPalettePicker props palettes with type text is rendered 1`] = ` +exports[`EuiColorPalettePicker is rendered with a selected gradient palette with stops 1`] = `
    @@ -257,7 +239,7 @@ exports[`EuiColorPalettePicker props palettes with type text is rendered 1`] = ` >
    - Select an option: Plain text as a custom option, is selected + Select an option: +
    + , is selected
    `; -exports[`EuiColorPalettePicker props selectionDisplay title is rendered 1`] = ` +exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as title 1`] = `
    @@ -311,7 +301,7 @@ exports[`EuiColorPalettePicker props selectionDisplay title is rendered 1`] = ` >
    ({ const palettes: EuiColorPalettePickerPaletteProps[] = [ { - value: 'palette1', + value: 'paletteFixed', title: 'Palette 1', - palette: ['#1fb0b2', '#ffdb6d'], + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], type: 'fixed', }, + { + value: 'paletteLinear', + title: 'Linear Gradient', + palette: ['#1fb0b2', '#ffdb6d', '#ee9191', '#ffffff', '#888094'], + type: 'gradient', + }, + { + value: 'paletteLinearStops', + title: 'Linear Gradient with stops', + palette: [ + { + stop: 100, + color: '#54B399', + }, + { + stop: 250, + color: '#D36086', + }, + { + stop: 350, + color: '#9170B8', + }, + { + stop: 470, + color: '#F5A700', + }, + ], + type: 'gradient', + }, + { + value: 'custom', + title: 'Plain text as a custom option', + type: 'text', + }, ]; describe('EuiColorPalettePicker', () => { @@ -46,122 +80,75 @@ describe('EuiColorPalettePicker', () => { {...requiredProps} palettes={palettes} onChange={() => {}} - valueOfSelected="palette1" /> ); expect(component).toMatchSnapshot(); }); - describe('props', () => { - test('selectionDisplay title is rendered', () => { - const component = render( - {}} - valueOfSelected="palette1" - selectionDisplay="title" - /> - ); - - expect(component).toMatchSnapshot(); - }); - - test('palettes with type fixed is rendered', () => { - const component = render( - {}} - valueOfSelected="palette1" - /> - ); - - expect(component).toMatchSnapshot(); - }); - - test('palettes with type gradient is rendered', () => { - const component = render( - {}} - valueOfSelected="palette1" - /> - ); - - expect(component).toMatchSnapshot(); - }); - - test('palettes with type gradient with stops is rendered', () => { - const component = render( - {}} - valueOfSelected="palette1" - /> - ); - - expect(component).toMatchSnapshot(); - }); - - test('palettes with type text is rendered', () => { - const component = render( - {}} - valueOfSelected="custom" - /> - ); - - expect(component).toMatchSnapshot(); - }); + test('is rendered with a selected fixed palette', () => { + const component = render( + {}} + valueOfSelected="paletteFixed" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('is rendered with a selected gradient palette', () => { + const component = render( + {}} + valueOfSelected="paletteLinear" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('is rendered with a selected gradient palette with stops', () => { + const component = render( + {}} + valueOfSelected="paletteLinearStops" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('is rendered with a selected custom text', () => { + const component = render( + {}} + valueOfSelected="custom" + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('is rendered with the prop selectionDisplay set as title ', () => { + const component = render( + {}} + valueOfSelected="paletteFixed" + selectionDisplay="title" + /> + ); + + expect(component).toMatchSnapshot(); }); }); From c2bf5b2917b96a8279d3bb587b9af66932c34df7 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 21 May 2020 11:43:29 +0100 Subject: [PATCH 30/45] Improve text --- .../src/views/color_picker/color_picker_example.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 87f0365986f..7aef1a8d380 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -324,11 +324,11 @@ export const ColorPickerExample = {

    Use the palettes prop to pass your palettes as - an array of objects. For each object, you should pass a palette as - an array of hex values and you should specify if the{' '} - type is fixed or{' '} - gradient. Use fixed palettes - for categorical data and gradient palettes for{' '} + an array of objects. For each object, you should pass a palette + (array of hex values) and specify if the type{' '} + is fixed or gradient. Use{' '} + fixed palettes for categorical data and{' '} + gradient palettes for{' '} continuous data.

    From 1d9c50b56a0acf221000afb65ecb6aa0a1f3d552 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 28 May 2020 13:01:35 +0100 Subject: [PATCH 31/45] Addressing review --- .../src/views/color_picker/color_palette_picker.tsx | 10 +++++----- .../color_palette_picker/_color_palette_picker.scss | 13 ++++--------- .../color_palette_picker/color_palette_picker.tsx | 2 +- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index 43bd61b0502..fb089dcaeb5 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -33,19 +33,19 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [ palette: [ { stop: 100, - color: '#54B399', + color: 'white', }, { stop: 250, - color: '#D36086', + color: 'gray', }, { stop: 350, - color: '#9170B8', + color: 'dimgray', }, { stop: 470, - color: '#F5A700', + color: 'black', }, ], type: 'gradient', @@ -79,7 +79,7 @@ export const ColorPalettePicker = () => { onChange={() => setSelectionDisplay(!selectionDisplay)} /> - + div + div { - margin-top: $euiSizeXS; - } - } - &__itemTitle { - @include euiText; @include euiFontSizeXS; } &__itemGradient { - display: flex; - flex-direction: row; border-radius: $euiBorderRadius; overflow: hidden; height: $euiSizeS; box-shadow: inset 0 0 0 1px transparentize($euiColorFullShade, .9); } + + &__itemTitle + &__itemGradient { + margin-top: $euiSizeXS; + } } diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index bb41008fab1..748020a4186 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -46,7 +46,7 @@ export interface EuiColorPalettePickerPaletteProps { type: 'fixed' | 'gradient' | 'text'; /** * Array of color `strings` or `ColorStops` in the form of - * { stop: number, color: string } + * `{ stop: number, color: string }` */ palette?: string[] | ColorStop[]; } From 6dfb4e4397f208f43addb89884c67e4a76f08e0c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 May 2020 13:03:11 +0100 Subject: [PATCH 32/45] Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson --- src/components/color_picker/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/utils.ts b/src/components/color_picker/utils.ts index f0466611a07..75112e54e18 100644 --- a/src/components/color_picker/utils.ts +++ b/src/components/color_picker/utils.ts @@ -159,7 +159,7 @@ export const getChromaColor = (input?: string | null, allowOpacity = false) => { // Given an array of objects with key value pairs stop/color // Or given just an array of hex colors returns a css linear-gradient -export const getLinearGradient = (palette: any) => { +export const getLinearGradient = (palette: string[] | ColorStop[]) => { const intervals = palette.length; let linearGradient; From dab0fc3139a06429bc6a6a010baedc5a83e10040 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 May 2020 13:03:22 +0100 Subject: [PATCH 33/45] Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson --- src/components/color_picker/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/utils.ts b/src/components/color_picker/utils.ts index 75112e54e18..2bf3a4c9251 100644 --- a/src/components/color_picker/utils.ts +++ b/src/components/color_picker/utils.ts @@ -202,7 +202,7 @@ export const getLinearGradient = (palette: string[] | ColorStop[]) => { }; // Given an array of hex values -export const getFixedLinearGradient = (palette: any) => { +export const getFixedLinearGradient = (palette: string[]) => { const intervals = palette.length; let fixedLinearGradient; From 4d69d195b00178fc450b934e3ba7a8290b200efb Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 May 2020 13:03:44 +0100 Subject: [PATCH 34/45] Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index bb41008fab1..bd9a51f5fd5 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -108,7 +108,7 @@ export const EuiColorPalettePicker: FunctionComponent< } }; - const paletteOptions = palettes.map((item: any) => { + const paletteOptions = palettes.map((item: EuiColorPalettePickerPaletteProps) => { return { value: String(item.value), inputDisplay: getInputDisplay(item.title, item.palette, item.type), From aa276d9787a3f7527018ef9d99d61d9e1f1f5d9c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 May 2020 13:04:24 +0100 Subject: [PATCH 35/45] Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index bd9a51f5fd5..d0c640217aa 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -84,7 +84,7 @@ export const EuiColorPalettePicker: FunctionComponent< selectionDisplay = 'palette', ...rest }) => { - const getPalette = (palette: [], type: string) => { + const getPalette = (palette: EuiColorPalettePickerPaletteProps[], type: string) => { const background = type === 'fixed' ? getFixedLinearGradient(palette) From 4e4d2e51693a41a88a6069fdea6ace93960229b6 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 May 2020 13:08:30 +0100 Subject: [PATCH 36/45] Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson --- src/components/color_picker/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/utils.ts b/src/components/color_picker/utils.ts index 2bf3a4c9251..78e60a31ac6 100644 --- a/src/components/color_picker/utils.ts +++ b/src/components/color_picker/utils.ts @@ -164,7 +164,7 @@ export const getLinearGradient = (palette: string[] | ColorStop[]) => { let linearGradient; - const paletteHasStops = palette.some((item: any) => { + const paletteHasStops = palette.some((item: string | ColorStop) => { return typeof item === 'object'; }); From 8e558e5ded4034e3b8540cf630f353d721e228bc Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 May 2020 13:09:26 +0100 Subject: [PATCH 37/45] Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 046d337bf82..3e2fc48613d 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -100,7 +100,7 @@ export const EuiColorPalettePicker: FunctionComponent< const getText = (title: any) => title; - const getInputDisplay = (title: string, palette: [], type: string) => { + const getInputDisplay = (title: string, palette: EuiColorPalettePickerPaletteProps[], type: string) => { if (selectionDisplay === 'title') { return getText(title); } else { From 77b7bc8e9b17c0dff48953463d4d2c68595e39a1 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 28 May 2020 14:35:43 +0100 Subject: [PATCH 38/45] Improving TS --- .../color_picker/color_palette_picker.tsx | 2 +- .../color_palette_picker.tsx | 52 +++++++++++-------- src/components/color_picker/utils.ts | 24 +++++---- 3 files changed, 45 insertions(+), 33 deletions(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index fb089dcaeb5..be502003e78 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -79,7 +79,7 @@ export const ColorPalettePicker = () => { onChange={() => setSelectionDisplay(!selectionDisplay)} /> - + { - const getPalette = (palette: EuiColorPalettePickerPaletteProps[], type: string) => { + const getPalette = (palette: string[] | ColorStop[], type: string) => { const background = type === 'fixed' - ? getFixedLinearGradient(palette) + ? getFixedLinearGradient(palette as string[]) : getLinearGradient(palette); return ( @@ -98,32 +98,38 @@ export const EuiColorPalettePicker: FunctionComponent< ); }; - const getText = (title: any) => title; - - const getInputDisplay = (title: string, palette: EuiColorPalettePickerPaletteProps[], type: string) => { + const getInputDisplay = ( + title: string, + palette: string[] | ColorStop[], + type: string + ) => { if (selectionDisplay === 'title') { - return getText(title); + return title; } else { - return type === 'text' ? getText(title) : getPalette(palette, type); + return type === 'text' ? title : getPalette(palette, type); } }; - const paletteOptions = palettes.map((item: EuiColorPalettePickerPaletteProps) => { - return { - value: String(item.value), - inputDisplay: getInputDisplay(item.title, item.palette, item.type), - dropdownDisplay: ( -
    - {item.title && item.type !== 'text' && ( -
    {item.title}
    - )} - {item.type !== 'text' - ? getPalette(item.palette, item.type) - : getText(item.title)} -
    - ), - }; - }); + const paletteOptions = palettes.map( + (item: EuiColorPalettePickerPaletteProps) => { + return { + value: String(item.value), + inputDisplay: getInputDisplay(item.title!, item.palette!, item.type), + dropdownDisplay: ( +
    + {item.title && item.type !== 'text' && ( +
    + {item.title} +
    + )} + {item.type !== 'text' + ? getPalette(item.palette!, item.type) + : item.title} +
    + ), + }; + } + ); return ( { return null; }; -// Given an array of objects with key value pairs stop/color -// Or given just an array of hex colors returns a css linear-gradient +// Given an array of objects with key value pairs stop/color returns a css linear-gradient +// Or given an array of hex colors returns a css linear-gradient export const getLinearGradient = (palette: string[] | ColorStop[]) => { const intervals = palette.length; @@ -169,18 +170,22 @@ export const getLinearGradient = (palette: string[] | ColorStop[]) => { }); if (paletteHasStops) { - linearGradient = `linear-gradient(to right, ${palette[0].color} 0%,`; + const paletteColorStop = palette as ColorStop[]; - const decimal = 100 / palette[palette.length - 1].stop; + linearGradient = `linear-gradient(to right, ${ + paletteColorStop[0].color + } 0%,`; + + const decimal = 100 / paletteColorStop[paletteColorStop.length - 1].stop; for (let i = 1; i < intervals - 1; i++) { - linearGradient = `${linearGradient} ${palette[i].color}\ ${Math.floor( - palette[i].stop * decimal - )}%,`; + linearGradient = `${linearGradient} ${ + paletteColorStop[i].color + }\ ${Math.floor(paletteColorStop[i].stop * decimal)}%,`; } const linearGradientStyle = `${linearGradient} ${ - palette[palette.length - 1].color + paletteColorStop[palette.length - 1].color } 100%)`; return linearGradientStyle; @@ -201,8 +206,9 @@ export const getLinearGradient = (palette: string[] | ColorStop[]) => { } }; -// Given an array of hex values +// Given an array of hex colors returns a css linear-gradient with individual color blocks export const getFixedLinearGradient = (palette: string[]) => { + console.log(palette); const intervals = palette.length; let fixedLinearGradient; From 7794f0b9d97ef170bec21e6506cc6ed60d2c2874 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 28 May 2020 15:24:05 +0100 Subject: [PATCH 39/45] Improving palette doc --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 1c644468532..795067a0272 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -46,7 +46,7 @@ export interface EuiColorPalettePickerPaletteProps { type: 'fixed' | 'gradient' | 'text'; /** * Array of color `strings` or `ColorStops` in the form of - * `{ stop: number, color: string }` + * `{ stop: number, color: string }`. The stops must be numbers in a ordered range. */ palette?: string[] | ColorStop[]; } From 45c7323d837321879acb48df5172084120574ff6 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 28 May 2020 15:26:34 +0100 Subject: [PATCH 40/45] Palette doc --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index 795067a0272..afe72a82723 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -46,7 +46,7 @@ export interface EuiColorPalettePickerPaletteProps { type: 'fixed' | 'gradient' | 'text'; /** * Array of color `strings` or `ColorStops` in the form of - * `{ stop: number, color: string }`. The stops must be numbers in a ordered range. + * `{ stop: number, color: string }`. The stops must be numbers in an ordered range. */ palette?: string[] | ColorStop[]; } From a6674a384bfd5cffcc7328092b571fbfc6838083 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 29 May 2020 10:46:49 -0400 Subject: [PATCH 41/45] Changing name of gray palette --- src-docs/src/views/color_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/color_picker/color_palette_picker.tsx b/src-docs/src/views/color_picker/color_palette_picker.tsx index be502003e78..44bdcb91362 100644 --- a/src-docs/src/views/color_picker/color_palette_picker.tsx +++ b/src-docs/src/views/color_picker/color_palette_picker.tsx @@ -29,7 +29,7 @@ const palettes: EuiColorPalettePickerPaletteProps[] = [ }, { value: 'pallette_3', - title: 'Beautiful Gradient (gradient with stops)', + title: 'Grayscale (gradient with stops)', palette: [ { stop: 100, From 344ab48dd83ff32dec19e77f96087d1bbda15406 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 29 May 2020 10:53:45 -0400 Subject: [PATCH 42/45] Slimming the description a bit --- src-docs/src/views/color_picker/color_picker_example.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js index 7aef1a8d380..da8f6b04405 100644 --- a/src-docs/src/views/color_picker/color_picker_example.js +++ b/src-docs/src/views/color_picker/color_picker_example.js @@ -319,17 +319,14 @@ export const ColorPickerExample = {

    Use EuiColorPalettePicker to select palettes to - apply colors to data like maps, bar charts, or any other type of - data visualization. + apply colors to data visualization like maps and charts.

    Use the palettes prop to pass your palettes as an array of objects. For each object, you should pass a palette - (array of hex values) and specify if the type{' '} - is fixed or gradient. Use{' '} + (array of hex values) and specify the type. Use{' '} fixed palettes for categorical data and{' '} - gradient palettes for{' '} - continuous data. + gradient palettes for continuous data.

    From 90035780b661416780a4fcfb6bb318b34b005a78 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 1 Jun 2020 15:35:02 +0100 Subject: [PATCH 43/45] removing console log --- src/components/color_picker/utils.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/color_picker/utils.ts b/src/components/color_picker/utils.ts index 82ecdb9fbe3..11e1c6d4403 100644 --- a/src/components/color_picker/utils.ts +++ b/src/components/color_picker/utils.ts @@ -208,7 +208,6 @@ export const getLinearGradient = (palette: string[] | ColorStop[]) => { // Given an array of hex colors returns a css linear-gradient with individual color blocks export const getFixedLinearGradient = (palette: string[]) => { - console.log(palette); const intervals = palette.length; let fixedLinearGradient; From 93fc2b9dd5998f2be65aa88946c4f581204b129b Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Tue, 2 Jun 2020 13:25:14 -0600 Subject: [PATCH 44/45] more strict types --- .../color_palette_picker.tsx | 87 +++++++++++++------ 1 file changed, 61 insertions(+), 26 deletions(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index afe72a82723..e6c8acf017f 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -28,7 +28,7 @@ import { ColorStop } from '../color_stops'; import { EuiSuperSelectProps } from '../../form/super_select'; -export interface EuiColorPalettePickerPaletteProps { +interface EuiColorPalettePickerPaletteText { /** * For storing unique value of item */ @@ -36,14 +36,11 @@ export interface EuiColorPalettePickerPaletteProps { /** * The name of your palette */ - title?: string; + title: string; /** - * Specify if the palette is - * `fixed`: individual color blocks; or - * `gradient`: each color fades into the next; or * `text`: a text only option (a title is required). */ - type: 'fixed' | 'gradient' | 'text'; + type: 'text'; /** * Array of color `strings` or `ColorStops` in the form of * `{ stop: number, color: string }`. The stops must be numbers in an ordered range. @@ -51,6 +48,50 @@ export interface EuiColorPalettePickerPaletteProps { palette?: string[] | ColorStop[]; } +interface EuiColorPalettePickerPaletteFixed { + /** + * For storing unique value of item + */ + value: string; + /** + * The name of your palette + */ + title?: string; + /** + * `fixed`: individual color blocks + */ + type: 'fixed'; + /** + * Array of color `strings`. The stops must be numbers in an ordered range. + */ + palette: string[]; +} + +interface EuiColorPalettePickerPaletteGradient { + /** + * For storing unique value of item + */ + value: string; + /** + * The name of your palette + */ + title?: string; + /** + * `gradient`: each color fades into the next + */ + type: 'gradient'; + /** + * Array of color `strings` or `ColorStops` in the form of + * `{ stop: number, color: string }`. The stops must be numbers in an ordered range. + */ + palette: string[] | ColorStop[]; +} + +export type EuiColorPalettePickerPaletteProps = + | EuiColorPalettePickerPaletteText + | EuiColorPalettePickerPaletteFixed + | EuiColorPalettePickerPaletteGradient; + export type EuiColorPalettePickerProps = CommonProps & Omit< EuiSuperSelectProps, @@ -84,11 +125,15 @@ export const EuiColorPalettePicker: FunctionComponent< selectionDisplay = 'palette', ...rest }) => { - const getPalette = (palette: string[] | ColorStop[], type: string) => { + const getPalette = ( + item: + | EuiColorPalettePickerPaletteFixed + | EuiColorPalettePickerPaletteGradient + ) => { const background = - type === 'fixed' - ? getFixedLinearGradient(palette as string[]) - : getLinearGradient(palette); + item.type === 'fixed' + ? getFixedLinearGradient(item.palette) + : getLinearGradient(item.palette); return (
    { - if (selectionDisplay === 'title') { - return title; - } else { - return type === 'text' ? title : getPalette(palette, type); - } - }; - const paletteOptions = palettes.map( (item: EuiColorPalettePickerPaletteProps) => { + const paletteForDisplay = item.type !== 'text' ? getPalette(item) : null; return { value: String(item.value), - inputDisplay: getInputDisplay(item.title!, item.palette!, item.type), + inputDisplay: + selectionDisplay === 'title' || item.type === 'text' + ? item.title + : paletteForDisplay, dropdownDisplay: (
    {item.title && item.type !== 'text' && ( @@ -122,9 +159,7 @@ export const EuiColorPalettePicker: FunctionComponent< {item.title}
    )} - {item.type !== 'text' - ? getPalette(item.palette!, item.type) - : item.title} + {item.type === 'text' ? item.title : paletteForDisplay}
    ), }; From ee7b0b7127322d753bb23c04fa8d929f26dbbefa Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 2 Jun 2020 20:45:35 +0100 Subject: [PATCH 45/45] Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx --- .../color_picker/color_palette_picker/color_palette_picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx index e6c8acf017f..3ecca462b40 100644 --- a/src/components/color_picker/color_palette_picker/color_palette_picker.tsx +++ b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx @@ -62,7 +62,7 @@ interface EuiColorPalettePickerPaletteFixed { */ type: 'fixed'; /** - * Array of color `strings`. The stops must be numbers in an ordered range. + * Array of color `strings`. */ palette: string[]; }