feat: add optional svg style to disable user select for Single Stat (#817)

Author: TCL735

giraffe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.36.1",
+  "version": "2.37.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",

giraffe/src/components/SingleStat/SingleStatLayer.tsx

@@ -6,7 +6,7 @@ import {
   SINGLE_STAT_SVG_DEFAULT_ATTRIBUTES,
   SINGLE_STAT_SVG_TEXT_DEFAULT_ATTRIBUTES,
   SINGLE_STAT_SVG_TEXT_DEFAULT_STYLE,
-} from '../../constants/singleStatStyles'
+} from '../../style/singleStatStyles'
 import {SingleStatLayerConfig} from '../../types'
 import {formatStatValue} from '../../utils/formatStatValue'
 

giraffe/src/index.ts

@@ -27,7 +27,7 @@ export {lineTransform} from './transforms/line'
 export * from './constants/colorSchemes'
 export * from './constants/columnKeys'
 export * from './style/gaugeStyles'
-export * from './constants/singleStatStyles'
+export * from './style/singleStatStyles'
 export {DEFAULT_TABLE_COLORS} from './constants/tableGraph'
 
 // Types

giraffe/src/constants/singleStatStyles.ts giraffe/src/style/singleStatStyles.tsgiraffe/src/constants/singleStatStyles.ts renamed to giraffe/src/style/singleStatStyles.ts

@@ -1,10 +1,9 @@
-import CSS from 'csstype'
-
+import {CSSProperties} from 'react'
 export const LASER = '#00C9FF'
 
 export const SINGLE_STAT_DEFAULT_TEST_ID = 'giraffe-layer-single-stat'
 
-export const SINGLE_STAT_DEFAULT_STYLE: CSS.Properties = {
+export const SINGLE_STAT_DEFAULT_STYLE: CSSProperties = {
   alignItems: 'center',
   borderRadius: '4px',
   bottom: 0,
@@ -27,7 +26,7 @@ export const SINGLE_STAT_DEFAULT_STYLE: CSS.Properties = {
   width: '100%',
 }
 
-export const SINGLE_STAT_RESIZER_DEFAULT_STYLE: CSS.Properties = {
+export const SINGLE_STAT_RESIZER_DEFAULT_STYLE: CSSProperties = {
   overflow: 'hidden',
   width: '100%',
   height: '100%',
@@ -47,6 +46,14 @@ export const SINGLE_STAT_SVG_TEXT_DEFAULT_ATTRIBUTES = {
   opacity: 1,
 }
 
-export const SINGLE_STAT_SVG_TEXT_DEFAULT_STYLE: CSS.Properties = {
+export const SINGLE_STAT_SVG_TEXT_DEFAULT_STYLE: CSSProperties = {
   fill: LASER,
 }
+
+export const SINGLE_STAT_SVG_NO_USER_SELECT: CSSProperties = {
+  MozUserSelect: 'none',
+  WebkitTouchCallout: 'none',
+  WebkitUserSelect: 'none',
+  msUserSelect: 'none',
+  userSelect: 'none',
+}

giraffe/src/types/index.ts

@@ -1,4 +1,3 @@
-import CSS from 'csstype'
 import {CSSProperties, ReactNode} from 'react'
 import {TimeZone} from './timeZones'
 import {GeoLayerConfig} from './geo'
@@ -295,7 +294,7 @@ export interface AnnotationLayerConfig {
   hoverDimension?: LineHoverDimension | 'auto'
   hoverMargin?: number
   svgAttributes?: SVGAttributes
-  svgStyle?: CSS.Properties
+  svgStyle?: CSSProperties
   lineWidth?: number
   handleAnnotationClick?: (id: string) => void
 }
@@ -364,12 +363,12 @@ export interface SingleStatLayerConfig {
   textOpacity?: number
   backgroundColor?: string
   testID?: string
-  style?: CSS.Properties
-  resizerStyle?: CSS.Properties
+  style?: CSSProperties
+  resizerStyle?: CSSProperties
   svgAttributes?: SVGAttributes
-  svgStyle?: CSS.Properties
+  svgStyle?: CSSProperties
   svgTextAttributes?: SVGAttributes
-  svgTextStyle?: CSS.Properties
+  svgTextStyle?: CSSProperties
 }
 
 export type SVGAttributeFunction = (stat: string) => string

stories/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.36.1",
+  "version": "2.37.0",
   "license": "MIT",
   "repository": {
     "type": "git",

stories/src/singleStat.stories.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react'
+import React from 'react'
 import {storiesOf} from '@storybook/react'
 import {boolean, number, select, text, withKnobs} from '@storybook/addon-knobs'
 import {
   Config,
-  Plot,
-  LayerConfig,
   LASER,
+  LayerConfig,
+  Plot,
+  SINGLE_STAT_SVG_NO_USER_SELECT,
   timeFormatter,
 } from '../../giraffe/src'
 
@@ -247,6 +248,7 @@ storiesOf('Single Stat', module)
           viewBox: stat =>
             `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
         },
+        svgStyle: SINGLE_STAT_SVG_NO_USER_SELECT,
       })
     }