Add EuiColorPalettePicker #3192

miukimiu · 2020-03-30T15:04:42Z

Summary

Closes #2795

This PR adds a Color Palette Picker component called EuiColorPalettePicker.

While working on this PR I tried to address a few suggestions:

The palette type gradient should be an array of objects [{stop: 100, color: '#54B399'}] rather than a CSS linear-gradient
The fixed palette should be a gradient rather than different flex items with a background. The reason for changing this is that the flex items create a small empty space on the right side. Also the box-shadow: inset doesn't work with the flex items.
Custom options should follow the pattern of the EuiSuperSelect. I tried and the code became complex and for this reason, I created a text option. I think it is a simpler solution and also we don't lose the purpose of the palette picker

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs
Added documentation examples
Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

…into color-palette-picker

kibanamachine · 2020-04-24T12:23:02Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-04-24T13:14:29Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-04-24T14:51:01Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-04-27T17:54:12Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-04-28T19:49:46Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

Update some types

kibanamachine · 2020-05-05T16:05:08Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-05-06T12:09:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-05-08T16:38:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-05-11T16:43:49Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-05-12T14:57:30Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

…_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

…into color-palette-picker

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

…_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

kibanamachine · 2020-05-28T14:00:24Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

kibanamachine · 2020-05-28T14:52:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

cchaos

🎉 LGTM! We need to get this into Kibana ASAP 😆

It looks like there's a still a couple unchecked items in the PR checklist though that you might want to cover.

kibanamachine · 2020-05-29T15:14:52Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

miukimiu · 2020-06-01T13:58:11Z

Thanks @cchaos, I'm covering now the unchecked items from the PR checklist and I'll be waiting for another review from @thompsongl because I changed a few TS things.

miukimiu · 2020-06-01T15:46:23Z

jenkins test this

kibanamachine · 2020-06-01T16:08:08Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

thompsongl

We're close here. I just want to solidify the EuiColorPalettePickerPaletteProps interface so it's a bit more clear to consumers how to display what they want.

src/components/color_picker/color_palette_picker/color_palette_picker.tsx

thompsongl · 2020-06-02T19:33:51Z

PR: miukimiu#5

…_picker.tsx

More strict types

kibanamachine · 2020-06-02T20:09:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3192/

thompsongl

This LGTM. @miukimiu will have some follow-up work on the palette display bit, which may also enable more flexibility with option types (fixed palettes with ColorStop values, for instance). For now, we're protected against error states and malformed options.

* Adding initial code * Adding initial code * Adding getLinearGradient method * Improving palettes * initial tests * More improvements * Deleting palettes file * Adding display togles * Simplifying button * Custom option value * Update some types * getFixedLinearGradient * Text as an option * Improving props description * Improving sass * Adding selectionDisplay * More examples * Addressing pr review * Update src-docs/src/views/color_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Extending EuiSuperSelectProp * Simplifying structure * Changelog * Improving example * Improving snippet * Adding more tests * Improving props description * Improving docs text * Improve text * Addressing review * Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Update src/components/color_picker/utils.ts Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> * Improving TS * Improving palette doc * Palette doc * Changing name of gray palette * Slimming the description a bit * removing console log * more strict types * Update src/components/color_picker/color_palette_picker/color_palette_picker.tsx Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

miukimiu added 3 commits March 30, 2020 03:32

Adding initial code

7620c69

Adding initial code

c13ec9c

Merge branch 'color-palette-picker' of https://github.com/miukimiu/eui …

8cf0339

…into color-palette-picker

miukimiu mentioned this pull request Mar 30, 2020

Add Color Palette Picker component and widget #2795

Closed

miukimiu added 3 commits April 22, 2020 01:37

Merge remote-tracking branch 'upstream/master' into color-palette-picker

e6482ac

Adding getLinearGradient method

079488a

Improving palettes

5541dbc

initial tests

25e684e

miukimiu added 2 commits April 24, 2020 15:26

More improvements

2c353dc

Merge remote-tracking branch 'upstream/master' into color-palette-picker

f4da589

Deleting palettes file

b3357fe

miukimiu added 3 commits April 28, 2020 18:31

Adding display togles

9858418

Simplifying button

5740a20

Custom option value

5996803

cchaos and others added 2 commits May 5, 2020 11:34

Update some types

d695167

Merge pull request #2 from cchaos/miukimiu-color-palette-picker

7cc2855

Update some types

miukimiu added 2 commits May 6, 2020 12:43

getFixedLinearGradient

f57b801

Merge remote-tracking branch 'upstream/master' into color-palette-picker

01b88f8

Text as an option

c3ae30b

miukimiu force-pushed the color-palette-picker branch from 203a517 to c3ae30b Compare May 12, 2020 14:36

miukimiu and others added 6 commits May 28, 2020 13:03

Update src/components/color_picker/color_palette_picker/color_palette…

4d69d19

…_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

Update src/components/color_picker/color_palette_picker/color_palette…

aa276d9

…_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

Merge branch 'color-palette-picker' of https://github.com/miukimiu/eui …

4743542

…into color-palette-picker

Update src/components/color_picker/utils.ts

4e4d2e5

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

Update src/components/color_picker/color_palette_picker/color_palette…

8e558e5

…_picker.tsx Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

Improving TS

77b7bc8

miukimiu requested review from cchaos and thompsongl May 28, 2020 14:02

miukimiu added 2 commits May 28, 2020 15:24

Improving palette doc

7794f0b

Palette doc

45c7323

cchaos added 2 commits May 29, 2020 10:46

Changing name of gray palette

a6674a3

Slimming the description a bit

344ab48

cchaos approved these changes May 29, 2020

View reviewed changes

removing console log

9003578

thompsongl suggested changes Jun 1, 2020

View reviewed changes

src/components/color_picker/color_palette_picker/color_palette_picker.tsx Outdated Show resolved Hide resolved

more strict types

93fc2b9

miukimiu added 2 commits June 2, 2020 20:45

Update src/components/color_picker/color_palette_picker/color_palette…

ee7b0b7

…_picker.tsx

Merge pull request #5 from thompsongl/color-palette-picker

62dc72c

More strict types

thompsongl approved these changes Jun 2, 2020

View reviewed changes

miukimiu merged commit c7795f1 into elastic:master Jun 2, 2020

thompsongl mentioned this pull request Jun 3, 2020

Upgrade EUI to v24.1.0 elastic/kibana#68141

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add EuiColorPalettePicker #3192

Add EuiColorPalettePicker #3192

miukimiu commented Mar 30, 2020 •

edited

Loading

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 27, 2020

kibanamachine commented Apr 28, 2020

kibanamachine commented May 5, 2020

kibanamachine commented May 6, 2020

kibanamachine commented May 8, 2020

kibanamachine commented May 11, 2020

kibanamachine commented May 12, 2020

kibanamachine commented May 28, 2020

kibanamachine commented May 28, 2020

cchaos left a comment

kibanamachine commented May 29, 2020

miukimiu commented Jun 1, 2020

miukimiu commented Jun 1, 2020

kibanamachine commented Jun 1, 2020

thompsongl left a comment

thompsongl commented Jun 2, 2020

kibanamachine commented Jun 2, 2020

thompsongl left a comment

Add EuiColorPalettePicker #3192

Add EuiColorPalettePicker #3192

Conversation

miukimiu commented Mar 30, 2020 • edited Loading

Summary

Checklist

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 24, 2020

kibanamachine commented Apr 27, 2020

kibanamachine commented Apr 28, 2020

kibanamachine commented May 5, 2020

kibanamachine commented May 6, 2020

kibanamachine commented May 8, 2020

kibanamachine commented May 11, 2020

kibanamachine commented May 12, 2020

kibanamachine commented May 28, 2020

kibanamachine commented May 28, 2020

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented May 29, 2020

miukimiu commented Jun 1, 2020

miukimiu commented Jun 1, 2020

kibanamachine commented Jun 1, 2020

thompsongl left a comment

Choose a reason for hiding this comment

thompsongl commented Jun 2, 2020

kibanamachine commented Jun 2, 2020

thompsongl left a comment

Choose a reason for hiding this comment

miukimiu commented Mar 30, 2020 •

edited

Loading