Merge branch '57189-css-label-in-forms-with-bootstrap4' into 'master'

Fix bug candidates of forms on Bootstrap Grid system

Closes #57189

See merge request gitlab-org/gitlab-ce!24885

app/views/abuse_reports/new.html.haml

@@ -11,12 +11,14 @@
 
   = f.hidden_field :user_id
   .form-group.row
-    = f.label :user_id, class: 'col-sm-2 col-form-label'
+    .col-sm-2.col-form-label
+      = f.label :user_id
     .col-sm-10
       - name = "#{@abuse_report.user.name} (@#{@abuse_report.user.username})"
       = text_field_tag :user_name, name, class: "form-control", readonly: true
   .form-group.row
-    = f.label :message, class: 'col-sm-2 col-form-label'
+    .col-sm-2.col-form-label
+      = f.label :message
     .col-sm-10
       = f.text_area :message, class: "form-control", rows: 2, required: true, value: sanitize(@ref_url)
       .form-text.text-muted

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

@@ -2,13 +2,15 @@
   = form_errors(application)
 
   = content_tag :div, class: 'form-group row' do
-    = f.label :name, class: 'col-sm-2 col-form-label'
+    .col-sm-2.col-form-label
+      = f.label :name
     .col-sm-10
       = f.text_field :name, class: 'form-control'
       = doorkeeper_errors_for application, :name
 
   = content_tag :div, class: 'form-group row' do
-    = f.label :redirect_uri, class: 'col-sm-2 col-form-label'
+    .col-sm-2.col-form-label
+      = f.label :redirect_uri
     .col-sm-10
       = f.text_area :redirect_uri, class: 'form-control'
       = doorkeeper_errors_for application, :redirect_uri
@@ -21,14 +23,16 @@
           for local tests
 
   = content_tag :div, class: 'form-group row' do
-    = f.label :trusted, class: 'col-sm-2 col-form-label pt-0'
+    .col-sm-2.col-form-label.pt-0
+      = f.label :trusted
     .col-sm-10
       = f.check_box :trusted
       %span.form-text.text-muted
         Trusted applications are automatically authorized on GitLab OAuth flow.
 
   .form-group.row
-    = f.label :scopes, class: 'col-sm-2 col-form-label pt-0'
+    .col-sm-2.col-form-label.pt-0
+      = f.label :scopes
     .col-sm-10
       = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
 

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

@@ -10,7 +10,8 @@
   = form_errors(@broadcast_message)
 
   .form-group.row
-    = f.label :message, class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :message
     .col-sm-10
       = f.text_area :message, class: "form-control js-autosize",
         required: true,
@@ -20,19 +21,23 @@
     .col-sm-10.offset-sm-2
       = link_to 'Customize colors', '#', class: 'js-toggle-colors-link'
   .form-group.row.js-toggle-colors-container.toggle-colors.hide
-    = f.label :color, "Background Color", class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :color, "Background Color"
     .col-sm-10
       = f.color_field :color, class: "form-control"
   .form-group.row.js-toggle-colors-container.toggle-colors.hide
-    = f.label :font, "Font Color", class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :font, "Font Color"
     .col-sm-10
       = f.color_field :font, class: "form-control"
   .form-group.row
-    = f.label :starts_at, _("Starts at (UTC)"), class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :starts_at, _("Starts at (UTC)")
     .col-sm-10.datetime-controls
       = f.datetime_select :starts_at, {}, class: 'form-control form-control-inline'
   .form-group.row
-    = f.label :ends_at, _("Ends at (UTC)"), class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :ends_at, _("Ends at (UTC)")
     .col-sm-10.datetime-controls
       = f.datetime_select :ends_at, {}, class: 'form-control form-control-inline'
   .form-actions

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

@@ -6,7 +6,8 @@
   = render_if_exists 'admin/namespace_plan', f: f
 
   .form-group.row.group-description-holder
-    = f.label :avatar, _("Group avatar"), class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :avatar, _("Group avatar")
     .col-sm-10
       = render 'shared/choose_avatar_button', f: f
 

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

@@ -2,12 +2,14 @@
   = form_errors(@identity)
 
   .form-group.row
-    = f.label :provider, class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :provider
     .col-sm-10
       - values = Gitlab::Auth::OAuth::Provider.providers.map { |name| ["#{Gitlab::Auth::OAuth::Provider.label_for(name)} (#{name})", name] }
       = f.select :provider, values, { allow_blank: false }, class: 'form-control'
   .form-group.row
-    = f.label :extern_uid, _("Identifier"), class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :extern_uid, _("Identifier")
     .col-sm-10
       = f.text_field :extern_uid, class: 'form-control', required: true
 

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

@@ -2,15 +2,18 @@
   = form_errors(@label)
 
   .form-group.row
-    = f.label :title, class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :title
     .col-sm-10
       = f.text_field :title, class: "form-control", required: true
   .form-group.row
-    = f.label :description, class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :description
     .col-sm-10
       = f.text_field :description, class: "form-control js-quick-submit"
   .form-group.row
-    = f.label :color, _("Background color"), class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :color, _("Background color")
     .col-sm-10
       .input-group
         .input-group-prepend

app/views/admin/projects/show.html.haml

@@ -117,7 +117,8 @@
       .card-body
         = form_for @project, url: transfer_admin_project_path(@project), method: :put do |f|
           .form-group.row
-            = f.label :new_namespace_id, "Namespace", class: 'col-form-label col-sm-3'
+            .col-sm-3.col-form-label
+              = f.label :new_namespace_id, "Namespace"
             .col-sm-9
               .dropdown
                 = dropdown_toggle('Search for Namespace', { toggle: 'dropdown', field_name: 'new_namespace_id' }, { toggle_class: 'js-namespace-select large' })

app/views/admin/users/_access_levels.html.haml

 %fieldset
   %legend Access
   .form-group.row
-    .col-sm-2.text-right
-      = f.label :projects_limit, class: 'col-form-label'
-    .col-sm-10= f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control'
+    .col-sm-2.col-form-label
+      = f.label :projects_limit
+    .col-sm-10
+      = f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control'
 
   .form-group.row
-    .col-sm-2.text-right
-      = f.label :can_create_group, class: 'col-form-label'
-    .col-sm-10= f.check_box :can_create_group
+    .col-sm-2.col-form-label
+      = f.label :can_create_group
+    .col-sm-10
+      = f.check_box :can_create_group
 
   .form-group.row
-    .col-sm-2.text-right
-      = f.label :access_level, class: 'col-form-label'
+    .col-sm-2.col-form-label
+      = f.label :access_level
     .col-sm-10
       - editing_current_user = (current_user == @user)
 
@@ -34,8 +36,8 @@
           You cannot remove your own admin rights.
 
   .form-group.row
-    .col-sm-2.text-right
-      = f.label :external, class: 'col-form-label'
+    .col-sm-2.col-form-label
+      = f.label :external
     .hidden{ data: user_internal_regex_data }
     .col-sm-10
       = f.check_box :external do

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

@@ -5,20 +5,20 @@
     %fieldset
       %legend Account
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :name, class: 'col-form-label'
+        .col-sm-2.col-form-label
+          = f.label :name
         .col-sm-10
           = f.text_field :name, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :username, class: 'col-form-label'
+        .col-sm-2.col-form-label
+          = f.label :username
         .col-sm-10
           = f.text_field :username, required: true, autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', spellcheck: false, class: 'form-control'
           %span.help-inline * required
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :email, class: 'col-form-label'
+        .col-sm-2.col-form-label
+          = f.label :email
         .col-sm-10
           = f.text_field :email, required: true, autocomplete: 'off', class: 'form-control'
           %span.help-inline * required
@@ -27,8 +27,8 @@
       %fieldset
         %legend Password
         .form-group.row
-          .col-sm-2.text-right
-            = f.label :password, class: 'col-form-label'
+          .col-sm-2.col-form-label
+            = f.label :password
           .col-sm-10
             %strong
               Reset link will be generated and sent to the user.
@@ -38,13 +38,15 @@
       %fieldset
         %legend Password
         .form-group.row
-          .col-sm-2.text-right
-            = f.label :password, class: 'col-form-label'
-          .col-sm-10= f.password_field :password, disabled: f.object.force_random_password, class: 'form-control'
+          .col-sm-2.col-form-label
+            = f.label :password
+          .col-sm-10
+            = f.password_field :password, disabled: f.object.force_random_password, class: 'form-control'
         .form-group.row
-          .col-sm-2.text-right
-            = f.label :password_confirmation, class: 'col-form-label'
-          .col-sm-10= f.password_field :password_confirmation, disabled: f.object.force_random_password, class: 'form-control'
+          .col-sm-2.col-form-label
+            = f.label :password_confirmation
+          .col-sm-10
+            = f.password_field :password_confirmation, disabled: f.object.force_random_password, class: 'form-control'
 
     = render partial: 'access_levels', locals: { f: f }
 
@@ -55,27 +57,31 @@
     %fieldset
       %legend Profile
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :avatar, class: 'col-form-label'
+        .col-sm-2.col-form-label
+          = f.label :avatar
         .col-sm-10
           = f.file_field :avatar
 
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :skype, class: 'col-form-label'
-        .col-sm-10= f.text_field :skype, class: 'form-control'
+        .col-sm-2.col-form-label
+          = f.label :skype
+        .col-sm-10
+          = f.text_field :skype, class: 'form-control'
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :linkedin, class: 'col-form-label'
-        .col-sm-10= f.text_field :linkedin, class: 'form-control'
+        .col-sm-2.col-form-label
+          = f.label :linkedin
+        .col-sm-10
+          = f.text_field :linkedin, class: 'form-control'
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :twitter, class: 'col-form-label'
-        .col-sm-10= f.text_field :twitter, class: 'form-control'
+        .col-sm-2.col-form-label
+          = f.label :twitter
+        .col-sm-10
+          = f.text_field :twitter, class: 'form-control'
       .form-group.row
-        .col-sm-2.text-right
-          = f.label :website_url, 'Website', class: 'col-form-label'
-        .col-sm-10= f.text_field :website_url, class: 'form-control'
+        .col-sm-2.col-form-label
+          = f.label :website_url
+        .col-sm-10
+          = f.text_field :website_url, class: 'form-control'
 
     = render_if_exists 'admin/users/admin_notes', f: f
 

app/views/groups/_create_chat_team.html.haml

 .form-group
-  = f.label :create_chat_team, class: 'col-form-label' do
+  .col-sm-2.col-form-label
+    = f.label :create_chat_team do
       %span.mattermost-icon
         = custom_icon('icon_mattermost')
       Mattermost

app/views/groups/_group_admin_settings.html.haml

 .form-group.row
-  = f.label :lfs_enabled, 'Large File Storage', class: 'col-form-label col-sm-2 pt-0'
+  .col-sm-2.col-form-label.pt-0
+    = f.label :lfs_enabled, 'Large File Storage'
   .col-sm-10
     .form-check
       = f.check_box :lfs_enabled, checked: @group.lfs_enabled?, class: 'form-check-input'
@@ -10,12 +11,14 @@
         %br/
         %span.descr This setting can be overridden in each project.
 .form-group.row
-  = f.label s_('ProjectCreationLevel|Allowed to create projects'), class: 'col-form-label col-sm-2'
+  .col-sm-2.col-form-label
+    = f.label s_('ProjectCreationLevel|Allowed to create projects')
   .col-sm-10
     = f.select :project_creation_level, options_for_select(::Gitlab::Access.project_creation_options, @group.project_creation_level), {}, class: 'form-control'
 
 .form-group.row
-  = f.label :require_two_factor_authentication, 'Two-factor authentication', class: 'col-form-label col-sm-2 pt-0'
+  .col-sm-2.col-form-label.pt-0
+    = f.label :require_two_factor_authentication, 'Two-factor authentication'
   .col-sm-10
     .form-check
       = f.check_box :require_two_factor_authentication, class: 'form-check-input'

app/views/profiles/passwords/new.html.haml

@@ -13,13 +13,18 @@
 
   - unless @user.password_automatically_set?
     .form-group.row
-      = f.label :current_password, class: 'col-form-label col-sm-2'
-      .col-sm-10= f.password_field :current_password, required: true, class: 'form-control'
+      .col-sm-2.col-form-label
+        = f.label :current_password
+      .col-sm-10
+        = f.password_field :current_password, required: true, class: 'form-control'
   .form-group.row
-    = f.label :password, class: 'col-form-label col-sm-2'
-    .col-sm-10= f.password_field :password, required: true, class: 'form-control'
+    .col-sm-2.col-form-label
+      = f.label :password
+    .col-sm-10
+      = f.password_field :password, required: true, class: 'form-control'
   .form-group.row
-    = f.label :password_confirmation, class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :password_confirmation
     .col-sm-10
       = f.password_field :password_confirmation, required: true, class: 'form-control'
   .form-actions

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

@@ -5,22 +5,22 @@
         %p= msg
 
 .form-group.row
-  = f.label :domain, class: 'col-form-label col-sm-2' do
-    = _("Domain")
+  .col-sm-2.col-form-label
+    = f.label :domain, _("Domain")
   .col-sm-10
     = f.text_field :domain, required: true, autocomplete: 'off', class: 'form-control', disabled: @domain.persisted?
 
 - if Gitlab.config.pages.external_https
   .form-group.row
-    = f.label :certificate, class: 'col-form-label col-sm-2' do
-      = _("Certificate (PEM)")
+    .col-sm-2.col-form-label
+      = f.label :certificate, _("Certificate (PEM)")
     .col-sm-10
       = f.text_area :certificate, rows: 5, class: 'form-control'
       %span.help-inline= _("Upload a certificate for your domain with all intermediates")
 
   .form-group.row
-    = f.label :key, class: 'col-form-label col-sm-2' do
-      = _("Key (PEM)")
+    .col-sm-2.col-form-label
+      = f.label :key, _("Key (PEM)")
     .col-sm-10
       = f.text_area :key, rows: 5, class: 'form-control'
       %span.help-inline= _("Upload a private key for your certificate")

app/views/projects/protected_branches/shared/_create_protected_branch.html.haml

@@ -6,8 +6,8 @@
     .card-body
       = form_errors(@protected_branch)
       .form-group.row
-        = f.label :name, class: 'col-md-2 text-right' do
-          Branch:
+        .col-md-2.text-right
+          = f.label :name, 'Branch:'
         .col-md-10
           = render partial: "projects/protected_branches/shared/dropdown", locals: { f: f }
           .form-text.text-muted

app/views/projects/protected_tags/shared/_create_protected_tag.html.haml

@@ -6,8 +6,8 @@
     .card-body
       = form_errors(@protected_tag)
       .form-group.row
-        = f.label :name, class: 'col-md-2 text-right' do
-          Tag:
+        .col-md-2.text-right
+          = f.label :name, 'Tag:'
         .col-md-10.protected-tags-dropdown
           = render partial: "projects/protected_tags/shared/dropdown", locals: { f: f }
           .form-text.text-muted

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

@@ -2,17 +2,20 @@
   = form_errors(@label)
 
   .form-group.row
-    = f.label :title, class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :title
     .col-sm-10
       = f.text_field :title, class: "form-control js-label-title qa-label-title", required: true, autofocus: true
     = render_if_exists 'shared/labels/create_label_help_text'
 
   .form-group.row
-    = f.label :description, class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :description
     .col-sm-10
       = f.text_field :description, class: "form-control js-quick-submit qa-label-description"
   .form-group.row
-    = f.label :color, "Background color", class: 'col-form-label col-sm-2'
+    .col-sm-2.col-form-label
+      = f.label :color, "Background color"
     .col-sm-10
       .input-group
         .input-group-prepend

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

@@ -7,7 +7,8 @@
     = form_errors(@snippet)
 
     .form-group.row
-      = f.label :title, class: 'col-form-label col-sm-2'
+      .col-sm-2.col-form-label
+        = f.label :title
       .col-sm-10
         = f.text_field :title, class: 'form-control qa-snippet-title', required: true, autofocus: true
 
@@ -17,7 +18,8 @@
 
     .file-editor
       .form-group.row
-        = f.label :file_name, "File", class: 'col-form-label col-sm-2'
+        .col-sm-2.col-form-label
+          = f.label :file_name, "File"
         .col-sm-10
           .file-holder.snippet
             .js-file-title.file-title

changelogs/unreleased/57189-css-label-in-forms-with-bootstrap4.yml

+---
+title: Fix col-sm-* in forms to keep layout
+merge_request: 24885
+author: Takuya Noguchi
+type: fixed