Resolve "Introduce hover, active, focus states for files in sidebar of Web IDE"

4 files changed, 24 insertions, 20 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 5cda7967130..ee21eeda3cd 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -89,14 +89,14 @@ export default {
 
 <template>
   <div class="multi-file-commit-list-item position-relative">
-    <button
+    <div
       v-tooltip
       :title="tooltipTitle"
       :class="{
         'is-active': isActive
       }"
-      type="button"
       class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
+      role="button"
       @dblclick="fileAction"
       @click="openFileInEditor"
     >
@@ -107,7 +107,7 @@ export default {
           :css-classes="iconClass"
         />{{ file.name }}
       </span>
-    </button>
+    </div>
     <component
       :is="actionComponent"
       :path="file.path"
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index b40d02f381a..aaa8bed3df0 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -180,10 +180,6 @@
     color: $border-and-box-shadow;
   }
 
-  .ide-file-list .file.file-active {
-    color: $border-and-box-shadow;
-  }
-
   .ide-sidebar-link {
     &.active {
       color: $border-and-box-shadow;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index bd3320c8ae5..3c24aaa65e8 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -23,6 +23,7 @@
   margin-top: 0;
   border-top: 1px solid $white-dark;
   padding-bottom: $ide-statusbar-height;
+  color: $gl-text-color;
 
   &.is-collapsed {
     .ide-file-list {
@@ -45,12 +46,8 @@
   .file {
     cursor: pointer;
 
-    &.file-open {
-      background: $white-normal;
-    }
-
     &.file-active {
-      font-weight: $gl-font-weight-bold;
+      background: $theme-gray-100;
     }
 
     .ide-file-name {
@@ -58,7 +55,9 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       max-width: inherit;
-      line-height: 22px;
+      line-height: 16px;
+      display: inline-block;
+      height: 18px;
 
       svg {
         vertical-align: middle;
@@ -86,12 +85,14 @@
 
     .ide-new-btn {
       display: none;
+
+      .btn {
+        padding: 2px 5px;
+      }
     }
 
     &:hover,
     &:focus {
-      background: $white-normal;
-
       .ide-new-btn {
         display: block;
       }
@@ -596,11 +597,17 @@
 
   &:hover,
   &:focus {
-    background: $white-normal;
+    background: $theme-gray-100;
+  }
+
+  &:active {
+    background: $theme-gray-200;
   }
 }
 
 .multi-file-commit-list-path {
+  cursor: pointer;
+
   &.is-active {
     background-color: $white-normal;
   }
@@ -620,10 +627,6 @@
 .multi-file-commit-list-file-path {
   @include str-truncated(calc(100% - 30px));
 
-  &:hover {
-    text-decoration: underline;
-  }
-
   &:active {
     text-decoration: none;
   }
diff --git a/changelogs/unreleased/46202-webide-file-states.yml b/changelogs/unreleased/46202-webide-file-states.yml
new file mode 100644
index 00000000000..8d697b643be
--- /dev/null
+++ b/changelogs/unreleased/46202-webide-file-states.yml
@@ -0,0 +1,5 @@
+---
+title: Update Web IDE file tree styles
+merge_request: 19969
+author:
+type: changed