diff --git a/CHANGELOG.md b/CHANGELOG.md
index 512c293aae1..062c69f43a4 100644
--- a/CHANGELOG.md
+++ b/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 `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)
diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap
index b6cd22095b9..017e2efc45b 100644
--- a/src/components/button/__snapshots__/button.test.js.snap
+++ b/src/components/button/__snapshots__/button.test.js.snap
@@ -306,7 +306,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
-
Content
-
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
index 2c95d0cd68e..9ea74f6d8f1 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
@@ -201,7 +201,7 @@ exports[`EuiFormControlLayout props isLoading is rendered 1`] = `
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
index 35dbb432173..99db8107f12 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
@@ -384,7 +384,7 @@ Array [
+
`;
exports[`EuiLoadingChart mono is rendered 1`] = `
-
+
`;
exports[`EuiLoadingChart size l is rendered 1`] = `
-
+
`;
exports[`EuiLoadingChart size m is rendered 1`] = `
-
+
`;
exports[`EuiLoadingChart size xl is rendered 1`] = `
-
+
`;
diff --git a/src/components/loading/__snapshots__/loading_content.test.tsx.snap b/src/components/loading/__snapshots__/loading_content.test.tsx.snap
index e272883669f..88975ffe1d3 100644
--- a/src/components/loading/__snapshots__/loading_content.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_content.test.tsx.snap
@@ -1,486 +1,486 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EuiLoadingContent is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 1 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 2 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 3 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 4 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 5 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 6 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 7 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 8 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 9 is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingContent lines 10 is rendered 1`] = `
-
+
+
`;
diff --git a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap b/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
index 4a32a07247d..d28dbbc7230 100644
--- a/src/components/loading/__snapshots__/loading_kibana.test.tsx.snap
+++ b/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`] = `
-
+
+
`;
exports[`EuiLoadingKibana size l is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingKibana size m is rendered 1`] = `
-
+
+
`;
exports[`EuiLoadingKibana size xl is rendered 1`] = `
-
+
+
`;
diff --git a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
index c40ac4a73bb..c06602f07eb 100644
--- a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
+++ b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EuiLoadingSpinner is rendered 1`] = `
-
`;
exports[`EuiLoadingSpinner size m is rendered 1`] = `
-
`;
exports[`EuiLoadingSpinner size s is rendered 1`] = `
-
`;
exports[`EuiLoadingSpinner size xl is rendered 1`] = `
-
`;
diff --git a/src/components/loading/_loading_chart.scss b/src/components/loading/_loading_chart.scss
index 380638279b2..749bd3b68dd 100644
--- a/src/components/loading/_loading_chart.scss
+++ b/src/components/loading/_loading_chart.scss
@@ -1,5 +1,5 @@
.euiLoadingChart {
- height: 32px;
+ height: $euiSizeXL;
z-index: 500;
overflow: hidden;
display: inline-block;
@@ -7,11 +7,10 @@
.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;
diff --git a/src/components/loading/_loading_content.scss b/src/components/loading/_loading_content.scss
index fa86ab40f97..0abf65a1c77 100644
--- a/src/components/loading/_loading_content.scss
+++ b/src/components/loading/_loading_content.scss
@@ -1,8 +1,10 @@
.euiLoadingContent__loader {
+ display: block;
width: 100%;
}
.euiLoadingContent__singleLine {
+ display: block;
width: 100%;
height: $euiSize;
margin-bottom: $euiSizeS;
@@ -15,6 +17,7 @@
}
.euiLoadingContent__singleLineBackground {
+ display: block;
width: 220%;
height: 100%;
background: linear-gradient(
diff --git a/src/components/loading/_loading_kibana.scss b/src/components/loading/_loading_kibana.scss
index f08a3b6a0ab..96ffe2c393b 100644
--- a/src/components/loading/_loading_kibana.scss
+++ b/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;
diff --git a/src/components/loading/loading_chart.tsx b/src/components/loading/loading_chart.tsx
index 2eef9b272c7..72996f246ae 100644
--- a/src/components/loading/loading_chart.tsx
+++ b/src/components/loading/loading_chart.tsx
@@ -30,11 +30,11 @@ export const EuiLoadingChart: FunctionComponent<
);
return (
-
+
+
+
+
+
+
);
};
diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx
index 20b85d66fe2..35efc2dbafd 100644
--- a/src/components/loading/loading_content.tsx
+++ b/src/components/loading/loading_content.tsx
@@ -15,15 +15,15 @@ export const EuiLoadingContent: FunctionComponent<
for (let i = 0; i < lines; i++) {
lineElements.push(
-
+
+
+
);
}
return (
-
+
{lineElements}
-
+
);
};
diff --git a/src/components/loading/loading_kibana.tsx b/src/components/loading/loading_kibana.tsx
index d3826231aab..d9ac18e4b2a 100644
--- a/src/components/loading/loading_kibana.tsx
+++ b/src/components/loading/loading_kibana.tsx
@@ -25,10 +25,10 @@ export const EuiLoadingKibana: FunctionComponent<
);
return (
-
+
+
);
};
diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx
index 9436dc74855..4d0da293c03 100644
--- a/src/components/loading/loading_spinner.tsx
+++ b/src/components/loading/loading_spinner.tsx
@@ -25,5 +25,5 @@ export const EuiLoadingSpinner: FunctionComponent<
className
);
- return ;
+ return ;
};