[Emotion] Convert EuiHealth (#5832)

* Convert Sass to CSS-in-JS * Remove Sass imports * Update component file and tests * Remove --textSize CSS classes (not used by in Kibana except for snapshots) * Update snapshots * Add changelog * [PR feedback] Restore TEXT_SIZES
elastic · Apr 26, 2022 · b91f094 · b91f094
1 parent f9c3a04
commit b91f094
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 55 deletions.
diff --git 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 euiHealth--textSizeS testClass1 testClass2"
+  class="euiHealth testClass1 testClass2 css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-euiHealth-s"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -267,7 +267,7 @@ exports[`EuiHealth props color warning is rendered 1`] = `
 
 exports[`EuiHealth props textSize inherit is rendered 1`] = `
 <div
-  class="euiHealth euiHealth--textSizeInherit"
+  class="euiHealth css-1eqikqq-euiHealth-inherit"
 >
   <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 euiHealth--textSizeM"
+  class="euiHealth css-28ntf-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 euiHealth--textSizeS"
+  class="euiHealth css-qn8ayk-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 euiHealth--textSizeXS"
+  class="euiHealth css-ft4ki3-euiHealth-xs"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"

diff --git a/src/components/health/_health.scss b/src/components/health/_health.scss
diff --git a/src/components/health/_index.scss b/src/components/health/_index.scss
diff --git a/src/components/health/health.styles.ts b/src/components/health/health.styles.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+import { euiFontSize } from '../../global_styling';
+
+export const euiHealthStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiHealth: css`
+    display: inline-block;
+  `,
+  // Text sizes
+  xs: css`
+    ${euiFontSize('xs', euiTheme)}
+  `,
+  s: css`
+    ${euiFontSize('s', euiTheme)}
+  `,
+  m: css`
+    ${euiFontSize('m', euiTheme)}
+  `,
+  inherit: css`
+    font-size: inherit;
+  `,
+});
diff --git a/src/components/health/health.test.tsx b/src/components/health/health.test.tsx
@@ -9,8 +9,9 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
-import { TEXT_SIZES, EuiHealth } from './health';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { COLORS } from '../icon/icon';
+import { EuiHealth, TEXT_SIZES } from './health';
 
 describe('EuiHealth', () => {
   test('is rendered', () => {
@@ -19,9 +20,11 @@ describe('EuiHealth', () => {
     expect(component).toMatchSnapshot();
   });
 
+  shouldRenderCustomStyles(<EuiHealth />);
+
   describe('props', () => {
     describe('textSize', () => {
-      TEXT_SIZES.forEach((textSize) => {
+      TEXT_SIZES.forEach((textSize: any) => {
         test(`${textSize} is rendered`, () => {
           const component = render(
             <EuiHealth textSize={textSize} color="success" />

diff --git a/src/components/health/health.tsx b/src/components/health/health.tsx
@@ -8,20 +8,14 @@
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { CommonProps, keysOf } from '../common';
+import { useEuiTheme } from '../../services';
+import { euiHealthStyles } from './health.styles';
 
+import { CommonProps } from '../common';
 import { EuiIcon, IconColor } from '../icon';
-
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 
-const sizeToClassNameMap = {
-  xs: 'euiHealth--textSizeXS',
-  s: 'euiHealth--textSizeS',
-  m: 'euiHealth--textSizeM',
-  inherit: 'euiHealth--textSizeInherit',
-};
-
-export const TEXT_SIZES = keysOf(sizeToClassNameMap);
+export const TEXT_SIZES = ['xs', 's', 'm', 'inherit'] as const;
 
 export type EuiHealthProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
@@ -45,14 +39,13 @@ export const EuiHealth: FunctionComponent<EuiHealthProps> = ({
   textSize = 's',
   ...rest
 }) => {
-  const classes = classNames(
-    'euiHealth',
-    textSize ? sizeToClassNameMap[textSize] : null,
-    className
-  );
+  const euiTheme = useEuiTheme();
+  const styles = euiHealthStyles(euiTheme);
+  const cssStyles = [styles.euiHealth, styles[textSize]];
+  const classes = classNames('euiHealth', className);
 
   return (
-    <div className={classes} {...rest}>
+    <div css={cssStyles} className={classes} {...rest}>
       <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiIcon type="dot" color={color} />

diff --git a/src/components/index.scss b/src/components/index.scss
@@ -29,7 +29,6 @@
 @import 'flyout/index';
 @import 'form/index';
 @import 'header/index';
-@import 'health/index';
 @import 'icon/index';
 @import 'image/index';
 @import 'key_pad_menu/index';

diff --git a/upcoming_changelogs/5832.md b/upcoming_changelogs/5832.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiHealth` to Emotion
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		CSS-in-JS conversions

		- Converted `EuiHealth` to Emotion