Fix legacy support for icons-as-css-background

packages/application/src/shell.ts

@@ -3,7 +3,7 @@
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { DockPanelSvg, LabIcon } from '@jupyterlab/ui-components';
+import { classes, DockPanelSvg, LabIcon } from '@jupyterlab/ui-components';
 
 import { ArrayExt, find, IIterator, iter, toArray } from '@lumino/algorithm';
 
@@ -772,11 +772,14 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     // (for context menu support)
     title.dataset = { ...title.dataset, id: widget.id };
 
-    // bind an appropriate style to the icon
     if (title.icon instanceof LabIcon) {
+      // bind an appropriate style to the icon
       title.icon = title.icon.bindprops({
         stylesheet: 'mainAreaTab'
       });
+    } else if (typeof title.icon === 'string' || !title.icon) {
+      // add some classes to help with displaying css background imgs
+      title.iconClass = classes(title.iconClass, 'jp-Icon');
     }
 
     dock.addWidget(widget, { mode, ref });
@@ -1182,11 +1185,14 @@ namespace Private {
       // in order to dispatch click events to the right widget.
       title.dataset = { id: widget.id };
 
-      // bind an appropriate style to the icon
       if (title.icon instanceof LabIcon) {
+        // bind an appropriate style to the icon
         title.icon = title.icon.bindprops({
           stylesheet: 'sideBar'
         });
+      } else if (typeof title.icon === 'string' || !title.icon) {
+        // add some classes to help with displaying css background imgs
+        title.iconClass = classes(title.iconClass, 'jp-Icon', 'jp-Icon-20');
       }
 
       this._refreshVisibility();

packages/apputils/src/toolbar.tsx

@@ -499,7 +499,7 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) {
         icon={props.icon}
         iconClass={
           // add some extra classes for proper support of icons-as-css-backgorund
-          classes(props.iconClass, 'jp-Icon', 'jp-Icon-16')
+          classes(props.iconClass, 'jp-Icon')
         }
         className="jp-ToolbarButtonComponent-icon"
         tag="span"

packages/filebrowser/src/listing.ts

@@ -23,6 +23,7 @@ import { Contents } from '@jupyterlab/services';
 import {
   caretDownIcon,
   caretUpIcon,
+  classes,
   fileIcon,
   LabIcon
 } from '@jupyterlab/ui-components';
@@ -1836,7 +1837,7 @@ export namespace DirListing {
       // render the file item's icon
       LabIcon.resolveElement({
         icon: fileType?.icon,
-        iconClass: fileType?.iconClass,
+        iconClass: classes(fileType?.iconClass, 'jp-Icon'),
         fallback: fileIcon,
         container: iconContainer,
         className: ITEM_ICON_CLASS,

packages/launcher/src/index.tsx

@@ -7,7 +7,7 @@ import {
   VDomRenderer
 } from '@jupyterlab/apputils';
 
-import { LabIcon } from '@jupyterlab/ui-components';
+import { classes, LabIcon } from '@jupyterlab/ui-components';
 
 import {
   ArrayExt,
@@ -205,7 +205,7 @@ export class Launcher extends VDomRenderer<LauncherModel> {
             <div className="jp-Launcher-sectionHeader">
               <LabIcon.resolveReact
                 icon={icon}
-                iconClass={iconClass}
+                iconClass={classes(iconClass, 'jp-Icon-cover')}
                 stylesheet="launcherSection"
               />
               <h2 className="jp-Launcher-sectionTitle">{cat}</h2>
@@ -432,7 +432,7 @@ function Card(
         ) : (
           <LabIcon.resolveReact
             icon={icon}
-            iconClass={iconClass}
+            iconClass={classes(iconClass, 'jp-Icon-cover')}
             stylesheet="launcherCard"
           />
         )}

packages/settingeditor/src/pluginlist.tsx

@@ -5,7 +5,7 @@
 
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
-import { LabIcon, settingsIcon } from '@jupyterlab/ui-components';
+import { classes, LabIcon, settingsIcon } from '@jupyterlab/ui-components';
 
 import { Message } from '@lumino/messaging';
 
@@ -278,7 +278,7 @@ namespace Private {
         >
           <LabIcon.resolveReact
             icon={icon}
-            iconClass={iconClass}
+            iconClass={iconClass && classes(iconClass, 'jp-Icon')}
             fallback={settingsIcon}
             title={iconTitle}
             tag="span"

packages/settingregistry/src/plugin-schema.json

@@ -9,7 +9,7 @@
     "jupyter.lab.setting-deprecated": { "type": "boolean", "default": false },
     "jupyter.lab.setting-icon": {
       "type": "string",
-      "default": "ui-components:settings"
+      "default": ""
     },
     "jupyter.lab.setting-icon-class": {
       "type": "string",

packages/ui-components/src/blueprint.tsx

@@ -56,7 +56,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
         className={classes(props.className, 'jp-InputGroup')}
         rightElement={
           <div className="jp-InputGroupAction">
-            <BPIcon className={'jp-Icon'} icon={props.rightIcon} />
+            <BPIcon className={'jp-BPIcon'} icon={props.rightIcon} />
           </div>
         }
       />

packages/ui-components/src/icon/widgets/menusvg.ts

@@ -90,7 +90,10 @@ export namespace MenuSvg {
 
       /* <DEPRECATED> */
       if (typeof data.item.icon === 'string') {
-        return h.div({ className }, data.item.iconLabel);
+        return h.div(
+          { className: classes(className, 'jp-Icon') },
+          data.item.iconLabel
+        );
       }
       /* </DEPRECATED> */
 

packages/ui-components/src/style/icon.ts

@@ -210,7 +210,8 @@ export namespace LabIconStyle {
 
     launcherCard: {
       container: {
-        height: '68px'
+        height: '52px',
+        width: '52px'
       },
       element: {
         height: '52px',
@@ -224,7 +225,9 @@ export namespace LabIconStyle {
     launcherSection: {
       container: {
         boxSizing: 'border-box',
-        marginRight: '12px'
+        marginRight: '12px',
+        height: '32px',
+        width: '32px'
       },
       element: {
         height: '32px',

packages/ui-components/style/base.css

@@ -94,8 +94,15 @@ input::placeholder {
   color: var(--jp-ui-font-color3);
 }
 
-.jp-Icon {
-  color: var(--jp-layout-color4);
+.jp-BPIcon {
+  display: inline-block;
+  vertical-align: middle;
+  margin: auto;
+}
+
+/* Stop blueprint futzing with our icon fills */
+.bp3-icon.jp-BPIcon > svg:not([fill]) {
+  fill: var(--jp-inverse-layout-color3);
 }
 
 .jp-InputGroupAction {

packages/ui-components/style/deprecatedExtra.css

@@ -10,3 +10,40 @@
 :root {
   --jp-icon-search-white: url('deprecated/search-white.svg');
 }
+
+.jp-Icon,
+.jp-MaterialIcon {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.jp-Icon-cover {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+/**
+ * (DEPRECATED) Support for specific CSS icon sizes
+ */
+
+.jp-Icon-16 {
+  background-size: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.jp-Icon-18 {
+  background-size: 18px;
+  min-width: 18px;
+  min-height: 18px;
+}
+
+.jp-Icon-20 {
+  background-size: 20px;
+  min-width: 20px;
+  min-height: 20px;
+}

packages/ui-components/style/icons.css

@@ -270,44 +270,7 @@
   --jp-warn-color0: var(--md-orange-700);
 }
 
-/**
- * (DEPRECATED) Support for icons as CSS `background-images`
- */
-.jp-MaterialIcon {
-  min-width: 16px;
-  min-height: 16px;
-  background-size: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.jp-Icon {
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin: auto;
-}
-
-.jp-Icon-16 {
-  min-width: 16px;
-  min-height: 16px;
-  background-size: 16px;
-}
-
-.jp-Icon-18 {
-  min-width: 18px;
-  min-height: 18px;
-  background-size: 18px;
-}
-
-.jp-Icon-20 {
-  min-width: 20px;
-  min-height: 20px;
-  background-size: 20px;
-}
-
+/* not sure what to do with this one, used in filebrowser listing */
 .jp-DragIcon {
   margin-right: 4px;
 }