Fix euiFormControlIsLoading mixin to prevent the loading icon overlapping when compressed

CHANGELOG.md

@@ -23,6 +23,7 @@
 - Added `ReactElement` to `EuiCard` `image` prop type to allow custom component ([#3370](https://github.com/elastic/eui/pull/3370))
 - Fixed `EuiCollapsibleNavGroup` `titleSize` prop type to properly exclude `l` and `m` sizes ([#3365](https://github.com/elastic/eui/pull/3365))
 - Fixed `EuiDatePickerRange` start date popover to sit left under the icon ([#3383](https://github.com/elastic/eui/pull/3383))
+- Fixed `euiFormControlIsLoading` SASS mixin to prevent the loading icon from overlapping with the text when the form control is `compressed` and adjusted the amount of padding ([#3401](https://github.com/elastic/eui/pull/3401)
 - Fixed `EuiHeader` `z-index` issues with popovers and added body classes for the presence of `EuiFlyout` and `EuiCollapsibleNav.isOpen` ([#3398](https://github.com/elastic/eui/pull/3398))
 
 ## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0)

src/global_styling/mixins/_form.scss

@@ -6,22 +6,22 @@
 }
 
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
-  $firstIconSize: $euiFormControlPadding + $euiSize + $euiFormControlPadding;
-  $secondIconSize: $euiFormControlPadding + $euiSize;
+  $iconSize: $euiSize;
+  $iconPadding: $euiFormControlPadding;
+  $marginBetweenIcons: $euiFormControlPadding / 2;
 
   @if ($compressed) {
-    $firstIconSize: $euiFormControlCompressedPadding + $euiSize + $euiFormControlCompressedPadding;
-    $secondIconSize: $euiFormControlCompressedPadding + $euiSize;
+    $iconPadding: $euiFormControlCompressedPadding;
   }
 
   @if variable-exists(numOfIcons) == false {
     @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().';
   } @else if $numOfIcons == 1 {
-    padding-#{$side}: $firstIconSize;
+    padding-#{$side}: $iconPadding + $iconSize + $iconPadding;
   } @else if $numOfIcons == 2 {
-    padding-#{$side}: $firstIconSize + $secondIconSize;
+    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
   } @else if $numOfIcons == 3 {
-    padding-#{$side}: $firstIconSize + ($secondIconSize * 2);
+    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
   }
 }
 
@@ -122,6 +122,14 @@
         @include euiFormControlLayoutPadding(1);
       }
     }
+
+    #{&}-isLoading#{&}--compressed {
+      @if ($isNextToIcon) {
+        @include euiFormControlLayoutPadding(2, $compressed: true);
+      } @else {
+        @include euiFormControlLayoutPadding(1, $compressed: true);
+      }
+    }
   }
 }