[skip ci] .input-group-addon to .input-group-prepend, .input-group-append

app/assets/javascripts/profile/account/components/update_username.vue

@@ -86,7 +86,11 @@ Please update your Git repository remotes as soon as possible.`),
     <div class="form-group">
       <label :for="$options.inputId">{{ s__('Profiles|Path') }}</label>
       <div class="input-group">
-        <div class="input-group-addon">{{ rootUrl }}</div>
+        <div class="input-group-prepend">
+          <div class="input-group-text">
+            {{ rootUrl }}
+          </div>
+        </div>
         <input
           :id="$options.inputId"
           class="form-control"

app/assets/stylesheets/framework/forms.scss

@@ -170,11 +170,13 @@ label {
     max-width: 180px;
   }
 
-  .input-group-addon {
+  .input-group-prepend,
+  .input-group-append {
     background-color: $input-group-addon-bg;
   }
 
-  .input-group-addon:not(:first-child):not(:last-child) {
+  .input-group-prepend:not(:first-child):not(:last-child),
+  .input-group-append:not(:first-child):not(:last-child) {
     border-left: 0;
     border-right: 0;
   }

app/assets/stylesheets/pages/projects.scss

@@ -46,7 +46,8 @@
     }
   }
 
-  .input-group-addon {
+  .input-group-prepend,
+  .input-group-append {
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: unset;
@@ -524,7 +525,8 @@ a.deploy-project-label {
       display: flex;
     }
 
-    .input-group-addon {
+    .input-group-prepend,
+    .input-group-append {
       flex: 1;
       text-align: left;
       padding-left: ($gl-padding * 3);

app/views/admin/appearances/_form.html.haml

-= form_for @appearance, url: admin_appearances_path, do |f|
+= form_for @appearance, url: admin_appearances_path do |f|
   = form_errors(@appearance)
 
   %fieldset.app_logo

app/views/admin/labels/_form.html.haml

@@ -13,7 +13,8 @@
     = f.label :color, "Background color", class: 'col-form-label'
     .col-sm-10
       .input-group
-        .input-group-addon.label-color-preview  
+        .input-group-prepend
+          .input-group-text.label-color-preview  
         = f.text_field :color, class: "form-control"
       .form-text.text-muted
         Choose any color.

app/views/import/_githubish_status.html.haml

@@ -53,7 +53,8 @@
                   = 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-addon /
+              %span.input-group-prepend
+                .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do

app/views/import/bitbucket/status.html.haml

@@ -61,7 +61,8 @@
                   = 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-addon /
+              %span.input-group-prepend
+                .input-group-text /
               = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
             = button_tag class: 'btn btn-import js-add-to-import' do

app/views/import/gitlab_projects/new.html.haml

@@ -13,12 +13,14 @@
       .form-group
         .input-group
           - if current_user.can_select_namespace?
-            .input-group-addon.has-tooltip{ title: root_url }
+            .input-group-prepend.has-tooltip{ title: root_url }
+              .input-group-text
                 = root_url
             = select_tag :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), class: 'select2 js-select-namespace', tabindex: 1
 
           - else
-            .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
+            .input-group-prepend.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
+              .input-group-text
                 #{user_url(current_user.username)}/
             = hidden_field_tag :namespace_id, value: current_user.namespace_id
     .form-group.col-12.col-sm-6.project-path

app/views/projects/_new_project_fields.html.haml

@@ -9,12 +9,14 @@
         Project path
     .input-group
       - if current_user.can_select_namespace?
-        .input-group-addon.has-tooltip{ title: root_url }
+        .input-group-prepend.has-tooltip{ title: root_url }
+          .input-group-text
             = root_url
         = f.select :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), {}, { class: 'select2 js-select-namespace qa-project-namespace-select', tabindex: 1}
 
       - else
-        .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
+        .input-group-prepend.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
+          .input-group-text
             #{user_url(current_user.username)}/
         = f.hidden_field :namespace_id, value: current_user.namespace_id
   .form-group.project-path.col-sm-6

app/views/projects/_project_templates.html.haml

@@ -14,7 +14,8 @@
       %label.label-light
         Template
       .input-group.template-input-group
-        .input-group-addon
+        .input-group-prepend
+          .input-group-text
             .selected-icon
               - Gitlab::ProjectTemplate.all.each do |template|
                 = custom_icon(template.logo)

app/views/projects/clusters/gcp/_show.html.haml

@@ -21,7 +21,8 @@
       = platform_kubernetes_field.label :ca_cert, s_('ClusterIntegration|CA Certificate')
       .input-group
         = platform_kubernetes_field.text_area :ca_cert, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|Certificate Authority bundle (PEM format)'), readonly: true
-        %span.input-group-addon.clipboard-addon
+        %span.input-group-append.clipboard-addon
+          .input-group-text
             = clipboard_button(text: @cluster.platform_kubernetes.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'), class: 'btn-blank')
 
     .form-group

app/views/projects/clusters/user/_show.html.haml

@@ -17,7 +17,8 @@
       = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')
       .input-group
         = platform_kubernetes_field.text_field :token, class: 'form-control js-cluster-token', type: 'password', placeholder: s_('ClusterIntegration|Token'), autocomplete: 'off'
-        %span.input-group-addon.clipboard-addon
+        %span.input-group-append.clipboard-addon
+          .input-group-text
             %button.js-show-cluster-token.btn-blank{ type: 'button' }
               = s_('ClusterIntegration|Show')
 

app/views/projects/compare/_form.html.haml

@@ -5,7 +5,8 @@
         = link_to icon('exchange'), { from: params[:to], to: params[:from] }, class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Swap revisions'
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
-        %span.input-group-addon
+        %span.input-group-prepend
+          .input-group-text
             = s_("CompareBranches|Source")
         = hidden_field_tag :to, params[:to]
         = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
@@ -14,7 +15,8 @@
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
       .input-group.inline-input-group
-        %span.input-group-addon
+        %span.input-group-prepend
+          .input-group-text
             = s_("CompareBranches|Target")
         = hidden_field_tag :from, params[:from]
         = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip git-revision-dropdown-toggle", required: true, data: { refs_url: refs_project_path(@project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do

app/views/projects/edit.html.haml

@@ -142,7 +142,8 @@
               %span Path
             .form-group
               .input-group
-                .input-group-addon
+                .input-group-prepend
+                  .input-group-text
                     #{URI.join(root_url, @project.namespace.full_path)}/
                 = f.text_field :path, class: 'form-control'
             %ul

app/views/projects/settings/ci_cd/_form.html.haml

@@ -124,9 +124,11 @@
         .form-group
           = f.label :build_coverage_regex, "Test coverage parsing", class: 'label-light'
           .input-group
-            %span.input-group-addon /
+            %span.input-group-prepend
+              .input-group-text /
             = f.text_field :build_coverage_regex, class: 'form-control', placeholder: 'Regular expression'
-            %span.input-group-addon /
+            %span.input-group-append
+              .input-group-text /
           %p.form-text.text-muted
             A regular expression that will be used to find the test coverage
             output in the job trace. Leave blank to disable

app/views/shared/_group_form.html.haml

@@ -7,7 +7,8 @@
     Group path
   .col-sm-10
     .input-group.gl-field-error-anchor
-      .group-root-path.input-group-addon.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
+      .group-root-path.input-group-prepend.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
+        .input-group-text
           %span>= root_url
           - if parent
             %strong= parent.full_path + '/'

app/views/shared/labels/_form.html.haml

@@ -13,7 +13,8 @@
     = f.label :color, "Background color", class: 'col-form-label'
     .col-sm-10
       .input-group
-        .input-group-addon.label-color-preview  
+        .input-group-prepend
+          .input-group-text.label-color-preview  
         = f.text_field :color, class: "form-control"
       .form-text.text-muted
         Choose any color.