github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -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 // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeatureProperties should render 1`] = ` exports[`FeatureProperties should render 1`] = `
<table <div
className="eui-yScrollWithShadows mapFeatureTooltip_table" className="mapFeatureTooltip_tableWrapper"
> >
<tbody> <table
<tr className="eui-yScrollWithShadows mapFeatureTooltip_table"
className="mapFeatureTooltip_row" >
key="prop1" <tbody>
> <tr
<td className="mapFeatureTooltip_row"
className="eui-textBreakWord mapFeatureTooltip__propertyLabel" key="prop1"
> >
prop1 <td
</td> className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
<td >
className="eui-textBreakWord" prop1
</td>
<td
className="eui-textBreakWord"
>
foobar1
</td>
<td />
</tr>
<tr
className="mapFeatureTooltip_row"
key="prop2"
> >
foobar1 <td
</td> className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
<td /> >
</tr> prop2
<tr </td>
className="mapFeatureTooltip_row" <td
key="prop2" className="eui-textBreakWord"
> >
<td foobar2
className="eui-textBreakWord mapFeatureTooltip__propertyLabel" </td>
> <td />
prop2 </tr>
</td> </tbody>
<td </table>
className="eui-textBreakWord" </div>
>
foobar2
</td>
<td />
</tr>
</tbody>
</table>
`; `;
exports[`FeatureProperties should show error message if unable to load tooltip content 1`] = ` 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`] = ` exports[`FeatureProperties should show filter button for filterable properties 1`] = `
<table <div
className="eui-yScrollWithShadows mapFeatureTooltip_table" className="mapFeatureTooltip_tableWrapper"
> >
<tbody> <table
<tr className="eui-yScrollWithShadows mapFeatureTooltip_table"
className="mapFeatureTooltip_row" >
key="prop1" <tbody>
> <tr
<td className="mapFeatureTooltip_row"
className="eui-textBreakWord mapFeatureTooltip__propertyLabel" key="prop1"
> >
prop1 <td
</td> className="eui-textBreakWord mapFeatureTooltip__propertyLabel"
<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"
> >
<EuiIcon prop1
type="filter" </td>
/> <td
</EuiButtonEmpty> className="eui-textBreakWord"
</td> >
</tr> foobar1
<tr </td>
className="mapFeatureTooltip_row" <td>
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>
<EuiButtonEmpty <EuiButtonEmpty
aria-label="Filter on property" aria-label="Filter on property"
data-test-subj="mapTooltipCreateFilterButton" data-test-subj="mapTooltipCreateFilterButton"
@ -141,36 +92,97 @@ exports[`FeatureProperties should show view actions button when there are availa
type="filter" type="filter"
/> />
</EuiButtonEmpty> </EuiButtonEmpty>
<EuiButtonEmpty </td>
aria-label="View filter actions" </tr>
data-test-subj="mapTooltipMoreActionsButton" <tr
onClick={[Function]} className="mapFeatureTooltip_row"
size="xs" key="prop2"
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 mapFeatureTooltip__propertyLabel"
<td >
className="eui-textBreakWord" prop2
> </td>
foobar2 <td
</td> className="eui-textBreakWord"
<td /> >
</tr> foobar2
</tbody> </td>
</table> <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 { .mapFeatureTooltip_table {
width: 100%; width: 100%;
max-height: calc(49vh - #{$euiSizeXL * 2});
td { td {
padding: $euiSizeXS; padding: $euiSizeXS;
} }
} }
.mapFeatureTooltip_tableWrapper {
overflow: auto;
max-height: calc(49vh - 64px);
}
.mapFeatureTooltip_row { .mapFeatureTooltip_row {
border-bottom: 1px solid $euiColorLightestShade; border-bottom: 1px solid $euiColorLightestShade;
} }
@ -20,6 +24,7 @@
} }
.mapFeatureTooltip__propertyLabel { .mapFeatureTooltip__propertyLabel {
min-width: $euiSizeXL * 2.5;
max-width: $euiSizeXL * 4; max-width: $euiSizeXL * 4;
font-weight: $euiFontWeightSemiBold; 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 ( return (
<table className="eui-yScrollWithShadows mapFeatureTooltip_table" ref={this._tableRef}> <div className="mapFeatureTooltip_tableWrapper">
<tbody>{rows}</tbody> <table className="eui-yScrollWithShadows mapFeatureTooltip_table" ref={this._tableRef}>
</table> <tbody>{rows}</tbody>
</table>
</div>
); );
} }
} }