iconStyle no longer exported; exposed LabIcon.UNSTABLE_style to replace

packages/application/src/shell.ts

@@ -3,7 +3,7 @@
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { classes, DockPanelSvg, iconStyle } from '@jupyterlab/ui-components';
+import { DockPanelSvg, LabIcon } from '@jupyterlab/ui-components';
 
 import { ArrayExt, find, IIterator, iter, toArray } from '@lumino/algorithm';
 
@@ -774,10 +774,11 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
 
     // set an appropriate style class for the iconRenderer
     if (title.iconRenderer) {
-      title.iconClass = classes(
-        title.iconClass,
-        iconStyle({ justify: 'center', kind: 'mainAreaTab' })
-      );
+      title.iconClass = LabIcon.UNSTABLE_style({
+        className: title.iconClass,
+        justify: 'center',
+        kind: 'mainAreaTab'
+      });
     }
 
     dock.addWidget(widget, { mode, ref });
@@ -1185,10 +1186,11 @@ namespace Private {
 
       // set an appropriate style class for the iconRenderer
       if (title.iconRenderer) {
-        title.iconClass = classes(
-          title.iconClass,
-          iconStyle({ justify: 'center', kind: 'sideBar' })
-        );
+        title.iconClass = LabIcon.UNSTABLE_style({
+          className: title.iconClass,
+          justify: 'center',
+          kind: 'sideBar'
+        });
       }
 
       this._refreshVisibility();

packages/extensionmanager/src/widget.tsx

@@ -5,13 +5,13 @@ import { VDomRenderer, ToolbarButtonComponent } from '@jupyterlab/apputils';
 import { ServiceManager } from '@jupyterlab/services';
 import {
   Button,
-  InputGroup,
+  caretDownIcon,
+  caretRightIcon,
   Collapse,
-  iconStyle,
-  refreshIcon,
+  InputGroup,
   jupyterIcon,
-  caretRightIcon,
-  caretDownIcon
+  LabIcon,
+  refreshIcon
 } from '@jupyterlab/ui-components';
 
 import { Message } from '@lumino/messaging';
@@ -353,7 +353,10 @@ export class CollapsibleSection extends React.Component<
         <header>
           <ToolbarButtonComponent
             icon={this.state.isOpen ? caretDownIcon : caretRightIcon}
-            iconClass={iconStyle({ height: 'auto', width: '20px' })}
+            iconClass={LabIcon.UNSTABLE_style({
+              height: 'auto',
+              width: '20px'
+            })}
             onClick={() => {
               this.handleCollapse();
             }}

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

@@ -50,7 +50,7 @@ export class LabIcon implements LabIcon.ILabIcon, LabIcon.IRenderer {
    *
    * @returns a LabIcon instance
    */
-  static resolve({ icon }: LabIcon.IResolverProps): LabIcon {
+  static resolve({ icon }: { icon: LabIcon.IResolvable }): LabIcon {
     if (icon instanceof LabIcon) {
       // icon already is a LabIcon; nothing to do here
       return icon;
@@ -234,6 +234,21 @@ export class LabIcon implements LabIcon.ILabIcon, LabIcon.IRenderer {
     }
   }
 
+  /**
+   * UNSTABLE - only exists for handling 2 special cases
+   *
+   * TODO: Fix the remaining cases that rely on this and then
+   *   remove this method:
+   *     - shell.ts in application
+   *     - widget.tsx in extensionmanager
+   */
+  static UNSTABLE_style({
+    className,
+    ...props
+  }: { className?: string } & IIconStyle) {
+    return classes(className, iconStyle(props));
+  }
+
   private static _debug: boolean = false;
   private static _instances = new Map<string, LabIcon>();
 
@@ -515,6 +530,8 @@ export class LabIcon implements LabIcon.ILabIcon, LabIcon.IRenderer {
    * @param tag - if container is not explicitly
    * provided, this tag will be used when creating the container
    *
+   * @param ref - forwarded to the ref prop of the icon's svg element
+   *
    * @param propsStyle - style parameters that get passed to TypeStyle in
    * order to generate a style class. The style class will be added
    * to the icon container's classes, while the style itself will be
@@ -626,7 +643,7 @@ export namespace LabIcon {
   }
 
   export interface IResolverProps {
-    icon: LabIcon.IResolvable;
+    icon?: LabIcon.IResolvable;
     iconClass?: string;
     fallback?: LabIcon;
   }

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

@@ -5,7 +5,7 @@ import { hpass, VirtualElement } from '@lumino/virtualdom';
 import { DockPanel, TabBar, Widget } from '@lumino/widgets';
 
 import { closeIcon } from './iconimports';
-import { iconStyle } from '../style/icon';
+import { iconStyle } from '../style';
 import { classes } from '../utils';
 
 /**

packages/ui-components/src/index.ts

@@ -4,6 +4,5 @@
 export * from './blueprint';
 export * from './components';
 export * from './icon';
-export * from './style';
 export * from './tokens';
 export * from './utils';

tests/test-ui-components/src/labicon.spec.ts

@@ -3,7 +3,7 @@
 
 import { expect } from 'chai';
 
-import { LabIcon } from '../..//ui-components/icon';
+import { LabIcon } from '../../ui-components';
 
 describe('@jupyterlab/nbformat', () => {
   describe('validateIcons', () => {