Merge pull request #7864 from telamonian/post-labicon-cleanup

Post LabIcon cleanup; migrate last holdouts to LabIcon; fix icon styling

.eslintignore

@@ -23,3 +23,10 @@ jupyterlab/staging/index.js
 jupyterlab/staging/yarn.js
 jupyterlab/themes
 packages/ui-components/src/icon/iconimports.ts
+
+# jetbrains IDE stuff
+.idea/
+
+# ms IDE stuff
+.history/
+.vscode/

.prettierignore

@@ -22,3 +22,10 @@ jupyterlab/geckodriver
 jupyterlab/staging/yarn.js
 jupyterlab/staging/index.js
 packages/ui-components/src/icon/iconimports.ts
+
+# jetbrains IDE stuff
+.idea/
+
+# ms IDE stuff
+.history/
+.vscode/

dev_mode/package.json

@@ -169,17 +169,17 @@
     "@jupyterlab/vdom-extension": "~2.0.0-rc.1",
     "@jupyterlab/vega5-extension": "~2.0.0-rc.1",
     "@lumino/algorithm": "^1.2.3",
-    "@lumino/application": "^1.8.2",
-    "@lumino/commands": "^1.9.2",
+    "@lumino/application": "^1.8.4",
+    "@lumino/commands": "^1.10.1",
     "@lumino/coreutils": "^1.4.2",
-    "@lumino/disposable": "^1.3.4",
+    "@lumino/disposable": "^1.3.5",
     "@lumino/domutils": "^1.1.7",
-    "@lumino/dragdrop": "^1.5.0",
+    "@lumino/dragdrop": "^1.5.1",
     "@lumino/messaging": "^1.3.3",
     "@lumino/properties": "^1.1.6",
-    "@lumino/signaling": "^1.3.4",
-    "@lumino/virtualdom": "^1.5.0",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/signaling": "^1.3.5",
+    "@lumino/virtualdom": "^1.6.1",
+    "@lumino/widgets": "^1.11.1",
     "react": "~16.9.0",
     "react-dom": "~16.9.0"
   },

examples/cell/package.json

@@ -15,8 +15,8 @@
     "@jupyterlab/rendermime": "^2.0.0-rc.1",
     "@jupyterlab/services": "^5.0.0-rc.1",
     "@jupyterlab/theme-light-extension": "^2.0.0-rc.1",
-    "@lumino/commands": "^1.9.2",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/commands": "^1.10.1",
+    "@lumino/widgets": "^1.11.1",
     "es6-promise": "~4.2.8"
   },
   "devDependencies": {

examples/console/package.json

@@ -13,8 +13,8 @@
     "@jupyterlab/rendermime": "^2.0.0-rc.1",
     "@jupyterlab/services": "^5.0.0-rc.1",
     "@jupyterlab/theme-light-extension": "^2.0.0-rc.1",
-    "@lumino/commands": "^1.9.2",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/commands": "^1.10.1",
+    "@lumino/widgets": "^1.11.1",
     "es6-promise": "~4.2.8"
   },
   "devDependencies": {

examples/filebrowser/package.json

@@ -17,8 +17,8 @@
     "@jupyterlab/services": "^5.0.0-rc.1",
     "@jupyterlab/theme-light-extension": "^2.0.0-rc.1",
     "@lumino/algorithm": "^1.2.3",
-    "@lumino/commands": "^1.9.2",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/commands": "^1.10.1",
+    "@lumino/widgets": "^1.11.1",
     "es6-promise": "~4.2.8"
   },
   "devDependencies": {

examples/filebrowser/src/index.ts

@@ -34,6 +34,8 @@ import { FileBrowser, FileBrowserModel } from '@jupyterlab/filebrowser';
 
 import { FileEditorFactory } from '@jupyterlab/fileeditor';
 
+import { addIcon } from '@jupyterlab/ui-components';
+
 function main(): void {
   let manager = new ServiceManager();
   void manager.ready.then(() => {
@@ -95,7 +97,7 @@ function createApp(manager: ServiceManager.IManager): void {
 
   // Add a creator toolbar item.
   let creator = new ToolbarButton({
-    iconClass: 'jp-AddIcon jp-Icon jp-Icon-16',
+    icon: addIcon,
     onClick: () => {
       void docManager
         .newUntitled({

examples/notebook/package.json

@@ -18,8 +18,8 @@
     "@jupyterlab/rendermime": "^2.0.0-rc.1",
     "@jupyterlab/services": "^5.0.0-rc.1",
     "@jupyterlab/theme-light-extension": "^2.0.0-rc.1",
-    "@lumino/commands": "^1.9.2",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/commands": "^1.10.1",
+    "@lumino/widgets": "^1.11.1",
     "es6-promise": "~4.2.8"
   },
   "devDependencies": {

examples/terminal/package.json

@@ -11,7 +11,7 @@
     "@jupyterlab/services": "^5.0.0-rc.1",
     "@jupyterlab/terminal": "^2.0.0-rc.1",
     "@jupyterlab/theme-light-extension": "^2.0.0-rc.1",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/widgets": "^1.11.1",
     "es6-promise": "~4.2.8"
   },
   "devDependencies": {

jupyterlab/tests/mock_packages/mimeextension/package.json

@@ -3,7 +3,7 @@
   "version": "0.3.0",
   "private": true,
   "dependencies": {
-    "@lumino/widgets": "^1.10.2"
+    "@lumino/widgets": "^1.11.1"
   },
   "jupyterlab": {
     "mimeExtension": true

packages/application-extension/package.json

@@ -45,8 +45,8 @@
     "@jupyterlab/ui-components": "^2.0.0-rc.2",
     "@lumino/algorithm": "^1.2.3",
     "@lumino/coreutils": "^1.4.2",
-    "@lumino/disposable": "^1.3.4",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/disposable": "^1.3.5",
+    "@lumino/widgets": "^1.11.1",
     "react": "~16.9.0"
   },
   "devDependencies": {

packages/application-extension/src/index.tsx

@@ -825,7 +825,7 @@ const propertyInspector: JupyterFrontEndPlugin<IPropertyInspectorProvider> = {
   provides: IPropertyInspectorProvider,
   activate: (app: JupyterFrontEnd, labshell: ILabShell) => {
     const widget = new SideBarPropertyInspectorProvider(labshell);
-    widget.title.iconRenderer = buildIcon;
+    widget.title.icon = buildIcon;
     widget.title.caption = 'Property Inspector';
     widget.id = 'jp-property-inspector';
     labshell.add(widget, 'left');

packages/application/package.json

@@ -45,15 +45,15 @@
     "@jupyterlab/statedb": "^2.0.0-rc.1",
     "@jupyterlab/ui-components": "^2.0.0-rc.2",
     "@lumino/algorithm": "^1.2.3",
-    "@lumino/application": "^1.8.2",
-    "@lumino/commands": "^1.9.2",
+    "@lumino/application": "^1.8.4",
+    "@lumino/commands": "^1.10.1",
     "@lumino/coreutils": "^1.4.2",
-    "@lumino/disposable": "^1.3.4",
+    "@lumino/disposable": "^1.3.5",
     "@lumino/messaging": "^1.3.3",
-    "@lumino/polling": "^1.0.3",
+    "@lumino/polling": "^1.0.4",
     "@lumino/properties": "^1.1.6",
-    "@lumino/signaling": "^1.3.4",
-    "@lumino/widgets": "^1.10.2"
+    "@lumino/signaling": "^1.3.5",
+    "@lumino/widgets": "^1.11.1"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",

packages/application/src/frontend.ts

@@ -7,6 +7,8 @@ import { DocumentRegistry } from '@jupyterlab/docregistry';
 
 import { ServiceManager } from '@jupyterlab/services';
 
+import { MenuSvg } from '@jupyterlab/ui-components';
+
 import { IIterator } from '@lumino/algorithm';
 
 import { Application, IPlugin } from '@lumino/application';
@@ -38,6 +40,10 @@ export abstract class JupyterFrontEnd<
    * Construct a new JupyterFrontEnd object.
    */
   constructor(options: JupyterFrontEnd.IOptions<T>) {
+    // render context menu with inline svg icon tweaks
+    options.contextMenuRenderer =
+      options.contextMenuRenderer || MenuSvg.defaultRenderer;
+
     super(options);
 
     // The default restored promise if one does not exist in the options.

packages/application/src/shell.ts

@@ -772,12 +772,10 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     // (for context menu support)
     title.dataset = { ...title.dataset, id: widget.id };
 
-    // set an appropriate style class for the iconRenderer
-    if (title.iconRenderer) {
-      title.iconClass = LabIcon.UNSTABLE_style({
-        className: title.iconClass,
-        justify: 'center',
-        kind: 'mainAreaTab'
+    // bind an appropriate style to the icon
+    if (title.icon instanceof LabIcon) {
+      title.icon = title.icon.bindprops({
+        stylesheet: 'mainAreaTab'
       });
     }
 
@@ -1184,12 +1182,10 @@ namespace Private {
       // in order to dispatch click events to the right widget.
       title.dataset = { id: widget.id };
 
-      // set an appropriate style class for the iconRenderer
-      if (title.iconRenderer) {
-        title.iconClass = LabIcon.UNSTABLE_style({
-          className: title.iconClass,
-          justify: 'center',
-          kind: 'sideBar'
+      // bind an appropriate style to the icon
+      if (title.icon instanceof LabIcon) {
+        title.icon = title.icon.bindprops({
+          stylesheet: 'sideBar'
         });
       }
 

packages/application/style/menus.css

@@ -126,24 +126,8 @@
   border-top: var(--jp-border-width) solid var(--jp-layout-color2);
 }
 
-.lm-Menu-itemIcon,
-.lm-Menu-itemSubmenuIcon {
-  background-size: 16px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-.lm-Menu-item.lm-mod-toggled > .lm-Menu-itemIcon {
-  background-image: var(--jp-icon-check);
-}
-
-.lm-Menu-item.lm-mod-toggled.lm-mod-disabled > .lm-Menu-itemIcon {
-  background-image: var(--jp-icon-check-disabled);
-}
-
-.lm-Menu-item[data-type='submenu'] > .lm-Menu-itemSubmenuIcon {
-  background-image: var(--jp-icon-caret-right);
-  background-size: 18px;
-  background-repeat: no-repeat;
-  background-position: left;
+/* gray out icon/caret for disable menu items */
+.lm-Menu-item.lm-mod-disabled > .lm-Menu-itemIcon,
+.lm-Menu-item[data-type='submenu'].lm-mod-disabled > .lm-Menu-itemSubmenuIcon {
+  opacity: 0.4;
 }

packages/apputils-extension/package.json

@@ -45,11 +45,11 @@
     "@jupyterlab/statedb": "^2.0.0-rc.1",
     "@jupyterlab/ui-components": "^2.0.0-rc.2",
     "@lumino/algorithm": "^1.2.3",
-    "@lumino/commands": "^1.9.2",
+    "@lumino/commands": "^1.10.1",
     "@lumino/coreutils": "^1.4.2",
-    "@lumino/disposable": "^1.3.4",
-    "@lumino/polling": "^1.0.3",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/disposable": "^1.3.5",
+    "@lumino/polling": "^1.0.4",
+    "@lumino/widgets": "^1.11.1",
     "es6-promise": "~4.2.8"
   },
   "devDependencies": {

packages/apputils-extension/src/index.ts

@@ -151,8 +151,8 @@ const splash: JupyterFrontEndPlugin<ISplashScreen> = {
 
     jupyterFaviconIcon.element({
       container: logo,
-      justify: 'center',
-      kind: 'splash'
+
+      stylesheet: 'splash'
     });
 
     galaxy.appendChild(logo);

packages/apputils-extension/src/palette.ts

@@ -10,7 +10,7 @@ import { CommandPalette } from '@lumino/widgets';
 
 import { ILayoutRestorer, JupyterFrontEnd } from '@jupyterlab/application';
 import { ICommandPalette, IPaletteItem } from '@jupyterlab/apputils';
-import { paletteIcon } from '@jupyterlab/ui-components';
+import { CommandPaletteSvg, paletteIcon } from '@jupyterlab/ui-components';
 
 /**
  * The command IDs used by the apputils extension.
@@ -29,7 +29,7 @@ export class Palette implements ICommandPalette {
    */
   constructor(palette: CommandPalette) {
     this._palette = palette;
-    this._palette.title.iconRenderer = paletteIcon;
+    this._palette.title.icon = paletteIcon;
     this._palette.title.label = '';
     this._palette.title.caption = 'Command Palette';
   }
@@ -141,9 +141,13 @@ namespace Private {
    */
   export function createPalette(app: JupyterFrontEnd): CommandPalette {
     if (!palette) {
-      palette = new CommandPalette({ commands: app.commands });
+      // use a renderer tweaked to use inline svg icons
+      palette = new CommandPalette({
+        commands: app.commands,
+        renderer: CommandPaletteSvg.defaultRenderer
+      });
       palette.id = 'command-palette';
-      palette.title.iconRenderer = paletteIcon;
+      palette.title.icon = paletteIcon;
       palette.title.label = 'Commands';
     }
 

packages/apputils/package.json

@@ -41,15 +41,15 @@
     "@jupyterlab/statedb": "^2.0.0-rc.1",
     "@jupyterlab/ui-components": "^2.0.0-rc.2",
     "@lumino/algorithm": "^1.2.3",
-    "@lumino/commands": "^1.9.2",
+    "@lumino/commands": "^1.10.1",
     "@lumino/coreutils": "^1.4.2",
-    "@lumino/disposable": "^1.3.4",
+    "@lumino/disposable": "^1.3.5",
     "@lumino/domutils": "^1.1.7",
     "@lumino/messaging": "^1.3.3",
     "@lumino/properties": "^1.1.6",
-    "@lumino/signaling": "^1.3.4",
-    "@lumino/virtualdom": "^1.5.0",
-    "@lumino/widgets": "^1.10.2",
+    "@lumino/signaling": "^1.3.5",
+    "@lumino/virtualdom": "^1.6.1",
+    "@lumino/widgets": "^1.11.1",
     "@types/react": "~16.9.16",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",

packages/apputils/src/collapse.ts

@@ -156,7 +156,7 @@ export class Collapse<T extends Widget = Widget> extends Widget {
     (this._collapsed ? caretUpIcon : caretDownIcon).element({
       container: this._header.node,
       label: this._widget.title.label,
-      justify: 'right',
+      elementPosition: 'right',
       height: '28px'
     });
   }

packages/apputils/src/mainareawidget.ts

@@ -177,9 +177,9 @@ export class MainAreaWidget<T extends Widget = Widget> extends Widget
     const content = this.content;
     this.title.label = content.title.label;
     this.title.mnemonic = content.title.mnemonic;
+    this.title.icon = content.title.icon;
     this.title.iconClass = content.title.iconClass;
     this.title.iconLabel = content.title.iconLabel;
-    this.title.iconRenderer = content.title.iconRenderer;
     this.title.caption = content.title.caption;
     this.title.className = content.title.className;
     this.title.dataset = content.title.dataset;
@@ -197,9 +197,9 @@ export class MainAreaWidget<T extends Widget = Widget> extends Widget
     const content = this.content;
     content.title.label = this.title.label;
     content.title.mnemonic = this.title.mnemonic;
+    content.title.icon = this.title.icon;
     content.title.iconClass = this.title.iconClass;
     content.title.iconLabel = this.title.iconLabel;
-    content.title.iconRenderer = this.title.iconRenderer;
     content.title.caption = this.title.caption;
     content.title.className = this.title.className;
     content.title.dataset = this.title.dataset;

packages/apputils/src/styling.ts

@@ -72,7 +72,7 @@ export namespace Styling {
     wrapper.appendChild(
       caretDownEmptyIcon.element({
         tag: 'span',
-        kind: 'select',
+        stylesheet: 'select',
         right: '8px',
         top: '5px',
         width: '18px'