Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix euiFormControlIsLoading mixin to prevent the loading icon overlapping when compressed #3401

Merged
merged 5 commits into from
May 6, 2020
Merged

Fix euiFormControlIsLoading mixin to prevent the loading icon overlapping when compressed #3401

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d153da
Prevent from control loading icon from overlapping
elizabetdev Apr 29, 2020
dd2b793
Changelog
elizabetdev Apr 29, 2020
134a311
Adjusting padding
elizabetdev May 4, 2020
bc81831
Merge remote-tracking branch 'upstream/master' into fix-form-control-…
elizabetdev May 4, 2020
8dfd367
Adding num of icons 3
elizabetdev May 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,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 has an icon on the right side ([#3401](https://github.com/elastic/eui/pull/3401)

## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0)

Expand Down
3 changes: 2 additions & 1 deletion src/global_styling/mixins/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@

@mixin euiFormControlIsLoading($isNextToIcon: false) {
@at-root {
#{&}-isLoading {
#{&}-isLoading,
#{&}-isLoading#{&}--compressed {
@if ($isNextToIcon) {
@include euiFormControlLayoutPadding(2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

eui/src/global_styling/mixins/_form.scss

Line 8 in dd2b793

@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {

} @else {
Expand Down