Merge branch '47113-modal-header-styling-is-broken' into 'master'

Resolve "Modal header styling is broken"

Closes #47113

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

app/assets/stylesheets/framework/modal.scss

 .modal-header {
   background-color: $modal-body-bg;
-  padding: #{3 * $grid-size} #{2 * $grid-size};
 
   .page-title,
   .modal-title {

app/views/help/_shortcuts.html.haml

@@ -2,11 +2,12 @@
   .modal-dialog.modal-lg
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h4
+        %h4.modal-title
           Keyboard Shortcuts
           %small
             = link_to '(Show all)', '#', class: 'js-more-help-button'
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         .row
           .col-lg-4

app/views/profiles/show.html.haml

@@ -77,11 +77,10 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ type: 'button', 'data-dismiss': 'modal' }
-          %span
-            ×
         %h4.modal-title
           Position and size your new avatar
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         .profile-crop-image-container
           %img.modal-profile-crop-image{ alt: 'Avatar cropper' }

app/views/projects/_bitbucket_import_modal.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h3 Import projects from Bitbucket
+        %h3.modal-title Import projects from Bitbucket
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         To enable importing projects from Bitbucket,
         - if current_user.admin?

app/views/projects/_gitlab_import_modal.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
-        %h3 Import projects from GitLab.com
+        %h3.modal-title Import projects from GitLab.com
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         To enable importing projects from GitLab.com,
         - if current_user.admin?

app/views/projects/_issuable_by_email.html.haml

@@ -8,10 +8,10 @@
   .modal-dialog{ role: "document" }
     .modal-content
       .modal-header
-        %button.close{ type: "button", data: { dismiss: "modal" }, aria: { label: "close" } }
-          %span{ aria: { hidden: "true" } }= icon("times")
         %h4.modal-title
           Create new #{name} by email
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         %p
           You can create a new #{name} inside this project by sending an email to the following email address:

app/views/projects/blob/_new_dir.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog.modal-lg
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= _('Create New Directory')
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         = form_tag project_create_dir_path(@project, @id), method: :post, remote: false, class: 'js-create-dir-form js-quick-submit js-requires-input' do
           .form-group.row

app/views/projects/blob/_remove.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title Delete #{@blob.name}
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
 
       .modal-body
         = form_tag project_blob_path(@project, @id), method: :delete, class: 'js-delete-blob-form js-quick-submit js-requires-input' do

app/views/projects/blob/_upload.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog.modal-lg
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= title
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form', data: { method: method } do
           .dropzone

app/views/projects/branches/_delete_protected_modal.html.haml

@@ -2,11 +2,12 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ data: { dismiss: 'modal' } } ×
         %h3.page-title
           - title_branch_name = capture do
             %span.js-branch-name.ref-name>[branch name]
           = s_("Branches|Delete protected branch '%{branch_name}'?").html_safe % { branch_name: title_branch_name }
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
 
       .modal-body
         %p

app/views/projects/commit/_change.html.haml

@@ -15,8 +15,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= title
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         - if description
           %p.append-bottom-20= description

app/views/projects/deploy_tokens/_revoke_modal.html.haml

@@ -2,11 +2,11 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %h4.modal-title.float-left
+        %h4.modal-title
           = s_('DeployTokens|Revoke')
           %b #{token.name}?
-        %button.close{ 'aria-label' => _('Close'), 'data-dismiss' => 'modal', type: 'button' }
-          %span{ 'aria-hidden' => 'true' } ×
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         %p
           = s_('DeployTokens|You are about to revoke')

app/views/projects/merge_requests/_how_to_merge.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %h3 Check out, review, and merge locally
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %h3.modal-title Check out, review, and merge locally
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         %p
           %strong Step 1.

app/views/projects/wikis/_new.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title= s_("WikiNewPageTitle|New Wiki Page")
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
       .modal-body
         %form.new-wiki-page
           .form-group

app/views/shared/_confirm_modal.html.haml

@@ -4,7 +4,8 @@
       .modal-header
         %h3.page-title
           Confirmation required
-        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
 
       .modal-body
         %p.text-danger.js-confirm-text

app/views/shared/_delete_label_modal.html.haml

@@ -2,8 +2,9 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ data: {dismiss: 'modal' } } ×
         %h3.page-title Delete #{render_colored_label(label, tooltip: false)} ?
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
 
       .modal-body
         %p

app/views/shared/notifications/_custom_notifications.html.haml

@@ -2,10 +2,10 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{ type: "button",  "aria-label": "close", data: { dismiss: "modal" } }
-          %span{ "aria-hidden": "true" } ×
         %h4#custom-notifications-title.modal-title
           #{ _('Custom notification events') }
+        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
+          %span{ "aria-hidden": true } ×
 
       .modal-body
         .container-fluid

changelogs/unreleased/47113-modal-header-styling-is-broken.yml

+---
+title: Fixes the styling on the modal headers
+merge_request: 19312
+author: samdbeckham
+type: fixed