github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] fix Tool tip with large field list exceeds browser screen and cannot be accessed or dismissed (#138054)

Browse source 
* [Maps] fix Tool tip with large field list exceeds browser screen and cannot be accessed or dismissed

* add min-width to mapFeatureTooltip__propertyLabel
This commit is contained in:
Nathan Reese 2022-08-05 08:19:13 -06:00 • committed by GitHub
parent b476b06211
commit 7cd4a860ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 161 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

288
x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/features_tooltip/__snapshots__/feature_properties.test.tsx.snap generated
View file

@ -1,44 +1,48 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeatureProperties should render 1`] = `
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
<div
className="mapFeatureTooltip_tableWrapper"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
key="prop1"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
key="prop1"
>
prop1
</td>
<td
className="eui-textBreakWord"
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop1
</td>
<td
className="eui-textBreakWord"
>
foobar1
</td>
<td />
</tr>
<tr
className="mapFeatureTooltip_row"
key="prop2"
>
foobar1
</td>
<td />
</tr>
<tr
className="mapFeatureTooltip_row"
key="prop2"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop2
</td>
<td
className="eui-textBreakWord"
>
foobar2
</td>
<td />
</tr>
</tbody>
</table>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop2
</td>
<td
className="eui-textBreakWord"
>
foobar2
</td>
<td />
</tr>
</tbody>
</table>
</div>
`;
exports[`FeatureProperties should show error message if unable to load tooltip content 1`] = `
@ -55,81 +59,28 @@ exports[`FeatureProperties should show error message if unable to load tooltip c
`;
exports[`FeatureProperties should show filter button for filterable properties 1`] = `
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
<div
className="mapFeatureTooltip_tableWrapper"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
key="prop1"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
key="prop1"
>
prop1
</td>
<td
className="eui-textBreakWord"
>
foobar1
</td>
<td>
<EuiButtonEmpty
aria-label="Filter on property"
data-test-subj="mapTooltipCreateFilterButton"
onClick={[Function]}
size="xs"
title="Filter on property"
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
<EuiIcon
type="filter"
/>
</EuiButtonEmpty>
</td>
</tr>
<tr
className="mapFeatureTooltip_row"
key="prop2"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop2
</td>
<td
className="eui-textBreakWord"
>
foobar2
</td>
<td />
</tr>
</tbody>
</table>
`;
exports[`FeatureProperties should show view actions button when there are available actions 1`] = `
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
key="prop1"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop1
</td>
<td
className="eui-textBreakWord"
>
foobar1
</td>
<td
className="mapFeatureTooltip_actionsRow"
>
<span>
prop1
</td>
<td
className="eui-textBreakWord"
>
foobar1
</td>
<td>
<EuiButtonEmpty
aria-label="Filter on property"
data-test-subj="mapTooltipCreateFilterButton"
@ -141,36 +92,97 @@ exports[`FeatureProperties should show view actions button when there are availa
type="filter"
/>
</EuiButtonEmpty>
<EuiButtonEmpty
aria-label="View filter actions"
data-test-subj="mapTooltipMoreActionsButton"
onClick={[Function]}
size="xs"
title="View filter actions"
>
<EuiIcon
type="arrowRight"
/>
</EuiButtonEmpty>
</span>
</td>
</tr>
<tr
className="mapFeatureTooltip_row"
key="prop2"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
</td>
</tr>
<tr
className="mapFeatureTooltip_row"
key="prop2"
>
prop2
</td>
<td
className="eui-textBreakWord"
>
foobar2
</td>
<td />
</tr>
</tbody>
</table>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop2
</td>
<td
className="eui-textBreakWord"
>
foobar2
</td>
<td />
</tr>
</tbody>
</table>
</div>
`;
exports[`FeatureProperties should show view actions button when there are available actions 1`] = `
<div
className="mapFeatureTooltip_tableWrapper"
>
<table
className="eui-yScrollWithShadows mapFeatureTooltip_table"
>
<tbody>
<tr
className="mapFeatureTooltip_row"
key="prop1"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop1
</td>
<td
className="eui-textBreakWord"
>
foobar1
</td>
<td
className="mapFeatureTooltip_actionsRow"
>
<span>
<EuiButtonEmpty
aria-label="Filter on property"
data-test-subj="mapTooltipCreateFilterButton"
onClick={[Function]}
size="xs"
title="Filter on property"
>
<EuiIcon
type="filter"
/>
</EuiButtonEmpty>
<EuiButtonEmpty
aria-label="View filter actions"
data-test-subj="mapTooltipMoreActionsButton"
onClick={[Function]}
size="xs"
title="View filter actions"
>
<EuiIcon
type="arrowRight"
/>
</EuiButtonEmpty>
</span>
</td>
</tr>
<tr
className="mapFeatureTooltip_row"
key="prop2"
>
<td
className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
>
prop2
</td>
<td
className="eui-textBreakWord"
>
foobar2
</td>
<td />
</tr>
</tbody>
</table>
</div>
`;

7
x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/features_tooltip/_index.scss
View file

@ -1,12 +1,16 @@
.mapFeatureTooltip_table {
width: 100%;
max-height: calc(49vh - #{$euiSizeXL * 2});
td {
padding: $euiSizeXS;
}
}
.mapFeatureTooltip_tableWrapper {
overflow: auto;
max-height: calc(49vh - 64px);
}
.mapFeatureTooltip_row {
border-bottom: 1px solid $euiColorLightestShade;
}
@ -20,6 +24,7 @@
}
.mapFeatureTooltip__propertyLabel {
min-width: $euiSizeXL * 2.5;
max-width: $euiSizeXL * 4;
font-weight: $euiFontWeightSemiBold;
}

8
x-pack/plugins/maps/public/connected_components/mb_map/tooltip_control/features_tooltip/feature_properties.tsx
View file

@ -336,9 +336,11 @@ export class FeatureProperties extends Component<Props, State> {
});
return (
<table className="eui-yScrollWithShadows mapFeatureTooltip_table" ref={this._tableRef}>
<tbody>{rows}</tbody>
</table>
<div className="mapFeatureTooltip_tableWrapper">
<table className="eui-yScrollWithShadows mapFeatureTooltip_table" ref={this._tableRef}>
<tbody>{rows}</tbody>
</table>
</div>
);
}
}