Merge pull request #7236 from jasongrout/backport-7192

Backport PR #7192: progress on icons: added inline svg icon support to toolbar buttons

buildutils/src/ensure-package.ts

@@ -330,10 +330,15 @@ export async function ensurePackage(
  * of ui-components/style/icons.
  *
  * @param pkgPath - The path to the @jupyterlab/ui-components package.
+ * @param dorequire - If true, use `require` function in place of `import`
+ *  statements when loading the icon svg files
  *
  * @returns A list of changes that were made to ensure the package.
  */
-export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
+export async function ensureUiComponents(
+  pkgPath: string,
+  dorequire: boolean = false
+): Promise<string[]> {
   const funcName = 'ensureUiComponents';
   let messages: string[] = [];
 
@@ -347,14 +352,23 @@ export async function ensureUiComponents(pkgPath: string): Promise<string[]> {
   let _iconModelDeclarations: string[] = [];
   svgs.forEach(svg => {
     const name = utils.stem(svg);
-    const nameCamel = utils.camelCase(name) + 'Svg';
-    _iconImportStatements.push(
-      `import ${nameCamel} from '${path
-        .relative(iconSrcDir, svg)
-        .split(path.sep)
-        .join('/')}';`
-    );
-    _iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`);
+    const svgpath = path
+      .relative(iconSrcDir, svg)
+      .split(path.sep)
+      .join('/');
+
+    if (dorequire) {
+      // load the icon svg using `require`
+      _iconModelDeclarations.push(
+        `{ name: '${name}', svg: require('${svgpath}').default }`
+      );
+    } else {
+      // load the icon svg using `import`
+      const nameCamel = utils.camelCase(name) + 'Svg';
+
+      _iconImportStatements.push(`import ${nameCamel} from '${svgpath}';`);
+      _iconModelDeclarations.push(`{ name: '${name}', svg: ${nameCamel} }`);
+    }
   });
   const iconImportStatements = _iconImportStatements.join('\n');
   const iconModelDeclarations = _iconModelDeclarations.join(',\n');
@@ -457,7 +471,7 @@ export interface IEnsurePackageOptions {
  * do nothing and return an empty array. If they don't match, overwrite the
  * file and return an array with an update message.
  *
- * @param path: The path to the file being checked. The file must exist,
+ * @param fpath: The path to the file being checked. The file must exist,
  * or else this function does nothing.
  *
  * @param contents: The desired file contents.
@@ -469,35 +483,36 @@ export interface IEnsurePackageOptions {
  * @returns a string array with 0 or 1 messages.
  */
 function ensureFile(
-  path: string,
+  fpath: string,
   contents: string,
   prettify: boolean = true
 ): string[] {
   let messages: string[] = [];
 
-  if (!fs.existsSync(path)) {
+  if (!fs.existsSync(fpath)) {
     // bail
     messages.push(
-      `Tried to ensure the contents of ./${path}, but the file does not exist`
+      `Tried to ensure the contents of ${fpath}, but the file does not exist`
     );
     return messages;
   }
 
-  // run the newly generated contents through prettier before comparing
-  if (prettify) {
-    contents = prettier.format(contents, { filepath: path, singleQuote: true });
-  }
+  // (maybe) run the newly generated contents through prettier before comparing
+  let formatted = prettify
+    ? prettier.format(contents, { filepath: fpath, singleQuote: true })
+    : contents;
 
-  const prev = fs.readFileSync(path, {
-    encoding: 'utf8'
-  });
-  // Normalize line endings to match current content
+  const prev = fs.readFileSync(fpath, { encoding: 'utf8' });
   if (prev.indexOf('\r') !== -1) {
-    contents = contents.replace(/\n/g, '\r\n');
+    // Normalize line endings to match current content
+    formatted = formatted.replace(/\n/g, '\r\n');
   }
-  if (prev !== contents) {
-    fs.writeFileSync(path, contents);
-    messages.push(`Updated ./${path}`);
+  if (prev !== formatted) {
+    // Write out changes and notify
+    fs.writeFileSync(fpath, formatted);
+
+    const msgpath = fpath.startsWith('/') ? fpath : `./${fpath}`;
+    messages.push(`Updated ${msgpath}`);
   }
 
   return messages;

packages/application/style/icons.css

@@ -237,10 +237,6 @@
   background-size: 20px;
 }
 
-.jp-AddIcon {
-  background-image: var(--jp-icon-add);
-}
-
 .jp-BugIcon {
   background-image: var(--jp-icon-bug);
 }
@@ -261,14 +257,6 @@
   background-image: var(--jp-icon-console);
 }
 
-.jp-CopyIcon {
-  background-image: var(--jp-icon-copy);
-}
-
-.jp-CutIcon {
-  background-image: var(--jp-icon-cut);
-}
-
 .jp-DirectionsRunIcon {
   background-image: var(--jp-icon-directions-run);
 }
@@ -355,30 +343,10 @@
   background-image: var(--jp-icon-new-folder);
 }
 
-.jp-PasteIcon {
-  background-image: var(--jp-icon-paste);
-}
-
-.jp-RefreshIcon {
-  background-image: var(--jp-icon-refresh);
-}
-
-.jp-RunIcon {
-  background-image: var(--jp-icon-run);
-}
-
-.jp-SaveIcon {
-  background-image: var(--jp-icon-save);
-}
-
 .jp-SettingsIcon {
   background-image: var(--jp-icon-settings);
 }
 
-.jp-StopIcon {
-  background-image: var(--jp-icon-stop);
-}
-
 .jp-TextEditorIcon {
   background-image: var(--jp-icon-text-editor);
 }

packages/apputils/src/toolbar.tsx

@@ -5,7 +5,7 @@ import { UseSignal, ReactWidget } from './vdom';
 
 import { Kernel } from '@jupyterlab/services';
 
-import { Button } from '@jupyterlab/ui-components';
+import { Button, DefaultIconReact } from '@jupyterlab/ui-components';
 
 import { IIterator, find, map, some } from '@phosphor/algorithm';
 
@@ -468,11 +468,13 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) {
       minimal
     >
       {props.iconClassName && (
-        <span
-          className={
-            props.iconClassName +
-            ' jp-ToolbarButtonComponent-icon jp-Icon jp-Icon-16'
-          }
+        <DefaultIconReact
+          name={`${props.iconClassName} jp-Icon jp-Icon-16`}
+          className={'jp-ToolbarButtonComponent-icon'}
+          fallback={true}
+          center={true}
+          kind={'toolbarButton'}
+          tag={'span'}
         />
       )}
       {props.label && (

packages/filebrowser/src/listing.ts

@@ -1765,22 +1765,23 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
-        // add icon as svg node. Can be styled using CSS
-        if (
-          !this._iconRegistry.icon({
+        // TODO: remove workaround if...else/code in else clause in v2.0.0
+        // workaround for 1.0.x versions of Jlab pulling in 1.1.x versions of filebrowser
+        if (this._iconRegistry) {
+          // add icon as svg node. Can be styled using CSS
+          this._iconRegistry.icon({
             name: fileType.iconClass,
             className: ITEM_ICON_CLASS,
             title: fileType.iconLabel,
+            fallback: true,
             container: icon,
             center: true,
             kind: 'listing'
-          })
-        ) {
+          });
+        } else {
           // add icon as CSS background image. Can't be styled using CSS
           icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
           icon.textContent = fileType.iconLabel || '';
-          // clean up the svg icon annotation, if any
-          delete icon.dataset.icon;
         }
       } else {
         // use default icon as CSS background image

packages/launcher/src/index.tsx

@@ -425,16 +425,15 @@ function Card(
             </div>
           )}
         </div>
-      ) : defaultIconRegistry.contains(iconClass) ? (
-        <DefaultIconReact
-          name={iconClass}
-          className={''}
-          center={true}
-          kind={'launcherCard'}
-        />
       ) : (
         <div className="jp-LauncherCard-icon">
-          <div className={`${iconClass} jp-Launcher-icon`} />
+          <DefaultIconReact
+            name={`${iconClass} jp-Launcher-icon`}
+            className={''}
+            fallback={true}
+            center={true}
+            kind={'launcherCard'}
+          />
         </div>
       )}
       <div className="jp-LauncherCard-label" title={title}>

packages/statusbar/src/deprecated.tsx

@@ -0,0 +1,52 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file is a workaround for 1.0.x versions of Jlab pulling in 1.1.x
+versions of statusbar.
+TODO: delete this file in Jlab 2.0
+*/
+
+import * as React from 'react';
+
+import { classes, style } from 'typestyle/lib';
+
+import { NestedCSSProperties } from 'typestyle/lib/types';
+
+const icon = (): NestedCSSProperties => {
+  return {
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: '18px',
+    minHeight: '24px',
+    width: '20px'
+  };
+};
+
+/**
+ * (DEPRECATED) A namespace for IconItem statics.
+ */
+export namespace IconItem {
+  /**
+   * Props for an IconItem
+   */
+  export interface IProps {
+    /**
+     * A CSS class name for the icon.
+     */
+    source: string;
+  }
+}
+
+/**
+ * (DEPRECATED) A functional tsx component for an icon.
+ */
+export function IconItem(
+  props: IconItem.IProps & React.HTMLAttributes<HTMLDivElement>
+): React.ReactElement<IconItem.IProps> {
+  const { source, className, ...rest } = props;
+  return (
+    <div className={classes(className, source, style(icon()))} {...rest} />
+  );
+}

packages/statusbar/src/index.ts

@@ -3,8 +3,10 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-export * from './statusbar';
-export * from './style/statusbar';
 export * from './components';
 export * from './defaults';
+export * from './style/statusbar';
+
+export * from './deprecated';
+export * from './statusbar';
 export * from './tokens';

packages/statusbar/src/style/variables.ts

@@ -12,9 +12,6 @@ export default {
   textClickColor: 'white',
   itemMargin: '2px',
   itemPadding: '6px',
-  textIconHalfSpacing: '3px',
   statusBarPadding: '10px',
-  iconImageSize: '18px',
-  iconWidth: '20px',
   interItemHalfSpacing: '2px' // this amount accounts for half the spacing between items
 };