From 2126dd0ce471b0d83988525159f516b0c0cdbc1d Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Tue, 7 Dec 2021 09:14:42 -0800
Subject: [PATCH] [EuiLoadingSpinner] Change `s`-size to match EuiIcon (#5440)

* Fix xs-sized isLoading EuiButtonEmpty with icons

- widths would previously jump around due to the loading spinner being smaller than the icon

* Add changelog entry

* Revert "Fix xs-sized isLoading EuiButtonEmpty with icons"

This reverts commit 881277ff107e956903fb5e0a30dcc1b460509418.

* Increase the size of `s` EuiLoadingSpinner to match EuiIcon

* Fix changelog location after release

* Update `EuiFormControlLayoutIcons` to use a small loading spinner when compressed

* fix snapshot
---
 CHANGELOG.md                                  |  1 +
 .../form_control_layout.test.tsx.snap         | 41 +++++++++++++++++++
 .../form_control_layout.test.tsx              | 15 +++++++
 .../form_control_layout_icons.tsx             |  4 +-
 src/components/loading/_loading_spinner.scss  |  4 +-
 5 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eac7d88e3af..8eac7d44a28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
 **Breaking changes**
 
 - Changed prop name `applyRefreshInterval` to `onRefreshChange` in `EuiRefreshInterval` ([#5383](https://github.com/elastic/eui/pull/5383))
+- Increased the size of `s`-sized `EuiLoadingSpinner`s to match `s`-sized `EuiIcon`s ([#5440](https://github.com/elastic/eui/pull/5440))
 
 ## [`42.1.0`](https://github.com/elastic/eui/tree/v42.1.0)
 
diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
index 9006e021d07..4c31a6c9bdd 100644
--- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
+++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
@@ -40,6 +40,47 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiFormControlLayout props compressed renders small-sized icon, clear button, and loading spinner 1`] = `
+<div
+  class="euiFormControlLayout euiFormControlLayout--compressed"
+>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  >
+    <div
+      class="euiFormControlLayoutIcons"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <span
+          aria-hidden="true"
+          class="euiFormControlLayoutCustomIcon__icon"
+          data-euiicon-type="alert"
+        />
+      </span>
+    </div>
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <button
+        aria-label="Clear input"
+        class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
+        type="button"
+      >
+        <span
+          class="euiFormControlLayoutClearButton__icon"
+          data-euiicon-type="cross"
+        />
+      </button>
+      <span
+        class="euiLoadingSpinner euiLoadingSpinner--small"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiFormControlLayout props fullWidth is rendered 1`] = `
 <div
   class="euiFormControlLayout euiFormControlLayout--fullWidth"
diff --git a/src/components/form/form_control_layout/form_control_layout.test.tsx b/src/components/form/form_control_layout/form_control_layout.test.tsx
index 617dc462244..3297a4d2b86 100644
--- a/src/components/form/form_control_layout/form_control_layout.test.tsx
+++ b/src/components/form/form_control_layout/form_control_layout.test.tsx
@@ -118,6 +118,21 @@ describe('EuiFormControlLayout', () => {
       expect(component).toMatchSnapshot();
     });
 
+    describe('compressed', () => {
+      it('renders small-sized icon, clear button, and loading spinner', () => {
+        const component = render(
+          <EuiFormControlLayout
+            compressed
+            icon={{ type: 'alert' }}
+            clear={{ onClick: jest.fn() }}
+            isLoading
+          />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     test('fullWidth is rendered', () => {
       const component = render(<EuiFormControlLayout fullWidth />);
 
diff --git a/src/components/form/form_control_layout/form_control_layout_icons.tsx b/src/components/form/form_control_layout/form_control_layout_icons.tsx
index 32d2e99e8dc..d01dfed2a65 100644
--- a/src/components/form/form_control_layout/form_control_layout_icons.tsx
+++ b/src/components/form/form_control_layout/form_control_layout_icons.tsx
@@ -106,13 +106,13 @@ export class EuiFormControlLayoutIcons extends Component<
   }
 
   renderLoadingSpinner() {
-    const { isLoading } = this.props;
+    const { isLoading, compressed } = this.props;
 
     if (!isLoading) {
       return null;
     }
 
-    return <EuiLoadingSpinner size="m" />;
+    return <EuiLoadingSpinner size={compressed ? 's' : 'm'} />;
   }
 
   renderClearButton() {
diff --git a/src/components/loading/_loading_spinner.scss b/src/components/loading/_loading_spinner.scss
index 4aa88ce62ff..dc5f6bfb33d 100644
--- a/src/components/loading/_loading_spinner.scss
+++ b/src/components/loading/_loading_spinner.scss
@@ -14,8 +14,8 @@
 }
 
 .euiLoadingSpinner--small {
-  width: $euiSizeS;
-  height: $euiSizeS;
+  width: $euiSizeM;
+  height: $euiSizeM;
   border-width: 1px;
 }