[skip ci] .input-group-btn into .input-group-prepend, .input-group-append

14 files changed, 106 insertions, 81 deletions

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index f8dcdf3f60a..971490ba298 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -182,11 +182,11 @@
                     :value="ingressExternalIp"
                     readonly
                   />
-                  <span class="input-group-btn">
+                  <span class="input-group-append">
                     <clipboard-button
                       :text="ingressExternalIp"
                       :title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
-                      class="js-clipboard-btn"
+                      class="input-group-text js-clipboard-btn"
                     />
                   </span>
                 </div>
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 4b44098e279..50d039348c4 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -312,7 +312,8 @@
   padding: 0 5px;
 }
 
-.input-group-btn {
+.input-group-prepend,
+.input-group-append {
   .btn {
     @include btn-middle;
 
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index e2c28d7a2ff..e46374530b5 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -83,7 +83,8 @@ label {
     font-family: $monospace_font;
   }
 
-  .input-group-btn .btn {
+  .input-group-prepend .btn,
+  .input-group-append .btn {
     padding: 3px $gl-btn-padding;
     background-color: $gray-light;
     border: 1px solid $border-color;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index df785b54321..e8281c5e68d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -912,7 +912,8 @@ pre.light-well {
 }
 
 .project-tip-command {
-  > .input-group-btn:first-child {
+  > .input-group-prepend:first-child,
+  > .input-group-append:first-child {
     width: auto;
   }
 }
diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml
index 4c0822bfdf3..a25e86c65c2 100644
--- a/app/views/import/_githubish_status.html.haml
+++ b/app/views/import/_githubish_status.html.haml
@@ -46,13 +46,14 @@
           %td.import-target
             %fieldset.row
             .input-group
-              .project-path.input-group-btn
-                - if current_user.can_select_namespace?
-                  - selected = params[:namespace_id] || :current_user
-                  - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {}
-                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
-                - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
+              .project-path.input-group-prepend
+                .input-group-text
+                  - if current_user.can_select_namespace?
+                    - selected = params[:namespace_id] || :current_user
+                    - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {}
+                    = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
+                  - else
+                    = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
               %span.input-group-prepend
                 .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index 7e5c3151bc9..a5a5e94a301 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -54,13 +54,14 @@
           %td.import-target
             %fieldset.row
             .input-group
-              .project-path.input-group-btn
-                - if current_user.can_select_namespace?
-                  - selected = params[:namespace_id] || :current_user
-                  - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner, path: repo.owner) } : {}
-                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
-                - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
+              .project-path.input-group-prepend
+                .input-group-text
+                  - if current_user.can_select_namespace?
+                    - selected = params[:namespace_id] || :current_user
+                    - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner, path: repo.owner) } : {}
+                    = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
+                  - else
+                    = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
               %span.input-group-prepend
                 .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 053a58ab914..4b02bcce9ed 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -20,8 +20,9 @@
         .form-group
           .input-group
             = text_field_tag 'created-personal-access-token', @new_personal_access_token, readonly: true, class: "form-control js-select-on-focus", 'aria-describedby' => "created-personal-access-token-help-block"
-            %span.input-group-btn
-              = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left", class: "btn-default btn-clipboard")
+            %span.input-group-append
+              .input-group-text
+                = clipboard_button(text: @new_personal_access_token, title: "Copy personal access token to clipboard", placement: "left", class: "btn-default btn-clipboard")
           %span#created-personal-access-token-help-block.form-text.text-muted.text-danger Make sure you save it - you won't be able to access it again.
 
       %hr
diff --git a/app/views/projects/_issuable_by_email.html.haml b/app/views/projects/_issuable_by_email.html.haml
index 585dd2ce1a1..1704b52ef6c 100644
--- a/app/views/projects/_issuable_by_email.html.haml
+++ b/app/views/projects/_issuable_by_email.html.haml
@@ -17,14 +17,15 @@
           You can create a new #{name} inside this project by sending an email to the following email address:
         .email-modal-input-group.input-group
           = text_field_tag :issuable_email, email, class: "monospace js-select-on-focus form-control", readonly: true
-          .input-group-btn
-            = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard btn-transparent d-none d-sm-block')
-            = mail_to email, class: 'btn btn-clipboard btn-transparent',
-              subject: _("Enter the #{name} title"),
-              body: _("Enter the #{name} description"),
-              title: _('Send email'),
-              data: { toggle: 'tooltip', placement: 'bottom' } do
-              = sprite_icon('mail')
+          .input-group-append
+            .input-group-text
+              = clipboard_button(target: '#issuable_email', class: 'btn btn-clipboard btn-transparent d-none d-sm-block')
+              = mail_to email, class: 'btn btn-clipboard btn-transparent',
+                subject: _("Enter the #{name} title"),
+                body: _("Enter the #{name} description"),
+                title: _('Send email'),
+                data: { toggle: 'tooltip', placement: 'bottom' } do
+                = sprite_icon('mail')
 
         %p
           = render 'by_email_description'
diff --git a/app/views/projects/_new_project_push_tip.html.haml b/app/views/projects/_new_project_push_tip.html.haml
index 9bc69211d12..00d2d3df082 100644
--- a/app/views/projects/_new_project_push_tip.html.haml
+++ b/app/views/projects/_new_project_push_tip.html.haml
@@ -3,9 +3,10 @@
     = label_tag(:push_to_create_tip, _("Private projects can be created in your personal namespace with:"), class: "weight-normal")
 
   %p.input-group.project-tip-command
-    %span.input-group-btn
+    %span
       = text_field_tag :push_to_create_tip, push_to_create_project_command, class: "js-select-on-focus form-control monospace", readonly: true, aria: { label: _("Push project from command line") }
-    %span.input-group-btn
-      = clipboard_button(text: push_to_create_project_command, title: _("Copy command to clipboard"), placement: "right")
+    %span.input-group-append
+      .input-group-text
+        = clipboard_button(text: push_to_create_project_command, title: _("Copy command to clipboard"), placement: "right")
   %p
     = link_to("What does this command do?", help_page_path("gitlab-basics/create-project", anchor: "push-to-create-a-new-project"), target: "_blank")
diff --git a/app/views/projects/clusters/gcp/_show.html.haml b/app/views/projects/clusters/gcp/_show.html.haml
index c53a283d97d..47ab93d8ed2 100644
--- a/app/views/projects/clusters/gcp/_show.html.haml
+++ b/app/views/projects/clusters/gcp/_show.html.haml
@@ -3,8 +3,9 @@
     = s_('ClusterIntegration|Kubernetes cluster name')
   .input-group
     %input.form-control.cluster-name.js-select-on-focus{ value: @cluster.name, readonly: true }
-    %span.input-group-btn
-      = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'), class: 'btn-secondary')
+    %span.input-group-append
+      .input-group-text
+        = clipboard_button(text: @cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'), class: 'btn-secondary')
 
 = form_for @cluster, url: namespace_project_cluster_path(@project.namespace, @project, @cluster), as: :cluster do |field|
   = form_errors(@cluster)
@@ -14,8 +15,9 @@
       = platform_kubernetes_field.label :api_url, s_('ClusterIntegration|API URL')
       .input-group
         = platform_kubernetes_field.text_field :api_url, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|API URL'), readonly: true
-        %span.input-group-btn
-          = clipboard_button(text: @cluster.platform_kubernetes.api_url, title: s_('ClusterIntegration|Copy API URL'), class: 'btn-secondary')
+        %span.input-group-append
+          .input-group-text
+            = clipboard_button(text: @cluster.platform_kubernetes.api_url, title: s_('ClusterIntegration|Copy API URL'), class: 'btn-secondary')
 
     .form-group
       = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
@@ -29,8 +31,8 @@
       = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
       .input-group
         = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token js-select-on-focus', type: 'password', placeholder: s_('ClusterIntegration|Token'), readonly: true
-        %span.input-group-btn
-          %button.btn.btn-secondary.js-show-cluster-token{ type: 'button' }
+        %span.input-group-append
+          %button.btn.btn-secondary.input-group-text.js-show-cluster-token{ type: 'button' }
             = s_('ClusterIntegration|Show')
           = clipboard_button(text: @cluster.platform_kubernetes.token, title: s_('ClusterIntegration|Copy Token'), class: 'btn-secondary')
 
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
index b3f6b1544b5..1b604f21dce 100644
--- a/app/views/projects/pages_domains/show.html.haml
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -30,8 +30,9 @@
       %td
         .input-group
           = text_field_tag :domain_dns, dns_record , class: "monospace js-select-on-focus form-control", readonly: true
-          .input-group-btn
-            = clipboard_button(target: '#domain_dns', class: 'btn-default d-none d-sm-block')
+          .input-group-append
+            .input-group-text
+              = clipboard_button(target: '#domain_dns', class: 'btn-default d-none d-sm-block')
         %p.form-text.text-muted
           To access this domain create a new DNS record
 
diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
index 9884b436e2b..aab9e12577e 100644
--- a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -21,15 +21,17 @@
     = label_tag :display_name, 'Display name', class: 'col-sm-2 col-12 col-form-label'
     .col-sm-10.col-12.input-group
       = text_field_tag :display_name, "GitLab / #{@project.full_name}", class: 'form-control form-control-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#display_name')
+      .input-group-append
+        .input-group-text
+          = clipboard_button(target: '#display_name')
 
   .form-group
     = label_tag :description, 'Description', class: 'col-sm-2 col-12 col-form-label'
     .col-sm-10.col-12.input-group
       = text_field_tag :description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#description')
+      .input-group-append
+        .input-group-text
+          = clipboard_button(target: '#description')
 
   .form-group
     = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-12 col-form-label'
@@ -45,8 +47,9 @@
     = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-12 col-form-label'
     .col-sm-10.col-12.input-group
       = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#request_url')
+      .input-group-append
+        .input-group-text
+          = clipboard_button(target: '#request_url')
 
   .form-group
     = label_tag nil, 'Request method', class: 'col-sm-2 col-12 col-form-label'
@@ -56,15 +59,17 @@
     = label_tag :response_username, 'Response username', class: 'col-sm-2 col-12 col-form-label'
     .col-sm-10.col-12.input-group
       = text_field_tag :response_username, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#response_username')
+      .input-group-append
+        .input-group-text
+          = clipboard_button(target: '#response_username')
 
   .form-group
     = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-12 col-form-label'
     .col-sm-10.col-12.input-group
       = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control form-control-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#response_icon')
+      .input-group-append
+        .input-group-text
+          = clipboard_button(target: '#response_icon')
 
   .form-group
     = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 col-form-label'
@@ -74,15 +79,17 @@
     = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-12 col-form-label'
     .col-sm-10.col-12.input-group
       = text_field_tag :autocomplete_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#autocomplete_hint')
+      .input-group-append
+        .input-group-text
+          = clipboard_button(target: '#autocomplete_hint')
 
   .form-group
     = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
     .col-sm-10.col-12.input-group
       = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
-      .input-group-btn
-        = clipboard_button(target: '#autocomplete_description')
+      .input-group-append
+        .input-group-text
+          = clipboard_button(target: '#autocomplete_description')
 
 %hr
 
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
index 92f6a858ae0..72ae69bd10d 100644
--- a/app/views/projects/services/slack_slash_commands/_help.html.haml
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -39,8 +39,9 @@
         = label_tag :url, 'URL', class: 'col-sm-2 col-12 col-form-label'
         .col-sm-10.col-12.input-group
           = text_field_tag :url, service_trigger_url(subject), class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#url')
+          .input-group-append
+            .input-group-text
+              = clipboard_button(target: '#url')
 
       .form-group
         = label_tag nil, 'Method', class: 'col-sm-2 col-12 col-form-label'
@@ -50,8 +51,9 @@
         = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-12 col-form-label'
         .col-sm-10.col-12.input-group
           = text_field_tag :customize_name, 'GitLab', class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#customize_name')
+          .input-group-append
+            .input-group-text
+              = clipboard_button(target: '#customize_name')
 
       .form-group
         = label_tag nil, 'Customize icon', class: 'col-sm-2 col-12 col-form-label'
@@ -67,22 +69,25 @@
         = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 col-form-label'
         .col-sm-10.col-12.input-group
           = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#autocomplete_description')
+          .input-group-append
+            .input-group-text
+              = clipboard_button(target: '#autocomplete_description')
 
       .form-group
         = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-12 col-form-label'
         .col-sm-10.col-12.input-group
           = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#autocomplete_usage_hint')
+          .input-group-append
+            .input-group-text
+              = clipboard_button(target: '#autocomplete_usage_hint')
 
       .form-group
         = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-12 col-form-label'
         .col-sm-10.col-12.input-group
           = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control form-control-sm', readonly: 'readonly'
-          .input-group-btn
-            = clipboard_button(target: '#descriptive_label')
+          .input-group-append
+            .input-group-text
+              = clipboard_button(target: '#descriptive_label')
 
     %hr
 
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 351bb49493a..09ed9004d97 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -1,22 +1,24 @@
 - project = project || @project
 
 .git-clone-holder.input-group
-  .input-group-btn
-    - if allowed_protocols_present?
-      .clone-dropdown-btn.btn
-        %span
-          = enabled_project_button(project, enabled_protocol)
-    - else
-      %a#clone-dropdown.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
-        %span
-          = default_clone_protocol.upcase
-        = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right.clone-options-dropdown
-        %li
-          = ssh_clone_button(project)
-        %li
-          = http_clone_button(project)
+  .input-group-prepend
+    .input-group-text
+      - if allowed_protocols_present?
+        .clone-dropdown-btn.btn
+          %span
+            = enabled_project_button(project, enabled_protocol)
+      - else
+        %a#clone-dropdown.btn.clone-dropdown-btn.qa-clone-dropdown{ href: '#', data: { toggle: 'dropdown' } }
+          %span
+            = default_clone_protocol.upcase
+          = icon('caret-down')
+        %ul.dropdown-menu.dropdown-menu-selectable.dropdown-menu-right.clone-options-dropdown
+          %li
+            = ssh_clone_button(project)
+          %li
+            = http_clone_button(project)
 
   = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true, aria: { label: 'Project clone URL' }
-  .input-group-btn
-    = clipboard_button(target: '#project_clone', title: _("Copy URL to clipboard"), class: "btn-secondary btn-clipboard")
+  .input-group-append
+    .input-group-text
+      = clipboard_button(target: '#project_clone', title: _("Copy URL to clipboard"), class: "btn-secondary btn-clipboard")