Merge branch 'tree-table-class-migration' into 'master'

Tree table: Migrate classes used to design tokens

See merge request !171722



Merged-by: Janis Altherr <jaltherr@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Serhii Yarynovskyi <syarynovskyi@gitlab.com>
Approved-by: Janis Altherr <jaltherr@gitlab.com>
Co-authored-by: Michael Becker <mbecker@gitlab.com>

app/assets/javascripts/repository/components/table/row.vue

@@ -229,11 +229,11 @@ export default {
           :submodule="isSubmodule"
           :loading="path === loadingPath"
           css-classes="position-relative file-icon"
-          class="mr-1 position-relative text-secondary"
-        /><span class="position-relative">{{ fullPath }}</span>
+          class="gl-relative gl-mr-2 gl-text-subtle"
+        /><span class="gl-relative">{{ fullPath }}</span>
       </component>
       <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
-      <gl-badge v-if="lfsOid" variant="muted" class="ml-1" data-testid="label-lfs">LFS</gl-badge>
+      <gl-badge v-if="lfsOid" variant="muted" class="gl-ml-2" data-testid="label-lfs">LFS</gl-badge>
       <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
@@ -244,7 +244,7 @@ export default {
         :title="commitData.lockLabel"
         name="lock"
         :size="12"
-        class="ml-1"
+        class="gl-ml-2"
       />
     </td>
     <td class="tree-commit cursor-default gl-hidden sm:gl-table-cell">
@@ -259,7 +259,7 @@ export default {
         <gl-skeleton-loader v-if="showSkeletonLoader" :lines="1" />
       </gl-intersection-observer>
     </td>
-    <td class="tree-time-ago text-right cursor-default gl-text-subtle">
+    <td class="tree-time-ago cursor-default gl-text-right gl-text-subtle">
       <gl-intersection-observer @appear="rowAppeared" @disappear="rowDisappeared">
         <timeago-tooltip v-if="commitData" :time="commitData.committedDate" />
       </gl-intersection-observer>

app/assets/stylesheets/framework/files.scss

@@ -3,7 +3,7 @@
  *
  */
 .file-holder {
-  @apply gl-border gl-border-section gl-rounded-base;
+  @apply gl-border gl-rounded-base;
 
   &.file-holder-top-border {
     @apply gl-border gl-border-section;

app/assets/stylesheets/page_bundles/tree.scss

@@ -126,6 +126,11 @@
           &:last-of-type {
             box-shadow: inset -1px 0 0 0 var(--gl-action-selected-border-color-default);
           }
+
+          &:first-of-type:last-of-type {
+            box-shadow: inset 1px 0 0 0 var(--gl-action-selected-border-color-default),
+              inset -1px 0 0 0 var(--gl-action-selected-border-color-default);
+          }
         }
 
         &:last-of-type td {

spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap

@@ -14,20 +14,20 @@ exports[`Repository table row component renders a symlink table row 1`] = `
       title="test"
     >
       <file-icon-stub
-        class="mr-1 position-relative text-secondary"
+        class="gl-mr-2 gl-relative gl-text-subtle"
         cssclasses="position-relative file-icon"
         filemode="120000"
         filename="test"
         size="16"
       />
       <span
-        class="position-relative"
+        class="gl-relative"
       >
         test
       </span>
     </a>
     <gl-icon-stub
-      class="ml-1"
+      class="gl-ml-2"
       name="lock"
       size="12"
       title="Locked by Root"
@@ -43,7 +43,7 @@ exports[`Repository table row component renders a symlink table row 1`] = `
     <gl-intersection-observer-stub />
   </td>
   <td
-    class="cursor-default gl-text-subtle text-right tree-time-ago"
+    class="cursor-default gl-text-right gl-text-subtle tree-time-ago"
   >
     <gl-intersection-observer-stub>
       <timeago-tooltip-stub
@@ -71,20 +71,20 @@ exports[`Repository table row component renders table row 1`] = `
       title="test"
     >
       <file-icon-stub
-        class="mr-1 position-relative text-secondary"
+        class="gl-mr-2 gl-relative gl-text-subtle"
         cssclasses="position-relative file-icon"
         filemode=""
         filename="test"
         size="16"
       />
       <span
-        class="position-relative"
+        class="gl-relative"
       >
         test
       </span>
     </a>
     <gl-icon-stub
-      class="ml-1"
+      class="gl-ml-2"
       name="lock"
       size="12"
       title="Locked by Root"
@@ -100,7 +100,7 @@ exports[`Repository table row component renders table row 1`] = `
     <gl-intersection-observer-stub />
   </td>
   <td
-    class="cursor-default gl-text-subtle text-right tree-time-ago"
+    class="cursor-default gl-text-right gl-text-subtle tree-time-ago"
   >
     <gl-intersection-observer-stub>
       <timeago-tooltip-stub
@@ -128,20 +128,20 @@ exports[`Repository table row component renders table row for path with special
       title="test"
     >
       <file-icon-stub
-        class="mr-1 position-relative text-secondary"
+        class="gl-mr-2 gl-relative gl-text-subtle"
         cssclasses="position-relative file-icon"
         filemode=""
         filename="test"
         size="16"
       />
       <span
-        class="position-relative"
+        class="gl-relative"
       >
         test
       </span>
     </a>
     <gl-icon-stub
-      class="ml-1"
+      class="gl-ml-2"
       name="lock"
       size="12"
       title="Locked by Root"
@@ -157,7 +157,7 @@ exports[`Repository table row component renders table row for path with special
     <gl-intersection-observer-stub />
   </td>
   <td
-    class="cursor-default gl-text-subtle text-right tree-time-ago"
+    class="cursor-default gl-text-right gl-text-subtle tree-time-ago"
   >
     <gl-intersection-observer-stub>
       <timeago-tooltip-stub