maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Uptime] New width/delay definition for waterfall sidebar item tooltip (#100147) (#101083)

Browse source 
* Add new width definition for waterfall sidebar item. Add delay to tooltip.

* Add default value for style if/when undefined.

* Create shared style for eui breakpoints to use by both waterfall tooltip types.

* Add a comment.

* Use viewport units instead of breakpoints.

* Rename a style.

* Add top margin to prevent tooltip from missing target item. Rename a style.

* Adjust custom `margin-top`.

* Add index to tooltip content.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Justin Kambic <justin.kambic@elastic.co>
This commit is contained in:
Kibana Machine 2021-06-01 16:56:12 -04:00 committed by GitHub
parent 0a3e83aa10
commit e99f42d848
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
View file

@ -16,6 +16,7 @@ import {
EuiIcon,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { WaterfallTooltipResponsiveMaxWidth } from './styles';
import { FIXED_AXIS_HEIGHT } from './constants';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
@ -113,7 +114,13 @@ export const MiddleTruncatedText = ({
<EuiScreenReaderOnly>
<span data-test-subj="middleTruncatedTextSROnly">{fullText}</span>
</EuiScreenReaderOnly>
<EuiToolTip content={fullText} position="top" data-test-subj="middleTruncatedTextToolTip">
<WaterfallTooltipResponsiveMaxWidth
as={EuiToolTip}
content={`${index}. ${fullText}`}
data-test-subj="middleTruncatedTextToolTip"
delay="long"
position="top"
>
<>
{onClick ? (
<StyledButton
@ -153,7 +160,7 @@ export const MiddleTruncatedText = ({
</InnerContainer>
)}
</>
</EuiToolTip>
</WaterfallTooltipResponsiveMaxWidth>
<span>
<EuiLink href={url} external target="_blank">
<EuiScreenReaderOnly>

7
x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts
View file

@ -143,7 +143,12 @@ export const WaterfallChartLegendContainer = euiStyled.div`
box-shadow: 0px -1px 4px 0px ${(props) => props.theme.eui.euiColorLightShade};
`; // NOTE: EuiShadowColor is a little too dark to work with the background-color
export const WaterfallChartTooltip = euiStyled.div`
export const WaterfallTooltipResponsiveMaxWidth = euiStyled.div`
margin-top: 16px;
max-width: 90vw;
`;
export const WaterfallChartTooltip = euiStyled(WaterfallTooltipResponsiveMaxWidth)`
background-color: ${(props) => props.theme.eui.euiColorDarkestShade};
border-radius: ${(props) => props.theme.eui.euiBorderRadius};
color: ${(props) => props.theme.eui.euiColorLightestShade};