github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution] Bad user experience when hovering some icons on n… (#167300)

Browse source
This commit is contained in:
Luke G 2023-09-28 00:04:35 +02:00 • committed by GitHub
parent 90a8b32393
commit 4fc3a43f79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

44
x-pack/plugins/security_solution/public/flyout/right/components/insights_summary_row.tsx
View file

@ -8,8 +8,15 @@
import type { ReactElement, VFC } from 'react';
import React from 'react';
import { css } from '@emotion/react';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiHealth, EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import {
EuiIcon,
EuiFlexGroup,
EuiFlexItem,
EuiHealth,
EuiSkeletonText,
useEuiTheme,
} from '@elastic/eui';
import { FormattedCount } from '../../../common/components/formatted_number';
export interface InsightsSummaryRowProps {
@ -58,6 +65,8 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
color,
'data-test-subj': dataTestSubj,
}) => {
const { euiTheme } = useEuiTheme();
const loadingDataTestSubj = `${dataTestSubj}Loading`;
if (loading) {
return (
@ -88,19 +97,26 @@ export const InsightsSummaryRow: VFC<InsightsSummaryRowProps> = ({
return (
<EuiFlexGroup gutterSize="none" justifyContent={'spaceBetween'} alignItems={'center'}>
<EuiFlexItem grow={false}>
<EuiButtonIcon
data-test-subj={iconDataTestSubj}
aria-label={i18n.translate(
'xpack.securitySolution.flyout.right.insights.insightSummaryButtonIconAriaLabel',
{
defaultMessage: 'Insight summary row icon',
}
)}
color="text"
display="empty"
iconType={icon}
size="s"
/>
<EuiFlexGroup
css={css`
padding: ${euiTheme.size.s};
`}
alignItems={'center'}
>
<EuiIcon
data-test-subj={iconDataTestSubj}
aria-label={i18n.translate(
'xpack.securitySolution.flyout.right.insights.insightSummaryButtonIconAriaLabel',
{
defaultMessage: 'Insight summary row icon',
}
)}
color="text"
display="empty"
type={icon}
size="m"
/>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem
data-test-subj={valueDataTestSubj}