Skip to content

Commit bac850c

Browse files
bkimmelelasticmachine
authored and
Brent Kimmel
committed
[Security Solution][Resolver]Add backdrop to pills (#78625)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 6237069 commit bac850c

3 files changed

Lines changed: 59 additions & 57 deletions

File tree

‎x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import styled from 'styled-components';
99
import { htmlIdGenerator, EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
1010
import { useSelector } from 'react-redux';
1111
import { FormattedMessage } from '@kbn/i18n/react';
12-
import { NodeSubMenu } from './submenu';
12+
import { NodeSubMenu } from './styles';
1313
import { applyMatrix3 } from '../models/vector2';
1414
import { Vector2, Matrix3, ResolverState } from '../types';
1515
import { SafeResolverEvent } from '../../../common/endpoint/types';

‎x-pack/plugins/security_solution/public/resolver/view/styles.tsx‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,62 @@
55
*/
66

77
import { EuiPanel, EuiCallOut } from '@elastic/eui';
8-
98
import styled from 'styled-components';
9+
import { NodeSubMenuComponents } from './submenu';
10+
11+
/**
12+
* See `NodeSubMenuComponents`
13+
*/
14+
export const NodeSubMenu = styled(NodeSubMenuComponents)`
15+
margin: 2px 0 0 0;
16+
padding: 0;
17+
border: none;
18+
display: flex;
19+
flex-flow: column;
20+
21+
&.options {
22+
font-size: 0.8rem;
23+
display: flex;
24+
flex-flow: row wrap;
25+
background: transparent;
26+
position: absolute;
27+
top: 4.5em;
28+
contain: content;
29+
width: 12em;
30+
z-index: 2;
31+
backdrop-filter: blur(5px);
32+
}
33+
34+
&.options .item {
35+
margin: 0.25ch 0.35ch 0.35ch 0;
36+
padding: 0.35em 0.5em;
37+
height: fit-content;
38+
width: fit-content;
39+
border-radius: 2px;
40+
line-height: 0.8;
41+
}
42+
43+
&.options .item button {
44+
appearance: none;
45+
height: fit-content;
46+
width: fit-content;
47+
line-height: 0.8;
48+
outline-style: none;
49+
border-color: transparent;
50+
box-shadow: none;
51+
}
52+
53+
&.options .item button:focus {
54+
outline-style: none;
55+
border-color: transparent;
56+
box-shadow: none;
57+
text-decoration: underline;
58+
}
59+
60+
&.options .item button:active {
61+
transform: scale(0.95);
62+
}
63+
`;
1064

1165
/**
1266
* The top level DOM element for Resolver

‎x-pack/plugins/security_solution/public/resolver/view/submenu.tsx‎

Lines changed: 3 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
import { i18n } from '@kbn/i18n';
88
import React, { useMemo } from 'react';
99
import { EuiI18nNumber } from '@elastic/eui';
10-
import styled from 'styled-components';
1110
import { ResolverNodeStats } from '../../../common/endpoint/types';
1211
import { useRelatedEventByCategoryNavigation } from './use_related_event_by_category_navigation';
1312
import { useColors } from './use_colors';
@@ -43,11 +42,10 @@ interface ResolverSubmenuOption {
4342
export type ResolverSubmenuOptionList = ResolverSubmenuOption[] | string;
4443

4544
/**
46-
* A Submenu to be displayed in one of two forms:
47-
* 1) Provided a collection of `optionsWithActions`: it will call `menuAction` then - if and when menuData becomes available - display each item with an optional prefix and call the supplied action for the options when that option is clicked.
48-
* 2) Provided `optionsWithActions` is undefined, it will call the supplied `menuAction` when its host button is clicked.
45+
* A Submenu that displays a collection of "pills" for each related event
46+
* category it has events for.
4947
*/
50-
const NodeSubMenuComponents = React.memo(
48+
export const NodeSubMenuComponents = React.memo(
5149
({
5250
className,
5351
nodeID,
@@ -117,53 +115,3 @@ const NodeSubMenuComponents = React.memo(
117115
);
118116
}
119117
);
120-
121-
export const NodeSubMenu = styled(NodeSubMenuComponents)`
122-
margin: 2px 0 0 0;
123-
padding: 0;
124-
border: none;
125-
display: flex;
126-
flex-flow: column;
127-
128-
&.options {
129-
font-size: 0.8rem;
130-
display: flex;
131-
flex-flow: row wrap;
132-
background: transparent;
133-
position: absolute;
134-
top: 4.5em;
135-
contain: content;
136-
width: 12em;
137-
z-index: 2;
138-
}
139-
140-
&.options .item {
141-
margin: 0.25ch 0.35ch 0.35ch 0;
142-
padding: 0.35em 0.5em;
143-
height: fit-content;
144-
width: fit-content;
145-
border-radius: 2px;
146-
line-height: 0.8;
147-
}
148-
149-
&.options .item button {
150-
appearance: none;
151-
height: fit-content;
152-
width: fit-content;
153-
line-height: 0.8;
154-
outline-style: none;
155-
border-color: transparent;
156-
box-shadow: none;
157-
}
158-
159-
&.options .item button:focus {
160-
outline-style: none;
161-
border-color: transparent;
162-
box-shadow: none;
163-
text-decoration: underline;
164-
}
165-
166-
&.options .item button:active {
167-
transform: scale(0.95);
168-
}
169-
`;

0 commit comments

Comments
 (0)