github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens] fix inconsistent annotation icon styles (#159542)

Browse source 
## Summary
Fixes https://github.com/elastic/kibana/issues/159540

Fixed by:
1. To fix the fill, I made the triangle and circle svgs consistent with
the ones from EUI. Now they work with fill and not with stroke. Thanks
to that we could remove `canFill` property.
2. To fix rotation for triangle, I added `!important` to transform when
adding `xyAnnotationIcon_rotate90`. Btw this class was added to path and
to svg, that's why before rotation was 45deg (because added to two
elements). I fixed it too.

<img width="804" alt="Screenshot 2023-06-13 at 10 13 27"
src="c52e2692-cbbf-4e22-9241-eab6a3aa7c6f">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Marta Bondyra 2023-06-21 09:18:48 +02:00 • committed by GitHub
parent 599e2311a6
commit 7ea54fa678
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 4 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/kbn-chart-icons/src/assets/annotation_icons/circle.tsx
View file

@ -8,8 +8,6 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { cx } from '@emotion/css';
import { noFill } from '../common_styles';
export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
@ -21,13 +19,6 @@ export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'typ
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<circle
strokeWidth="1"
stroke="currentColor"
cx="8"
cy="8"
className={cx(noFill, props.className)}
r="7"
/>
<path d="M7.427.522c-.813.081-1.398.21-2.039.45a7.318 7.318 0 0 0-2.67 1.72A7.045 7.045 0 0 0 1.28 4.68 7.241 7.241 0 0 0 .507 8c0 1.196.243 2.24.773 3.32a7.047 7.047 0 0 0 1.425 1.975A7.047 7.047 0 0 0 4.68 14.72a7.254 7.254 0 0 0 3.32.773 7.254 7.254 0 0 0 3.32-.773 7.047 7.047 0 0 0 1.975-1.425 7.047 7.047 0 0 0 1.425-1.975A7.254 7.254 0 0 0 15.493 8a7.254 7.254 0 0 0-.773-3.32 7.045 7.045 0 0 0-1.438-1.988C12.111 1.524 10.695.818 9.027.571 8.773.533 7.659.499 7.427.522m1.426 1.041a6.519 6.519 0 0 1 3.091 1.271c.329.246.976.893 1.222 1.222.561.751.976 1.634 1.164 2.479a6.766 6.766 0 0 1 0 2.93c-.414 1.861-1.725 3.513-3.463 4.363a6.76 6.76 0 0 1-1.987.616c-.424.065-1.336.065-1.76 0-1.948-.296-3.592-1.359-4.627-2.993a7.502 7.502 0 0 1-.634-1.332A6.158 6.158 0 0 1 1.514 8c0-1.039.201-1.925.646-2.84.34-.698.686-1.18 1.253-1.747A5.956 5.956 0 0 1 5.16 2.16a6.452 6.452 0 0 1 3.693-.597" />
</svg>
);

9
packages/kbn-chart-icons/src/assets/annotation_icons/triangle.tsx
View file

@ -8,8 +8,6 @@
import React from 'react';
import { EuiIconProps } from '@elastic/eui';
import { cx } from '@emotion/css';
import { noFill } from '../common_styles';
export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
<svg
@ -22,11 +20,6 @@ export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 't
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
strokeWidth="1"
stroke="currentColor"
d="M 6.9 11.612 C 7.64533 12.7953 8.39067 12.7953 9.136 11.612 L 13.11 5.3 C 13.8553 4.11667 13.4827 3.525 11.992 3.525 L 4.044 3.525 C 2.55333 3.525 2.18067 4.11667 2.926 5.3 Z"
className={cx(noFill, props.className)}
/>
<path d="M3.373 3.079c-.391.062-.637.158-.88.342-.545.415-.577 1.146-.087 1.979.174.296 3.984 6.347 4.164 6.613.32.474.755.838 1.117.937a1.7 1.7 0 0 0 .596.021c.138-.032.341-.126.49-.226.202-.135.523-.478.713-.762.378-.563 4.084-6.475 4.211-6.716.385-.733.368-1.339-.051-1.757-.168-.168-.437-.307-.767-.395l-.226-.06L8.12 3.05c-3.567-.004-4.579.002-4.747.029m9.267 1.004c.208.058.317.121.335.194.022.086-.029.259-.141.482-.129.258-4.174 6.679-4.327 6.87-.264.328-.441.419-.63.323-.116-.059-.33-.275-.454-.459-.276-.405-4.148-6.585-4.234-6.758a.93.93 0 0 1-.117-.364l-.011-.153.103-.053c.094-.048.288-.095.503-.121.044-.006 2.048-.008 4.453-.006 3.853.003 4.391.009 4.52.045" />
</svg>
);

4
packages/kbn-chart-icons/src/assets/common_styles.tsx
View file

@ -17,7 +17,3 @@ export const colors = {
fill: ${euiThemeVars.euiColorVis0};
`,
};
export const noFill = css`
fill: none;
`;

2
src/plugins/chart_expressions/expression_xy/public/components/annotations.scss
View file

@ -13,7 +13,7 @@
}
.xyAnnotationIcon_rotate90 {
transform: rotate(45deg);
transform: rotate(90deg) !important;
transform-origin: center;
}

8
src/plugins/chart_expressions/expression_xy/public/helpers/annotations.tsx
View file

@ -8,7 +8,6 @@
import React from 'react';
import { Position } from '@elastic/charts';
import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText } from '@elastic/eui';
import classnames from 'classnames';
import type {
IconPosition,
ReferenceLineDecorationConfig,
@ -180,12 +179,7 @@ export const AnnotationIcon = ({
{...rest}
data-test-subj="xyVisAnnotationIcon"
type={iconConfig.icon || type}
className={classnames(
{ [rotateClassName]: iconConfig.shouldRotate },
{
lensAnnotationIconFill: renderedInChart && iconConfig.canFill,
}
)}
className={iconConfig.shouldRotate ? rotateClassName : undefined}
/>
);
};

2
src/plugins/chart_expressions/expression_xy/public/helpers/icon.ts
View file

@ -57,7 +57,6 @@ export const iconSet = [
defaultMessage: 'Circle',
}),
icon: IconCircle,
canFill: true,
},
{
@ -113,6 +112,5 @@ export const iconSet = [
}),
icon: IconTriangle,
shouldRotate: true,
canFill: true,
},
];

2
src/plugins/event_annotation/public/components/annotation_editor_controls/icon_set.ts
View file

@ -48,7 +48,6 @@ export const annotationsIconSet: IconSet<AvailableAnnotationIcon> = [
defaultMessage: 'Circle',
}),
icon: IconCircle,
canFill: true,
},
{
@ -106,6 +105,5 @@ export const annotationsIconSet: IconSet<AvailableAnnotationIcon> = [
}),
icon: IconTriangle,
shouldRotate: true,
canFill: true,
},
];

1
src/plugins/visualization_ui_components/public/components/icon_select.tsx
View file

@ -26,7 +26,6 @@ export type IconSet<T> = Array<{
label: string;
icon?: T | IconType;
shouldRotate?: boolean;
canFill?: boolean;
}>;
const IconView = (props: { value?: string; label: string; icon?: IconType }) => {

4
x-pack/plugins/lens/public/app_plugin/app.scss
View file

@ -19,10 +19,6 @@
flex-grow: 1;
}
.lensAnnotationIconFill {
fill: $euiColorEmptyShade;
}
// Less-than-ideal styles to add a vertical divider after this button. Consider restructuring markup for better semantics and styling options in the future.
.lnsNavItem__withDivider {
@include euiBreakpoint('m', 'l', 'xl') {