Update some types

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',
  },
 ];
 

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 = `<EuiColorPicker
 import { ColorPalettePicker } from './color_palette_picker';
 const colorPalettePickerSource = require('!!raw-loader!./color_palette_picker');
 const colorPalettePickerHtml = renderToHtml(ColorPalettePicker);
-const colorPalettePickerSnippet = `<EuiColorPalettePicker 
+const colorPalettePickerSnippet = `<EuiColorPalettePicker
  palettes={[
  {
  value: 'palette1',
@@ -358,7 +359,7 @@ export const ColorPickerExample = {
  code: colorPalettePickerHtml,
  },
  ],
- props: { EuiColorPalettePicker },
+ props: { EuiColorPalettePicker, EuiColorPalettePickerPalette },
  snippet: colorPalettePickerSnippet,
  demo: <ColorPalettePicker />,
  },

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
+> = () => <div />;

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 {

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', () => {

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 (
  <div className="euiColorPalettePicker__colorContainer">
  {palette.map((hexCode: string, index: number) => (

src/components/color_picker/color_palette_picker/index.ts

@@ -20,4 +20,5 @@
 export {
  EuiColorPalettePicker,
  EuiColorPalettePickerProps,
+ EuiColorPalettePickerPaletteProps,
 } from './color_palette_picker';