Fix caret icon in diagnostics panel (port to JupyterLab 2.0) #258

Author: krassowski

packages/jupyterlab-lsp/src/adapters/codemirror/features/diagnostics_listing.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { VDomModel, VDomRenderer } from '@jupyterlab/apputils';
+import { caretDownIcon, caretUpIcon } from '@jupyterlab/ui-components';
 import * as lsProtocol from 'vscode-languageserver-protocol';
 import * as CodeMirror from 'codemirror';
 import { IEditorPosition } from '../../../positioning';
@@ -161,19 +162,18 @@ class Column {
 
 function SortableTH(props: { name: string; listing: DiagnosticsListing }): any {
   const is_sort_key = props.name === props.listing.sort_key;
+  const sortIcon =
+    props.listing.sort_direction === 1 ? caretUpIcon : caretDownIcon;
   return (
     <th
       key={props.name}
       onClick={() => props.listing.sort(props.name)}
-      className={
-        is_sort_key
-          ? 'lsp-sorted ' +
-            (props.listing.sort_direction === 1 ? 'lsp-descending' : '')
-          : ''
-      }
+      className={is_sort_key ? 'lsp-sorted-header' : null}
     >
       {props.name}
-      {is_sort_key ? <span className={'lsp-caret'} /> : null}
+      {is_sort_key ? (
+        <sortIcon.react tag="span" className="lsp-sort-icon" />
+      ) : null}
     </th>
   );
 }

packages/jupyterlab-lsp/style/diagnostics_listing.css

@@ -57,24 +57,25 @@
   background: var(--jp-layout-color2);
 }
 
-.lsp-sort-caret {
-  height: 16px;
-  width: 16px;
-  background-size: 18px;
-  background-image: 18px;
-  background-repeat: no-repeat;
-  background-position: center;
-  display: inline-block;
-  position: relative;
-  top: 3px;
+.lsp-sorted-header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
 }
 
-.lsp-sorted .lsp-caret {
-  background-image: var(--jp-icon-caretup);
-  margin-top: -4px;
+.lsp-sort-icon {
+  top: -3px;
   left: 3px;
+  position: relative;
+  height: 16px;
+  width: 16px;
+  display: block;
+  margin-left: auto;
 }
 
-.lsp-sorted.lsp-descending .lsp-caret {
-  background-image: var(--jp-icon-caretdown);
+.lsp-sort-icon svg {
+  width: 20px;
+  display: inline;
+  height: auto;
 }