maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] Improve the field type icon's component structure. (#19200)

Browse source 
This fixes the component structure of the file type icon: The container component no longer needs to be wrapped inside a span element for the tooltip to work by using the recommendation to pass on the props to the first inner element (see elastic/eui#839). Also adapted a jest test which tests the hovering behavior and fails when the props are not passed on.
This commit is contained in:
Walter Rafelsberger 2018-05-18 10:59:27 +02:00 committed by GitHub
parent 39b277d372
commit e648269b95
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
x-pack/plugins/ml/public/components/field_type_icon/__snapshots__/field_type_icon_view.test.js.snap
View file

@ -1,20 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FieldTypeIcon render component inside tooltip wrapper 1`] = `
<EuiToolTip
content="keyword"
position="left"
>
<span>
<FieldTypeIconContainer
ariaLabel="Aggregatable string field"
className="field-type-icon"
iconChar="t"
/>
</span>
</EuiToolTip>
`;
exports[`FieldTypeIcon render component when type matches a field type 1`] = `
<FieldTypeIconContainer
ariaLabel="Aggregatable string field"

8
x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_view.js
View file

@ -70,7 +70,7 @@ export function FieldTypeIcon({ tooltipEnabled = false, type }) {
// see https://github.com/elastic/eui/issues/839
return (
<EuiToolTip position="left" content={type}>
<span><FieldTypeIconContainer {...containerProps} /></span>
<FieldTypeIconContainer {...containerProps} />
</EuiToolTip>
);
}
@ -82,9 +82,11 @@ FieldTypeIcon.propTypes = {
type: PropTypes.string
};
function FieldTypeIconContainer({ ariaLabel, className, iconChar }) {
// If the tooltip is used, it will apply its events to its first inner child.
// To pass on its properties we apply `rest` to the outer `span` element.
function FieldTypeIconContainer({ ariaLabel, className, iconChar, ...rest }) {
return (
<span className="field-type-icon-container">
<span className="field-type-icon-container" {...rest} >
{(iconChar === '') ? (
<span aria-label={ariaLabel} className={className} />
) : (

16
x-pack/plugins/ml/public/components/field_type_icon/field_type_icon_view.test.js
View file

@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { shallow } from 'enzyme';
import { mount, shallow } from 'enzyme';
import React from 'react';
import { FieldTypeIcon } from './field_type_icon_view';
@ -26,9 +26,17 @@ describe('FieldTypeIcon', () => {
expect(wrapper).toMatchSnapshot();
});
test(`render component inside tooltip wrapper`, () => {
const wrapper = shallow(<FieldTypeIcon type="keyword" tooltipEnabled={true} />);
expect(wrapper).toMatchSnapshot();
test(`render with tooltip and test hovering`, () => {
const wrapper = mount(<FieldTypeIcon type="keyword" tooltipEnabled={true} />);
const container = wrapper.find({ className: 'field-type-icon-container' });
expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);
container.simulate('mouseover');
expect(wrapper.find('EuiToolTip').children()).toHaveLength(2);
container.simulate('mouseout');
expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);
});
test(`update component`, () => {