Merge branch 'justin_ho-update-button-variant-to-confirm-on-merge-request-page' into 'master'

Update button variants to btn-confirm on MR page

See merge request gitlab-org/gitlab!60254

app/assets/javascripts/batch_comments/components/drafts_count.vue

@@ -12,7 +12,7 @@ export default {
 };
 </script>
 <template>
-  <gl-badge size="sm" variant="success">
+  <gl-badge size="sm" variant="info" class="gl-ml-2">
     {{ draftsCount }}
     <span class="sr-only"> {{ n__('draft', 'drafts', draftsCount) }} </span>
   </gl-badge>

app/assets/javascripts/batch_comments/components/publish_button.vue

@@ -22,7 +22,7 @@ export default {
     variant: {
       type: String,
       required: false,
-      default: 'success',
+      default: 'confirm',
     },
   },
   computed: {

app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue

@@ -115,12 +115,13 @@ export default {
       </template>
     </markdown-field>
     <slot name="resolve-checkbox"></slot>
-    <div class="note-form-actions gl-display-flex gl-justify-content-space-between">
+    <div class="note-form-actions gl-display-flex">
       <gl-button
         ref="submitButton"
         :disabled="!hasValue || isSaving"
+        class="gl-mr-3 gl-w-auto!"
         category="primary"
-        variant="success"
+        variant="confirm"
         type="submit"
         data-track-event="click_button"
         data-qa-selector="save_comment_button"
@@ -128,9 +129,14 @@ export default {
       >
         {{ buttonText }}
       </gl-button>
-      <gl-button ref="cancelButton" variant="default" category="primary" @click="cancelComment">{{
-        __('Cancel')
-      }}</gl-button>
+      <gl-button
+        ref="cancelButton"
+        class="gl-w-auto!"
+        variant="default"
+        category="primary"
+        @click="cancelComment"
+        >{{ __('Cancel') }}</gl-button
+      >
     </div>
     <gl-modal
       ref="cancelCommentModal"

app/assets/javascripts/notes/components/note_form.vue

@@ -362,7 +362,7 @@ export default {
           </template>
         </markdown-field>
       </comment-field-layout>
-      <div class="note-form-actions clearfix">
+      <div class="note-form-actions">
         <template v-if="showBatchCommentsActions">
           <p v-if="showResolveDiscussionToggle">
             <label>
@@ -386,12 +386,12 @@ export default {
               </template>
             </label>
           </p>
-          <div class="gl-display-sm-flex gl-flex-wrap">
+          <div class="gl-display-flex gl-flex-wrap gl-mb-n3">
             <gl-button
               :disabled="isDisabled"
               category="primary"
               variant="confirm"
-              class="gl-mr-3"
+              class="gl-sm-mr-3 gl-mb-3"
               data-qa-selector="start_review_button"
               @click="handleAddToReview"
             >
@@ -401,15 +401,15 @@ export default {
             <gl-button
               :disabled="isDisabled"
               category="secondary"
-              variant="default"
+              variant="confirm"
               data-qa-selector="comment_now_button"
-              class="gl-mr-3 js-comment-button"
+              class="gl-sm-mr-3 gl-mb-3 js-comment-button"
               @click="handleUpdate()"
             >
               {{ __('Add comment now') }}
             </gl-button>
             <gl-button
-              class="note-edit-cancel js-close-discussion-note-form"
+              class="note-edit-cancel gl-mb-3 js-close-discussion-note-form"
               category="secondary"
               variant="default"
               data-testid="cancelBatchCommentsEnabled"

app/assets/stylesheets/pages/note_form.scss

@@ -369,10 +369,6 @@ table {
     .btn {
       float: none;
       width: 100%;
-
-      &:not(:last-child) {
-        margin-bottom: 10px;
-      }
     }
   }
 }

app/assets/stylesheets/utilities.scss

@@ -172,3 +172,13 @@
     width: 50%;
   }
 }
+
+.gl-sm-mr-3 {
+  @include media-breakpoint-up(sm) {
+    margin-right: $gl-spacing-scale-3;
+  }
+}
+
+.gl-mb-n3 {
+  margin-bottom: -$gl-spacing-scale-3;
+}

changelogs/unreleased/justin_ho-update-button-variant-to-confirm-on-merge-request-page.yml

+---
+title: Update button variants to btn-confirm on MR page
+merge_request: 60254
+author:
+type: changed

ee/app/views/projects/_merge_request_approvals_settings.html.haml

@@ -13,4 +13,4 @@
     = form_for @project, html: { class: "merge-request-approval-settings-form js-mr-approvals-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-approval-settings' }
       = render 'projects/merge_request_approvals_settings_form', form: f, project: @project
-      = f.submit _("Save changes"), class: "btn gl-button btn-success gl-mt-4", data: { qa_selector: 'save_merge_request_approval_settings_button' }
+      = f.submit _("Save changes"), class: "btn gl-button btn-confirm gl-mt-4", data: { qa_selector: 'save_merge_request_approval_settings_button' }

spec/features/merge_request/batch_comments_spec.rb

@@ -34,7 +34,7 @@ RSpec.describe 'Merge request > Batch comments', :js do
 
       expect(page).to have_css('.review-bar-component')
 
-      expect(find('.review-bar-content .btn-success')).to have_content('1')
+      expect(find('.review-bar-content .btn-confirm')).to have_content('1')
     end
 
     it 'publishes review' do
@@ -157,7 +157,7 @@ RSpec.describe 'Merge request > Batch comments', :js do
         expect(find('.new .draft-note-component')).to have_content('Line is wrong')
         expect(find('.old .draft-note-component')).to have_content('Another wrong line')
 
-        expect(find('.review-bar-content .btn-success')).to have_content('2')
+        expect(find('.review-bar-content .btn-confirm')).to have_content('2')
       end
     end
 

spec/frontend/design_management/components/design_notes/__snapshots__/design_reply_form_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Design reply form component renders button text as "Comment" when creating a comment 1`] = `
-"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
+"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn gl-mr-3 gl-w-auto! btn-confirm btn-md disabled gl-button\\">
   <!---->
   <!----> <span class=\\"gl-button-text\\">
       Comment
@@ -9,7 +9,7 @@ exports[`Design reply form component renders button text as "Comment" when creat
 `;
 
 exports[`Design reply form component renders button text as "Save comment" when creating a comment 1`] = `
-"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn btn-success btn-md disabled gl-button\\">
+"<button data-track-event=\\"click_button\\" data-qa-selector=\\"save_comment_button\\" type=\\"submit\\" disabled=\\"disabled\\" class=\\"btn gl-mr-3 gl-w-auto! btn-confirm btn-md disabled gl-button\\">
   <!---->
   <!----> <span class=\\"gl-button-text\\">
       Save comment