fix: put Single Stat default styles into stylesheet to prevent font f…

…lashing (#822)
influxdata · Oct 11, 2022 · 5018caa · 5018caa
1 parent a88b2fb
commit 5018caa
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 29 deletions.
diff --git a/giraffe/README.md b/giraffe/README.md
@@ -838,7 +838,7 @@ TableGraphLayerConfig uses the `fluxResponse` property from `config` as the data
  &#60;/div&#62;
  </pre>
 
- - **style**: _Object. Optional. Recommendation: do not include._ An object containing the key-value pairs used for inline styling `.giraffe-layer-single-stat` by setting its [style property](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style). If used, please be aware of existing default styles that may need to be overridden. `backgroundColor` cannot be overridden and is controlled by the **backgroundColor** option (see above). See the `SINGLE_STAT_DEFAULT_STYLE` [here](./src/constants/singleStatStyles.ts).
+ - **style**: _Object. Optional. Recommendation: do not include._ An object containing the key-value pairs used for inline styling `.giraffe-layer-single-stat` by setting its [style property](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style). If used, please be aware of existing default styles that may need to be overridden. `backgroundColor` cannot be overridden and is controlled by the **backgroundColor** option (see above).
 
  - **resizerStyle**: _Object. Optional. Recommendation: do not include._ An object containing the key-value pairs used for inline styling `.giraffe-single-stat--resizer` by setting its [style property](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style). If used, please be aware of existing default styles that may need to be overridden. See the `SINGLE_STAT_RESIZER_DEFAULT_STYLE` [here](./src/constants/singleStatStyles.ts).
 

diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@influxdata/giraffe",
- "version": "2.37.1",
+ "version": "2.38.0",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "license": "MIT",

diff --git a/giraffe/src/components/SingleStat/SingleStatLayer.scss b/giraffe/src/components/SingleStat/SingleStatLayer.scss
@@ -0,0 +1,60 @@
+@import '../../style/variables.scss';
+
+@font-face {
+ font-family: 'Proxima Nova';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../../fonts/ProximaNova-Light.woff2') format('woff2');
+ font-display: block;
+}
+@font-face {
+ font-family: 'Proxima Nova';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../../fonts/ProximaNova-Regular.woff2') format('woff2');
+ font-display: block;
+}
+@font-face {
+ font-family: 'Proxima Nova';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../../fonts/ProximaNova-Medium.woff2') format('woff2');
+ font-display: block;
+}
+@font-face {
+ font-family: 'Proxima Nova';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../../fonts/ProximaNova-Bold.woff2') format('woff2');
+ font-display: block;
+}
+@font-face {
+ font-family: 'Proxima Nova';
+ font-style: normal;
+ font-weight: 900;
+ src: url('../../fonts/ProximaNova-Black.woff2') format('woff2');
+ font-display: block;
+}
+
+.giraffe-layer-single-stat {
+ align-items: center;
+ border-radius: 4px;
+ bottom: 0;
+ color: $c-laser;
+ cursor: text;
+ display: flex;
+ font-family: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+ height: 100%;
+ justify-content: center;
+ left: 0;
+ overflow: hidden;
+ padding: 8px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ -webkit-user-select: text;
+ user-select: text;
+}
diff --git a/giraffe/src/components/SingleStat/SingleStatLayer.scss.d.ts b/giraffe/src/components/SingleStat/SingleStatLayer.scss.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'giraffe-layer-single-stat': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/giraffe/src/components/SingleStat/SingleStatLayer.tsx b/giraffe/src/components/SingleStat/SingleStatLayer.tsx
@@ -1,6 +1,6 @@
 import React, {FunctionComponent} from 'react'
+import classnames from 'classnames'
 import {
- SINGLE_STAT_DEFAULT_STYLE,
  SINGLE_STAT_DEFAULT_TEST_ID,
  SINGLE_STAT_RESIZER_DEFAULT_STYLE,
  SINGLE_STAT_SVG_DEFAULT_ATTRIBUTES,
@@ -10,6 +10,10 @@ import {
 import {SingleStatLayerConfig} from '../../types'
 import {formatStatValue} from '../../utils/formatStatValue'
 
+import styles from './SingleStatLayer.scss'
+
+import {styleReducer} from '../../utils/styleReducer'
+
 interface Props {
  stat: number
  config: SingleStatLayerConfig
@@ -36,6 +40,12 @@ export const SingleStatLayer: FunctionComponent<Props> = props => {
  textOpacity = 1,
  } = config
 
+ const singleStatLayerClasses = styleReducer(
+ styles,
+ 'giraffe-layer giraffe-layer-single-stat',
+ classnames('giraffe-layer-single-stat')
+ )
+
  const formattedValue = formatStatValue(stat, {decimalPlaces, prefix, suffix})
 
  let viewBox = getDefaultViewBox(formattedValue)
@@ -49,10 +59,9 @@ export const SingleStatLayer: FunctionComponent<Props> = props => {
 
  return (
  <div
- className="giraffe-layer giraffe-layer-single-stat"
+ className={singleStatLayerClasses}
  data-testid={testID}
  style={{
- ...SINGLE_STAT_DEFAULT_STYLE,
  ...style,
  backgroundColor: `${backgroundColor}`,
  }}

diff --git a/giraffe/src/fonts/ProximaNova-Black.woff2 b/giraffe/src/fonts/ProximaNova-Black.woff2
diff --git a/giraffe/src/fonts/ProximaNova-Bold.woff2 b/giraffe/src/fonts/ProximaNova-Bold.woff2
diff --git a/giraffe/src/fonts/ProximaNova-Light.woff2 b/giraffe/src/fonts/ProximaNova-Light.woff2
diff --git a/giraffe/src/fonts/ProximaNova-Medium.woff2 b/giraffe/src/fonts/ProximaNova-Medium.woff2
diff --git a/giraffe/src/fonts/ProximaNova-Regular.woff2 b/giraffe/src/fonts/ProximaNova-Regular.woff2
diff --git a/giraffe/src/style/singleStatStyles.ts b/giraffe/src/style/singleStatStyles.ts
@@ -3,29 +3,6 @@ export const LASER = '#00C9FF'
 
 export const SINGLE_STAT_DEFAULT_TEST_ID = 'giraffe-layer-single-stat'
 
-export const SINGLE_STAT_DEFAULT_STYLE: CSSProperties = {
- alignItems: 'center',
- borderRadius: '4px',
- bottom: 0,
- color: LASER,
- cursor: 'text',
- display: 'flex',
- fontFamily: '"Proxima Nova", Helvetica, Arial, Tahoma, Verdana, sans-serif',
- height: '100%',
- justifyContent: 'center',
- left: 0,
- MozUserSelect: 'text',
- msUserSelect: 'text',
- overflow: 'hidden',
- padding: '8px',
- position: 'absolute',
- right: 0,
- top: 0,
- userSelect: 'text',
- WebkitUserSelect: 'text',
- width: '100%',
-}
-
 export const SINGLE_STAT_RESIZER_DEFAULT_STYLE: CSSProperties = {
  overflow: 'hidden',
  width: '100%',

diff --git a/giraffe/src/style/variables.scss b/giraffe/src/style/variables.scss
@@ -41,6 +41,7 @@ $c-amethyst: #8e1fc3;
 $c-dreamsicle: #ff8564;
 $c-emerald: #006f49;
 $c-fire: #dc4e58;
+$c-laser: #00c9ff;
 $c-ocean: #066fc5;
 $c-pineapple: #ffb94a;
 $c-pool: #00a3ff;

diff --git a/stories/package.json b/stories/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@influxdata/giraffe-stories",
- "version": "2.37.1",
+ "version": "2.38.0",
  "license": "MIT",
  "repository": {
  "type": "git",

diff --git a/stories/src/singleStat.stories.tsx b/stories/src/singleStat.stories.tsx
@@ -77,6 +77,13 @@ storiesOf('Single Stat', module)
  viewBox: stat =>
  `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
  },
+ svgTextStyle: {
+ fontSize: '100',
+ fontWeight: 'lighter',
+ dominantBaseline: 'middle',
+ textAnchor: 'middle',
+ letterSpacing: '-0.05em',
+ },
  },
  ],
  }
@@ -133,6 +140,13 @@ storiesOf('Single Stat', module)
  viewBox: stat =>
  `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
  },
+ svgTextStyle: {
+ fontSize: '100',
+ fontWeight: 'lighter',
+ dominantBaseline: 'middle',
+ textAnchor: 'middle',
+ letterSpacing: '-0.05em',
+ },
  },
  ],
  }
@@ -249,6 +263,13 @@ storiesOf('Single Stat', module)
  `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
  },
  svgStyle: SINGLE_STAT_SVG_NO_USER_SELECT,
+ svgTextStyle: {
+ fontSize: '100',
+ fontWeight: 'lighter',
+ dominantBaseline: 'middle',
+ textAnchor: 'middle',
+ letterSpacing: '-0.05em',
+ },
  })
  }