Use span for loaders and set width to kibana loader (#1845)

Spans are now used for all the loaders. Fixed a bug in the kibana loader in flex layouts.

CHANGELOG.md

@@ -11,6 +11,11 @@
 
 - Converted `EuiText`, `EuiTextColor` and `EuiTextAlign` to TS ([#1791](https://github.com/elastic/eui/pull/1791))
 - Updated `IconColor` type to better distinguish between accepted types ([#1842](https://github.com/elastic/eui/pull/1842))
+- Changed `EuiLoadingKibana`, `EuiLoadingSpinner`, `EuiLoadingChart` and `EuiLoadingContent` components to use spans instead of divs  ([#1845](https://github.com/elastic/eui/pull/1845))
+
+**Bug fixes**
+
+- Changed `EuiLoadingKibana` so it could better nest within `EuiFlexItem`  ([#1845](https://github.com/elastic/eui/pull/1845))
 
 ## [`10.0.0`](https://github.com/elastic/eui/tree/v10.0.0)
 

src/components/button/__snapshots__/button.test.js.snap

@@ -306,7 +306,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
   <span
     class="euiButton__content"
   >
-    <div
+    <span
       class="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
     />
     <span

src/components/facet/__snapshots__/facet_button.test.js.snap

@@ -93,7 +93,7 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = `
     >
       Content
     </span>
-    <div
+    <span
       class="euiLoadingSpinner euiLoadingSpinner--medium euiFacetButton__spinner"
     />
   </span>

src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap

@@ -201,7 +201,7 @@ exports[`EuiFormControlLayout props isLoading is rendered 1`] = `
     <div
       class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
     >
-      <div
+      <span
         class="euiLoadingSpinner euiLoadingSpinner--medium"
       />
     </div>

src/components/form/super_select/__snapshots__/super_select_control.test.js.snap

@@ -384,7 +384,7 @@ Array [
       <div
         class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
       >
-        <div
+        <span
           class="euiLoadingSpinner euiLoadingSpinner--medium"
         />
         <span

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

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