[Emotion] Converted EuiLoadingChart (#5821)

- Added tintOrShade and shadeOrTint functions
- Converted margins to use either `gap` or logical property
- Using Emotion `keyframes`
- Cleanup classes and for loop for bars
- Improved accessibility #4814

src-docs/src/views/loading/loading_chart.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiLoadingChart } from '../../../../src/components/loading';
+import { EuiLoadingChart } from '../../../../src';
 
 export default () => (
   <div>

src-docs/src/views/loading/loading_example.js

@@ -109,7 +109,7 @@ export const LoadingExample = {
       ),
       props: { EuiLoadingChart },
       demo: <LoadingChart />,
-      snippet: '<EuiLoadingChart size="m" />',
+      snippet: ['<EuiLoadingChart size="m" />', '<EuiLoadingChart mono />'],
       playground: loadingChartConfig,
     },
     {

src/components/loading/__snapshots__/loading_chart.test.tsx.snap

@@ -3,96 +3,105 @@
 exports[`EuiLoadingChart is rendered 1`] = `
 <span
   aria-label="aria-label"
-  class="euiLoadingChart testClass1 testClass2 euiLoadingChart--medium"
+  class="euiLoadingChart testClass1 testClass2 euiLoadingChart--medium css-1ho1qj7-euiLoadingChart-m"
   data-test-subj="test subject string"
+  role="progressbar"
 >
   <span
-    class="euiLoadingChart__bar"
+    class="css-ppndrc-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1vmcbc-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-tzxz83-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1i9i25s-euiLoadingChart__bar-m"
   />
 </span>
 `;
 
 exports[`EuiLoadingChart mono is rendered 1`] = `
 <span
-  class="euiLoadingChart euiLoadingChart--mono euiLoadingChart--medium"
+  aria-label="Loading"
+  class="euiLoadingChart euiLoadingChart--mono euiLoadingChart--medium css-1ho1qj7-euiLoadingChart-m"
+  role="progressbar"
 >
   <span
-    class="euiLoadingChart__bar"
+    class="css-f40lr8-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-w08n96-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1sn2k4i-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1k1t7g1-euiLoadingChart__bar-m"
   />
 </span>
 `;
 
 exports[`EuiLoadingChart size l is rendered 1`] = `
 <span
-  class="euiLoadingChart euiLoadingChart--large"
+  aria-label="Loading"
+  class="euiLoadingChart euiLoadingChart--large css-1xdgh7e-euiLoadingChart-l"
+  role="progressbar"
 >
   <span
-    class="euiLoadingChart__bar"
+    class="css-1vldb0n-euiLoadingChart__bar-l"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1s9b23j-euiLoadingChart__bar-l"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-u11xok-euiLoadingChart__bar-l"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1ivhta8-euiLoadingChart__bar-l"
   />
 </span>
 `;
 
 exports[`EuiLoadingChart size m is rendered 1`] = `
 <span
-  class="euiLoadingChart euiLoadingChart--medium"
+  aria-label="Loading"
+  class="euiLoadingChart euiLoadingChart--medium css-1ho1qj7-euiLoadingChart-m"
+  role="progressbar"
 >
   <span
-    class="euiLoadingChart__bar"
+    class="css-ppndrc-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1vmcbc-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-tzxz83-euiLoadingChart__bar-m"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-1i9i25s-euiLoadingChart__bar-m"
   />
 </span>
 `;
 
 exports[`EuiLoadingChart size xl is rendered 1`] = `
 <span
-  class="euiLoadingChart euiLoadingChart--xLarge"
+  aria-label="Loading"
+  class="euiLoadingChart euiLoadingChart--xLarge css-wh2pju-euiLoadingChart-xl"
+  role="progressbar"
 >
   <span
-    class="euiLoadingChart__bar"
+    class="css-c8z932-euiLoadingChart__bar-xl"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-dh1qje-euiLoadingChart__bar-xl"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-c0ghp7-euiLoadingChart__bar-xl"
   />
   <span
-    class="euiLoadingChart__bar"
+    class="css-3wdwo4-euiLoadingChart__bar-xl"
   />
 </span>
 `;

src/components/loading/_index.scss

@@ -1,6 +1,5 @@
 @import 'variables';
 @import 'loading_elastic';
-@import 'loading_chart';
 @import 'loading_content';
 @import 'loading_logo';
 @import 'loading_spinner';

src/components/loading/loading_chart.styles.ts

@@ -0,0 +1,84 @@
+/*
+ * 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, keyframes } from '@emotion/react';
+import { euiPaletteColorBlind, shadeOrTint, UseEuiTheme } from '../../services';
+import { euiCanAnimate } from '../../global_styling';
+
+export const euiLoadingChartStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiLoadingChart: css`
+    overflow: hidden;
+    display: inline-flex;
+  `,
+  m: css`
+    height: ${euiTheme.size.base};
+    gap: ${euiTheme.size.xxs};
+  `,
+  l: css`
+    height: ${euiTheme.size.l};
+    gap: ${euiTheme.size.xxs};
+  `,
+  xl: css`
+    height: ${euiTheme.size.xl};
+    gap: ${euiTheme.size.xs};
+  `,
+});
+
+export const euiLoadingChartBarStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiLoadingChart__bar: css`
+    height: 100%;
+    display: inline-block;
+  `,
+  m: css`
+    width: ${euiTheme.size.xxs};
+    margin-block-end: ${euiTheme.size.s};
+  `,
+  l: css`
+    width: ${euiTheme.size.xs};
+    margin-block-end: ${euiTheme.size.m};
+  `,
+  xl: css`
+    width: ${euiTheme.size.s};
+    margin-block-end: ${euiTheme.size.base};
+  `,
+});
+
+const barAnimation = keyframes`
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(66%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+`;
+
+export const _barIndex = (
+  index: number,
+  mono: boolean,
+  { euiTheme, colorMode }: UseEuiTheme
+) => {
+  const backgroundColor = mono
+    ? shadeOrTint(euiTheme.colors.lightShade, index * 0.04, colorMode)
+    : euiPaletteColorBlind()[index];
+
+  return css`
+    background-color: ${backgroundColor};
+    // Without the animation, the bars are all the same height,
+    // so we apply transforms which are overridden by the animation if animations are allowed
+    transform: translateY(${22 * index}%);
+
+    ${euiCanAnimate} {
+      animation: ${barAnimation} 1s ${`.${index}s`} infinite;
+    }
+  `;
+};

src/components/loading/loading_chart.test.tsx

@@ -9,10 +9,13 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiLoadingChart, SIZES } from './loading_chart';
 
 describe('EuiLoadingChart', () => {
+  shouldRenderCustomStyles(<EuiLoadingChart />);
+
   test('is rendered', () => {
     const component = render(<EuiLoadingChart {...requiredProps} />);
 
@@ -24,6 +27,7 @@ describe('EuiLoadingChart', () => {
 
     expect(component).toMatchSnapshot();
   });
+
   describe('size', () => {
     SIZES.forEach((size) => {
       test(`${size} is rendered`, () => {