Backport PR #15860: Show outline on the full item in file browser, on…

…ly when needed (#15984) Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
jupyterlab · Mar 13, 2024 · 32eb7f9 · 32eb7f9
1 parent 67ae98c
commit 32eb7f9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/...internationalization.test.ts-snapshots/language-chinese-documentation-linux.png b/...internationalization.test.ts-snapshots/language-chinese-documentation-linux.png
diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css
@@ -276,17 +276,23 @@
   user-select: none;
 }
 
-.jp-DirListing-itemText:focus {
+.jp-DirListing-item:has(.jp-DirListing-itemText:focus-visible) {
+  /* Targeting `.jp-DirListing-itemText` specifically to avoid an extra outline
+  when it gets replaced with `jp-DirListing-editor` when editing the file name */
   outline-width: 2px;
   outline-color: var(--jp-inverse-layout-color1);
   outline-style: solid;
-  outline-offset: 1px;
+  outline-offset: -4px;
 }
 
-.jp-DirListing-item.jp-mod-selected .jp-DirListing-itemText:focus {
+.jp-DirListing-item.jp-mod-selected:focus-within {
   outline-color: var(--jp-layout-color1);
 }
 
+.jp-DirListing-item > .jp-DirListing-itemText:focus {
+  outline: 0;
+}
+
 .jp-DirListing-itemModified {
   flex: 0 0 125px;
   text-align: right;