fix(code/frontend): wider clickable area for file and structure node (#…

…31176)
elastic · Feb 20, 2019 · 71257ce · 71257ce
1 parent 9d36039
commit 71257ce
Show file tree

Hide file tree

Showing 5 changed files with 456 additions and 299 deletions.
diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx
@@ -69,12 +69,17 @@ const DirectoryNodes = (props: DirectoryNodesProps) => {
     [FileTreeItemType.Submodule]: 'submodule',
   };
   const nodes = props.nodes.map(n => (
-    <DirectoryNode key={n.path}>
-      <Link to={props.getUrl(n.path!)} data-test-subj={`codeFileExplorerNode-${n.name}`}>
+    <Link
+      className="code-link"
+      key={n.path}
+      to={props.getUrl(n.path!)}
+      data-test-subj={`codeFileExplorerNode-${n.name}`}
+    >
+      <DirectoryNode>
         <EuiIcon type={typeIconMap[n.type]} color="black" />
         <NodeName>{n.name}</NodeName>
-      </Link>
-    </DirectoryNode>
+      </DirectoryNode>
+    </Link>
   ));
   return (
     <Container>

diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
@@ -24,3 +24,9 @@
 .code-auto-margin {
   margin: auto;
 }
+
+.code-link {
+  &:focus {
+    box-shadow: none;
+  }
+}