Merge branch '197500-edit-and-web-ide-look-like-segmented-control-in-file-header' into 'master'

Buttons for Edit and Web IDE look like segmented control in file header

Closes #197500

See merge request gitlab-org/gitlab!23291

app/helpers/blob_helper.rb

@@ -47,7 +47,7 @@ module BlobHelper
   def edit_blob_button(project = @project, ref = @ref, path = @path, options = {})
     return unless blob = readable_blob(options, path, project, ref)
 
-    common_classes = "btn btn-primary js-edit-blob #{options[:extra_class]}"
+    common_classes = "btn btn-primary js-edit-blob ml-2 #{options[:extra_class]}"
 
     edit_button_tag(blob,
                     common_classes,
@@ -62,7 +62,7 @@ module BlobHelper
     return unless blob = readable_blob(options, path, project, ref)
 
     edit_button_tag(blob,
-                    'btn btn-inverted btn-primary ide-edit-button',
+                    'btn btn-inverted btn-primary ide-edit-button ml-2',
                     _('Web IDE'),
                     ide_edit_path(project, ref, path, options),
                     project,

app/views/projects/blob/_header.html.haml

@@ -2,18 +2,16 @@
 .js-file-title.file-title-flex-parent
   = render 'projects/blob/header_content', blob: blob
 
-  .file-actions
+  .file-actions<
     = render 'projects/blob/viewer_switcher', blob: blob unless blame
-
-    .btn-group{ role: "group" }<
-      = edit_blob_button
-      = ide_edit_button
-    .btn-group{ role: "group" }<
+    = edit_blob_button
+    = ide_edit_button
+    .btn-group.ml-2{ role: "group" }>
       = render_if_exists 'projects/blob/header_file_locks_link'
       - if current_user
         = replace_blob_link
         = delete_blob_link
-    .btn-group{ role: "group" }<
+    .btn-group.ml-2{ role: "group" }
       = copy_blob_source_button(blob) unless blame
       = open_raw_blob_button(blob)
       = download_blob_button(blob)

app/views/projects/blob/_viewer_switcher.html.haml

@@ -2,7 +2,7 @@
   - simple_viewer = blob.simple_viewer
   - rich_viewer = blob.rich_viewer
 
-  .btn-group.js-blob-viewer-switcher{ role: "group" }
+  .btn-group.js-blob-viewer-switcher.ml-2{ role: "group" }>
     - simple_label = "Display #{simple_viewer.switcher_title}"
     %button.btn.btn-default.btn-sm.js-blob-viewer-switch-btn.has-tooltip{ 'aria-label' => simple_label, title: simple_label, data: { viewer: 'simple', container: 'body' } }>
       = icon(simple_viewer.switcher_icon)

changelogs/unreleased/197500-edit-and-web-ide-look-like-segmented-control-in-file-header.yml

+---
+title: Remove button group for edit and web ide in file header
+merge_request: 23291
+author:
+type: other