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