[Discover] field formatter truncated hex color pickers (#201676)

## Summary Updates data view color field formatter to allow easier hex color entry (the UI is truncated today)
elastic · Nov 26, 2024 · 398dcbf · 398dcbf
1 parent 9addb53
commit 398dcbf
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 6 deletions.
diff --git a/...data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx b/...data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { shallowWithI18nProvider } from '@kbn/test-jest-helpers';
+import { shallowWithI18nProvider, mountWithI18nProvider } from '@kbn/test-jest-helpers';
 
 import { ColorFormatEditor } from './color';
 import { FieldFormat, DEFAULT_CONVERTER_COLOR } from '@kbn/field-formats-plugin/common';
@@ -28,6 +28,21 @@ describe('ColorFormatEditor', () => {
     expect(ColorFormatEditor.formatId).toEqual('color');
   });
 
+  it('renders the color swatch icon inside the button', () => {
+    const component = mountWithI18nProvider(
+      <ColorFormatEditor
+        fieldType={'color'}
+        format={format as unknown as FieldFormat}
+        formatParams={formatParams}
+        onChange={onChange}
+        onError={onError}
+      />
+    );
+
+    const button = component.find('[data-test-subj="buttonColorSwatchIcon"]').at(0);
+    expect(button.exists()).toBe(true);
+  });
+
   it('should render string type normally (regex field)', async () => {
     const component = shallowWithI18nProvider(
       <ColorFormatEditor

diff --git a/...gins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx b/...gins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx
@@ -9,7 +9,14 @@
 
 import React, { Fragment } from 'react';
 
-import { EuiBasicTable, EuiButton, EuiColorPicker, EuiFieldText, EuiSpacer } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiButton,
+  EuiColorPicker,
+  EuiIcon,
+  EuiFieldText,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -156,6 +163,32 @@ export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorForm
                   item.index
                 );
               }}
+              button={
+                <EuiButton
+                  minWidth="false"
+                  iconType="lettering"
+                  color="text"
+                  onClick={() => {}}
+                  aria-label={i18n.translate(
+                    'indexPatternFieldEditor.color.letteringButtonAriaLabel',
+                    {
+                      defaultMessage: 'Select a text color for item {index}',
+                      values: {
+                        index: item.index,
+                      },
+                    }
+                  )}
+                >
+                  <EuiIcon
+                    aria-label={color}
+                    color={color}
+                    size="l"
+                    type="stopFilled"
+                    data-test-subj={'buttonColorSwatchIcon'}
+                  />
+                </EuiButton>
+              }
+              secondaryInputDisplay="bottom"
             />
           );
         },
@@ -181,6 +214,32 @@ export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorForm
                   item.index
                 );
               }}
+              button={
+                <EuiButton
+                  minWidth="false"
+                  iconType="color"
+                  color="text"
+                  onClick={() => {}}
+                  aria-label={i18n.translate(
+                    'indexPatternFieldEditor.color.letteringButtonAriaLabel',
+                    {
+                      defaultMessage: 'Select a background color for item {index}',
+                      values: {
+                        index: item.index,
+                      },
+                    }
+                  )}
+                >
+                  <EuiIcon
+                    aria-label={color}
+                    color={color}
+                    size="l"
+                    type="stopFilled"
+                    data-test-subj={'buttonColorSwatchIcon'}
+                  />
+                </EuiButton>
+              }
+              secondaryInputDisplay="bottom"
             />
           );
         },

diff --git a/test/functional/apps/management/data_views/_field_formatter.ts b/test/functional/apps/management/data_views/_field_formatter.ts
@@ -403,8 +403,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             beforeSave: async () => {
               await testSubjects.click('colorEditorAddColor');
               await testSubjects.setValue('~colorEditorKeyPattern', 'red');
-              await testSubjects.setValue('~colorEditorColorPicker', '#ffffff');
-              await testSubjects.setValue('~colorEditorBackgroundPicker', '#ff0000');
+              await testSubjects.click('~colorEditorColorPicker');
+              await testSubjects.setValue('~euiColorPickerInput_bottom', '#ffffff');
+              await testSubjects.click('~colorEditorBackgroundPicker');
+              await testSubjects.setValue('~euiColorPickerInput_bottom', '#ff0000');
             },
             expect: async (renderedValueContainer) => {
               const span = await renderedValueContainer.findByTagName('span');

diff --git a/test/functional/services/field_editor.ts b/test/functional/services/field_editor.ts
@@ -90,9 +90,11 @@ export class FieldEditorService extends FtrService {
   public async setColorFormat(value: string, color: string, backgroundColor?: string) {
     await this.testSubjects.click('colorEditorAddColor');
     await this.testSubjects.setValue('~colorEditorKeyPattern', value);
-    await this.testSubjects.setValue('~colorEditorColorPicker', color);
+    await this.testSubjects.click('~colorEditorColorPicker');
+    await this.testSubjects.setValue('~euiColorPickerInput_bottom', color);
     if (backgroundColor) {
-      await this.testSubjects.setValue('~colorEditorBackgroundPicker', backgroundColor);
+      await this.testSubjects.click('~colorEditorBackgroundPicker');
+      await this.testSubjects.setValue('~euiColorPickerInput_bottom', backgroundColor);
     }
   }