From 0f03e0faea888d4ecaa67a42000cb2116da391f5 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 26 Apr 2022 11:21:11 -0700
Subject: [PATCH] PR feedback from Caroline

---
 .../health/__snapshots__/health.test.tsx.snap | 30 +++++++++----------
 src/components/health/health.styles.ts        |  8 ++---
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/health/__snapshots__/health.test.tsx.snap b/src/components/health/__snapshots__/health.test.tsx.snap
index 2872c16f8179..fca07e241008 100644
--- a/src/components/health/__snapshots__/health.test.tsx.snap
+++ b/src/components/health/__snapshots__/health.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiHealth is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiHealth testClass1 testClass2 css-1p3stn6-euiHealth-s"
+  class="euiHealth testClass1 testClass2 css-1go2jns-euiHealth-s"
   data-test-subj="test subject string"
 >
   <div
@@ -25,7 +25,7 @@ exports[`EuiHealth is rendered 1`] = `
 
 exports[`EuiHealth props color #000000 is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -47,7 +47,7 @@ exports[`EuiHealth props color #000000 is rendered 1`] = `
 
 exports[`EuiHealth props color accent is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -69,7 +69,7 @@ exports[`EuiHealth props color accent is rendered 1`] = `
 
 exports[`EuiHealth props color danger is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -91,7 +91,7 @@ exports[`EuiHealth props color danger is rendered 1`] = `
 
 exports[`EuiHealth props color default is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -113,7 +113,7 @@ exports[`EuiHealth props color default is rendered 1`] = `
 
 exports[`EuiHealth props color ghost is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -135,7 +135,7 @@ exports[`EuiHealth props color ghost is rendered 1`] = `
 
 exports[`EuiHealth props color inherit is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -157,7 +157,7 @@ exports[`EuiHealth props color inherit is rendered 1`] = `
 
 exports[`EuiHealth props color primary is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -179,7 +179,7 @@ exports[`EuiHealth props color primary is rendered 1`] = `
 
 exports[`EuiHealth props color subdued is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -201,7 +201,7 @@ exports[`EuiHealth props color subdued is rendered 1`] = `
 
 exports[`EuiHealth props color success is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -223,7 +223,7 @@ exports[`EuiHealth props color success is rendered 1`] = `
 
 exports[`EuiHealth props color text is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -245,7 +245,7 @@ exports[`EuiHealth props color text is rendered 1`] = `
 
 exports[`EuiHealth props color warning is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -289,7 +289,7 @@ exports[`EuiHealth props textSize inherit is rendered 1`] = `
 
 exports[`EuiHealth props textSize m is rendered 1`] = `
 <div
-  class="euiHealth css-358avy-euiHealth-m"
+  class="euiHealth css-nsbil5-euiHealth-m"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -311,7 +311,7 @@ exports[`EuiHealth props textSize m is rendered 1`] = `
 
 exports[`EuiHealth props textSize s is rendered 1`] = `
 <div
-  class="euiHealth css-1p3stn6-euiHealth-s"
+  class="euiHealth css-1go2jns-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -333,7 +333,7 @@ exports[`EuiHealth props textSize s is rendered 1`] = `
 
 exports[`EuiHealth props textSize xs is rendered 1`] = `
 <div
-  class="euiHealth css-1yr971c-euiHealth-xs"
+  class="euiHealth css-1o1s5ug-euiHealth-xs"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
diff --git a/src/components/health/health.styles.ts b/src/components/health/health.styles.ts
index ad2ee71af6f7..dffbd42d2260 100644
--- a/src/components/health/health.styles.ts
+++ b/src/components/health/health.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { euiFontSizeFromScale } from '../../global_styling';
+import { euiFontSize } from '../../global_styling';
 
 export const euiHealthStyles = ({ euiTheme }: UseEuiTheme) => ({
   euiHealth: css`
@@ -16,13 +16,13 @@ export const euiHealthStyles = ({ euiTheme }: UseEuiTheme) => ({
   `,
   // Text sizes
   xs: css`
-    ${euiFontSizeFromScale('xs', euiTheme)}
+    font-size: ${euiFontSize('xs', euiTheme).fontSize};
   `,
   s: css`
-    ${euiFontSizeFromScale('s', euiTheme)}
+    font-size: ${euiFontSize('s', euiTheme).fontSize};
   `,
   m: css`
-    ${euiFontSizeFromScale('m', euiTheme)}
+    font-size: ${euiFontSize('m', euiTheme).fontSize};
   `,
   inherit: css`
     font-size: inherit;