From d1adb71d5c7ee258150bc8f9156be8f0bb86039c Mon Sep 17 00:00:00 2001
From: Yogi <6395788-yo@users.noreply.gitlab.com>
Date: Tue, 26 Jan 2021 08:46:38 +0000
Subject: [PATCH] Apply GitLab UI for create file button in MR
---
.../components/states/nothing_to_merge.vue | 27 +++++++++++++------
.../stylesheets/pages/merge_requests.scss | 9 ++++---
.../yo-gl-button-create-file-mr.yml | 5 ++++
3 files changed, 29 insertions(+), 12 deletions(-)
create mode 100644 changelogs/unreleased/yo-gl-button-create-file-mr.yml
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
index 14a29483d3c0c..f2fedd1de42c8 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue
@@ -1,9 +1,13 @@
<script>
/* eslint-disable vue/no-v-html */
import emptyStateSVG from 'icons/_mr_widget_empty_state.svg';
+import { GlButton } from '@gitlab/ui';
export default {
name: 'MRWidgetNothingToMerge',
+ components: {
+ GlButton,
+ },
props: {
mr: {
type: Object,
@@ -25,11 +29,13 @@ export default {
<span v-html="emptyStateSVG"></span>
</div>
<div class="text col-md-7 order-md-first col-12">
- <span>{{
- s__(
- 'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.',
- )
- }}</span>
+ <p class="highlight">
+ {{
+ s__(
+ 'mrWidgetNothingToMerge|Merge requests are a place to propose changes you have made to a project and discuss those changes with others.',
+ )
+ }}
+ </p>
<p>
{{
s__(
@@ -45,9 +51,14 @@ export default {
}}
</p>
<div>
- <a v-if="mr.newBlobPath" :href="mr.newBlobPath" class="btn btn-inverted btn-success">{{
- __('Create file')
- }}</a>
+ <gl-button
+ v-if="mr.newBlobPath"
+ :href="mr.newBlobPath"
+ category="secondary"
+ variant="success"
+ >
+ {{ __('Create file') }}
+ </gl-button>
</div>
</div>
</div>
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 1a223ec0f7306..58f8cf0978046 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -375,13 +375,14 @@ $mr-widget-min-height: 69px;
}
.text {
- span {
- font-weight: $gl-font-weight-bold;
- }
-
p {
margin-top: $gl-padding;
}
+
+ .highlight {
+ margin: 0 0 $gl-padding;
+ font-weight: $gl-font-weight-bold;
+ }
}
}
diff --git a/changelogs/unreleased/yo-gl-button-create-file-mr.yml b/changelogs/unreleased/yo-gl-button-create-file-mr.yml
new file mode 100644
index 0000000000000..670edb8d8626a
--- /dev/null
+++ b/changelogs/unreleased/yo-gl-button-create-file-mr.yml
@@ -0,0 +1,5 @@
+---
+title: Apply GitLab UI for create file button in MR
+merge_request: 51795
+author: Yogi (@yo)
+type: other
--
GitLab