Convert loading components to TS, fix ie11 shadow

CHANGELOG.md

@@ -7,6 +7,11 @@
 - Added `fullWidth` prop to `EuiButton` ([#1665](https://github.com/elastic/eui/pull/1665))
 - Added `.eui-fullWidth` utility class ([#1665](https://github.com/elastic/eui/pull/1665))
 - Added `EuiPopoverFooter` and converted `EuiPopoverTitle` to TS ([#1666](https://github.com/elastic/eui/pull/1666))
+- Converted `EuiLoadingSpinner`, `EuiLoadingKibana`, and `EuiLoadingChart` to TS ([#1683](https://github.com/elastic/eui/pull/1683))
+
+**Bug fixes**
+
+- Fixed IE11 rendering issue in `EuiLoadingKibana` ([#1683](https://github.com/elastic/eui/pull/1683))
 
 ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1)
 

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { EuiLoadingChart } from '../../../../src/components/loading';
+
+export default () => (
+  <div>
+    <EuiLoadingChart size="m" />
+    &nbsp;&nbsp;
+    <EuiLoadingChart size="l" />
+    &nbsp;&nbsp;
+    <EuiLoadingChart size="xl" />
+    <br />
+    <br />
+    <EuiLoadingChart size="m" mono />
+    &nbsp;&nbsp;
+    <EuiLoadingChart size="l" mono />
+    &nbsp;&nbsp;
+    <EuiLoadingChart size="xl" mono />
+  </div>
+);

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

@@ -42,6 +42,7 @@ export const LoadingExample = {
     ),
     props: { EuiLoadingKibana },
     demo: <LoadingKibana />,
+    snippet: `<EuiLoadingKibana size="m" />`
   }, {
     title: 'Chart',
     source: [{
@@ -61,6 +62,7 @@ export const LoadingExample = {
     ),
     props: { EuiLoadingChart },
     demo: <LoadingChart />,
+    snippet: `<EuiLoadingChart size="m" />`
   }, {
     title: 'Spinner',
     source: [{
@@ -77,5 +79,6 @@ export const LoadingExample = {
     ),
     props: { EuiLoadingSpinner },
     demo: <LoadingSpinner />,
+    snippet: `<EuiLoadingSpinner size="m" />`
   }],
 };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { EuiLoadingKibana } from '../../../../src/components/loading';
+
+export default () => (
+  <div>
+    <EuiLoadingKibana size="m" />
+    <EuiLoadingKibana size="l" />
+    <EuiLoadingKibana size="xl" />
+  </div>
+);

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { EuiLoadingSpinner } from '../../../../src/components/loading';
+
+export default () => (
+  <div>
+    <EuiLoadingSpinner size="s" />
+    &nbsp;&nbsp;
+    <EuiLoadingSpinner size="m" />
+    &nbsp;&nbsp;
+    <EuiLoadingSpinner size="l" />
+    &nbsp;&nbsp;
+    <EuiLoadingSpinner size="xl" />
+  </div>
+);

src/components/index.d.ts

@@ -17,7 +17,6 @@
 /// <reference path="./health/index.d.ts" />
 /// <reference path="./key_pad_menu/index.d.ts" />
 /// <reference path="./link/index.d.ts" />
-/// <reference path="./loading/index.d.ts" />
 /// <reference path="./modal/index.d.ts" />
 /// <reference path="./observer/mutation_observer/index.d.ts" />
 /// <reference path="./observer/resize_observer/index.d.ts" />

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

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiLoadingChart is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiLoadingChart testClass1 testClass2 euiLoadingChart--medium"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+</div>
+`;
+
+exports[`EuiLoadingChart mono is rendered 1`] = `
+<div
+  class="euiLoadingChart euiLoadingChart--mono euiLoadingChart--medium"
+>
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+</div>
+`;
+
+exports[`EuiLoadingChart size l is rendered 1`] = `
+<div
+  class="euiLoadingChart euiLoadingChart--large"
+>
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+</div>
+`;
+
+exports[`EuiLoadingChart size m is rendered 1`] = `
+<div
+  class="euiLoadingChart euiLoadingChart--medium"
+>
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+</div>
+`;
+
+exports[`EuiLoadingChart size xl is rendered 1`] = `
+<div
+  class="euiLoadingChart euiLoadingChart--xLarge"
+>
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+  <div
+    class="euiLoadingChart__bar"
+  />
+</div>
+`;