diff --git a/CHANGELOG.md b/CHANGELOG.md index a822b31fe7f..9f51618001a 100644 --- a/CHANGELOG.md +++ b/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)) - Fixed `EuiInMemoryTable` data reset when filter is set and item is selected ([#3419](https://github.com/elastic/eui/pull/3419)) - Fixed `popoverPlacement` default value for `EuiDatePicker` ([#3427](https://github.com/elastic/eui/pull/3427)) diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 7ab69ae4d68..d730f9a4f65 100644 --- a/src/global_styling/mixins/_form.scss +++ b/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); + } + } } }