[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 881277f.

* 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

@@ -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)
 

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"

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 />);
 

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() {

src/components/loading/_loading_spinner.scss

@@ -14,8 +14,8 @@
 }
 
 .euiLoadingSpinner--small {
-  width: $euiSizeS;
-  height: $euiSizeS;
+  width: $euiSizeM;
+  height: $euiSizeM;
   border-width: 1px;
 }