Merge branch 'gt-fix-styling-for-framework-notes' into 'master'

Fix styling for `app/assets/stylesheets/framework/notes.scss`

Closes #59868

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

app/assets/javascripts/diffs/components/inline_diff_comment_row.vue

@@ -41,7 +41,7 @@ export default {
 
 <template>
   <tr v-if="shouldRender" :class="className" class="notes_holder">
-    <td class="notes_content" colspan="3">
+    <td class="notes-content" colspan="3">
       <div class="content">
         <diff-discussions
           v-if="line.discussions.length"

app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue

@@ -87,7 +87,7 @@ export default {
 
 <template>
   <tr v-if="shouldRender" :class="className" class="notes_holder">
-    <td class="notes_content parallel old" colspan="2">
+    <td class="notes-content parallel old" colspan="2">
       <div v-if="shouldRenderDiscussionsOnLeft" class="content">
         <diff-discussions
           v-if="line.left.discussions.length"
@@ -105,7 +105,7 @@ export default {
         line-position="left"
       />
     </td>
-    <td class="notes_content parallel new" colspan="2">
+    <td class="notes-content parallel new" colspan="2">
       <div v-if="shouldRenderDiscussionsOnRight" class="content">
         <diff-discussions
           v-if="line.right.discussions.length"

app/assets/javascripts/merge_request_tabs.js

@@ -398,7 +398,7 @@ export default class MergeRequestTabs {
         const hash = getLocationHash();
         const anchor = hash && $container.find(`.note[id="${hash}"]`);
         if (anchor && anchor.length > 0) {
-          const notesContent = anchor.closest('.notes_content');
+          const notesContent = anchor.closest('.notes-content');
           const lineType = notesContent.hasClass('new') ? 'new' : 'old';
           Notes.instance.toggleDiffNote({
             target: anchor,

app/assets/javascripts/notes.js

@@ -506,7 +506,7 @@ export default class Notes {
           var contentContainerClass =
             '.' +
             $notes
-              .closest('.notes_content')
+              .closest('.notes-content')
               .attr('class')
               .split(' ')
               .join('.');
@@ -1069,14 +1069,14 @@ export default class Notes {
     addForm = false;
     let lineTypeSelector = '';
     rowCssToAdd =
-      '<tr class="notes_holder js-temp-notes-holder"><td class="notes_content" colspan="3"><div class="content"></div></td></tr>';
+      '<tr class="notes_holder js-temp-notes-holder"><td class="notes-content" colspan="3"><div class="content"></div></td></tr>';
     // In parallel view, look inside the correct left/right pane
     if (this.isParallelView()) {
       lineTypeSelector = `.${lineType}`;
       rowCssToAdd =
-        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>';
+        '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes-content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes-content parallel new"><div class="content"></div></td></tr>';
     }
-    const notesContentSelector = `.notes_content${lineTypeSelector} .content`;
+    const notesContentSelector = `.notes-content${lineTypeSelector} .content`;
     let notesContent = targetRow.find(notesContentSelector);
 
     if (hasNotes && showReplyInput) {

app/assets/javascripts/notes/components/diff_with_note.vue

@@ -105,7 +105,7 @@ export default {
           </td>
         </tr>
         <tr class="notes_holder">
-          <td class="notes_content" colspan="3"><slot></slot></td>
+          <td class="notes-content" colspan="3"><slot></slot></td>
         </tr>
       </table>
     </div>

app/assets/stylesheets/framework/notes.scss

@@ -4,7 +4,7 @@
   }
 
   // Diff is side by side
-  .notes_content.parallel & {
+  .notes-content.parallel & {
     // We hide at double what we normally hide at because
     // there are two columns of notes
     @media (#{$condition}-width: (2 * $breakpoint-width)) {

app/assets/stylesheets/pages/notes.scss

@@ -68,7 +68,7 @@ $note-form-margin-left: 72px;
       }
     }
 
-    .notes_content {
+    .notes-content {
       border: 0;
       border-top: 1px solid $border-color;
     }
@@ -453,7 +453,7 @@ $note-form-margin-left: 72px;
 
   // Merge request notes in diffs
   // Diff is inline
-  .notes_content .note-header .note-headline-light {
+  .notes-content .note-header .note-headline-light {
     display: inline-block;
     position: relative;
   }
@@ -465,7 +465,7 @@ $note-form-margin-left: 72px;
       border: 1px solid $border-color;
       border-left: 0;
 
-      &.notes_content {
+      &.notes-content {
         border-width: 1px 0;
         padding: 0;
         vertical-align: top;
@@ -512,7 +512,7 @@ $note-form-margin-left: 72px;
 }
 
 .commit-diff {
-  .notes_content {
+  .notes-content {
     background-color: $white-light;
   }
 }

app/views/discussions/_diff_discussion.html.haml

@@ -4,6 +4,6 @@
   -# Text diff discussions
   - expanded = local_assigns.fetch(:expanded, true)
   %tr.notes_holder{ class: ('hide' unless expanded) }
-    %td.notes_content{ colspan: 3 }
+    %td.notes-content{ colspan: 3 }
       .content{ class: ('hide' unless expanded) }
         = render partial: "discussions/notes", collection: discussions, as: :discussion, locals: { disable_collapse_class: true }

app/views/discussions/_parallel_diff_discussion.html.haml

 - expanded = [*discussions_left, *discussions_right].any?(&:expanded?)
 %tr.notes_holder{ class: ('hide' unless expanded) }
   - if discussions_left
-    %td.notes_content.parallel.old{ colspan: 2 }
+    %td.notes-content.parallel.old{ colspan: 2 }
       .content{ class: ('hide' unless discussions_left.any?(&:expanded?)) }
         = render partial: "discussions/notes", collection: discussions_left, as: :discussion, line_type: 'old', locals: { disable_collapse_class: true }
   - else
-    %td.notes_content.parallel.old{ colspan: 2 }
+    %td.notes-content.parallel.old{ colspan: 2 }
       .content
 
   - if discussions_right
-    %td.notes_content.parallel.new{ colspan: 2 }
+    %td.notes-content.parallel.new{ colspan: 2 }
       .content{ class: ('hide' unless discussions_right.any?(&:expanded?)) }
         = render partial: "discussions/notes", collection: discussions_right, as: :discussion, line_type: 'new', locals: { disable_collapse_class: true }
   - else
-    %td.notes_content.parallel.new{ colspan: 2 }
+    %td.notes-content.parallel.new{ colspan: 2 }
       .content

spec/features/projects/commit/comments/user_adds_comment_spec.rb

@@ -138,7 +138,7 @@ describe "User adds a comment on a commit", :js do
         click_button("Comment")
       end
 
-      page.within(".diff-file:nth-of-type(1) .notes_content.parallel.old") do
+      page.within(".diff-file:nth-of-type(1) .notes-content.parallel.old") do
         expect(page).to have_content(old_comment)
       end
 
@@ -152,7 +152,7 @@ describe "User adds a comment on a commit", :js do
 
       wait_for_requests
 
-      expect(all(".diff-file:nth-of-type(1) .notes_content.parallel.new")[1].text).to have_content(new_comment)
+      expect(all(".diff-file:nth-of-type(1) .notes-content.parallel.new")[1].text).to have_content(new_comment)
     end
   end