Merge branch 'kp-replace-button-with-gl-button' into 'master'

Use 'GlButton' in place of button within Epic app

See merge request gitlab-org/gitlab-ee!9372

ee/app/assets/javascripts/epic/components/epic_create.vue

 <script>
 import { mapState, mapActions } from 'vuex';
+import { GlButton } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 export default {
   components: {
+    GlButton,
     LoadingButton,
   },
   props: {
@@ -45,14 +47,14 @@ export default {
 
 <template>
   <div class="dropdown epic-create-dropdown">
-    <button
-      class="btn btn-success qa-new-epic-button"
-      type="button"
+    <gl-button
+      variant="success"
+      class="qa-new-epic-button"
       data-toggle="dropdown"
       @click="focusInput"
     >
       {{ __('New epic') }}
-    </button>
+    </gl-button>
     <div :class="{ 'dropdown-menu-right': alignRight }" class="dropdown-menu">
       <input
         ref="epicTitleInput"

ee/app/assets/javascripts/epic/components/epic_header.vue

 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { GlButton } from '@gitlab/ui';
 
 import { __ } from '~/locale';
 
@@ -18,6 +19,7 @@ export default {
   },
   components: {
     Icon,
+    GlButton,
     LoadingButton,
     UserAvatarLink,
     TimeagoTooltip,
@@ -104,14 +106,15 @@ export default {
         @click="toggleEpicStatus(isEpicOpen)"
       />
     </div>
-    <button
+    <gl-button
       :aria-label="__('Toggle sidebar')"
-      class="btn btn-default float-right d-block d-sm-none
+      variant="secondary"
+      class="float-right d-block d-sm-none
 gutter-toggle issuable-gutter-toggle js-sidebar-toggle"
       type="button"
       @click="toggleSidebar({ sidebarCollapsed })"
     >
       <i class="fa fa-angle-double-left"></i>
-    </button>
+    </gl-button>
   </div>
 </template>

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

 <script>
 import _ from 'underscore';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 
 import { __, s__ } from '~/locale';
 import { dateInWords } from '~/lib/utils/datetime_utility';
@@ -26,6 +26,7 @@ export default {
     CollapsedCalendarIcon,
     ToggleSidebar,
     GlLoadingIcon,
+    GlButton,
   },
   props: {
     sidebarCollapsed: {
@@ -200,14 +201,14 @@ export default {
           css-classes="help-icon append-right-5"
           tab-index="0"
         />
-        <button
+        <gl-button
           v-show="canUpdate && !editing"
-          type="button"
-          class="btn-blank btn-link btn-primary-hover-link btn-sidebar-action"
+          variant="link"
+          class="btn-sidebar-action"
           @click="toggleDatePicker"
         >
           {{ __('Edit') }}
-        </button>
+        </gl-button>
         <toggle-sidebar
           v-if="showToggleSidebar"
           :collapsed="sidebarCollapsed"
@@ -246,14 +247,14 @@ export default {
               tab-index="0"
             />
             <span v-if="selectedAndEditable" class="no-value">
-              -
-              <button
-                type="button"
-                class="btn-blank btn-link btn-default-hover-link"
+              &nbsp;&ndash;
+              <gl-button
+                variant="link"
+                class="btn-sidebar-date-remove"
                 @click="newDateSelected(null)"
               >
                 {{ __('remove') }}
-              </button>
+              </gl-button>
             </span>
           </template>
           <span v-else class="no-value"> {{ __('None') }} </span>

ee/app/assets/stylesheets/pages/epics.scss

@@ -11,6 +11,15 @@
       color: $gl-text-color-secondary;
     }
 
+    .btn-sidebar-action {
+      line-height: $gl-font-size;
+    }
+
+    .btn-sidebar-date-remove {
+      height: $gl-font-size;
+      line-height: $gl-btn-horz-padding;
+    }
+
     .date-warning-icon {
       color: $orange-500;
       margin-top: -1px;