Fix clibpoard buttons on "Check out branch" modal.clipboard-buttons-fix

Also document the clipboard_button_with_class method.

Fixes #18794.

2 files changed, 13 insertions, 3 deletions

diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index 07a3f452460..a7ec3730066 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -22,6 +22,16 @@ module ButtonHelper
       type: :button
   end
 
+  # Output a "Copy to Clipboard" button with a custom CSS class
+  #
+  # data - Data attributes passed to `content_tag`
+  # css_class - Class passed to the `content_tag`
+  #
+  # Examples:
+  # 
+  #   # Define the target element
+  #   clipboard_button_with_class({clipboard_target: "div#foo"}, css_class: "btn-clipboard")
+  #   # => "<button class='btn btn-clipboard' data-clipboard-target='div#foo'>...</button>"
   def clipboard_button_with_class(data = {}, css_class: 'btn-clipboard')
     content_tag :button,
       icon('clipboard'),
diff --git a/app/views/projects/merge_requests/show/_how_to_merge.html.haml b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
index 0dbd159298e..b3bea900d42 100644
--- a/app/views/projects/merge_requests/show/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
@@ -8,7 +8,7 @@
         %p
           %strong Step 1.
           Fetch and check out the branch for this merge request
-        = clipboard_button(clipboard_target: 'pre#merge-info-1')
+        = clipboard_button_with_class({clipboard_target: "pre#merge-info-1"}, css_class: "btn-clipboard")
         %pre.dark#merge-info-1
           - if @merge_request.for_fork?
             :preserve
@@ -25,7 +25,7 @@
         %p
           %strong Step 3.
           Merge the branch and fix any conflicts that come up
-        = clipboard_button(clipboard_target: 'pre#merge-info-3')
+        = clipboard_button_with_class({clipboard_target: "pre#merge-info-3"}, css_class: "btn-clipboard")
         %pre.dark#merge-info-3
           - if @merge_request.for_fork?
             :preserve
@@ -38,7 +38,7 @@
         %p
           %strong Step 4.
           Push the result of the merge to GitLab
-        = clipboard_button(clipboard_target: 'pre#merge-info-4')
+        = clipboard_button_with_class({clipboard_target: "pre#merge-info-4"}, css_class: "btn-clipboard")
         %pre.dark#merge-info-4
           :preserve
             git push origin #{h @merge_request.target_branch}