[ML] Improve the field type icon's component structure. (#19200)
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:
parent
39b277d372
commit
e648269b95
|
@ -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"
|
||||
|
|
|
@ -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} />
|
||||
) : (
|
||||
|
|
|
@ -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`, () => {
|
||||
|
|
Loading…
Reference in a new issue