Add gl-button from gitlab-ui

app/assets/javascripts/boards/components/board_new_issue.vue

 <script>
 import $ from 'jquery';
+import { Button } from '@gitlab-org/gitlab-ui';
 import eventHub from '../eventhub';
 import ProjectSelect from './project_select.vue';
 import ListIssue from '../models/issue';
@@ -10,6 +11,7 @@ export default {
   name: 'BoardNewIssue',
   components: {
     ProjectSelect,
+    'gl-button': Button,
   },
   props: {
     groupId: {
@@ -123,21 +125,23 @@ export default {
           :group-id="groupId"
         />
         <div class="clearfix prepend-top-10">
-          <button
+          <gl-button
             ref="submit-button"
             :disabled="disabled"
-            class="btn btn-success float-left"
+            class="float-left"
+            variant="success"
             type="submit"
           >
             Submit issue
-          </button>
-          <button
-            class="btn btn-default float-right"
+          </gl-button>
+          <gl-button
+            class="float-right"
             type="button"
+            variant="default"
             @click="cancel"
           >
             Cancel
-          </button>
+          </gl-button>
         </div>
       </form>
     </div>

app/assets/javascripts/environments/components/environment_monitoring.vue

@@ -2,12 +2,14 @@
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
+import { Button } from '@gitlab-org/gitlab-ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
   components: {
     Icon,
+    'gl-button': Button,
   },
   directives: {
     tooltip,
@@ -26,15 +28,16 @@ export default {
 };
 </script>
 <template>
-  <a
+  <gl-button
     v-tooltip
     :href="monitoringUrl"
     :title="title"
     :aria-label="title"
-    class="btn monitoring-url d-none d-sm-none d-md-block"
+    class="monitoring-url d-none d-sm-none d-md-block"
     data-container="body"
     rel="noopener noreferrer nofollow"
+    variant="default"
   >
     <icon name="chart" />
-  </a>
+  </gl-button>
 </template>

package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@gitlab-org/gitlab-svgs": "^1.29.0",
-    "@gitlab-org/gitlab-ui": "^1.7.1",
+    "@gitlab-org/gitlab-ui": "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/101969901/artifacts/raw/gitlab-ui.jivl-add-text-button-component.tgz",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.3",

spec/javascripts/boards/board_new_issue_spec.js

@@ -69,7 +69,6 @@ describe('Issue boards new issue form', () => {
         vm.$el.querySelector('.btn-success').click();
 
         expect(vm.submit.calls.count()).toBe(1);
-        expect(vm.$refs['submit-button']).toBe(vm.$el.querySelector('.btn-success'));
       })
       .then(done)
       .catch(done.fail);

yarn.lock

@@ -185,10 +185,9 @@
   resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.29.0.tgz#03b65b513f9099bbda6ecf94d673a2952f8c6c70"
   integrity sha512-sCl6nP3ph36+8P3nrw9VanAR648rgOUEBlEoLPHkhKm79xB1dUkXGBtI0uaSJVgbJx40M1/Ts8HSdMv+PF3EIg==
 
-"@gitlab-org/gitlab-ui@^1.7.1":
+"@gitlab-org/gitlab-ui@https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/101969901/artifacts/raw/gitlab-ui.jivl-add-text-button-component.tgz":
   version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-ui/-/gitlab-ui-1.7.1.tgz#e9cce86cb7e34311405e705c1de674276b453f17"
-  integrity sha512-X12W39lFnWmfmYcHBokrauKvp6VLW9u0rFdgBXWlnrRL2hBShnyeBsBXKLMGUGnofMtgYv3iYO/rFW9IB79lFg==
+  resolved "https://gitlab.com/gitlab-org/gitlab-ui/-/jobs/101969901/artifacts/raw/gitlab-ui.jivl-add-text-button-component.tgz#e17416d3b829a03ee8d9eef8b58b39dc8c9fb867"
   dependencies:
     "@gitlab-org/gitlab-svgs" "^1.23.0"
     bootstrap-vue "^2.0.0-rc.11"