github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
## Summary

Updates data view color field formatter to allow
easier hex color entry (the UI is truncated today)
This commit is contained in:
Graham Hudgins 2024-11-26 13:47:04 -05:00 • committed by GitHub
parent 9addb533de
commit 398dcbf526
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 84 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.test.tsx
View file

@ -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

61
src/plugins/data_view_field_editor/public/components/field_format_editor/editors/color/color.tsx
View file

@ -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"
/>
);
},

6
test/functional/apps/management/data_views/_field_formatter.ts
View file

@ -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');

6
test/functional/services/field_editor.ts
View file

@ -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);
}
}