Text as an option

elastic · May 8, 2020 · c3ae30b · c3ae30b
1 parent 01b88f8
commit c3ae30b
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 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
@@ -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
@@ -34,7 +34,7 @@ const colorPalettePickerSnippet = `<EuiColorPalettePicker
       value: 'palette1',
       title: 'Palette 1',
       palette: ['#ff3f3f', '#ffcc06'],
-      type: 'stops',
+      type: 'fixed',
     },
   ]}
   onChange={onPaletteChange}

diff --git 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/';
+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.tsx b/src/components/color_picker/color_palette_picker/color_palette_picker.tsx
@@ -42,13 +42,14 @@ 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.
    */
-  type: 'fixed' | 'gradient';
+  type: 'fixed' | 'gradient' | 'text';
   /**
    * Array of color `strings` or `ColorStops` in the form of
    * { stop: number, color: string }
    */
-  palette: string[] | ColorStop[];
+  palette?: string[] | ColorStop[];
 }
 
 export type EuiColorPalettePickerProps = CommonProps & {
@@ -112,18 +113,18 @@ export const EuiColorPalettePicker: FunctionComponent<
     );
   };
 
-  const getButton = (title: any) => 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: (
         <EuiFlexGroup gutterSize="xs" direction="column">
-          {item.title && item.type !== 'button' && (
+          {item.title && item.type !== 'text' && (
             <EuiFlexItem>
               <EuiText
                 size="xs"
@@ -134,9 +135,9 @@ export const EuiColorPalettePicker: FunctionComponent<
           )}
 
           <EuiFlexItem>
-            {item.type !== 'button'
+            {item.type !== 'text'
               ? getPalette(item.palette, item.type)
-              : getButton(item.title)}
+              : getText(item.title)}
           </EuiFlexItem>
         </EuiFlexGroup>
       ),