Merge branch 'slashmanov/align-diff-expansion-buttons' into 'master'

Align Diff expansion footer buttons

See merge request gitlab-org/gitlab!79697

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

@@ -223,25 +223,31 @@ export default {
 
 <template>
   <div class="content js-line-expansion-content">
-    <a
-      v-if="canExpandDown"
-      class="gl-mx-2 gl-cursor-pointer js-unfold-down gl-display-inline-block gl-py-4"
+    <button
+      type="button"
+      :disabled="!canExpandDown"
+      class="js-unfold-down gl-mx-2 gl-py-4 gl-cursor-pointer"
       @click="handleExpandLines(EXPAND_DOWN)"
     >
       <gl-icon :size="12" name="expand-down" />
       <span>{{ $options.i18n.showMore }}</span>
-    </a>
-    <a class="gl-mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
+    </button>
+    <button
+      type="button"
+      class="js-unfold-all gl-mx-2 gl-py-4 gl-cursor-pointer"
+      @click="handleExpandLines()"
+    >
       <gl-icon :size="12" name="expand" />
       <span>{{ $options.i18n.showAll }}</span>
-    </a>
-    <a
-      v-if="canExpandUp"
-      class="gl-mx-2 gl-cursor-pointer js-unfold gl-display-inline-block gl-py-4"
+    </button>
+    <button
+      type="button"
+      :disabled="!canExpandUp"
+      class="js-unfold gl-mx-2 gl-py-4 gl-cursor-pointer"
       @click="handleExpandLines(EXPAND_UP)"
     >
       <gl-icon :size="12" name="expand-up" />
       <span>{{ $options.i18n.showMore }}</span>
-    </a>
+    </button>
   </div>
 </template>

app/assets/stylesheets/framework/diffs.scss

@@ -582,6 +582,25 @@ table.code {
   }
 }
 
+.diff-expansion-cell {
+  flex: 1 1;
+  min-width: max-content;
+}
+
+.diff-expansion-cell-middle {
+  flex: 0 1 max-content;
+}
+
+@media only screen and (min-width: $breakpoint-xl) {
+  .diff-expansion-cell-start {
+    text-align: right;
+  }
+
+  .diff-expansion-cell-end {
+    text-align: left;
+  }
+}
+
 // Merge request diff grid layout
 .diff-grid {
   .diff-td {

app/assets/stylesheets/highlight/common.scss

@@ -28,8 +28,24 @@
     border-bottom: 1px solid $border;
   }
 
-  a {
+  button {
     color: $link;
+    border: 0;
+    background: transparent;
+
+    &[disabled] {
+      color: desaturate($link, 100%);
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    &:hover:not([disabled]) {
+      text-decoration: underline;
+    }
+
+    &:not(:focus-visible) {
+      outline: 0;
+    }
   }
 }
 

spec/features/merge_request/user_comments_on_diff_spec.rb

@@ -158,7 +158,7 @@ RSpec.describe 'User comments on a diff', :js do
       it 'allows comments on previously hidden lines at the bottom of a file' do
         # Click +28, expand down, select 37 add and verify comment
         page.within('[data-path="files/ruby/popen.rb"]') do
-          all('.js-unfold-down')[1].click
+          all('.js-unfold-down:not([disabled])')[1].click
         end
         click_diff_line(find('div[data-path="files/ruby/popen.rb"] .left-side a[data-linenumber="30"]').find(:xpath, '../..'), 'left')
         add_comment('+28', '37')

spec/frontend/diffs/components/diff_expansion_cell_spec.js

@@ -91,7 +91,9 @@ describe('DiffExpansionCell', () => {
       });
 
       expect(findExpandUp(wrapper).exists()).toBe(true);
-      expect(findExpandDown(wrapper).exists()).toBe(false);
+      expect(findExpandDown(wrapper).exists()).toBe(true);
+      expect(findExpandUp(wrapper).attributes('disabled')).not.toBeDefined();
+      expect(findExpandDown(wrapper).attributes('disabled')).toBeDefined();
       expect(findExpandAll(wrapper)).not.toBe(null);
     });
   });
@@ -112,8 +114,10 @@ describe('DiffExpansionCell', () => {
         isBottom: true,
       });
 
-      expect(findExpandUp(wrapper).exists()).toBe(false);
       expect(findExpandDown(wrapper).exists()).toBe(true);
+      expect(findExpandUp(wrapper).exists()).toBe(true);
+      expect(findExpandDown(wrapper).attributes('disabled')).not.toBeDefined();
+      expect(findExpandUp(wrapper).attributes('disabled')).toBeDefined();
       expect(findExpandAll(wrapper)).not.toBe(null);
     });
   });