diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx
index 695737733d2ca..a44845ad93f06 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx
+++ b/src/plugins/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(
+
+ );
+
+ 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(
{}}
+ aria-label={i18n.translate(
+ 'indexPatternFieldEditor.color.letteringButtonAriaLabel',
+ {
+ defaultMessage: 'Select a text color for item {index}',
+ values: {
+ index: item.index,
+ },
+ }
+ )}
+ >
+
+
+ }
+ secondaryInputDisplay="bottom"
/>
);
},
@@ -181,6 +214,32 @@ export class ColorFormatEditor extends DefaultFormatEditor {}}
+ aria-label={i18n.translate(
+ 'indexPatternFieldEditor.color.letteringButtonAriaLabel',
+ {
+ defaultMessage: 'Select a background color for item {index}',
+ values: {
+ index: item.index,
+ },
+ }
+ )}
+ >
+
+
+ }
+ secondaryInputDisplay="bottom"
/>
);
},
diff --git a/test/functional/apps/management/data_views/_field_formatter.ts b/test/functional/apps/management/data_views/_field_formatter.ts
index 1f7cd6c23a838..bd88d96f9700a 100644
--- 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
index 07bcaf98959b5..0739159bcf913 100644
--- 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);
}
}