From 881277ff107e956903fb5e0a30dcc1b460509418 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Fri, 3 Dec 2021 09:50:07 -0800 Subject: [PATCH 1/7] Fix xs-sized isLoading EuiButtonEmpty with icons - widths would previously jump around due to the loading spinner being smaller than the icon --- src/components/button/button_empty/_button_empty.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss index 3961ce45c82..41e1f01b2c2 100644 --- a/src/components/button/button_empty/_button_empty.scss +++ b/src/components/button/button_empty/_button_empty.scss @@ -31,6 +31,12 @@ &.euiButtonEmpty--xSmall { height: $euiButtonHeightXSmall; font-size: $euiFontSizeS; + + // Forces the xs loading spinner to be the same size as xs-EuiIcons + .euiButtonContent__spinner { + width: $euiSizeM; + height: $euiSizeM; + } } &:disabled { From 8e06917119657d2979df98a2ee1641c2fec7ed6e Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Fri, 3 Dec 2021 10:00:06 -0800 Subject: [PATCH 2/7] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b8c34e46c6..0ded0032e7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Fixed scrollbars in `EuiRange` tick labels in Safari ([#5427](https://github.com/elastic/eui/pull/5427)) - Fixed an `EuiOverlayMask` bug where it calls window.document on server side([#5422](https://github.com/elastic/eui/pull/5422)) - Fixed unremoved event listener memory leak in `EuiPopover` ([#5436](https://github.com/elastic/eui/pull/5436)) +- Fixed `EuiButtonEmpty` width jumping in `xs`-sizes when icons switch to `isLoading` ([#5440](https://github.com/elastic/eui/pull/5440)) ## [`42.0.0`](https://github.com/elastic/eui/tree/v42.0.0) From ff27903f7e9b88672b3f552da7bd7993717415ba Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 6 Dec 2021 08:49:56 -0800 Subject: [PATCH 3/7] Revert "Fix xs-sized isLoading EuiButtonEmpty with icons" This reverts commit 881277ff107e956903fb5e0a30dcc1b460509418. --- src/components/button/button_empty/_button_empty.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss index 41e1f01b2c2..3961ce45c82 100644 --- a/src/components/button/button_empty/_button_empty.scss +++ b/src/components/button/button_empty/_button_empty.scss @@ -31,12 +31,6 @@ &.euiButtonEmpty--xSmall { height: $euiButtonHeightXSmall; font-size: $euiFontSizeS; - - // Forces the xs loading spinner to be the same size as xs-EuiIcons - .euiButtonContent__spinner { - width: $euiSizeM; - height: $euiSizeM; - } } &:disabled { From 47689dc6399319c2267620ea0c10c95ffd5bf863 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 6 Dec 2021 09:05:48 -0800 Subject: [PATCH 4/7] Increase the size of `s` EuiLoadingSpinner to match EuiIcon --- CHANGELOG.md | 5 ++++- src/components/loading/_loading_spinner.scss | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ded0032e7d..530d2eeb18a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,10 @@ - Fixed scrollbars in `EuiRange` tick labels in Safari ([#5427](https://github.com/elastic/eui/pull/5427)) - Fixed an `EuiOverlayMask` bug where it calls window.document on server side([#5422](https://github.com/elastic/eui/pull/5422)) - Fixed unremoved event listener memory leak in `EuiPopover` ([#5436](https://github.com/elastic/eui/pull/5436)) -- Fixed `EuiButtonEmpty` width jumping in `xs`-sizes when icons switch to `isLoading` ([#5440](https://github.com/elastic/eui/pull/5440)) + +**Breaking changes** + +- Increased the size of `s`-sized `EuiLoadingSpinner`s to match `s`-sized `EuiIcon`s ([#5440](https://github.com/elastic/eui/pull/5440)) ## [`42.0.0`](https://github.com/elastic/eui/tree/v42.0.0) diff --git a/src/components/loading/_loading_spinner.scss b/src/components/loading/_loading_spinner.scss index 4aa88ce62ff..dc5f6bfb33d 100644 --- a/src/components/loading/_loading_spinner.scss +++ b/src/components/loading/_loading_spinner.scss @@ -14,8 +14,8 @@ } .euiLoadingSpinner--small { - width: $euiSizeS; - height: $euiSizeS; + width: $euiSizeM; + height: $euiSizeM; border-width: 1px; } From 5090139abf232141c1e76fee5847ecd0cdcf5955 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 6 Dec 2021 13:56:14 -0800 Subject: [PATCH 5/7] Fix changelog location after release --- CHANGELOG.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ddf6aacd10b..8eac7d44a28 100644 --- a/CHANGELOG.md +++ b/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) @@ -37,10 +38,6 @@ - Fixed `EuiDatePicker` not correctly handling the `onBlur` callback ([#5441](https://github.com/elastic/eui/pull/5441)) - Fixed `EuiToolTip` not correctly handling child `onBlur` and `onFocus` callbacks ([#5441](https://github.com/elastic/eui/pull/5441)) -**Breaking changes** - -- Increased the size of `s`-sized `EuiLoadingSpinner`s to match `s`-sized `EuiIcon`s ([#5440](https://github.com/elastic/eui/pull/5440)) - ## [`42.0.0`](https://github.com/elastic/eui/tree/v42.0.0) ### Feature: CSS-in-JS ([#5121](https://github.com/elastic/eui/pull/5121)) From c6cf733d9dd66996b7bcb13e6f1e0edc3a00440b Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 6 Dec 2021 14:09:22 -0800 Subject: [PATCH 6/7] Update `EuiFormControlLayoutIcons` to use a small loading spinner when compressed --- .../form_control_layout.test.tsx.snap | 41 +++++++++++++++++++ .../form_control_layout.test.tsx | 15 +++++++ .../form_control_layout_icons.tsx | 4 +- 3 files changed, 58 insertions(+), 2 deletions(-) diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap index 9006e021d07..814663a8a5b 100644 --- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap +++ b/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`] = ` `; +exports[`EuiFormControlLayout props compressed renders small-sized icons, clear button, and loading spinner 1`] = ` +
+
+
+ + +
+
+ + +
+
+
+`; + exports[`EuiFormControlLayout props fullWidth is rendered 1`] = `
{ expect(component).toMatchSnapshot(); }); + describe('compressed', () => { + it('renders small-sized icon, clear button, and loading spinner', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + test('fullWidth is rendered', () => { const component = render(); diff --git a/src/components/form/form_control_layout/form_control_layout_icons.tsx b/src/components/form/form_control_layout/form_control_layout_icons.tsx index 32d2e99e8dc..d01dfed2a65 100644 --- a/src/components/form/form_control_layout/form_control_layout_icons.tsx +++ b/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 ; + return ; } renderClearButton() { From fd2a294e9ecaabdb6609a6f076d8260c5e4e5744 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 7 Dec 2021 08:24:36 -0800 Subject: [PATCH 7/7] fix snapshot --- .../__snapshots__/form_control_layout.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap index 814663a8a5b..4c31a6c9bdd 100644 --- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap +++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap @@ -40,7 +40,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
`; -exports[`EuiFormControlLayout props compressed renders small-sized icons, clear button, and loading spinner 1`] = ` +exports[`EuiFormControlLayout props compressed renders small-sized icon, clear button, and loading spinner 1`] = `