From 93fc2b9dd5998f2be65aa88946c4f581204b129b Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 2 Jun 2020 13:25:14 -0600
Subject: [PATCH 1/2] 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<T extends string> = CommonProps &
   Omit<
     EuiSuperSelectProps<T>,
@@ -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 (
       <div
@@ -98,23 +143,15 @@ export const EuiColorPalettePicker: FunctionComponent<
     );
   };
 
-  const getInputDisplay = (
-    title: string,
-    palette: string[] | ColorStop[],
-    type: string
-  ) => {
-    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: (
           <div className="euiColorPalettePicker__item">
             {item.title && item.type !== 'text' && (
@@ -122,9 +159,7 @@ export const EuiColorPalettePicker: FunctionComponent<
                 {item.title}
               </div>
             )}
-            {item.type !== 'text'
-              ? getPalette(item.palette!, item.type)
-              : item.title}
+            {item.type === 'text' ? item.title : paletteForDisplay}
           </div>
         ),
       };

From ee7b0b7127322d753bb23c04fa8d929f26dbbefa Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Tue, 2 Jun 2020 20:45:35 +0100
Subject: [PATCH 2/2] 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[];
 }