fix: add className to all annotation pins (#689)

influxdata · Oct 20, 2021 · c17f289 · c17f289
1 parent d6425a9
commit c17f289
Show file tree

Hide file tree

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

diff --git a/giraffe/src/components/AnnotationLine.tsx b/giraffe/src/components/AnnotationLine.tsx
@@ -91,6 +91,7 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
  {pin === 'circle' &&
  createElement('circle', {
  r: PIN_CIRCLE_RADIUS,
+ className: 'giraffe-annotation-click-target',
  fill: color,
  cx: length - PIN_CIRCLE_RADIUS,
  cy: clampedStart,
@@ -100,10 +101,10 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
  points: `${length - PIN_TRIANGLE_HEIGHT}, ${clampedStart} ${length -
  PIN_TRIANGLE_HEIGHT / 2}, ${clampedStart +
  PIN_TRIANGLE_WIDTH} ${length}, ${clampedStart}`,
+ className: 'giraffe-annotation-click-target',
  fill: color,
- style: {cursor: 'pointer'},
  id: props.id,
- className: 'giraffe-annotation-click-target',
+ style: {cursor: 'pointer'},
  })}
  {pin === 'stop' &&
  createElement('polygon', {
@@ -133,6 +134,7 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
  ${clampedEnd + pixelMargin}, 0
  ${clampedEnd + pixelMargin}, ${RANGE_HEIGHT}
  ${clampedStart - pixelMargin}, ${RANGE_HEIGHT}`,
+ className: 'giraffe-annotation-click-target',
  fill: color,
  id: props.id,
  style: {cursor: 'pointer', opacity: '60%'},
@@ -167,6 +169,7 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
  case 'circle':
  return createElement('circle', {
  r: PIN_CIRCLE_RADIUS,
+ className: 'giraffe-annotation-click-target',
  fill: color,
  cx: clampedStart,
  cy: PIN_CIRCLE_RADIUS,
@@ -176,10 +179,10 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
  points: `${clampedStart - PIN_TRIANGLE_WIDTH}, 0
  ${clampedStart + PIN_TRIANGLE_WIDTH}, 0
  ${clampedStart}, ${PIN_TRIANGLE_HEIGHT}`,
+ className: 'giraffe-annotation-click-target',
  fill: color,
- style: {cursor: 'pointer'},
  id: props.id,
- className: 'giraffe-annotation-click-target',
+ style: {cursor: 'pointer'},
  onMouseEnter: () => {
  onHover(true)
  },

diff --git a/stories/package.json b/stories/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@influxdata/giraffe-stories",
- "version": "2.18.7",
+ "version": "2.18.9",
  "license": "MIT",
  "scripts": {
  "lint": "eslint '{src,../giraffe/src}/**/*.{ts,tsx}'",