diff options
4 files changed, 38 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue index 6670b554faf..fd6871c81c9 100644 --- a/app/assets/javascripts/vue_shared/components/loading_button.vue +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -49,17 +49,21 @@ export default { type="button" :disabled="loading" > - <transition name="fade"> + <transition name="expand-fade-sm"> <loading-icon v-if="loading" :inline="true" class="js-loading-button-icon" - :class="{ - 'append-right-5': label - }" /> </transition> - <transition name="fade"> + <transition name="expand-fade-sm"> + <span + v-if="loading && label" + class="append-right-5 js-loading-button-spacer" + > + </span> + </transition> + <transition name="expand-fade-md"> <span v-if="label" class="js-loading-button-label" diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss index e07a177e153..a065c06b1e3 100644 --- a/app/assets/stylesheets/framework/vue_transitions.scss +++ b/app/assets/stylesheets/framework/vue_transitions.scss @@ -7,3 +7,25 @@ .fade-leave-to { opacity: 0; } + +@mixin expand-fade($size, $max-width) { + .expand-fade-#{$size}-enter-active, + .expand-fade-#{$size}-leave-active { + overflow: hidden; + // Explicit `max-width` is needed because we can't transition from `auto` + // And we can't make this sufficiently large because it wouldn't smoothly + // expand and would have a significant delay when collapsing + max-width: $max-width; + transition: max-width $default-transition-duration $general-hover-transition-curve, + opacity $default-transition-duration $general-hover-transition-curve; + } + + .expand-fade-#{$size}-enter, + .expand-fade-#{$size}-leave-to { + max-width: 0; + opacity: 0; + } +} + +@include expand-fade('sm', 50px); +@include expand-fade('md', 200px); diff --git a/changelogs/unreleased/smooth-expand-loading-button.yml b/changelogs/unreleased/smooth-expand-loading-button.yml new file mode 100644 index 00000000000..b407b7db2b8 --- /dev/null +++ b/changelogs/unreleased/smooth-expand-loading-button.yml @@ -0,0 +1,5 @@ +--- +title: Add smooth expand/collapse transition to the loading button +merge_request: 14994 +author: +type: changed diff --git a/spec/javascripts/vue_shared/components/loading_button_spec.js b/spec/javascripts/vue_shared/components/loading_button_spec.js index 97c8a08fcdd..f1f9f1cc65d 100644 --- a/spec/javascripts/vue_shared/components/loading_button_spec.js +++ b/spec/javascripts/vue_shared/components/loading_button_spec.js @@ -61,8 +61,10 @@ describe('LoadingButton', function () { label: LABEL, }); const label = vm.$el.querySelector('.js-loading-button-label'); + const spacer = vm.$el.querySelector('.js-loading-button-spacer'); expect(label.textContent.trim()).toEqual(LABEL); + expect(spacer).toBeDefined(); }); }); |