stroke for icons & icon fill

elastic · Mar 22, 2022 · 0c126c4 · 0c126c4
1 parent f7e5c92
commit 0c126c4
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 10 deletions.
diff --git a/x-pack/plugins/lens/public/app_plugin/app.scss b/x-pack/plugins/lens/public/app_plugin/app.scss
@@ -39,6 +39,10 @@
   }
 }
 
+.lensAnnotationIconFill {
+  fill: $euiColorLightestShade;
+}
+
 // 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__goBack {
   @include euiBreakpoint('m', 'l', 'xl') {

diff --git a/x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx b/x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx
@@ -18,10 +18,14 @@ export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'typ
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path
-      fillRule="evenodd"
-      d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z"
-      clipRule="evenodd"
+    <circle
+      clipPath="circle()"
+      cx="8"
+      cy="8"
+      r="8"
+      className="lensAnnotationIconFill"
+      strokeWidth={typeof props.strokeWidth === 'number' ? Math.max(props.strokeWidth, 2) : 2}
+      stroke={'currentColor'}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx b/x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx
@@ -19,6 +19,15 @@ export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 't
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path fillRule="evenodd" d="M8 12h.47L16 0H0l7.53 12H8zm0-1.011L14.424.75H1.576L8 10.989z" />
+    <clipPath id="lnsAnnotationIconTriangle">
+      <path fillRule="evenodd" d="M8 12h.47L16 0H0l7.53 12H8zm0-1.011L14.424.75H1.576L8 10.989z" />
+    </clipPath>
+    <path
+      strokeWidth={props.strokeWidth}
+      stroke="currentColor"
+      clipPath="url(#lnsAnnotationIconTriangle)"
+      d="M8 12h.47L16 0H0l7.53 12H8zm0-1.011L14.424.75H1.576L8 10.989z"
+      className="lensAnnotationIconFill"
+    />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/xy_visualization/annotations/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/annotations/expression.tsx
@@ -176,6 +176,7 @@ export const Annotations = ({
         const header =
           formatter?.convert(isGrouped ? roundedTimestamp : exactTimestamp) ||
           moment(isGrouped ? roundedTimestamp : exactTimestamp).toISOString();
+        const strokeWidth = annotation.lineWidth || 1;
         return (
           <LineAnnotation
             id={id}
@@ -190,6 +191,7 @@ export const Annotations = ({
                     hasReducedPadding,
                     label: annotation.label,
                     rotationClass: getIconRotationClass(markerPosition),
+                    strokeWidth,
                   }}
                 />
               ) : undefined
@@ -217,13 +219,13 @@ export const Annotations = ({
             customTooltipDetails={annotation.customTooltipDetails}
             style={{
               line: {
-                strokeWidth: annotation.lineWidth || 1,
+                strokeWidth,
                 stroke: annotation.color || defaultAnnotationColor,
                 dash:
                   annotation.lineStyle === 'dashed'
-                    ? [(annotation.lineWidth || 1) * 3, annotation.lineWidth || 1]
+                    ? [strokeWidth * 3, strokeWidth]
                     : annotation.lineStyle === 'dotted'
-                    ? [annotation.lineWidth || 1, annotation.lineWidth || 1]
+                    ? [strokeWidth, strokeWidth]
                     : undefined,
                 opacity: 1,
               },

diff --git a/x-pack/plugins/lens/public/xy_visualization/annotations_helpers.tsx b/x-pack/plugins/lens/public/xy_visualization/annotations_helpers.tsx
@@ -9,6 +9,7 @@ import './expression_reference_lines.scss';
 import React from 'react';
 import { EuiFlexGroup, EuiIcon, EuiIconProps, EuiText, IconType } from '@elastic/eui';
 import { Position } from '@elastic/charts';
+import classnames from 'classnames';
 import type { IconPosition, YAxisMode, YConfig } from '../../common/expressions';
 import { hasIcon } from './xy_config_panel/shared/icon_select';
 import { IconCircle, IconTriangle } from '../assets/annotation_icons';
@@ -215,11 +216,13 @@ export const AnnotationIcon = ({
   type,
   rotationClass = '',
   isHorizontal,
+  strokeWidth,
   ...rest
 }: {
   type: string;
   rotationClass?: string;
   isHorizontal?: boolean;
+  strokeWidth?: number;
 } & EuiIconProps) => {
   if (isNumericalString(type)) {
     return <NumberIcon number={Number(type)} />;
@@ -230,7 +233,15 @@ export const AnnotationIcon = ({
   }
 
   const rotationClassName = shapesIconMap[type].shouldRotate ? rotationClass : '';
-  return <EuiIcon {...rest} type={shapesIconMap[type].icon} className={rotationClassName} />;
+  return (
+    <EuiIcon
+      {...rest}
+      type={shapesIconMap[type].icon}
+      className={classnames(rotationClassName)}
+      strokeWidth={strokeWidth}
+      stroke={strokeWidth ? 'currentColor' : undefined}
+    />
+  );
 };
 
 export function Marker({
@@ -239,15 +250,19 @@ export function Marker({
   hasReducedPadding,
   label,
   rotationClass,
+  strokeWidth,
 }: {
   config: MarkerConfig;
   isHorizontal: boolean;
   hasReducedPadding: boolean;
   label?: string;
   rotationClass?: string;
+  strokeWidth?: number;
 }) {
   if (hasIcon(config.icon)) {
-    return <AnnotationIcon type={config.icon} rotationClass={rotationClass} />;
+    return (
+      <AnnotationIcon type={config.icon} rotationClass={rotationClass} strokeWidth={strokeWidth} />
+    );
   }
 
   // if there's some text, check whether to show it as marker, or just show some padding for the icon