Use span for loaders and set width to kibana loader

CHANGELOG.md

@@ -6,6 +6,11 @@ No public interface changes since `10.0.1`.
 
 - Convert `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 `EuiLoding` 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>
 `;

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

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiLoadingKibana is rendered 1`] = `
-<div
+<span
   aria-label="aria-label"
   class="euiLoadingKibana euiLoadingKibana--medium testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -35,15 +35,15 @@ exports[`EuiLoadingKibana is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingKibana size l is rendered 1`] = `
-<div
+<span
   class="euiLoadingKibana euiLoadingKibana--large"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -72,15 +72,15 @@ exports[`EuiLoadingKibana size l is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingKibana size m is rendered 1`] = `
-<div
+<span
   class="euiLoadingKibana euiLoadingKibana--medium"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -109,15 +109,15 @@ exports[`EuiLoadingKibana size m is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;
 
 exports[`EuiLoadingKibana size xl is rendered 1`] = `
-<div
+<span
   class="euiLoadingKibana euiLoadingKibana--xLarge"
 >
-  <div
+  <span
     class="euiLoadingKibana__icon"
   >
     <svg
@@ -146,6 +146,6 @@ exports[`EuiLoadingKibana size xl is rendered 1`] = `
         />
       </g>
     </svg>
-  </div>
-</div>
+  </span>
+</span>
 `;

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

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

src/components/loading/_loading_chart.scss

@@ -1,17 +1,16 @@
 .euiLoadingChart {
-  height: 32px;
+  height: $euiSizeXL;
   z-index: 500;
   overflow: hidden;
   display: inline-block;
 }
 
 .euiLoadingChart__bar {
   height: 100%;
-  width: 8px;
+  width: $euiSizeS;
   display: inline-block;
-  float: left;
-  margin-bottom: -16px;
-  margin-left: 2px;
+  margin-bottom: -$euiSize;
+  margin-left: $euiSizeXS / 2;
   animation: euiLoadingChart 1s infinite;
 
   &:nth-child(1) {
@@ -57,7 +56,7 @@
 .euiLoadingChart--medium {
   height: $euiSize;
 
-  > div {
+  > span {
     width: $euiSizeXS / 2;
     margin-left: $euiSizeXS / 2;
     margin-bottom: $euiSizeS;
@@ -67,7 +66,7 @@
 .euiLoadingChart--large {
   height: $euiSizeL;
 
-  > div {
+  > span {
     width: $euiSizeXS;
     margin-left: $euiSizeXS / 2;
     margin-bottom: $euiSizeL / 2;
@@ -77,7 +76,7 @@
 .euiLoadingChart--xLarge {
   height: $euiSizeXL;
 
-  > div {
+  > span {
     width: $euiSizeS;
     margin-left: $euiSizeXS;
     margin-bottom: $euiSizeXL / 2;

src/components/loading/_loading_kibana.scss

@@ -22,12 +22,18 @@
     background-color: $euiColorFullShade;
     animation: 1s euiLoadingKibanaPulsate $euiAnimSlightResistance infinite;
   }
+
+  .euiLoadingKibana__icon {
+    display: block;
+  }
 }
 
 /**
  * 1. Requires pixel math for animation.
  */
 .euiLoadingKibana--medium {
+  width: $euiSize;
+
   &:before,
   &:after {
     height: $euiSizeXS - 1; /* 1 */
@@ -44,6 +50,8 @@
  * 1. Requires pixel math for animation.
  */
 .euiLoadingKibana--large {
+  width: $euiSizeL;
+
   &:before,
   &:after {
     height: $euiSizeS - 2; /* 1 */
@@ -56,6 +64,8 @@
 }
 
 .euiLoadingKibana--xLarge {
+  width: $euiSizeXL;
+
   &:before,
   &:after {
     height: $euiSizeS;