fixes jupyterlab#7189, jupyterlab/jupyterlab-git#411

packages/filebrowser/src/listing.ts

@@ -1808,16 +1808,24 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
-        // add icon as svg node. Can be styled using CSS
-        this._iconRegistry.icon({
-          name: fileType.iconClass,
-          className: ITEM_ICON_CLASS,
-          title: fileType.iconLabel,
-          fallback: true,
-          container: icon,
-          center: true,
-          kind: 'listing'
-        });
+        // TODO: remove workaround if...else/code in else clause in v2.0.0
+        // workaround for 1.0.x versions of Jlab pulling in 1.1.x versions of filebrowser
+        if (this._iconRegistry) {
+          // add icon as svg node. Can be styled using CSS
+          this._iconRegistry.icon({
+            name: fileType.iconClass,
+            className: ITEM_ICON_CLASS,
+            title: fileType.iconLabel,
+            fallback: true,
+            container: icon,
+            center: true,
+            kind: 'listing'
+          });
+        } else {
+          // add icon as CSS background image. Can't be styled using CSS
+          icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
+          icon.textContent = fileType.iconLabel || '';
+        }
       } else {
         // use default icon as CSS background image
         icon.className = ITEM_ICON_CLASS;

packages/statusbar/src/deprecated.tsx

@@ -0,0 +1,52 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file is a workaround for 1.0.x versions of Jlab pulling in 1.1.x
+versions of statusbar.
+TODO: delete this file in Jlab 2.0
+*/
+
+import * as React from 'react';
+
+import { classes, style } from 'typestyle/lib';
+
+import { NestedCSSProperties } from 'typestyle/lib/types';
+
+const icon = (): NestedCSSProperties => {
+  return {
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: '18px',
+    minHeight: '24px',
+    width: '20px'
+  };
+};
+
+/**
+ * A namespace for IconItem statics.
+ */
+export namespace IconItem {
+  /**
+   * Props for an IconItem
+   */
+  export interface IProps {
+    /**
+     * A CSS class name for the icon.
+     */
+    source: string;
+  }
+}
+
+/**
+ * A functional tsx component for an icon.
+ */
+export function IconItem(
+  props: IconItem.IProps & React.HTMLAttributes<HTMLDivElement>
+): React.ReactElement<IconItem.IProps> {
+  const { source, className, ...rest } = props;
+  return (
+    <div className={classes(className, source, style(icon()))} {...rest} />
+  );
+}

packages/statusbar/src/index.ts

@@ -3,8 +3,10 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-export * from './statusbar';
-export * from './style/statusbar';
 export * from './components';
 export * from './defaults';
+export * from './style/statusbar';
+
+export * from './deprecated';
+export * from './statusbar';
 export * from './tokens';

packages/statusbar/src/style/variables.ts

@@ -12,9 +12,6 @@ export default {
   textClickColor: 'white',
   itemMargin: '2px',
   itemPadding: '6px',
-  textIconHalfSpacing: '3px',
   statusBarPadding: '10px',
-  iconImageSize: '18px',
-  iconWidth: '20px',
   interItemHalfSpacing: '2px' // this amount accounts for half the spacing between items
 };