fix: put Single Stat default styles into stylesheet to prevent font flashing (#822)

Author: TCL735

giraffe/README.md

@@ -838,7 +838,7 @@ TableGraphLayerConfig uses the `fluxResponse` property from `config` as the data
       </div>
     </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).
 

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",

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;
+}

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;

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}`,
       }}