Fix euiFormControlIsLoading mixin to prevent the loading icon overlapping when compressed #3401
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3401/ |
There was a problem hiding this comment.
Good catch! Don't know how it wasn't noticed before. Might have happened when we moved around the mixins.
Looking at the allocated padding, I think we actually have too much. Both in compressed and non-compressed. Could you also adjust the amount of padding so that the text gets a little closer to the icons?
src/global_styling/mixins/_form.scss
Outdated
| @@ -115,7 +115,8 @@ | |||
|
|
|||
| @mixin euiFormControlIsLoading($isNextToIcon: false) { | |||
| @at-root { | |||
| #{&}-isLoading { | |||
| #{&}-isLoading, | |||
| #{&}-isLoading#{&}--compressed { | |||
| @if ($isNextToIcon) { | |||
| @include euiFormControlLayoutPadding(2); | |||
There was a problem hiding this comment.
This mixin actually takes a third parameter for $compressed: true which alters the padding to be better suited for the compressed version. You'll likely need to just move the compressed selector to it's own block and pass this param in.
…loading-issue-when-compressed
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3401/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3401/ |
Summary
This PR fixed the
euiFormControlIsLoadingSASS mixin to prevent the loading icon from overlapping with the text when the form control iscompressedand has an icon on the right side.I noticed this issue when I was working on the EuiColorPalettePicker.
Checklist
[ ] Checked in mobile[ ] Props have proper autodocs[ ] Added documentation examples[ ] Added or updated jest tests[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes