Skip to content

Commit 398dcbf

Browse files
ghudginsghudgins
authored
[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)
1 parent 9addb53 commit 398dcbf

4 files changed

Lines changed: 84 additions & 6 deletions

File tree

‎src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
*/
99

1010
import React from 'react';
11-
import { shallowWithI18nProvider } from '@kbn/test-jest-helpers';
11+
import { shallowWithI18nProvider, mountWithI18nProvider } from '@kbn/test-jest-helpers';
1212

1313
import { ColorFormatEditor } from './color';
1414
import { FieldFormat, DEFAULT_CONVERTER_COLOR } from '@kbn/field-formats-plugin/common';
@@ -28,6 +28,21 @@ describe('ColorFormatEditor', () => {
2828
expect(ColorFormatEditor.formatId).toEqual('color');
2929
});
3030

31+
it('renders the color swatch icon inside the button', () => {
32+
const component = mountWithI18nProvider(
33+
<ColorFormatEditor
34+
fieldType={'color'}
35+
format={format as unknown as FieldFormat}
36+
formatParams={formatParams}
37+
onChange={onChange}
38+
onError={onError}
39+
/>
40+
);
41+
42+
const button = component.find('[data-test-subj="buttonColorSwatchIcon"]').at(0);
43+
expect(button.exists()).toBe(true);
44+
});
45+
3146
it('should render string type normally (regex field)', async () => {
3247
const component = shallowWithI18nProvider(
3348
<ColorFormatEditor

‎src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,14 @@
99

1010
import React, { Fragment } from 'react';
1111

12-
import { EuiBasicTable, EuiButton, EuiColorPicker, EuiFieldText, EuiSpacer } from '@elastic/eui';
12+
import {
13+
EuiBasicTable,
14+
EuiButton,
15+
EuiColorPicker,
16+
EuiIcon,
17+
EuiFieldText,
18+
EuiSpacer,
19+
} from '@elastic/eui';
1320

1421
import { i18n } from '@kbn/i18n';
1522
import { FormattedMessage } from '@kbn/i18n-react';
@@ -156,6 +163,32 @@ export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorForm
156163
item.index
157164
);
158165
}}
166+
button={
167+
<EuiButton
168+
minWidth="false"
169+
iconType="lettering"
170+
color="text"
171+
onClick={() => {}}
172+
aria-label={i18n.translate(
173+
'indexPatternFieldEditor.color.letteringButtonAriaLabel',
174+
{
175+
defaultMessage: 'Select a text color for item {index}',
176+
values: {
177+
index: item.index,
178+
},
179+
}
180+
)}
181+
>
182+
<EuiIcon
183+
aria-label={color}
184+
color={color}
185+
size="l"
186+
type="stopFilled"
187+
data-test-subj={'buttonColorSwatchIcon'}
188+
/>
189+
</EuiButton>
190+
}
191+
secondaryInputDisplay="bottom"
159192
/>
160193
);
161194
},
@@ -181,6 +214,32 @@ export class ColorFormatEditor extends DefaultFormatEditor<ColorFormatEditorForm
181214
item.index
182215
);
183216
}}
217+
button={
218+
<EuiButton
219+
minWidth="false"
220+
iconType="color"
221+
color="text"
222+
onClick={() => {}}
223+
aria-label={i18n.translate(
224+
'indexPatternFieldEditor.color.letteringButtonAriaLabel',
225+
{
226+
defaultMessage: 'Select a background color for item {index}',
227+
values: {
228+
index: item.index,
229+
},
230+
}
231+
)}
232+
>
233+
<EuiIcon
234+
aria-label={color}
235+
color={color}
236+
size="l"
237+
type="stopFilled"
238+
data-test-subj={'buttonColorSwatchIcon'}
239+
/>
240+
</EuiButton>
241+
}
242+
secondaryInputDisplay="bottom"
184243
/>
185244
);
186245
},

‎test/functional/apps/management/data_views/_field_formatter.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -403,8 +403,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
403403
beforeSave: async () => {
404404
await testSubjects.click('colorEditorAddColor');
405405
await testSubjects.setValue('~colorEditorKeyPattern', 'red');
406-
await testSubjects.setValue('~colorEditorColorPicker', '#ffffff');
407-
await testSubjects.setValue('~colorEditorBackgroundPicker', '#ff0000');
406+
await testSubjects.click('~colorEditorColorPicker');
407+
await testSubjects.setValue('~euiColorPickerInput_bottom', '#ffffff');
408+
await testSubjects.click('~colorEditorBackgroundPicker');
409+
await testSubjects.setValue('~euiColorPickerInput_bottom', '#ff0000');
408410
},
409411
expect: async (renderedValueContainer) => {
410412
const span = await renderedValueContainer.findByTagName('span');

‎test/functional/services/field_editor.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,11 @@ export class FieldEditorService extends FtrService {
9090
public async setColorFormat(value: string, color: string, backgroundColor?: string) {
9191
await this.testSubjects.click('colorEditorAddColor');
9292
await this.testSubjects.setValue('~colorEditorKeyPattern', value);
93-
await this.testSubjects.setValue('~colorEditorColorPicker', color);
93+
await this.testSubjects.click('~colorEditorColorPicker');
94+
await this.testSubjects.setValue('~euiColorPickerInput_bottom', color);
9495
if (backgroundColor) {
95-
await this.testSubjects.setValue('~colorEditorBackgroundPicker', backgroundColor);
96+
await this.testSubjects.click('~colorEditorBackgroundPicker');
97+
await this.testSubjects.setValue('~euiColorPickerInput_bottom', backgroundColor);
9698
}
9799
}
98100

0 commit comments

Comments
 (0)