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] Expandable flyout - update preview shadow (#211098)

Browse source 
## Summary

Improved UI on preview background

Before


![image](https://github.com/user-attachments/assets/5ae595a3-ebdc-4a18-a58d-6e65eb61574a)


After

![image](https://github.com/user-attachments/assets/e8f9aafb-6bcc-42e3-ab92-0c394be4d695)



### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
christineweng 2025-02-14 22:07:54 -06:00 • committed by GitHub
parent 6006546dc4
commit ece08bd3f6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

19
x-pack/solutions/security/packages/expandable-flyout/src/components/preview_section.tsx
View file

@ -13,6 +13,7 @@ import {
EuiSplitPanel, EuiSplitPanel,
EuiText, EuiText,
useEuiTheme, useEuiTheme,
transparentize,
} from '@elastic/eui'; } from '@elastic/eui';
import React, { memo, useMemo } from 'react'; import React, { memo, useMemo } from 'react';
import { css } from '@emotion/react'; import { css } from '@emotion/react';
@ -134,21 +135,17 @@ export const PreviewSection: React.FC<PreviewSectionProps> = memo(
<div <div
css={css` css={css`
position: absolute; position: absolute;
top: 8px; top: 0;
bottom: 8px; bottom: 0;
right: 4px; right: 0;
width: ${width}; width: ${width};
z-index: 1000; z-index: 1000;
padding: ${euiTheme.size.m} ${euiTheme.size.s} 0px ${euiTheme.size.s};
// TODO EUI: add color with transparency
background: ${transparentize(euiTheme.colors.shadow, 0.1)};
`} `}
> >
<EuiSplitPanel.Outer <EuiSplitPanel.Outer data-test-subj={PREVIEW_SECTION_TEST_ID} className="eui-fullHeight">
css={css`
margin: ${euiTheme.size.xs};
box-shadow: 0 0 ${euiTheme.size.base} 0 ${euiTheme.colors.lightShade};
`}
data-test-subj={PREVIEW_SECTION_TEST_ID}
className="eui-fullHeight"
>
{isPreviewBanner(banner) && ( {isPreviewBanner(banner) && (
<EuiSplitPanel.Inner <EuiSplitPanel.Inner
grow={false} grow={false}

1
x-pack/solutions/security/plugins/security_solution/public/timelines/components/modal/index.styles.tsx
View file

@ -27,6 +27,7 @@ export const usePaneStyles = () => {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
// TODO EUI: add color with transparency
background: ${transparentize(euiTheme.colors.ink, 0.5)}; background: ${transparentize(euiTheme.colors.ink, 0.5)};
z-index: ${(euiTheme.levels.flyout as number) + z-index: ${(euiTheme.levels.flyout as number) +
1}; // this z-index needs to be between the eventFlyout (set at 1000) and the timelineFlyout (set at 1002) 1}; // this z-index needs to be between the eventFlyout (set at 1000) and the timelineFlyout (set at 1002)