fix: make annotation target better clickable (#517)

This PR makes the annotation click target better clickable and also improves the UX by making the hover state of the line to change opacity, indicating that it's a clickable target.
influxdata · Mar 29, 2021 · 395f67c · 395f67c
1 parent d8977e2
commit 395f67c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 deletions.
diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "main": "dist/index.js",
   "module": "src/index.js",
   "license": "MIT",

diff --git a/giraffe/src/components/AnnotationLine.scss b/giraffe/src/components/AnnotationLine.scss
@@ -0,0 +1,12 @@
+/*
+  Annotation Line Styles
+  ------------------------------------------------------------------------------
+*/
+
+.giraffe-annotation-hover{
+  cursor: pointer;
+  &:hover {
+    opacity: 80%;
+    transition: opacity 0.25s ease;
+  }
+}
diff --git a/giraffe/src/components/AnnotationLine.scss.d.ts b/giraffe/src/components/AnnotationLine.scss.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'giraffe-annotation-hover': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/giraffe/src/components/AnnotationLine.tsx b/giraffe/src/components/AnnotationLine.tsx
@@ -1,6 +1,8 @@
 import React, {FunctionComponent, createElement} from 'react'
 import {AnnotationDimension, AnnotationPinType} from '../types'
 
+import styles from './AnnotationLine.scss'
+
 interface AnnotationLineProps {
   dimension: AnnotationDimension
   color: string
@@ -29,6 +31,16 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
   if (dimension === 'y') {
     return (
       <>
+        <line
+          x1="0"
+          x2={length}
+          y1={clampedStart}
+          y2={clampedStart}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          id={props.id}
+          className={`${styles['giraffe-annotation-hover']} giraffe-annotation-line`}
+        />
         {pin === 'circle' &&
           createElement('circle', {
             r: PIN_CIRCLE_RADIUS,
@@ -53,20 +65,22 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
               PIN_TRIANGLE_WIDTH} ${length}, ${clampedStart}`,
             fill: color,
           })}
-        <line
-          x1="0"
-          x2={length}
-          y1={clampedStart}
-          y2={clampedStart}
-          stroke={color}
-          strokeWidth={strokeWidth}
-        />
       </>
     )
   }
 
   return (
     <>
+      <line
+        x1={clampedStart}
+        x2={clampedStart}
+        y1="0"
+        y2={length}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        id={props.id}
+        className={`${styles['giraffe-annotation-hover']} giraffe-annotation-line`}
+      />
       {pin === 'circle' &&
         createElement('circle', {
           r: PIN_CIRCLE_RADIUS,
@@ -91,15 +105,6 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
             2} ${clampedStart}, ${PIN_TRIANGLE_HEIGHT}`,
           fill: color,
         })}
-      <line
-        x1={clampedStart}
-        x2={clampedStart}
-        y1="0"
-        y2={length}
-        stroke={color}
-        strokeWidth={strokeWidth}
-        className="giraffe-annotation-line"
-      />
     </>
   )
 }

diff --git a/giraffe/src/components/AnnotationTooltip.tsx b/giraffe/src/components/AnnotationTooltip.tsx
@@ -51,7 +51,7 @@ export const AnnotationTooltip: FunctionComponent<Props> = props => {
 
   let tooltipCaretStyle: CSSProperties = {
     position: 'absolute',
-    borderWidth: '10px',
+    borderWidth: '7px',
     borderStyle: 'solid',
     borderColor: 'transparent',
     zIndex: 2,