migrated Collapse to JLIcon

packages/application/src/shell.ts

@@ -776,7 +776,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     if (title.iconRenderer instanceof JLIcon) {
       title.iconClass = title.iconRenderer.class({
         className: title.iconClass,
-        center: true,
+        justify: 'center',
         kind: 'mainAreaTab'
       });
     }
@@ -1188,7 +1188,7 @@ namespace Private {
       if (title.iconRenderer instanceof JLIcon) {
         title.iconClass = title.iconRenderer.class({
           className: title.iconClass,
-          center: true,
+          justify: 'center',
           kind: 'sideBar'
         });
       }

packages/application/style/menus.css

@@ -142,7 +142,7 @@
 }
 
 .p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon {
-  background-image: var(--jp-icon-caretright);
+  background-image: var(--jp-icon-caret-right);
   background-size: 18px;
   background-repeat: no-repeat;
   background-position: left;

packages/apputils-extension/src/index.ts

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

packages/apputils/src/collapse.ts

@@ -4,6 +4,7 @@
 import { Message } from '@lumino/messaging';
 import { ISignal, Signal } from '@lumino/signaling';
 import { Widget, Panel, PanelLayout, Title } from '@lumino/widgets';
+import { caretDownIcon, caretUpIcon } from '@jupyterlab/ui-components';
 
 /**
  * A panel that supports a collapsible header made from the widget's title.
@@ -127,7 +128,7 @@ export class Collapse<T extends Widget = Widget> extends Widget {
     if (this._content) {
       this._content.hide();
     }
-    this.removeClass('jp-Collapse-open');
+    this._setHeader();
     this._collapseChanged.emit(void 0);
   }
 
@@ -136,7 +137,7 @@ export class Collapse<T extends Widget = Widget> extends Widget {
     if (this._content) {
       this._content.show();
     }
-    this.addClass('jp-Collapse-open');
+    this._setHeader();
     this._collapseChanged.emit(void 0);
   }
 
@@ -148,7 +149,16 @@ export class Collapse<T extends Widget = Widget> extends Widget {
    * Handle the `changed` signal of a title object.
    */
   private _onTitleChanged(sender: Title<Widget>): void {
-    this._header.node.textContent = this._widget.title.label;
+    this._setHeader();
+  }
+
+  private _setHeader(): void {
+    (this._collapsed ? caretUpIcon : caretDownIcon).element({
+      container: this._header.node,
+      label: this._widget.title.label,
+      justify: 'right',
+      height: '28px'
+    });
   }
 
   private _collapseChanged = new Signal<this, void>(this);

packages/apputils/src/toolbar.tsx

@@ -503,7 +503,7 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) {
         <props.iconRenderer.react
           className="jp-ToolbarButtonComponent-icon"
           tag="span"
-          center={true}
+          justify="center"
           kind="toolbarButton"
         />
       ) : (
@@ -511,7 +511,7 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) {
           name={`${props.iconClass} jp-Icon jp-Icon-16`}
           className="jp-ToolbarButtonComponent-icon"
           tag="span"
-          center={true}
+          justify="center"
           kind="toolbarButton"
         />
       )}
@@ -733,9 +733,9 @@ namespace Private {
       // TODO: use the following to set the kernel status icon
       // // set the icon
       // if (this._isBusy(status)) {
-      //   circle.element({container: this.node, title: `Kernel ${Text.titleCase(status)}`, center: true, kind: 'toolbarButton'});
+      //   circle.element({container: this.node, title: `Kernel ${Text.titleCase(status)}`, justify: 'center', kind: 'toolbarButton'});
       // } else {
-      //   emptyCircleIcon.element({container: this.node, title: `Kernel ${Text.titleCase(status)}`, center: true, kind: 'toolbarButton'});
+      //   emptyCircleIcon.element({container: this.node, title: `Kernel ${Text.titleCase(status)}`, justify: 'center', kind: 'toolbarButton'});
       // }
 
       const busy = this._isBusy(status);

packages/apputils/style/collapse.css

@@ -12,23 +12,16 @@
 }
 
 .jp-Collapse-header {
-  padding: 4px 12px 4px 12px;
+  padding: 1px 12px;
   color: var(--jp-ui-font-color1);
   background-color: var(--jp-layout-color1);
   font-size: var(--jp-ui-font-size2);
-  background-image: var(--jp-icon-caretdown);
-  background-repeat: no-repeat;
-  background-position: right 12px top 50%;
 }
 
 .jp-Collapse-header:hover {
   background-color: var(--jp-layout-color2);
 }
 
-.jp-Collapse-open > .jp-Collapse-header {
-  background-image: var(--jp-icon-caretup);
-}
-
 .jp-Collapse-contents {
   padding: 0px 12px 0px 12px;
   background-color: var(--jp-layout-color1);

packages/celltags/src/addwidget.ts

@@ -33,7 +33,7 @@ export class AddWidget extends Widget {
     tag.appendChild(text);
     let iconContainer = addIcon.element({
       tag: 'span',
-      center: true,
+      justify: 'center',
       height: '18px',
       width: '18px',
       marginLeft: '3px',

packages/celltags/src/widget.ts

@@ -31,7 +31,7 @@ export class TagWidget extends Widget {
     tag.appendChild(text);
     let iconContainer = checkIcon.element({
       tag: 'span',
-      center: true,
+      justify: 'center',
       height: '18px',
       width: '18px',
       marginLeft: '5px',

packages/filebrowser/src/listing.ts

@@ -1804,7 +1804,7 @@ export namespace DirListing {
       const iconProps: JLIcon.IProps = {
         className: ITEM_ICON_CLASS,
         container: iconContainer,
-        center: true,
+        justify: 'center',
         kind: 'listing'
       };
 

packages/launcher/src/index.tsx

@@ -206,7 +206,7 @@ export class Launcher extends VDomRenderer<LauncherModel> {
                     'jp-Launcher-sectionIcon',
                     'jp-Launcher-icon'
                   )}
-                  center={true}
+                  justify="center"
                   kind="launcherSection"
                 />
               )}
@@ -429,7 +429,7 @@ function Card(
           <JLIcon.getReact
             name={commands.iconClass(command, args)}
             className="jp-Launcher-icon"
-            center={true}
+            justify="center"
             kind="launcherCard"
           />
         )}

packages/statusbar/src/defaults/lineCol.tsx

@@ -118,7 +118,7 @@ class LineFormComponent extends React.Component<
             <div className={lineFormButtonDiv}>
               <lineFormIcon.react
                 className={lineFormButtonIcon}
-                center={true}
+                justify="center"
               />
               <input type="submit" className={lineFormButton} value="" />
             </div>

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

@@ -13,6 +13,8 @@ import { getReactAttrs, classes, classesDedupe } from '../utils';
 import badSvg from '../../style/debug/bad.svg';
 import blankSvg from '../../style/debug/blank.svg';
 
+const blankDiv = document.createElement('div');
+
 export class JLIcon {
   private static _debug: boolean = false;
   private static _instances = new Map<string, JLIcon>();
@@ -137,7 +139,7 @@ export class JLIcon {
     title,
     tag = 'div',
     ...propsStyle
-  }: JLIcon.IProps = {}): HTMLElement | null {
+  }: JLIcon.IProps = {}): HTMLElement {
     // check if icon element is already set
     const maybeSvgElement = container?.firstChild as HTMLElement;
     if (maybeSvgElement?.dataset?.iconid === this._uuid) {
@@ -149,7 +151,7 @@ export class JLIcon {
     const svgElement = this.resolveSvg();
     if (!svgElement) {
       // bail if failing silently
-      return null;
+      return blankDiv;
     }
 
     let ret: HTMLElement;

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

@@ -45,7 +45,7 @@ export class TabBarSvg<T> extends TabBar<T> {
           className: '',
           title: title.iconLabel,
           container: iconNode,
-          center: true,
+          justify: 'center',
           kind: this._kind
         });
       }

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

@@ -27,32 +27,20 @@ export type IconKindType =
   | 'statusBar'
   | 'toolbarButton';
 
+export type IconJustifyType = 'center' | 'left' | 'right';
+
 export interface IIconStyle extends NestedCSSProperties {
   /**
-   * center the icon svg in its container
+   * the kind of the icon, associated with a default stylesheet
    */
-  center?: boolean;
+  kind?: IconKindType;
 
   /**
-   * the kind of the icon, associated with a default stylesheet
+   * how to justify the icon
    */
-  kind?: IconKindType;
+  justify?: IconJustifyType;
 }
 
-/**
- * styles for centering node inside of containers
- */
-const containerCSSCenter: NestedCSSProperties = {
-  alignItems: 'center',
-  display: 'flex'
-};
-
-const iconCSSCenter: NestedCSSProperties = {
-  display: 'block',
-  margin: '0 auto',
-  width: '100%'
-};
-
 /**
  * icon kind specific styles
  */
@@ -241,15 +229,61 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   toolbarButton: containerCSSToolbarButton
 };
 
+/**
+ * styles for justifying a node inside of a container
+ */
+const iconCSSCenter: NestedCSSProperties = {
+  display: 'block',
+  margin: '0 auto',
+  width: '100%'
+};
+
+const iconCSSLeft: NestedCSSProperties = {
+  display: 'block',
+  margin: '0 auto 0 0'
+};
+
+const iconCSSRight: NestedCSSProperties = {
+  display: 'block',
+  margin: '0 0 0 auto'
+};
+
+const iconCSSJustify: { [k in IconJustifyType]: NestedCSSProperties } = {
+  center: iconCSSCenter,
+  left: iconCSSLeft,
+  right: iconCSSRight
+};
+
+const containerCSSCenter: NestedCSSProperties = {
+  alignItems: 'center',
+  display: 'flex'
+};
+
+const containerCSSLeft: NestedCSSProperties = {
+  alignItems: 'center',
+  display: 'flex'
+};
+
+const containerCSSRight: NestedCSSProperties = {
+  alignItems: 'center',
+  display: 'flex'
+};
+
+const containerCSSJustify: { [k in IconJustifyType]: NestedCSSProperties } = {
+  center: containerCSSCenter,
+  left: containerCSSLeft,
+  right: containerCSSRight
+};
+
 /**
  * for putting together the icon kind style with any user input styling,
  * as well as styling from optional flags like `center`
  */
 function iconCSS(props: IIconStyle): NestedCSSProperties {
-  const { kind, center, ...propsCSS } = props;
+  const { kind, justify, ...propsCSS } = props;
 
   return {
-    ...(center ? iconCSSCenter : {}),
+    ...(justify ? iconCSSJustify[justify] : {}),
     ...(kind ? iconCSSKind[kind] : {}),
     ...propsCSS
   };
@@ -260,10 +294,10 @@ function iconCSS(props: IIconStyle): NestedCSSProperties {
  * styling from optional flags like `center`
  */
 function containerCSS(props: IIconStyle): NestedCSSProperties {
-  const { kind, center } = props;
+  const { kind, justify } = props;
 
   return {
-    ...(center ? containerCSSCenter : {}),
+    ...(justify ? containerCSSJustify[justify] : {}),
     ...(kind ? containerCSSKind[kind] : {})
   };
 }

packages/ui-components/stories/iconreact.stories.tsx

@@ -25,6 +25,6 @@ export const runningIcon = () => (
 
 export const html5Icon = () => (
   <div className={'foobar'} style={{ height: '500px', width: '500px' }}>
-    <DefaultIconReact name={'html5'} center={true} />
+    <DefaultIconReact name={'html5'} justify="center" />
   </div>
 );