fixed all launcher icons; removed all UNSTABLE methods from LabIcon

packages/apputils/src/toolbar.tsx

@@ -448,9 +448,9 @@ export namespace ToolbarButtonComponent {
   export interface IProps {
     className?: string;
     label?: string;
+    icon?: LabIcon.IMaybeResolvable;
     iconClass?: string;
     iconLabel?: string;
-    icon?: LabIcon;
     tooltip?: string;
     onClick?: () => void;
     enabled?: boolean;
@@ -609,6 +609,7 @@ namespace Private {
     options: CommandToolbarButtonComponent.IProps
   ): ToolbarButtonComponent.IProps {
     let { commands, id, args } = options;
+    const icon = commands.icon(id, args);
     const iconClass = commands.iconClass(id, args);
     const iconLabel = commands.iconLabel(id, args);
     const label = commands.label(id, args);
@@ -625,7 +626,7 @@ namespace Private {
       void commands.execute(id, args);
     };
     const enabled = commands.isEnabled(id, args);
-    return { className, iconClass, tooltip, onClick, enabled, label };
+    return { className, icon, iconClass, tooltip, onClick, enabled, label };
   }
 
   /**

packages/console-extension/package.json

@@ -46,6 +46,7 @@
     "@jupyterlab/mainmenu": "^2.0.0-rc.1",
     "@jupyterlab/rendermime": "^2.0.0-rc.1",
     "@jupyterlab/settingregistry": "^2.0.0-rc.1",
+    "@jupyterlab/ui-components": "^2.0.0-rc.1",
     "@lumino/algorithm": "^1.2.3",
     "@lumino/coreutils": "^1.4.2",
     "@lumino/disposable": "^1.3.4",

packages/console-extension/src/index.ts

@@ -41,6 +41,8 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
+import { consoleIcon } from '@jupyterlab/ui-components';
+
 import { find } from '@lumino/algorithm';
 
 import {
@@ -363,7 +365,7 @@ async function activateConsole(
       }
       return 'Console';
     },
-    iconClass: args => (args['isPalette'] ? '' : 'jp-ConsoleIcon'),
+    icon: args => (args['isPalette'] ? undefined : consoleIcon),
     execute: args => {
       let basePath =
         (args['basePath'] as string) ||

packages/console-extension/tsconfig.json

@@ -35,6 +35,9 @@
     },
     {
       "path": "../settingregistry"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/docregistry/src/registry.ts

@@ -1176,9 +1176,7 @@ export namespace DocumentRegistry {
     readonly pattern?: string;
 
     /**
-     * The icon for the file type. Can either be a string containing the name
-     * of an existing icon, or an object with {name, svgstr} fields, where
-     * svgstr is a string containing the raw contents of an svg file.
+     * The icon for the file type.
      */
     readonly icon?: LabIcon;
 

packages/fileeditor-extension/package.json

@@ -48,6 +48,7 @@
     "@jupyterlab/mainmenu": "^2.0.0-rc.1",
     "@jupyterlab/settingregistry": "^2.0.0-rc.1",
     "@jupyterlab/statusbar": "^2.0.0-rc.1",
+    "@jupyterlab/ui-components": "^2.0.0-rc.1",
     "@lumino/commands": "^1.9.2",
     "@lumino/coreutils": "^1.4.2",
     "@lumino/widgets": "^1.10.2"

packages/fileeditor-extension/src/commands.ts

@@ -34,6 +34,8 @@ import {
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
+import { markdownIcon, textEditorIcon } from '@jupyterlab/ui-components';
+
 import { CommandRegistry } from '@lumino/commands';
 
 import { JSONObject, ReadonlyPartialJSONObject } from '@lumino/coreutils';
@@ -69,16 +71,6 @@ export namespace CommandIDs {
   export const markdownPreview = 'fileeditor:markdown-preview';
 }
 
-/**
- * The class name for the text editor icon from the default theme.
- */
-export const EDITOR_ICON_CLASS = 'jp-MaterialIcon jp-TextEditorIcon';
-
-/**
- * The class name for the text editor icon from the default theme.
- */
-export const MARKDOWN_ICON_CLASS = 'jp-MarkdownIcon';
-
 /**
  * The name of the factory that creates editor widgets.
  */
@@ -561,7 +553,7 @@ export namespace Commands {
     commands.addCommand(CommandIDs.createNew, {
       label: args => (args['isPalette'] ? 'New Text File' : 'Text File'),
       caption: 'Create a new text file',
-      iconClass: args => (args['isPalette'] ? '' : EDITOR_ICON_CLASS),
+      icon: args => (args['isPalette'] ? undefined : textEditorIcon),
       execute: args => {
         let cwd = args['cwd'] || browserFactory.defaultBrowser.model.path;
         return createNew(commands, cwd as string);
@@ -580,7 +572,7 @@ export namespace Commands {
       label: args =>
         args['isPalette'] ? 'New Markdown File' : 'Markdown File',
       caption: 'Create a new markdown file',
-      iconClass: args => (args['isPalette'] ? '' : MARKDOWN_ICON_CLASS),
+      icon: args => (args['isPalette'] ? undefined : markdownIcon),
       execute: args => {
         let cwd = args['cwd'] || browserFactory.defaultBrowser.model.path;
         return createNew(commands, cwd as string, 'md');

packages/fileeditor-extension/tsconfig.json

@@ -41,6 +41,9 @@
     },
     {
       "path": "../statusbar"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/inspector-extension/package.json

@@ -41,7 +41,8 @@
     "@jupyterlab/console": "^2.0.0-rc.1",
     "@jupyterlab/inspector": "^2.0.0-rc.1",
     "@jupyterlab/launcher": "^2.0.0-rc.1",
-    "@jupyterlab/notebook": "^2.0.0-rc.1"
+    "@jupyterlab/notebook": "^2.0.0-rc.1",
+    "@jupyterlab/ui-components": "^2.0.0-rc.1"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",

packages/inspector-extension/src/index.ts

@@ -27,6 +27,8 @@ import { ILauncher } from '@jupyterlab/launcher';
 
 import { INotebookTracker } from '@jupyterlab/notebook';
 
+import { inspectorIcon } from '@jupyterlab/ui-components';
+
 /**
  * The command IDs used by the inspector plugin.
  */
@@ -83,8 +85,7 @@ const inspector: JupyterFrontEndPlugin<IInspector> = {
         !inspector.isAttached ||
         !inspector.isVisible,
       label,
-      iconClass: args =>
-        args.isLauncher ? 'jp-MaterialIcon jp-InspectorIcon' : '',
+      icon: args => (args.isLauncher ? inspectorIcon : undefined),
       execute: () => openInspector()
     });
 

packages/inspector-extension/tsconfig.json

@@ -23,6 +23,9 @@
     },
     {
       "path": "../notebook"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/launcher/src/index.tsx

@@ -190,17 +190,16 @@ export class Launcher extends VDomRenderer<LauncherModel> {
     // Now create the sections for each category
     orderedCategories.forEach(cat => {
       const item = categories[cat][0] as ILauncher.IItemOptions;
-      let iconClass = this._commands.iconClass(item.command, {
-        ...item.args,
-        cwd: this.cwd
-      });
-      let kernel = KERNEL_CATEGORIES.indexOf(cat) > -1;
+      const args = { ...item.args, cwd: this.cwd };
+      const kernel = KERNEL_CATEGORIES.indexOf(cat) > -1;
+
       if (cat in categories) {
         section = (
           <div className="jp-Launcher-section" key={cat}>
             <div className="jp-Launcher-sectionHeader">
-              <LabIcon.UNSTABLE_getReact
-                name={iconClass}
+              <LabIcon.resolveReact
+                icon={this._commands.icon(item.command, args)}
+                iconClass={this._commands.iconClass(item.command, args)}
                 justify="center"
                 kind="launcherSection"
               />
@@ -420,8 +419,9 @@ function Card(
             </div>
           )
         ) : (
-          <LabIcon.UNSTABLE_getReact
-            name={commands.iconClass(command, args)}
+          <LabIcon.resolveReact
+            icon={commands.icon(command, args)}
+            iconClass={commands.iconClass(command, args)}
             justify="center"
             kind="launcherCard"
           />

packages/ui-components/src/icon/labicon.tsx

@@ -108,6 +108,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer {
     fallback,
     ...props
   }: Partial<LabIcon.IResolverProps> & LabIcon.IProps) {
+    // make sure that the icon is either resolvable or undefined
+    icon = Private.isResolvable(icon) ? icon : undefined;
+
     if (!icon) {
       if (!iconClass && fallback) {
         // if neither icon nor iconClass are defined, use fallback
@@ -150,6 +153,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer {
     fallback,
     ...props
   }: Partial<LabIcon.IResolverProps> & LabIcon.IReactProps) {
+    // make sure that the icon is either resolvable or undefined
+    icon = Private.isResolvable(icon) ? icon : undefined;
+
     if (!icon) {
       if (!iconClass && fallback) {
         // if neither icon nor iconClass are defined, use fallback
@@ -202,44 +208,9 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer {
     LabIcon._debug = debug ?? !LabIcon._debug;
   }
 
-  /**
-   * UNSTABLE - only exists for handling a single special case
-   *
-   * TODO: Fix the remaining case that relies on this and then
-   *   remove this method:
-   *     - index.tsx in launcher
-   */
-  static UNSTABLE_getReact({
-    name,
-    fallback,
-    ...props
-  }: { name: string; fallback?: LabIcon } & LabIcon.IReactProps) {
-    for (let className of name.split(/\s+/)) {
-      if (LabIcon._instancesByNameAndClassName.has(className)) {
-        const icon = LabIcon._instancesByNameAndClassName.get(className)!;
-        return <icon.react {...props} />;
-      }
-    }
-
-    // lookup failed if execution reached here
-    if (LabIcon._debug) {
-      // fail noisily
-      console.error(`Invalid icon name: ${name}`);
-      return <badIcon.react {...props} />;
-    } else if (fallback) {
-      return <fallback.react {...props} />;
-    } else {
-      // try to render the icon as a css background image via iconClass
-      return <Private.blankReact {...props} />;
-    }
-  }
-
   private static _debug: boolean = false;
   private static _instances = new Map<string, LabIcon>();
 
-  // TODO: remove this along with UNSTABLE_getReact
-  private static _instancesByNameAndClassName = new Map<string, LabIcon>();
-
   /***********
    * members *
    ***********/
@@ -286,16 +257,10 @@ export class LabIcon implements LabIcon.ILabIcon, VirtualElement.IRenderer {
     this.react = this._initReact(name);
     this.svgstr = svgstr;
 
-    this._className = Private.nameToClassName(name);
-
     // setup custom render/unrender methods, if passed in
     this._initRender({ render, unrender });
 
     LabIcon._instances.set(this.name, this);
-
-    // TODO: remove along with UNSTABLE_getReact
-    LabIcon._instancesByNameAndClassName.set(this.name, this);
-    LabIcon._instancesByNameAndClassName.set(this._className, this);
   }
 
   /**
@@ -665,7 +630,7 @@ export namespace LabIcon {
   }
 
   export interface IResolverProps {
-    icon?: LabIcon.IResolvable;
+    icon?: IMaybeResolvable;
     iconClass?: string;
     fallback?: LabIcon;
   }
@@ -681,6 +646,14 @@ export namespace LabIcon {
     | string
     | (IIcon & Partial<VirtualElement.IRenderer>);
 
+  /**
+   * A type that maybe can be resolved to a LabIcon instance.
+   */
+  export type IMaybeResolvable =
+    | IResolvable
+    | VirtualElement.IRenderer
+    | undefined;
+
   /**
    * The type of the svg node ref that can be passed into icon React components
    */
@@ -858,6 +831,16 @@ namespace Private {
     }
   }
 
+  export function isResolvable(
+    icon: LabIcon.IMaybeResolvable
+  ): icon is LabIcon.IResolvable {
+    return !!(
+      icon &&
+      (typeof icon === 'string' ||
+        ((icon as LabIcon.IIcon).name && (icon as LabIcon.IIcon).svgstr))
+    );
+  }
+
   /**
    * @param name - icon name. May be namespaced as per `some-pkg:foo-bar`
    *