Change diff unfold buttons ordering and make it more clear

It changes the order of show more buttons and add text as it
seems to be more clear according to the recent UX research. We'll
improve the UI in our next iteration, but this is a quick improvements.

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

@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import { GlIcon } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import { s__ } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
 import * as utils from '../store/utils';
@@ -18,11 +18,16 @@ const lineNumberByViewType = (viewType, diffLine) => {
     [PARALLEL_DIFF_VIEW_TYPE]: line => (line?.right || line?.left)?.new_line,
   };
   const numberGetter = numberGetters[viewType];
-
   return numberGetter && numberGetter(diffLine);
 };
 
+const i18n = {
+  showMore: sprintf(s__('Diffs|Show %{unfoldCount} lines'), { unfoldCount: UNFOLD_COUNT }),
+  showAll: s__('Diffs|Show all unchanged lines'),
+};
+
 export default {
+  i18n,
   directives: {
     tooltip,
   },
@@ -232,32 +237,27 @@ export default {
 </script>
 
 <template>
-  <td :colspan="colspan" class="text-center">
+  <td :colspan="colspan" class="text-center gl-font-regular">
     <div class="content js-line-expansion-content">
       <a
-        v-if="canExpandUp"
-        v-tooltip
-        class="cursor-pointer js-unfold unfold-icon d-inline-block pt-2 pb-2"
-        data-placement="top"
-        data-container="body"
-        :title="__('Expand up')"
-        @click="handleExpandLines(EXPAND_UP)"
+        v-if="canExpandDown"
+        class="gl-mx-2 gl-cursor-pointer js-unfold-down gl-display-inline-block gl-py-4"
+        @click="handleExpandLines(EXPAND_DOWN)"
       >
-        <gl-icon :size="12" name="expand-up" aria-hidden="true" />
+        <gl-icon :size="12" name="expand-down" aria-hidden="true" />
+        <span>{{ $options.i18n.showMore }}</span>
       </a>
-      <a class="mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
-        <span>{{ s__('Diffs|Show unchanged lines') }}</span>
+      <a class="gl-mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()">
+        <gl-icon :size="12" name="expand" aria-hidden="true" />
+        <span>{{ $options.i18n.showAll }}</span>
       </a>
       <a
-        v-if="canExpandDown"
-        v-tooltip
-        class="cursor-pointer js-unfold-down has-tooltip unfold-icon d-inline-block pt-2 pb-2"
-        data-placement="top"
-        data-container="body"
-        :title="__('Expand down')"
-        @click="handleExpandLines(EXPAND_DOWN)"
+        v-if="canExpandUp"
+        class="gl-mx-2 gl-cursor-pointer js-unfold gl-display-inline-block gl-py-4"
+        @click="handleExpandLines(EXPAND_UP)"
       >
-        <gl-icon :size="12" name="expand-down" aria-hidden="true" />
+        <gl-icon :size="12" name="expand-up" aria-hidden="true" />
+        <span>{{ $options.i18n.showMore }}</span>
       </a>
     </div>
   </td>

changelogs/unreleased/208287-design-change-show-unchanged-lines-ui.yml

+---
+title: Re-order diff unfold buttons so that “show more lines above” appears first
+merge_request: 39060
+author:
+type: changed

locale/gitlab.pot

@@ -8598,7 +8598,10 @@ msgstr ""
 msgid "Diffs|No file name available"
 msgstr ""
 
-msgid "Diffs|Show unchanged lines"
+msgid "Diffs|Show %{unfoldCount} lines"
+msgstr ""
+
+msgid "Diffs|Show all unchanged lines"
 msgstr ""
 
 msgid "Diffs|Something went wrong while fetching diff lines."
@@ -10109,9 +10112,6 @@ msgstr ""
 msgid "Expand approvers"
 msgstr ""
 
-msgid "Expand down"
-msgstr ""
-
 msgid "Expand dropdown"
 msgstr ""
 
@@ -10121,9 +10121,6 @@ msgstr ""
 msgid "Expand sidebar"
 msgstr ""
 
-msgid "Expand up"
-msgstr ""
-
 msgid "Expected documents: %{expected_documents}"
 msgstr ""
 

spec/frontend/diffs/components/diff_expansion_cell_spec.js

@@ -87,7 +87,7 @@ describe('DiffExpansionCell', () => {
 
   const findExpandUp = () => vm.$el.querySelector(EXPAND_UP_CLASS);
   const findExpandDown = () => vm.$el.querySelector(EXPAND_DOWN_CLASS);
-  const findExpandAll = () => getByText(vm.$el, 'Show unchanged lines');
+  const findExpandAll = () => getByText(vm.$el, 'Show all unchanged lines');
 
   describe('top row', () => {
     it('should have "expand up" and "show all" option', () => {