Add smooth expand/collapse transition to the loading buttonsmooth-expand-loading-button

First iteration just had fade transitions, see
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14883#note_44109014

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();
     });
   });