Fix checkbox/radio button structure

9 files changed, 77 insertions, 87 deletions

diff --git a/app/views/shared/_allow_request_access.html.haml b/app/views/shared/_allow_request_access.html.haml
index 0e698570d7d..92268e74b1e 100644
--- a/app/views/shared/_allow_request_access.html.haml
+++ b/app/views/shared/_allow_request_access.html.haml
@@ -1,6 +1,6 @@
 .form-check
-  = form.label :request_access_enabled do
-    = form.check_box :request_access_enabled
+  = form.check_box :request_access_enabled, class: 'form-check-input'
+  = form.label :request_access_enabled, class: 'form-check-label' do
     %strong Allow users to request access
     %br
     %span.descr Allow users to request access if visibility is public or internal.
diff --git a/app/views/shared/_new_merge_request_checkbox.html.haml b/app/views/shared/_new_merge_request_checkbox.html.haml
index 8dbdf63f9f4..165109b6b70 100644
--- a/app/views/shared/_new_merge_request_checkbox.html.haml
+++ b/app/views/shared/_new_merge_request_checkbox.html.haml
@@ -1,7 +1,7 @@
 .form-check
   - nonce = SecureRandom.hex
-  = label_tag "create_merge_request-#{nonce}" do
-    = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: "create_merge_request-#{nonce}"
+  = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request form-check-input', id: "create_merge_request-#{nonce}"
+  = label_tag "create_merge_request-#{nonce}", class: 'form-check-label' do
     - translation_variables = { new_merge_request: "<strong>#{_('new merge request')}</strong>" }
     - translation = _('Start a %{new_merge_request} with these changes') % translation_variables
     #{ translation.html_safe }
diff --git a/app/views/shared/_visibility_radios.html.haml b/app/views/shared/_visibility_radios.html.haml
index bdf550cd8b6..dd6b9cce58e 100644
--- a/app/views/shared/_visibility_radios.html.haml
+++ b/app/views/shared/_visibility_radios.html.haml
@@ -2,9 +2,9 @@
   - disallowed = disallowed_visibility_level?(form_model, level)
   - restricted = restricted_visibility_levels.include?(level)
   - disabled = disallowed || restricted
-  .form-check.pl-0{ class: [('disabled' if disabled), ('restricted' if restricted)] }
-    = form.label "#{model_method}_#{level}" do
-      = form.radio_button model_method, level, checked: (selected_level == level), disabled: disabled
+  .form-check{ class: [('disabled' if disabled), ('restricted' if restricted)] }
+    = form.radio_button model_method, level, checked: (selected_level == level), disabled: disabled, class: 'form-check-input'
+    = form.label "#{model_method}_#{level}", class: 'form-check-label' do
       = visibility_level_icon(level)
       .option-title
         = visibility_level_label(level)
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index fbc608b207a..8497e3220ee 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -23,8 +23,8 @@
   .form-group.row
     .offset-sm-2.col-sm-10
       .form-check
-        = form.label :confidential do
-          = form.check_box :confidential
+        = form.check_box :confidential, class: 'form-check-input'
+        = form.label :confidential, class: 'form-check-label' do
           This issue is confidential and should only be visible to team members with at least Reporter access.
 
 = render 'shared/issuable/form/metadata', issuable: issuable, form: form
diff --git a/app/views/shared/issuable/form/_contribution.html.haml b/app/views/shared/issuable/form/_contribution.html.haml
index f12c23cbc64..b34549240e0 100644
--- a/app/views/shared/issuable/form/_contribution.html.haml
+++ b/app/views/shared/issuable/form/_contribution.html.haml
@@ -12,8 +12,8 @@
     = _('Contribution')
   .col-sm-10
     .form-check
-      = form.label :allow_maintainer_to_push do
-        = form.check_box :allow_maintainer_to_push, disabled: !issuable.can_allow_maintainer_to_push?(current_user)
+      = form.check_box :allow_maintainer_to_push, disabled: !issuable.can_allow_maintainer_to_push?(current_user), class: 'form-check-input'
+      = form.label :allow_maintainer_to_push, class: 'form-check-label' do
         = _('Allow edits from maintainers.')
         = link_to 'About this feature', help_page_path('user/project/merge_requests/maintainer_access')
         .form-text.text-muted
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
index 90fbf19e843..44564f8a3e0 100644
--- a/app/views/shared/issuable/form/_merge_params.html.haml
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -11,16 +11,16 @@
   .col-sm-10.offset-sm-2
     - if issuable.can_remove_source_branch?(current_user)
       .form-check
-        = label_tag 'merge_request[force_remove_source_branch]' do
-          = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
-          = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?
+        = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
+        = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?, class: 'form-check-input'
+        = label_tag 'merge_request[force_remove_source_branch]', class: 'form-check-label' do
           Remove source branch when merge request is accepted.
 
 .form-group
   .col-sm-10.col-sm-offset-2
-    .checkbox
-      = label_tag 'merge_request[squash]' do
-        = hidden_field_tag 'merge_request[squash]', '0', id: nil
-        = check_box_tag 'merge_request[squash]', '1', issuable.squash
+    .form-check
+      = hidden_field_tag 'merge_request[squash]', '0', id: nil
+      = check_box_tag 'merge_request[squash]', '1', issuable.squash, class: 'form-check-input'
+      = label_tag 'merge_request[squash]', class: 'form-check-label' do
         Squash commits when merge request is accepted.
         = link_to 'About this feature', help_page_path('user/project/merge_requests/squash_and_merge')
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index d830225d169..51d912b4a66 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -23,8 +23,8 @@
                   - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
                   .form-group
                     .form-check{ class: ("prepend-top-0" if index == 0) }
-                      %label{ for: field_id }
-                        = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event", checked: notification_setting.public_send(event))
+                      = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event form-check-input", checked: notification_setting.public_send(event))
+                      %label.form-check-label{ for: field_id }
                         %strong
                           = notification_event_name(event)
                           = icon("spinner spin", class: "custom-notification-event-loading")
diff --git a/app/views/shared/runners/_form.html.haml b/app/views/shared/runners/_form.html.haml
index 660123d8b07..0337680d79b 100644
--- a/app/views/shared/runners/_form.html.haml
+++ b/app/views/shared/runners/_form.html.haml
@@ -4,26 +4,26 @@
     = label :active, "Active", class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
-        = f.check_box :active
+        = f.check_box :active, { class: 'form-check-input' }
         %span.light Paused Runners don't accept new jobs
   .form-group.row
     = label :protected, "Protected", class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
-        = f.check_box :access_level, {}, 'ref_protected', 'not_protected'
+        = f.check_box :access_level, { class: 'form-check-input' }, 'ref_protected', 'not_protected'
         %span.light This runner will only run on pipelines triggered on protected branches
   .form-group.row
     = label :run_untagged, 'Run untagged jobs', class: 'col-form-label col-sm-2'
     .col-sm-10
       .form-check
-        = f.check_box :run_untagged
+        = f.check_box :run_untagged, { class: 'form-check-input' }
         %span.light Indicates whether this runner can pick jobs without tags
   - unless runner.group_type?
     .form-group.row
       = label :locked, _('Lock to current projects'), class: 'col-form-label col-sm-2'
       .col-sm-10
         .form-check
-          = f.check_box :locked
+          = f.check_box :locked, { class: 'form-check-input' }
           %span.light= _('When a runner is locked, it cannot be assigned to other projects')
   .form-group.row
     = label_tag :token, class: 'col-form-label col-sm-2' do
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index 0d1c007dd78..660769fa50d 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -10,80 +10,70 @@
     Use this token to validate received payloads. It will be sent with the request in the X-Gitlab-Token HTTP header.
 .form-group
   = form.label :url, 'Trigger', class: 'label-light'
-  %ul.list-unstyled
+  %ul.list-unstyled.prepend-left-20
     %li
-      = form.check_box :push_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :push_events, class: 'list-label' do
-          %strong Push events
-        %p.light
-          This URL will be triggered by a push to the repository
+      = form.check_box :push_events, class: 'form-check-input'
+      = form.label :push_events, class: 'list-label form-check-label ml-1' do
+        %strong Push events
+      %p.light.ml-1
+        This URL will be triggered by a push to the repository
     %li
-      = form.check_box :tag_push_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :tag_push_events, class: 'list-label' do
-          %strong Tag push events
-        %p.light
-          This URL will be triggered when a new tag is pushed to the repository
+      = form.check_box :tag_push_events, class: 'form-check-input'
+      = form.label :tag_push_events, class: 'list-label form-check-label ml-1' do
+        %strong Tag push events
+      %p.light.ml-1
+        This URL will be triggered when a new tag is pushed to the repository
     %li
-      = form.check_box :note_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :note_events, class: 'list-label' do
-          %strong Comments
-        %p.light
-          This URL will be triggered when someone adds a comment
+      = form.check_box :note_events, class: 'form-check-input'
+      = form.label :note_events, class: 'list-label form-check-label ml-1' do
+        %strong Comments
+      %p.light.ml-1
+        This URL will be triggered when someone adds a comment
     %li
-      = form.check_box :confidential_note_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :confidential_note_events, class: 'list-label' do
-          %strong Confidential Comments
-        %p.light
-          This URL will be triggered when someone adds a comment on a confidential issue
+      = form.check_box :confidential_note_events, class: 'form-check-input'
+      = form.label :confidential_note_events, class: 'list-label form-check-label ml-1' do
+        %strong Confidential Comments
+      %p.light.ml-1
+        This URL will be triggered when someone adds a comment on a confidential issue
     %li
-      = form.check_box :issues_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :issues_events, class: 'list-label' do
-          %strong Issues events
-        %p.light
-          This URL will be triggered when an issue is created/updated/merged
+      = form.check_box :issues_events, class: 'form-check-input'
+      = form.label :issues_events, class: 'list-label form-check-label ml-1' do
+        %strong Issues events
+      %p.light.ml-1
+        This URL will be triggered when an issue is created/updated/merged
     %li
-      = form.check_box :confidential_issues_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :confidential_issues_events, class: 'list-label' do
-          %strong Confidential Issues events
-        %p.light
-          This URL will be triggered when a confidential issue is created/updated/merged
+      = form.check_box :confidential_issues_events, class: 'form-check-input'
+      = form.label :confidential_issues_events, class: 'list-label form-check-label ml-1' do
+        %strong Confidential Issues events
+      %p.light.ml-1
+        This URL will be triggered when a confidential issue is created/updated/merged
     %li
-      = form.check_box :merge_requests_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :merge_requests_events, class: 'list-label' do
-          %strong Merge request events
-        %p.light
-          This URL will be triggered when a merge request is created/updated/merged
+      = form.check_box :merge_requests_events, class: 'form-check-input'
+      = form.label :merge_requests_events, class: 'list-label form-check-label ml-1' do
+        %strong Merge request events
+      %p.light.ml-1
+        This URL will be triggered when a merge request is created/updated/merged
     %li
-      = form.check_box :job_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :job_events, class: 'list-label' do
-          %strong Job events
-        %p.light
-          This URL will be triggered when the job status changes
+      = form.check_box :job_events, class: 'form-check-input'
+      = form.label :job_events, class: 'list-label form-check-label ml-1' do
+        %strong Job events
+      %p.light.ml-1
+        This URL will be triggered when the job status changes
     %li
-      = form.check_box :pipeline_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :pipeline_events, class: 'list-label' do
-          %strong Pipeline events
-        %p.light
-          This URL will be triggered when the pipeline status changes
+      = form.check_box :pipeline_events, class: 'form-check-input'
+      = form.label :pipeline_events, class: 'list-label form-check-label ml-1' do
+        %strong Pipeline events
+      %p.light.ml-1
+        This URL will be triggered when the pipeline status changes
     %li
-      = form.check_box :wiki_page_events, class: 'float-left'
-      .prepend-left-20
-        = form.label :wiki_page_events, class: 'list-label' do
-          %strong Wiki Page events
-        %p.light
-          This URL will be triggered when a wiki page is created/updated
+      = form.check_box :wiki_page_events, class: 'form-check-input'
+      = form.label :wiki_page_events, class: 'list-label form-check-label ml-1' do
+        %strong Wiki Page events
+      %p.light.ml-1
+        This URL will be triggered when a wiki page is created/updated
 .form-group
   = form.label :enable_ssl_verification, 'SSL verification', class: 'label-light checkbox'
   .form-check
-    = form.label :enable_ssl_verification do
-      = form.check_box :enable_ssl_verification
+    = form.check_box :enable_ssl_verification, class: 'form-check-input'
+    = form.label :enable_ssl_verification, class: 'form-check-label ml-1' do
       %strong Enable SSL verification