[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,13 +13,15 @@
       .form-group
         .input-group
           - if current_user.can_select_namespace?
-            .input-group-addon.has-tooltip{ title: root_url }
-              = 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) + '/' }
-              #{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
       = label_tag :path, 'Project name', class: 'label-light'

app/views/projects/_new_project_fields.html.haml

@@ -9,13 +9,15 @@
         Project path
     .input-group
       - if current_user.can_select_namespace?
-        .input-group-addon.has-tooltip{ title: root_url }
-          = 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) + '/' }
-          #{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
     = f.label :path, class: 'label-light' do

app/views/projects/_project_templates.html.haml

@@ -14,11 +14,12 @@
       %label.label-light
         Template
       .input-group.template-input-group
-        .input-group-addon
-          .selected-icon
-            - Gitlab::ProjectTemplate.all.each do |template|
-              = custom_icon(template.logo)
-          .selected-template
+        .input-group-prepend
+          .input-group-text
+            .selected-icon
+              - Gitlab::ProjectTemplate.all.each do |template|
+                = custom_icon(template.logo)
+            .selected-template
         %button.btn.btn-secondary.change-template{ type: "button" } Change template
     = render 'new_project_fields', f: f, project_name_id: "template-project-name"

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

@@ -21,8 +21,9 @@
       = 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
-          = clipboard_button(text: @cluster.platform_kubernetes.ca_cert, title: s_('ClusterIntegration|Copy CA Certificate'), class: 'btn-blank')
+        %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
       = platform_kubernetes_field.label :token, s_('ClusterIntegration|Token')

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

@@ -17,9 +17,10 @@
       = 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
-          %button.js-show-cluster-token.btn-blank{ type: 'button' }
-            = s_('ClusterIntegration|Show')
+        %span.input-group-append.clipboard-addon
+          .input-group-text
+            %button.js-show-cluster-token.btn-blank{ type: 'button' }
+              = s_('ClusterIntegration|Show')
     .form-group
       = platform_kubernetes_field.label :namespace, s_('ClusterIntegration|Project namespace (optional, unique)')

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

@@ -5,8 +5,9 @@
         = 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
-          = s_("CompareBranches|Source")
+        %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
           .dropdown-toggle-text.str-truncated= params[:to] || _("Select branch/tag")
@@ -14,8 +15,9 @@
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
       .input-group.inline-input-group
-        %span.input-group-addon
-          = s_("CompareBranches|Target")
+        %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
           .dropdown-toggle-text.str-truncated= params[:from] || _("Select branch/tag")

app/views/projects/edit.html.haml

@@ -142,8 +142,9 @@
               %span Path
             .form-group
               .input-group
-                .input-group-addon
-                  #{URI.join(root_url, @project.namespace.full_path)}/
+                .input-group-prepend
+                  .input-group-text
+                    #{URI.join(root_url, @project.namespace.full_path)}/
                 = f.text_field :path, class: 'form-control'
             %ul
               %li Be careful. Renaming a project's repository can have unintended side effects.

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,10 +7,11 @@
     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' }
-        %span>= root_url
-        - if parent
-          %strong= parent.full_path + '/'
+      .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 + '/'
       = f.hidden_field :parent_id
       = f.text_field :path, placeholder: 'open-source', class: 'form-control',
         autofocus: local_assigns[:autofocus] || false, required: true,

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.