1 files changed, 15 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index d64ab774431..e2a6e92081f 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -15,6 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'ExpandButton',
   components: {
+    GlButton,
     Icon,
   },
   data() {
@@ -39,15 +41,25 @@ export default {
 </script>
 <template>
   <span>
-    <button
+    <gl-button
       v-show="isCollapsed"
       :aria-label="ariaLabel"
       type="button"
-      class="text-expander btn-blank"
+      class="js-text-expander-prepend text-expander btn-blank"
       @click="onClick"
     >
       <icon :size="12" name="ellipsis_h" />
-    </button>
+    </gl-button>
+    <span v-if="isCollapsed"> <slot name="short"></slot> </span>
     <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
+    <gl-button
+      v-show="!isCollapsed"
+      :aria-label="ariaLabel"
+      type="button"
+      class="js-text-expander-append text-expander btn-blank"
+      @click="onClick"
+    >
+      <icon :size="12" name="ellipsis_h" />
+    </gl-button>
   </span>
 </template>