mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[Maps] Change tooltip to use description list for ie compat (#37396)
* Change tooltip to use description list for ie compat * Remove commented out styles * Test fixes and review feedback * Remove unneeded wrapper div on button icon and update tests to reflect class changes * Add comment explaining why we're setting html explicitly
This commit is contained in:
Aaron Caldwell
GitHub
parent
bc8beac750
commit
e16842393f
4 changed files with 141 additions and 201 deletions
|
|
@ -3,3 +3,4 @@
|
|||
@import './layer_panel/index';
|
||||
@import './widget_overlay/index';
|
||||
@import './toolbar_overlay/index';
|
||||
@import './map/feature_tooltip';
|
||||
|
|
|
|||
|
|
@ -2,17 +2,10 @@
|
|||
|
||||
exports[`FeatureTooltip should not show close button and not show filter button 1`] = `
|
||||
<Fragment>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiDescriptionList
|
||||
listItems={Array []}
|
||||
type="column"
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
|
|
@ -22,65 +15,45 @@ exports[`FeatureTooltip should show both filter buttons and close button 1`] = `
|
|||
direction="column"
|
||||
gutterSize="none"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
<EuiFlexItem
|
||||
grow={true}
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={true}
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexEnd"
|
||||
direction="row"
|
||||
justifyContent="flexEnd"
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonIcon
|
||||
aria-label="Close tooltip"
|
||||
color="primary"
|
||||
iconSize="m"
|
||||
iconType="cross"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
alignItems="flexEnd"
|
||||
direction="row"
|
||||
justifyContent="flexEnd"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
key="0"
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={4}
|
||||
>
|
||||
<strong>
|
||||
foo
|
||||
</strong>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={6}
|
||||
>
|
||||
<span
|
||||
<EuiButtonIcon
|
||||
aria-label="Close tooltip"
|
||||
color="primary"
|
||||
iconSize="m"
|
||||
iconType="cross"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiDescriptionList
|
||||
listItems={
|
||||
Array [
|
||||
Object {
|
||||
"description": <div>
|
||||
<div
|
||||
className="mapFeatureTooltip__lineDescription"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "bar",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonIcon
|
||||
aria-label="Filter on property"
|
||||
className="mapFeatureTooltipFilterButton"
|
||||
className="mapFeatureTooltip__filterButton"
|
||||
color="primary"
|
||||
iconSize="m"
|
||||
iconType="plusInCircle"
|
||||
|
|
@ -88,33 +61,26 @@ exports[`FeatureTooltip should show both filter buttons and close button 1`] = `
|
|||
title="Filter on property"
|
||||
type="button"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup
|
||||
key="1"
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={4}
|
||||
>
|
||||
<strong>
|
||||
foo
|
||||
</strong>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={6}
|
||||
>
|
||||
<span
|
||||
</div>,
|
||||
"title": "foo",
|
||||
},
|
||||
Object {
|
||||
"description": <div>
|
||||
<div
|
||||
className="mapFeatureTooltip__lineDescription"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "bar",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</div>,
|
||||
"title": "foo",
|
||||
},
|
||||
]
|
||||
}
|
||||
type="column"
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
|
|
@ -124,40 +90,33 @@ exports[`FeatureTooltip should show close button, but not filter button 1`] = `
|
|||
direction="column"
|
||||
gutterSize="none"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
<EuiFlexItem
|
||||
grow={true}
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={true}
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="flexEnd"
|
||||
direction="row"
|
||||
justifyContent="flexEnd"
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonIcon
|
||||
aria-label="Close tooltip"
|
||||
color="primary"
|
||||
iconSize="m"
|
||||
iconType="cross"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
/>
|
||||
alignItems="flexEnd"
|
||||
direction="row"
|
||||
justifyContent="flexEnd"
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonIcon
|
||||
aria-label="Close tooltip"
|
||||
color="primary"
|
||||
iconSize="m"
|
||||
iconType="cross"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiDescriptionList
|
||||
listItems={Array []}
|
||||
type="column"
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
|
|
@ -176,42 +135,22 @@ exports[`FeatureTooltip should show error message if unable to load tooltip cont
|
|||
|
||||
exports[`FeatureTooltip should show only filter button for filterable properties 1`] = `
|
||||
<Fragment>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
direction="column"
|
||||
gutterSize="none"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
key="0"
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={4}
|
||||
>
|
||||
<strong>
|
||||
foo
|
||||
</strong>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={6}
|
||||
>
|
||||
<span
|
||||
<EuiDescriptionList
|
||||
listItems={
|
||||
Array [
|
||||
Object {
|
||||
"description": <div>
|
||||
<div
|
||||
className="mapFeatureTooltip__lineDescription"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "bar",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonIcon
|
||||
aria-label="Filter on property"
|
||||
className="mapFeatureTooltipFilterButton"
|
||||
className="mapFeatureTooltip__filterButton"
|
||||
color="primary"
|
||||
iconSize="m"
|
||||
iconType="plusInCircle"
|
||||
|
|
@ -219,32 +158,25 @@ exports[`FeatureTooltip should show only filter button for filterable properties
|
|||
title="Filter on property"
|
||||
type="button"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup
|
||||
key="1"
|
||||
>
|
||||
<EuiFlexItem
|
||||
grow={4}
|
||||
>
|
||||
<strong>
|
||||
foo
|
||||
</strong>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={6}
|
||||
>
|
||||
<span
|
||||
</div>,
|
||||
"title": "foo",
|
||||
},
|
||||
Object {
|
||||
"description": <div>
|
||||
<div
|
||||
className="mapFeatureTooltip__lineDescription"
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "bar",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</div>,
|
||||
"title": "foo",
|
||||
},
|
||||
]
|
||||
}
|
||||
type="column"
|
||||
/>
|
||||
</Fragment>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
.mapFeatureTooltip__filterButton,
|
||||
.mapFeatureTooltip__lineDescription {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -5,7 +5,14 @@
|
|||
*/
|
||||
|
||||
import React, { Fragment } from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiCallOut, EuiLoadingSpinner } from '@elastic/eui';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiButtonIcon,
|
||||
EuiCallOut,
|
||||
EuiLoadingSpinner,
|
||||
EuiDescriptionList
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
|
||||
|
|
@ -82,52 +89,51 @@ export class FeatureTooltip extends React.Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonIcon
|
||||
iconType="plusInCircle"
|
||||
title={i18n.translate('xpack.maps.tooltip.filterOnPropertyTitle', {
|
||||
defaultMessage: 'Filter on property'
|
||||
})}
|
||||
onClick={() => {
|
||||
this.props.closeTooltip();
|
||||
const filterAction = tooltipProperty.getFilterAction();
|
||||
filterAction();
|
||||
}}
|
||||
aria-label={i18n.translate('xpack.maps.tooltip.filterOnPropertyAriaLabel', {
|
||||
defaultMessage: 'Filter on property'
|
||||
})}
|
||||
className="mapFeatureTooltipFilterButton"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiButtonIcon
|
||||
iconType="plusInCircle"
|
||||
title={i18n.translate('xpack.maps.tooltip.filterOnPropertyTitle', {
|
||||
defaultMessage: 'Filter on property'
|
||||
})}
|
||||
onClick={() => {
|
||||
this.props.closeTooltip();
|
||||
const filterAction = tooltipProperty.getFilterAction();
|
||||
filterAction();
|
||||
}}
|
||||
aria-label={i18n.translate('xpack.maps.tooltip.filterOnPropertyAriaLabel', {
|
||||
defaultMessage: 'Filter on property'
|
||||
})}
|
||||
className="mapFeatureTooltip__filterButton"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_renderProperties(hasFilters) {
|
||||
return this.state.properties.map((tooltipProperty, index) => {
|
||||
return this.state.properties.map(tooltipProperty => {
|
||||
/*
|
||||
* Justification for dangerouslySetInnerHTML:
|
||||
* Property value contains value generated by Field formatter
|
||||
* Since these formatters produce raw HTML, this component needs to be able to render them as-is, relying
|
||||
* on the field formatter to only produce safe HTML.
|
||||
*/
|
||||
const htmlValue = (<span
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: tooltipProperty.getHtmlDisplayValue()
|
||||
}}
|
||||
/>);
|
||||
|
||||
return (
|
||||
<EuiFlexGroup key={index}>
|
||||
<EuiFlexItem grow={4}>
|
||||
<strong>{tooltipProperty.getPropertyName()}</strong>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={6}>
|
||||
{htmlValue}
|
||||
</EuiFlexItem>
|
||||
const htmlValue = (
|
||||
<div>
|
||||
<div
|
||||
className="mapFeatureTooltip__lineDescription"
|
||||
// It's necessary to explicitly set the html here as the function
|
||||
// returns html, not just text
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: tooltipProperty.getHtmlDisplayValue()
|
||||
}}
|
||||
/>
|
||||
{this._renderFilterButton(tooltipProperty, hasFilters)}
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
);
|
||||
|
||||
return ({
|
||||
title: tooltipProperty.getPropertyName(),
|
||||
description: htmlValue,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -179,16 +185,12 @@ export class FeatureTooltip extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
const tooltipProps = this._renderProperties();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<EuiFlexGroup direction="column" gutterSize="none">
|
||||
{this._renderCloseButton()}
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup direction="column" gutterSize="none">
|
||||
{this._renderProperties()}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
{this._renderCloseButton()}
|
||||
<EuiDescriptionList type="column" listItems={tooltipProps} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue