[pre-req] Convert Palettes and Components (#69065)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/canvas/.storybook/config.js

@@ -59,6 +59,9 @@ function loadStories() {
   // Find all files ending in *.examples.ts
   const req = require.context('./..', true, /.(stories|examples).tsx$/);
   req.keys().forEach(filename => req(filename));
+
+  // Import Canvas CSS
+  require('../public/style/index.scss')
 }
 
 // Set up the Storybook environment with custom settings.

x-pack/plugins/canvas/.storybook/webpack.config.js

@@ -199,6 +199,7 @@ module.exports = async ({ config }) => {
   config.resolve.alias['ui/url/absolute_to_parsed_url'] = path.resolve(__dirname, '../tasks/mocks/uiAbsoluteToParsedUrl');
   config.resolve.alias['ui/chrome'] = path.resolve(__dirname, '../tasks/mocks/uiChrome');
   config.resolve.alias.ui = path.resolve(KIBANA_ROOT, 'src/legacy/ui/public');
+  config.resolve.alias['src/legacy/ui/public/styles/styling_constants'] = path.resolve(KIBANA_ROOT, 'src/legacy/ui/public/styles/_styling_constants.scss');
   config.resolve.alias.ng_mock$ = path.resolve(KIBANA_ROOT, 'src/test_utils/public/ng_mock');
 
   return config;

x-pack/plugins/canvas/canvas_plugin_src/functions/common/palette.test.js

@@ -5,7 +5,7 @@
  */
 
 import { functionWrapper } from '../../../__tests__/helpers/function_wrapper';
-import { palettes } from '../../../common/lib/palettes';
+import { paulTor14 } from '../../../common/lib/palettes';
 import { palette } from './palette';
 
 describe('palette', () => {
@@ -25,7 +25,7 @@ describe('palette', () => {
 
       it('defaults to pault_tor_14 colors', () => {
         const result = fn(null);
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors);
+        expect(result.colors).toEqual(paulTor14.colors);
       });
     });
 
@@ -47,17 +47,17 @@ describe('palette', () => {
     describe('reverse', () => {
       it('reverses order of the colors', () => {
         const result = fn(null, { reverse: true });
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors.reverse());
+        expect(result.colors).toEqual(paulTor14.colors.reverse());
       });
 
       it('keeps the original order of the colors', () => {
         const result = fn(null, { reverse: false });
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors);
+        expect(result.colors).toEqual(paulTor14.colors);
       });
 
       it(`defaults to 'false`, () => {
         const result = fn(null);
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors);
+        expect(result.colors).toEqual(paulTor14.colors);
       });
     });
   });

x-pack/plugins/canvas/canvas_plugin_src/functions/common/palette.ts

@@ -5,8 +5,7 @@
  */
 
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
-// @ts-expect-error untyped local
-import { palettes } from '../../../common/lib/palettes';
+import { paulTor14 } from '../../../common/lib/palettes';
 import { getFunctionHelp } from '../../../i18n';
 
 interface Arguments {
@@ -52,7 +51,7 @@ export function palette(): ExpressionFunctionDefinition<'palette', null, Argumen
     },
     fn: (input, args) => {
       const { color, reverse, gradient } = args;
-      const colors = ([] as string[]).concat(color || palettes.paul_tor_14.colors);
+      const colors = ([] as string[]).concat(color || paulTor14.colors);
 
       return {
         type: 'palette',

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__examples__/__snapshots__/palette.stories.storyshot

@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots arguments/Palette default 1`] = `
+<div
+  className="canvasContainerWrapper"
+  style={
+    Object {
+      "width": "200px",
+    }
+  }
+>
+  <div
+    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="euiPopover__anchor"
+    >
+      <input
+        type="hidden"
+        value="paul_tor_14"
+      />
+      <div
+        className="euiFormControlLayout euiFormControlLayout--compressed"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <span
+            className="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            Select an option: 
+            <div
+              className="euiColorPalettePicker__itemGradient"
+              style={
+                Object {
+                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
+                }
+              }
+            />
+            , is selected
+          </span>
+          <button
+            aria-haspopup="true"
+            aria-labelledby="undefined generated-id"
+            aria-selected={true}
+            className="euiSuperSelectControl euiSuperSelectControl--compressed"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            readOnly={false}
+            role="option"
+            type="button"
+          >
+            <div
+              className="euiColorPalettePicker__itemGradient"
+              style={
+                Object {
+                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
+                }
+              }
+            />
+          </button>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <div
+                aria-hidden="true"
+                className="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__examples__/palette.stories.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { PaletteArgInput } from '../palette';
+import { paulTor14 } from '../../../../common/lib/palettes';
+
+storiesOf('arguments/Palette', module).add('default', () => (
+  <div className="canvasContainerWrapper" style={{ width: '200px' }}>
+    <PaletteArgInput
+      argValue={{
+        type: 'expression',
+        chain: [
+          {
+            arguments: {
+              _: paulTor14.colors,
+              gradient: [paulTor14.gradient],
+            },
+            function: 'palette',
+            type: 'function',
+          },
+        ],
+      }}
+      onValueChange={action('onValueChange')}
+      renderError={action('renderError')}
+    />
+  </div>
+));

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/index.ts

@@ -15,7 +15,6 @@ import { imageUpload } from './image_upload';
 // @ts-expect-error untyped local
 import { number } from './number';
 import { numberFormatInitializer } from './number_format';
-// @ts-expect-error untyped local
 import { palette } from './palette';
 // @ts-expect-error untyped local
 import { percentage } from './percentage';

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/palette.tsx

@@ -4,45 +4,63 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { getType } from '@kbn/interpreter/common';
+import { ExpressionAstFunction, ExpressionAstExpression } from 'src/plugins/expressions';
 import { PalettePicker } from '../../../public/components/palette_picker';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
 import { ArgumentStrings } from '../../../i18n';
+import { identifyPalette, ColorPalette } from '../../../common/lib';
 
 const { Palette: strings } = ArgumentStrings;
 
-const PaletteArgInput = ({ onValueChange, argValue, renderError }) => {
-  // Why is this neccesary? Does the dialog really need to know what parameter it is setting?
-
-  const throwNotParsed = () => renderError();
+interface Props {
+  onValueChange: (value: ExpressionAstExpression) => void;
+  argValue: ExpressionAstExpression;
+  renderError: () => void;
+  argId?: string;
+}
 
+export const PaletteArgInput: FC<Props> = ({ onValueChange, argId, argValue, renderError }) => {
   // TODO: This is weird, its basically a reimplementation of what the interpretter would return.
-  // Probably a better way todo this, and maybe a better way to handle template stype objects in general?
-  function astToPalette({ chain }) {
+  // Probably a better way todo this, and maybe a better way to handle template type objects in general?
+  const astToPalette = ({ chain }: { chain: ExpressionAstFunction[] }): ColorPalette | null => {
     if (chain.length !== 1 || chain[0].function !== 'palette') {
-      throwNotParsed();
+      renderError();
+      return null;
     }
+
     try {
       const colors = chain[0].arguments._.map((astObj) => {
         if (getType(astObj) !== 'string') {
-          throwNotParsed();
+          renderError();
         }
         return astObj;
-      });
+      }) as string[];
 
-      const gradient = get(chain[0].arguments.gradient, '[0]');
+      const gradient = get<boolean>(chain[0].arguments.gradient, '[0]');
+      const palette = identifyPalette({ colors, gradient });
 
-      return { colors, gradient };
+      if (palette) {
+        return palette;
+      }
+
+      return ({
+        id: 'custom',
+        label: strings.getCustomPaletteLabel(),
+        colors,
+        gradient,
+      } as any) as ColorPalette;
     } catch (e) {
-      throwNotParsed();
+      renderError();
     }
-  }
+    return null;
+  };
 
-  function handleChange(palette) {
-    const astObj = {
+  const handleChange = (palette: ColorPalette): void => {
+    const astObj: ExpressionAstExpression = {
       type: 'expression',
       chain: [
         {
@@ -57,16 +75,20 @@ const PaletteArgInput = ({ onValueChange, argValue, renderError }) => {
     };
 
     onValueChange(astObj);
-  }
+  };
 
   const palette = astToPalette(argValue);
 
-  return (
-    <PalettePicker value={palette} onChange={handleChange} ariaLabel={strings.getDisplayName()} />
-  );
+  if (!palette) {
+    renderError();
+    return null;
+  }
+
+  return <PalettePicker id={argId} palette={palette} onChange={handleChange} />;
 };
 
 PaletteArgInput.propTypes = {
+  argId: PropTypes.string,
   onValueChange: PropTypes.func.isRequired,
   argValue: PropTypes.any.isRequired,
   renderError: PropTypes.func,

x-pack/plugins/canvas/common/lib/index.ts

@@ -26,7 +26,6 @@ export * from './hex_to_rgb';
 export * from './httpurl';
 // @ts-expect-error missing local definition
 export * from './missing_asset';
-// @ts-expect-error missing local definition
 export * from './palettes';
 export * from './pivot_object_array';
 // @ts-expect-error missing local definition

x-pack/plugins/canvas/common/lib/palettes.js

@@ -1,152 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-/*
-  This should be pluggable
-*/
-
-export const palettes = {
-  paul_tor_14: {
-    colors: [
-      '#882E72',
-      '#B178A6',
-      '#D6C1DE',
-      '#1965B0',
-      '#5289C7',
-      '#7BAFDE',
-      '#4EB265',
-      '#90C987',
-      '#CAE0AB',
-      '#F7EE55',
-      '#F6C141',
-      '#F1932D',
-      '#E8601C',
-      '#DC050C',
-    ],
-    gradient: false,
-  },
-  paul_tor_21: {
-    colors: [
-      '#771155',
-      '#AA4488',
-      '#CC99BB',
-      '#114477',
-      '#4477AA',
-      '#77AADD',
-      '#117777',
-      '#44AAAA',
-      '#77CCCC',
-      '#117744',
-      '#44AA77',
-      '#88CCAA',
-      '#777711',
-      '#AAAA44',
-      '#DDDD77',
-      '#774411',
-      '#AA7744',
-      '#DDAA77',
-      '#771122',
-      '#AA4455',
-      '#DD7788',
-    ],
-    gradient: false,
-  },
-  earth_tones: {
-    colors: [
-      '#842113',
-      '#984d23',
-      '#32221c',
-      '#739379',
-      '#dab150',
-      '#4d2521',
-      '#716c49',
-      '#bb3918',
-      '#7e5436',
-      '#c27c34',
-      '#72392e',
-      '#8f8b7e',
-    ],
-    gradient: false,
-  },
-  canvas: {
-    colors: [
-      '#01A4A4',
-      '#CC6666',
-      '#D0D102',
-      '#616161',
-      '#00A1CB',
-      '#32742C',
-      '#F18D05',
-      '#113F8C',
-      '#61AE24',
-      '#D70060',
-    ],
-    gradient: false,
-  },
-  color_blind: {
-    colors: [
-      '#1ea593',
-      '#2b70f7',
-      '#ce0060',
-      '#38007e',
-      '#fca5d3',
-      '#f37020',
-      '#e49e29',
-      '#b0916f',
-      '#7b000b',
-      '#34130c',
-    ],
-    gradient: false,
-  },
-  elastic_teal: {
-    colors: ['#C5FAF4', '#0F6259'],
-    gradient: true,
-  },
-  elastic_blue: {
-    colors: ['#7ECAE3', '#003A4D'],
-    gradient: true,
-  },
-  elastic_yellow: {
-    colors: ['#FFE674', '#4D3F00'],
-    gradient: true,
-  },
-  elastic_pink: {
-    colors: ['#FEA8D5', '#531E3A'],
-    gradient: true,
-  },
-  elastic_green: {
-    colors: ['#D3FB71', '#131A00'],
-    gradient: true,
-  },
-  elastic_orange: {
-    colors: ['#FFC68A', '#7B3F00'],
-    gradient: true,
-  },
-  elastic_purple: {
-    colors: ['#CCC7DF', '#130351'],
-    gradient: true,
-  },
-  green_blue_red: {
-    colors: ['#D3FB71', '#7ECAE3', '#f03b20'],
-    gradient: true,
-  },
-  yellow_green: {
-    colors: ['#f7fcb9', '#addd8e', '#31a354'],
-    gradient: true,
-  },
-  yellow_blue: {
-    colors: ['#edf8b1', '#7fcdbb', '#2c7fb8'],
-    gradient: true,
-  },
-  yellow_red: {
-    colors: ['#ffeda0', '#feb24c', '#f03b20'],
-    gradient: true,
-  },
-  instagram: {
-    colors: ['#833ab4', '#fd1d1d', '#fcb045'],
-    gradient: true,
-  },
-};

x-pack/plugins/canvas/common/lib/palettes.ts

@@ -0,0 +1,263 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { isEqual } from 'lodash';
+import { LibStrings } from '../../i18n';
+
+const { Palettes: strings } = LibStrings;
+
+/**
+ * This type contains a unions of all supported palette ids.
+ */
+export type PaletteID = typeof palettes[number]['id'];
+
+/**
+ * An interface representing a color palette in Canvas, with a textual label and a set of
+ * hex values.
+ */
+export interface ColorPalette {
+  id: PaletteID;
+  label: string;
+  colors: string[];
+  gradient: boolean;
+}
+
+// This function allows one to create a strongly-typed palette for inclusion in
+// the palette collection.  As a result, the values and labels are known to the
+// type system, preventing one from specifying a non-existent palette at build
+// time.
+function createPalette<
+  RawPalette extends {
+    id: RawPaletteID;
+  },
+  RawPaletteID extends string
+>(palette: RawPalette) {
+  return palette;
+}
+
+/**
+ * Return a palette given a set of colors and gradient.  Returns undefined if the
+ * palette doesn't match.
+ */
+export const identifyPalette = (
+  input: Pick<ColorPalette, 'colors' | 'gradient'>
+): ColorPalette | undefined => {
+  return palettes.find((palette) => {
+    const { colors, gradient } = palette;
+    return gradient === input.gradient && isEqual(colors, input.colors);
+  });
+};
+
+export const paulTor14 = createPalette({
+  id: 'paul_tor_14',
+  label: 'Paul Tor 14',
+  colors: [
+    '#882E72',
+    '#B178A6',
+    '#D6C1DE',
+    '#1965B0',
+    '#5289C7',
+    '#7BAFDE',
+    '#4EB265',
+    '#90C987',
+    '#CAE0AB',
+    '#F7EE55',
+    '#F6C141',
+    '#F1932D',
+    '#E8601C',
+    '#DC050C',
+  ],
+  gradient: false,
+});
+
+export const paulTor21 = createPalette({
+  id: 'paul_tor_21',
+  label: 'Paul Tor 21',
+  colors: [
+    '#771155',
+    '#AA4488',
+    '#CC99BB',
+    '#114477',
+    '#4477AA',
+    '#77AADD',
+    '#117777',
+    '#44AAAA',
+    '#77CCCC',
+    '#117744',
+    '#44AA77',
+    '#88CCAA',
+    '#777711',
+    '#AAAA44',
+    '#DDDD77',
+    '#774411',
+    '#AA7744',
+    '#DDAA77',
+    '#771122',
+    '#AA4455',
+    '#DD7788',
+  ],
+  gradient: false,
+});
+
+export const earthTones = createPalette({
+  id: 'earth_tones',
+  label: strings.getEarthTones(),
+  colors: [
+    '#842113',
+    '#984d23',
+    '#32221c',
+    '#739379',
+    '#dab150',
+    '#4d2521',
+    '#716c49',
+    '#bb3918',
+    '#7e5436',
+    '#c27c34',
+    '#72392e',
+    '#8f8b7e',
+  ],
+  gradient: false,
+});
+
+export const canvas = createPalette({
+  id: 'canvas',
+  label: strings.getCanvas(),
+  colors: [
+    '#01A4A4',
+    '#CC6666',
+    '#D0D102',
+    '#616161',
+    '#00A1CB',
+    '#32742C',
+    '#F18D05',
+    '#113F8C',
+    '#61AE24',
+    '#D70060',
+  ],
+  gradient: false,
+});
+
+export const colorBlind = createPalette({
+  id: 'color_blind',
+  label: strings.getColorBlind(),
+  colors: [
+    '#1ea593',
+    '#2b70f7',
+    '#ce0060',
+    '#38007e',
+    '#fca5d3',
+    '#f37020',
+    '#e49e29',
+    '#b0916f',
+    '#7b000b',
+    '#34130c',
+  ],
+  gradient: false,
+});
+
+export const elasticTeal = createPalette({
+  id: 'elastic_teal',
+  label: strings.getElasticTeal(),
+  colors: ['#7ECAE3', '#003A4D'],
+  gradient: true,
+});
+
+export const elasticBlue = createPalette({
+  id: 'elastic_blue',
+  label: strings.getElasticBlue(),
+  colors: ['#C5FAF4', '#0F6259'],
+  gradient: true,
+});
+
+export const elasticYellow = createPalette({
+  id: 'elastic_yellow',
+  label: strings.getElasticYellow(),
+  colors: ['#FFE674', '#4D3F00'],
+  gradient: true,
+});
+
+export const elasticPink = createPalette({
+  id: 'elastic_pink',
+  label: strings.getElasticPink(),
+  colors: ['#FEA8D5', '#531E3A'],
+  gradient: true,
+});
+
+export const elasticGreen = createPalette({
+  id: 'elastic_green',
+  label: strings.getElasticGreen(),
+  colors: ['#D3FB71', '#131A00'],
+  gradient: true,
+});
+
+export const elasticOrange = createPalette({
+  id: 'elastic_orange',
+  label: strings.getElasticOrange(),
+  colors: ['#FFC68A', '#7B3F00'],
+  gradient: true,
+});
+
+export const elasticPurple = createPalette({
+  id: 'elastic_purple',
+  label: strings.getElasticPurple(),
+  colors: ['#CCC7DF', '#130351'],
+  gradient: true,
+});
+
+export const greenBlueRed = createPalette({
+  id: 'green_blue_red',
+  label: strings.getGreenBlueRed(),
+  colors: ['#D3FB71', '#7ECAE3', '#f03b20'],
+  gradient: true,
+});
+
+export const yellowGreen = createPalette({
+  id: 'yellow_green',
+  label: strings.getYellowGreen(),
+  colors: ['#f7fcb9', '#addd8e', '#31a354'],
+  gradient: true,
+});
+
+export const yellowBlue = createPalette({
+  id: 'yellow_blue',
+  label: strings.getYellowBlue(),
+  colors: ['#edf8b1', '#7fcdbb', '#2c7fb8'],
+  gradient: true,
+});
+
+export const yellowRed = createPalette({
+  id: 'yellow_red',
+  label: strings.getYellowRed(),
+  colors: ['#ffeda0', '#feb24c', '#f03b20'],
+  gradient: true,
+});
+
+export const instagram = createPalette({
+  id: 'instagram',
+  label: strings.getInstagram(),
+  colors: ['#833ab4', '#fd1d1d', '#fcb045'],
+  gradient: true,
+});
+
+export const palettes = [
+  paulTor14,
+  paulTor21,
+  earthTones,
+  canvas,
+  colorBlind,
+  elasticTeal,
+  elasticBlue,
+  elasticYellow,
+  elasticPink,
+  elasticGreen,
+  elasticOrange,
+  elasticPurple,
+  greenBlueRed,
+  yellowGreen,
+  yellowBlue,
+  yellowRed,
+  instagram,
+];

x-pack/plugins/canvas/i18n/components.ts

@@ -586,6 +586,16 @@ export const ComponentStrings = {
         defaultMessage: 'Delete',
       }),
   },
+  PalettePicker: {
+    getEmptyPaletteLabel: () =>
+      i18n.translate('xpack.canvas.palettePicker.emptyPaletteLabel', {
+        defaultMessage: 'None',
+      }),
+    getNoPaletteFoundErrorTitle: () =>
+      i18n.translate('xpack.canvas.palettePicker.noPaletteFoundErrorTitle', {
+        defaultMessage: 'Color palette not found',
+      }),
+  },
   SavedElementsModal: {
     getAddNewElementDescription: () =>
       i18n.translate('xpack.canvas.savedElementsModal.addNewElementDescription', {

x-pack/plugins/canvas/i18n/constants.ts

@@ -20,6 +20,7 @@ export const FONT_FAMILY = '`font-family`';
 export const FONT_WEIGHT = '`font-weight`';
 export const HEX = 'HEX';
 export const HTML = 'HTML';
+export const INSTAGRAM = 'Instagram';
 export const ISO8601 = 'ISO8601';
 export const JS = 'JavaScript';
 export const JSON = 'JSON';

x-pack/plugins/canvas/i18n/index.ts

@@ -11,6 +11,7 @@ export * from './errors';
 export * from './expression_types';
 export * from './elements';
 export * from './functions';
+export * from './lib';
 export * from './renderers';
 export * from './shortcuts';
 export * from './tags';

x-pack/plugins/canvas/i18n/lib.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { CANVAS, INSTAGRAM } from './constants';
+
+export const LibStrings = {
+  Palettes: {
+    getEarthTones: () =>
+      i18n.translate('xpack.canvas.lib.palettes.earthTonesLabel', {
+        defaultMessage: 'Earth Tones',
+      }),
+    getCanvas: () =>
+      i18n.translate('xpack.canvas.lib.palettes.canvasLabel', {
+        defaultMessage: '{CANVAS}',
+        values: {
+          CANVAS,
+        },
+      }),
+
+    getColorBlind: () =>
+      i18n.translate('xpack.canvas.lib.palettes.colorBlindLabel', {
+        defaultMessage: 'Color Blind',
+      }),
+
+    getElasticTeal: () =>
+      i18n.translate('xpack.canvas.lib.palettes.elasticTealLabel', {
+        defaultMessage: 'Elastic Teal',
+      }),
+
+    getElasticBlue: () =>
+      i18n.translate('xpack.canvas.lib.palettes.elasticBlueLabel', {
+        defaultMessage: 'Elastic Blue',
+      }),
+
+    getElasticYellow: () =>
+      i18n.translate('xpack.canvas.lib.palettes.elasticYellowLabel', {
+        defaultMessage: 'Elastic Yellow',
+      }),
+
+    getElasticPink: () =>
+      i18n.translate('xpack.canvas.lib.palettes.elasticPinkLabel', {
+        defaultMessage: 'Elastic Pink',
+      }),
+
+    getElasticGreen: () =>
+      i18n.translate('xpack.canvas.lib.palettes.elasticGreenLabel', {
+        defaultMessage: 'Elastic Green',
+      }),
+
+    getElasticOrange: () =>
+      i18n.translate('xpack.canvas.lib.palettes.elasticOrangeLabel', {
+        defaultMessage: 'Elastic Orange',
+      }),
+
+    getElasticPurple: () =>
+      i18n.translate('xpack.canvas.lib.palettes.elasticPurpleLabel', {
+        defaultMessage: 'Elastic Purple',
+      }),
+
+    getGreenBlueRed: () =>
+      i18n.translate('xpack.canvas.lib.palettes.greenBlueRedLabel', {
+        defaultMessage: 'Green, Blue, Red',
+      }),
+
+    getYellowGreen: () =>
+      i18n.translate('xpack.canvas.lib.palettes.yellowGreenLabel', {
+        defaultMessage: 'Yellow, Green',
+      }),
+
+    getYellowBlue: () =>
+      i18n.translate('xpack.canvas.lib.palettes.yellowBlueLabel', {
+        defaultMessage: 'Yellow, Blue',
+      }),
+
+    getYellowRed: () =>
+      i18n.translate('xpack.canvas.lib.palettes.yellowRedLabel', {
+        defaultMessage: 'Yellow, Red',
+      }),
+
+    getInstagram: () =>
+      i18n.translate('xpack.canvas.lib.palettes.instagramLabel', {
+        defaultMessage: '{INSTAGRAM}',
+        values: {
+          INSTAGRAM,
+        },
+      }),
+  },
+};

x-pack/plugins/canvas/i18n/ui.ts

@@ -232,7 +232,11 @@ export const ArgumentStrings = {
       }),
     getHelp: () =>
       i18n.translate('xpack.canvas.uis.arguments.paletteLabel', {
-        defaultMessage: 'Choose a color palette',
+        defaultMessage: 'The collection of colors used to render the element',
+      }),
+    getCustomPaletteLabel: () =>
+      i18n.translate('xpack.canvas.uis.arguments.customPaletteLabel', {
+        defaultMessage: 'Custom',
       }),
   },
   Percentage: {

x-pack/plugins/canvas/public/components/palette_picker/__examples__/__snapshots__/palette_picker.stories.storyshot

@@ -0,0 +1,237 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
+<div
+  style={
+    Object {
+      "width": "350px",
+    }
+  }
+>
+  <div
+    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="euiPopover__anchor"
+    >
+      <input
+        type="hidden"
+        value="clear"
+      />
+      <div
+        className="euiFormControlLayout euiFormControlLayout--compressed"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <span
+            className="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            Select an option: None, is selected
+          </span>
+          <button
+            aria-haspopup="true"
+            aria-labelledby="undefined generated-id"
+            aria-selected={true}
+            className="euiSuperSelectControl euiSuperSelectControl--compressed"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            readOnly={false}
+            role="option"
+            type="button"
+          >
+            None
+          </button>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <div
+                aria-hidden="true"
+                className="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots components/Color/PalettePicker default 1`] = `
+<div
+  style={
+    Object {
+      "width": "350px",
+    }
+  }
+>
+  <div
+    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="euiPopover__anchor"
+    >
+      <input
+        type="hidden"
+        value="paul_tor_14"
+      />
+      <div
+        className="euiFormControlLayout euiFormControlLayout--compressed"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <span
+            className="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            Select an option: 
+            <div
+              className="euiColorPalettePicker__itemGradient"
+              style={
+                Object {
+                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
+                }
+              }
+            />
+            , is selected
+          </span>
+          <button
+            aria-haspopup="true"
+            aria-labelledby="undefined generated-id"
+            aria-selected={true}
+            className="euiSuperSelectControl euiSuperSelectControl--compressed"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            readOnly={false}
+            role="option"
+            type="button"
+          >
+            <div
+              className="euiColorPalettePicker__itemGradient"
+              style={
+                Object {
+                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
+                }
+              }
+            />
+          </button>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <div
+                aria-hidden="true"
+                className="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
+<div
+  style={
+    Object {
+      "width": "350px",
+    }
+  }
+>
+  <div
+    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="euiPopover__anchor"
+    >
+      <input
+        type="hidden"
+        value="paul_tor_14"
+      />
+      <div
+        className="euiFormControlLayout euiFormControlLayout--compressed"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <span
+            className="euiScreenReaderOnly"
+            id="generated-id"
+          >
+            Select an option: 
+            <div
+              className="euiColorPalettePicker__itemGradient"
+              style={
+                Object {
+                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
+                }
+              }
+            />
+            , is selected
+          </span>
+          <button
+            aria-haspopup="true"
+            aria-labelledby="undefined generated-id"
+            aria-selected={true}
+            className="euiSuperSelectControl euiSuperSelectControl--compressed"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            readOnly={false}
+            role="option"
+            type="button"
+          >
+            <div
+              className="euiColorPalettePicker__itemGradient"
+              style={
+                Object {
+                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
+                }
+              }
+            />
+          </button>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <div
+                aria-hidden="true"
+                className="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

x-pack/plugins/canvas/public/components/palette_picker/__examples__/palette_picker.stories.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import { PalettePicker } from '../palette_picker';
+
+import { paulTor14, ColorPalette } from '../../../../common/lib/palettes';
+
+const Interactive: FC = () => {
+  const [palette, setPalette] = useState<ColorPalette | null>(paulTor14);
+  return <PalettePicker palette={palette} onChange={setPalette} clearable={true} />;
+};
+
+storiesOf('components/Color/PalettePicker', module)
+  .addDecorator((fn) => <div style={{ width: '350px' }}>{fn()}</div>)
+  .add('default', () => <PalettePicker palette={paulTor14} onChange={action('onChange')} />)
+  .add('clearable', () => (
+    <PalettePicker palette={null} onChange={action('onChange')} clearable={true} />
+  ))
+  .add('interactive', () => <Interactive />);

x-pack/plugins/canvas/public/components/palette_picker/index.js

@@ -1,11 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { pure } from 'recompose';
-
-import { PalettePicker as Component } from './palette_picker';
-
-export const PalettePicker = pure(Component);

x-pack/plugins/canvas/public/components/palette_picker/index.ts

@@ -4,8 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
-
-import { PaletteSwatch as Component } from './palette_swatch';
-
-export const PaletteSwatch = pure(Component);
+export { PalettePicker } from './palette_picker';

x-pack/plugins/canvas/public/components/palette_picker/palette_picker.js

@@ -1,60 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { map } from 'lodash';
-import { Popover } from '../popover';
-import { PaletteSwatch } from '../palette_swatch';
-import { palettes } from '../../../common/lib/palettes';
-
-export const PalettePicker = ({ onChange, value, anchorPosition, ariaLabel }) => {
-  const button = (handleClick) => (
-    <button aria-label={ariaLabel} style={{ width: '100%', height: 16 }} onClick={handleClick}>
-      <PaletteSwatch colors={value.colors} gradient={value.gradient} />
-    </button>
-  );
-
-  return (
-    <Popover
-      id="palette-picker-popover"
-      button={button}
-      anchorPosition={anchorPosition}
-      panelClassName="canvasPalettePicker__swatchesPanel"
-      className="canvasPalettePicker__swatchesPopover"
-      anchorClassName="canvasPalettePicker__swatchesPopoverAnchor"
-    >
-      {() => (
-        <div className="canvas canvasPalettePicker__swatches">
-          {map(palettes, (palette, name) => (
-            <button
-              key={name}
-              onClick={() => onChange(palette)}
-              className="canvasPalettePicker__swatch"
-              style={{ width: '100%' }}
-            >
-              <EuiFlexGroup gutterSize="s" alignItems="center">
-                <EuiFlexItem grow={1}>
-                  <span className="canvasPalettePicker__label">{name.replace(/_/g, ' ')}</span>
-                </EuiFlexItem>
-                <EuiFlexItem grow={2}>
-                  <PaletteSwatch colors={palette.colors} gradient={palette.gradient} />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </button>
-          ))}
-        </div>
-      )}
-    </Popover>
-  );
-};
-
-PalettePicker.propTypes = {
-  value: PropTypes.object,
-  onChange: PropTypes.func,
-  anchorPosition: PropTypes.string,
-};

x-pack/plugins/canvas/public/components/palette_picker/palette_picker.scss

@@ -1,42 +0,0 @@
-.canvasPalettePicker {
-  display: inline-block;
-  width: 100%;
-}
-
-.canvasPalettePicker__swatches {
-  @include euiScrollBar;
-
-  width: 280px;
-  height: 250px;
-  overflow-y: scroll;
-}
-
-.canvasPalettePicker__swatchesPanel {
-  padding: $euiSizeS 0 !important; // sass-lint:disable-line no-important
-}
-
-.canvasPalettePicker__swatch {
-  padding: $euiSizeS $euiSize;
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-    background-color: $euiColorLightestShade;
-
-    .canvasPaletteSwatch,
-    .canvasPaletteSwatch__background {
-      transform: scaleY(2);
-    }
-
-    .canvasPalettePicker__label {
-      color: $euiTextColor;
-    }
-  }
-}
-
-.canvasPalettePicker__label {
-  font-size: $euiFontSizeXS;
-  text-transform: capitalize;
-  text-align: left;
-  color: $euiColorDarkShade;
-}

x-pack/plugins/canvas/public/components/palette_picker/palette_picker.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { FC } from 'react';
+import PropTypes from 'prop-types';
+import { EuiColorPalettePicker, EuiColorPalettePickerPaletteProps } from '@elastic/eui';
+import { palettes, ColorPalette } from '../../../common/lib/palettes';
+import { ComponentStrings } from '../../../i18n';
+
+const { PalettePicker: strings } = ComponentStrings;
+
+interface RequiredProps {
+  id?: string;
+  onChange?: (palette: ColorPalette) => void;
+  palette: ColorPalette;
+  clearable?: false;
+}
+
+interface ClearableProps {
+  id?: string;
+  onChange?: (palette: ColorPalette | null) => void;
+  palette: ColorPalette | null;
+  clearable: true;
+}
+
+type Props = RequiredProps | ClearableProps;
+
+export const PalettePicker: FC<Props> = (props) => {
+  const colorPalettes: EuiColorPalettePickerPaletteProps[] = palettes.map((item) => ({
+    value: item.id,
+    title: item.label,
+    type: item.gradient ? 'gradient' : 'fixed',
+    palette: item.colors,
+  }));
+
+  if (props.clearable) {
+    const { palette, onChange = () => {} } = props;
+
+    colorPalettes.unshift({
+      value: 'clear',
+      title: strings.getEmptyPaletteLabel(),
+      type: 'text',
+    });
+
+    const onPickerChange = (value: string) => {
+      const canvasPalette = palettes.find((item) => item.id === value);
+      onChange(canvasPalette || null);
+    };
+
+    return (
+      <EuiColorPalettePicker
+        id={props.id}
+        compressed={true}
+        palettes={colorPalettes}
+        onChange={onPickerChange}
+        valueOfSelected={palette ? palette.id : 'clear'}
+      />
+    );
+  }
+
+  const { palette, onChange = () => {} } = props;
+
+  const onPickerChange = (value: string) => {
+    const canvasPalette = palettes.find((item) => item.id === value);
+
+    if (!canvasPalette) {
+      throw new Error(strings.getNoPaletteFoundErrorTitle());
+    }
+
+    onChange(canvasPalette);
+  };
+
+  return (
+    <EuiColorPalettePicker
+      id={props.id}
+      compressed={true}
+      palettes={colorPalettes}
+      onChange={onPickerChange}
+      valueOfSelected={palette.id}
+    />
+  );
+};
+
+PalettePicker.propTypes = {
+  id: PropTypes.string,
+  palette: PropTypes.object,
+  onChange: PropTypes.func,
+  clearable: PropTypes.bool,
+};

x-pack/plugins/canvas/public/components/palette_swatch/palette_swatch.js

@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const PaletteSwatch = ({ colors, gradient }) => {
-  let colorBoxes;
-
-  if (!gradient) {
-    colorBoxes = colors.map((color) => (
-      <div
-        key={color}
-        className="canvasPaletteSwatch__box"
-        style={{
-          backgroundColor: color,
-        }}
-      />
-    ));
-  } else {
-    colorBoxes = [
-      <div
-        key="gradient"
-        className="canvasPaletteSwatch__box"
-        style={{
-          background: `linear-gradient(90deg, ${colors.join(', ')})`,
-        }}
-      />,
-    ];
-  }
-
-  return (
-    <div className="canvasPaletteSwatch">
-      <div className="canvasPaletteSwatch__background canvasCheckered" />
-      <div className="canvasPaletteSwatch__foreground">{colorBoxes}</div>
-    </div>
-  );
-};
-
-PaletteSwatch.propTypes = {
-  colors: PropTypes.array,
-  gradient: PropTypes.bool,
-};

x-pack/plugins/canvas/public/components/palette_swatch/palette_swatch.scss

@@ -1,35 +0,0 @@
-.canvasPaletteSwatch {
-  display: inline-block;
-  position: relative;
-  height: $euiSizeXS;
-  width: 100%;
-  overflow: hidden;
-  text-align: left;
-  transform: scaleY(1);
-  transition: transform $euiAnimSlightResistance $euiAnimSpeedExtraFast;
-
-  .canvasPaletteSwatch__background {
-    position: absolute;
-    height: $euiSizeXS;
-    top: 0;
-    left: 0;
-    width: 100%;
-    transform: scaleY(1);
-    transition: transform $euiAnimSlightResistance $euiAnimSpeedExtraFast;
-  }
-
-  .canvasPaletteSwatch__foreground {
-    position: absolute;
-    height: 100%; // TODO: No idea why this can't be 25, but it leaves a 1px white spot in the palettePicker if its 25
-    top: 0;
-    left: 0;
-    white-space: nowrap;
-    width: 100%;
-    display: flex;
-  }
-
-  .canvasPaletteSwatch__box {
-    display: inline-block;
-    width: 100%;
-  }
-}

x-pack/plugins/canvas/public/style/index.scss

@@ -39,8 +39,6 @@
 @import '../components/loading/loading';
 @import '../components/navbar/navbar';
 @import '../components/page_manager/page_manager';
-@import '../components/palette_picker/palette_picker';
-@import '../components/palette_swatch/palette_swatch';
 @import '../components/positionable/positionable';
 @import '../components/rotation_handle/rotation_handle';
 @import '../components/shape_preview/shape_preview';