From bdb632c63fb5acb49de8b5878b273ed6138cde57 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 16:13:48 -0400 Subject: [PATCH 01/14] added fallback flag to `icon`, moved toolbar to new icon handling also added some docstrings to the icon-related interfaces --- packages/apputils/src/toolbar.tsx | 13 ++-- packages/launcher/src/index.tsx | 15 ++-- .../ui-components/src/icon/iconregistry.tsx | 71 ++++++++++++++++--- packages/ui-components/src/icon/interfaces.ts | 36 ++++++++++ 4 files changed, 113 insertions(+), 22 deletions(-) diff --git a/packages/apputils/src/toolbar.tsx b/packages/apputils/src/toolbar.tsx index 31514550d848..5dc1ec589f6a 100644 --- a/packages/apputils/src/toolbar.tsx +++ b/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,12 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) { minimal > {props.iconClassName && ( - )} {props.label && ( diff --git a/packages/launcher/src/index.tsx b/packages/launcher/src/index.tsx index 021fefa89f76..0e0f2abb029c 100644 --- a/packages/launcher/src/index.tsx +++ b/packages/launcher/src/index.tsx @@ -425,16 +425,15 @@ function Card( )} - ) : defaultIconRegistry.contains(iconClass) ? ( - ) : (
-
+
)}
diff --git a/packages/ui-components/src/icon/iconregistry.tsx b/packages/ui-components/src/icon/iconregistry.tsx index 9699a946a4c8..99c1ef2a9152 100644 --- a/packages/ui-components/src/icon/iconregistry.tsx +++ b/packages/ui-components/src/icon/iconregistry.tsx @@ -42,7 +42,7 @@ export class IconRegistry implements IIconRegistry { } contains(name: string): boolean { - return name in this._svg || name in this._classNameToName; + return !!this._resolveName(name); } /** @@ -51,21 +51,47 @@ export class IconRegistry implements IIconRegistry { icon( props: Icon.INodeOptions & { container?: HTMLElement } ): HTMLElement | null { - const { name, className, title, container, ...propsStyle } = props; + const { + name, + className, + title, + fallback, + container, + ...propsStyle + } = props; // we may have been handed a className in place of name let resolvedName = this.resolveName(name); if (!resolvedName) { - // bail if failing silently or icon node is already set + // TODO: remove fallback in jlab 2.0 + if (fallback) { + if (container) { + container.textContent = title || ''; + container.className = classes( + name, + className, + propsStyle ? iconStyleFlat(propsStyle) : '' + ); + return container; + } else { + // the non-container fallback isn't implemented + console.error('unimplemented'); + return null; + } + } + + // bail if failing silently return null; } + + // check if icon element is already set if ( container && container.dataset.icon && container.dataset.icon === resolvedName && container.children[0] ) { - // return the existing icon node + // return the existing icon element return container.children[0] as HTMLElement; } @@ -112,12 +138,27 @@ export class IconRegistry implements IIconRegistry { iconReact( props: Icon.INodeOptions & { tag?: 'div' | 'span' } ): React.ReactElement { - const { name, className, title, tag, ...propsStyle } = props; + const { name, className, title, fallback, tag, ...propsStyle } = props; const Tag = tag || 'div'; // we may have been handed a className in place of name const resolvedName = this.resolveName(name); if (!resolvedName) { + // TODO: remove fallback in jlab 2.0 + if (fallback) { + return ( + + {title || ''} + + ); + } + // bail if failing silently return <>; } @@ -129,6 +170,10 @@ export class IconRegistry implements IIconRegistry { return <>; } + if (title) { + Private.setTitleSvg(svgElement, title); + } + return ( 'jp-FooBarIcon' + */ className?: string; + + /** + * A string containing the html corresponding to an SVG element + */ svg: string; } @@ -56,8 +68,32 @@ export namespace Icon { * The options used when creating an icon node */ export interface INodeOptions extends IIconStyle { + /** + * The icon name. For a 'foo-bar.svg' file, the icon name is 'foo-bar'. + * For backwards compatibility, 'jp-FooBarIcon' is also a valid icon name. + * + * TODO: until Jlab 2.0 + * If fallback is set, the name is added to the className + * of the resulting icon node + */ name: string; + + /** + * Extra classNames, used in addition to the typestyle className + */ className?: string; + + /** + * Icon title + */ title?: string; + + /** + * If true, if icon name resolution fails, fallback to old + * icon handling behavior. + * + * TODO: remove in Jlab 2.0 + */ + fallback?: boolean; } } From 438436278436ae77fb62f90637ad49f080c8d161 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 17:01:35 -0400 Subject: [PATCH 02/14] fixed up icon fallback in listing --- packages/filebrowser/src/listing.ts | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index 8e2604fbd166..fb5e545f317f 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1809,22 +1809,15 @@ export namespace DirListing { if (fileType) { // add icon as svg node. Can be styled using CSS - if ( - !this._iconRegistry.icon({ - name: fileType.iconClass, - className: ITEM_ICON_CLASS, - title: fileType.iconLabel, - container: icon, - center: true, - kind: 'listing' - }) - ) { - // 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; - } + this._iconRegistry.icon({ + name: fileType.iconClass, + className: ITEM_ICON_CLASS, + title: fileType.iconLabel, + fallback: true, + container: icon, + center: true, + kind: 'listing' + }); } else { // use default icon as CSS background image icon.className = ITEM_ICON_CLASS; From 0bc6d9f61470a5cfbf7c6075d5d899063b465578 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 17:39:02 -0400 Subject: [PATCH 03/14] migrated toolbar button svg files to `ui-components` --- .../ic_add_24px.svg => ui-components/style/icons/toolbar/add.svg} | 0 .../style/icons/md => ui-components/style/icons/toolbar}/copy.svg | 0 .../style/icons/md => ui-components/style/icons/toolbar}/cut.svg | 0 .../icons/md => ui-components/style/icons/toolbar}/paste.svg | 0 .../style/icons/toolbar/refresh.svg} | 0 .../style/icons/md => ui-components/style/icons/toolbar}/run.svg | 0 .../style/icons/md => ui-components/style/icons/toolbar}/save.svg | 0 .../style/icons/md => ui-components/style/icons/toolbar}/stop.svg | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename packages/{theme-light-extension/style/icons/md/ic_add_24px.svg => ui-components/style/icons/toolbar/add.svg} (100%) rename packages/{theme-light-extension/style/icons/md => ui-components/style/icons/toolbar}/copy.svg (100%) rename packages/{theme-light-extension/style/icons/md => ui-components/style/icons/toolbar}/cut.svg (100%) rename packages/{theme-light-extension/style/icons/md => ui-components/style/icons/toolbar}/paste.svg (100%) rename packages/{theme-light-extension/style/icons/md/ic_refresh_18px.svg => ui-components/style/icons/toolbar/refresh.svg} (100%) rename packages/{theme-light-extension/style/icons/md => ui-components/style/icons/toolbar}/run.svg (100%) rename packages/{theme-light-extension/style/icons/md => ui-components/style/icons/toolbar}/save.svg (100%) rename packages/{theme-light-extension/style/icons/md => ui-components/style/icons/toolbar}/stop.svg (100%) diff --git a/packages/theme-light-extension/style/icons/md/ic_add_24px.svg b/packages/ui-components/style/icons/toolbar/add.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/ic_add_24px.svg rename to packages/ui-components/style/icons/toolbar/add.svg diff --git a/packages/theme-light-extension/style/icons/md/copy.svg b/packages/ui-components/style/icons/toolbar/copy.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/copy.svg rename to packages/ui-components/style/icons/toolbar/copy.svg diff --git a/packages/theme-light-extension/style/icons/md/cut.svg b/packages/ui-components/style/icons/toolbar/cut.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/cut.svg rename to packages/ui-components/style/icons/toolbar/cut.svg diff --git a/packages/theme-light-extension/style/icons/md/paste.svg b/packages/ui-components/style/icons/toolbar/paste.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/paste.svg rename to packages/ui-components/style/icons/toolbar/paste.svg diff --git a/packages/theme-light-extension/style/icons/md/ic_refresh_18px.svg b/packages/ui-components/style/icons/toolbar/refresh.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/ic_refresh_18px.svg rename to packages/ui-components/style/icons/toolbar/refresh.svg diff --git a/packages/theme-light-extension/style/icons/md/run.svg b/packages/ui-components/style/icons/toolbar/run.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/run.svg rename to packages/ui-components/style/icons/toolbar/run.svg diff --git a/packages/theme-light-extension/style/icons/md/save.svg b/packages/ui-components/style/icons/toolbar/save.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/save.svg rename to packages/ui-components/style/icons/toolbar/save.svg diff --git a/packages/theme-light-extension/style/icons/md/stop.svg b/packages/ui-components/style/icons/toolbar/stop.svg similarity index 100% rename from packages/theme-light-extension/style/icons/md/stop.svg rename to packages/ui-components/style/icons/toolbar/stop.svg From baa37b0a7bf5cb1791dc0cba5d0180b4d98892c3 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 18:04:43 -0400 Subject: [PATCH 04/14] added toolbar icons to DefaultIconRegistry --- .../ui-components/src/icon/iconimports.ts | 18 ++++++++++- packages/ui-components/style/deprecated.css | 32 +++++++++++++++++++ .../ui-components/style/icons/toolbar/add.svg | 6 +++- .../style/icons/toolbar/copy.svg | 10 +++--- .../ui-components/style/icons/toolbar/cut.svg | 14 ++++---- .../style/icons/toolbar/paste.svg | 8 +++-- .../style/icons/toolbar/refresh.svg | 6 +++- .../ui-components/style/icons/toolbar/run.svg | 8 +++-- .../style/icons/toolbar/save.svg | 8 +++-- .../style/icons/toolbar/stop.svg | 8 +++-- 10 files changed, 93 insertions(+), 25 deletions(-) diff --git a/packages/ui-components/src/icon/iconimports.ts b/packages/ui-components/src/icon/iconimports.ts index 3a9151eae78a..c368090d0736 100644 --- a/packages/ui-components/src/icon/iconimports.ts +++ b/packages/ui-components/src/icon/iconimports.ts @@ -31,6 +31,14 @@ import lineFormSvg from '../../style/icons/statusbar/line-form.svg'; import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg'; import terminalSvg from '../../style/icons/statusbar/terminal.svg'; import trustedSvg from '../../style/icons/statusbar/trusted.svg'; +import addSvg from '../../style/icons/toolbar/add.svg'; +import copySvg from '../../style/icons/toolbar/copy.svg'; +import cutSvg from '../../style/icons/toolbar/cut.svg'; +import pasteSvg from '../../style/icons/toolbar/paste.svg'; +import refreshSvg from '../../style/icons/toolbar/refresh.svg'; +import runSvg from '../../style/icons/toolbar/run.svg'; +import saveSvg from '../../style/icons/toolbar/save.svg'; +import stopSvg from '../../style/icons/toolbar/stop.svg'; // defaultIcons definition export namespace IconImports { @@ -57,6 +65,14 @@ export namespace IconImports { { name: 'line-form', svg: lineFormSvg }, { name: 'not-trusted', svg: notTrustedSvg }, { name: 'terminal', svg: terminalSvg }, - { name: 'trusted', svg: trustedSvg } + { name: 'trusted', svg: trustedSvg }, + { name: 'add', svg: addSvg }, + { name: 'copy', svg: copySvg }, + { name: 'cut', svg: cutSvg }, + { name: 'paste', svg: pasteSvg }, + { name: 'refresh', svg: refreshSvg }, + { name: 'run', svg: runSvg }, + { name: 'save', svg: saveSvg }, + { name: 'stop', svg: stopSvg } ]; } diff --git a/packages/ui-components/style/deprecated.css b/packages/ui-components/style/deprecated.css index 70ec78758d03..c813a229be34 100644 --- a/packages/ui-components/style/deprecated.css +++ b/packages/ui-components/style/deprecated.css @@ -35,6 +35,14 @@ --jp-icon-not-trusted: url('icons/statusbar/not-trusted.svg'); --jp-icon-terminal: url('icons/statusbar/terminal.svg'); --jp-icon-trusted: url('icons/statusbar/trusted.svg'); + --jp-icon-add: url('icons/toolbar/add.svg'); + --jp-icon-copy: url('icons/toolbar/copy.svg'); + --jp-icon-cut: url('icons/toolbar/cut.svg'); + --jp-icon-paste: url('icons/toolbar/paste.svg'); + --jp-icon-refresh: url('icons/toolbar/refresh.svg'); + --jp-icon-run: url('icons/toolbar/run.svg'); + --jp-icon-save: url('icons/toolbar/save.svg'); + --jp-icon-stop: url('icons/toolbar/stop.svg'); } /* Icon CSS class declarations */ @@ -108,3 +116,27 @@ .jp-TrustedIcon { background-image: var(--jp-icon-trusted); } +.jp-AddIcon { + background-image: var(--jp-icon-add); +} +.jp-CopyIcon { + background-image: var(--jp-icon-copy); +} +.jp-CutIcon { + background-image: var(--jp-icon-cut); +} +.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-StopIcon { + background-image: var(--jp-icon-stop); +} diff --git a/packages/ui-components/style/icons/toolbar/add.svg b/packages/ui-components/style/icons/toolbar/add.svg index 2905c503bc5a..928b83f878a9 100644 --- a/packages/ui-components/style/icons/toolbar/add.svg +++ b/packages/ui-components/style/icons/toolbar/add.svg @@ -1 +1,5 @@ - \ No newline at end of file + + + diff --git a/packages/ui-components/style/icons/toolbar/copy.svg b/packages/ui-components/style/icons/toolbar/copy.svg index 61061a9df5b6..bebc64a422d9 100644 --- a/packages/ui-components/style/icons/toolbar/copy.svg +++ b/packages/ui-components/style/icons/toolbar/copy.svg @@ -1,6 +1,8 @@ - - - + + diff --git a/packages/ui-components/style/icons/toolbar/cut.svg b/packages/ui-components/style/icons/toolbar/cut.svg index 5a271c806353..5430ef9eee20 100644 --- a/packages/ui-components/style/icons/toolbar/cut.svg +++ b/packages/ui-components/style/icons/toolbar/cut.svg @@ -1,7 +1,9 @@ - - - - - - + + diff --git a/packages/ui-components/style/icons/toolbar/paste.svg b/packages/ui-components/style/icons/toolbar/paste.svg index 09a691dc69ca..47dc31c96706 100644 --- a/packages/ui-components/style/icons/toolbar/paste.svg +++ b/packages/ui-components/style/icons/toolbar/paste.svg @@ -1,4 +1,6 @@ - - - + + diff --git a/packages/ui-components/style/icons/toolbar/refresh.svg b/packages/ui-components/style/icons/toolbar/refresh.svg index 0f8143838d94..4d86c2788a70 100644 --- a/packages/ui-components/style/icons/toolbar/refresh.svg +++ b/packages/ui-components/style/icons/toolbar/refresh.svg @@ -1 +1,5 @@ - \ No newline at end of file + + + diff --git a/packages/ui-components/style/icons/toolbar/run.svg b/packages/ui-components/style/icons/toolbar/run.svg index daf8bc93be78..91483f031f81 100644 --- a/packages/ui-components/style/icons/toolbar/run.svg +++ b/packages/ui-components/style/icons/toolbar/run.svg @@ -1,4 +1,6 @@ - - - + + diff --git a/packages/ui-components/style/icons/toolbar/save.svg b/packages/ui-components/style/icons/toolbar/save.svg index f2c5385d60dd..cb3fad009ea2 100644 --- a/packages/ui-components/style/icons/toolbar/save.svg +++ b/packages/ui-components/style/icons/toolbar/save.svg @@ -1,4 +1,6 @@ - - - + + diff --git a/packages/ui-components/style/icons/toolbar/stop.svg b/packages/ui-components/style/icons/toolbar/stop.svg index 19d1bad72d15..1b12e6331e5a 100644 --- a/packages/ui-components/style/icons/toolbar/stop.svg +++ b/packages/ui-components/style/icons/toolbar/stop.svg @@ -1,4 +1,6 @@ - - - + + From 5d57872570519f7de8c87b15923ba215efdc1e9d Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 18:17:27 -0400 Subject: [PATCH 05/14] cleaned up redundant svg files in theme-dark --- packages/theme-dark-extension/style/icons/md/copy.svg | 6 ------ packages/theme-dark-extension/style/icons/md/cut.svg | 7 ------- .../theme-dark-extension/style/icons/md/ic_add_24px.svg | 1 - .../style/icons/md/ic_refresh_18px.svg | 1 - packages/theme-dark-extension/style/icons/md/paste.svg | 4 ---- packages/theme-dark-extension/style/icons/md/run.svg | 4 ---- packages/theme-dark-extension/style/icons/md/save.svg | 4 ---- packages/theme-dark-extension/style/icons/md/stop.svg | 4 ---- 8 files changed, 31 deletions(-) delete mode 100644 packages/theme-dark-extension/style/icons/md/copy.svg delete mode 100644 packages/theme-dark-extension/style/icons/md/cut.svg delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_add_24px.svg delete mode 100644 packages/theme-dark-extension/style/icons/md/ic_refresh_18px.svg delete mode 100644 packages/theme-dark-extension/style/icons/md/paste.svg delete mode 100644 packages/theme-dark-extension/style/icons/md/run.svg delete mode 100644 packages/theme-dark-extension/style/icons/md/save.svg delete mode 100644 packages/theme-dark-extension/style/icons/md/stop.svg diff --git a/packages/theme-dark-extension/style/icons/md/copy.svg b/packages/theme-dark-extension/style/icons/md/copy.svg deleted file mode 100644 index e1b59759d309..000000000000 --- a/packages/theme-dark-extension/style/icons/md/copy.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - diff --git a/packages/theme-dark-extension/style/icons/md/cut.svg b/packages/theme-dark-extension/style/icons/md/cut.svg deleted file mode 100644 index 1e3351b9dc12..000000000000 --- a/packages/theme-dark-extension/style/icons/md/cut.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/packages/theme-dark-extension/style/icons/md/ic_add_24px.svg b/packages/theme-dark-extension/style/icons/md/ic_add_24px.svg deleted file mode 100644 index cafb68718402..000000000000 --- a/packages/theme-dark-extension/style/icons/md/ic_add_24px.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/theme-dark-extension/style/icons/md/ic_refresh_18px.svg b/packages/theme-dark-extension/style/icons/md/ic_refresh_18px.svg deleted file mode 100644 index ee8a04ac9bc4..000000000000 --- a/packages/theme-dark-extension/style/icons/md/ic_refresh_18px.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/theme-dark-extension/style/icons/md/paste.svg b/packages/theme-dark-extension/style/icons/md/paste.svg deleted file mode 100644 index 0d7db4321fa6..000000000000 --- a/packages/theme-dark-extension/style/icons/md/paste.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/theme-dark-extension/style/icons/md/run.svg b/packages/theme-dark-extension/style/icons/md/run.svg deleted file mode 100644 index bce5f5218573..000000000000 --- a/packages/theme-dark-extension/style/icons/md/run.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/theme-dark-extension/style/icons/md/save.svg b/packages/theme-dark-extension/style/icons/md/save.svg deleted file mode 100644 index a7656f7c7755..000000000000 --- a/packages/theme-dark-extension/style/icons/md/save.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/theme-dark-extension/style/icons/md/stop.svg b/packages/theme-dark-extension/style/icons/md/stop.svg deleted file mode 100644 index 206aee20908e..000000000000 --- a/packages/theme-dark-extension/style/icons/md/stop.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - From b255f23c7971552cee5ad3c2b7098f2b9c2f27c9 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 18:17:56 -0400 Subject: [PATCH 06/14] fixed up msgs generated by `ensureFile` --- buildutils/src/ensure-package.ts | 33 ++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts index f4665ada0cd4..d7615bc79a0e 100644 --- a/buildutils/src/ensure-package.ts +++ b/buildutils/src/ensure-package.ts @@ -457,7 +457,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 +469,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; From 4e3b39403b698f8416d185a66ef810bbdd3a84b8 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 18:19:21 -0400 Subject: [PATCH 07/14] removed old CSS for toolbar icon background svgs --- packages/application/style/icons.css | 64 +++++++++---------- packages/theme-dark-extension/style/urls.css | 8 --- packages/theme-light-extension/style/urls.css | 17 ++--- 3 files changed, 41 insertions(+), 48 deletions(-) diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css index a21e91197379..58a9e604aad2 100644 --- a/packages/application/style/icons.css +++ b/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); } @@ -390,3 +358,35 @@ .jp-VegaIcon { background-image: var(--jp-icon-vega); } + +/*.jp-AddIcon {*/ +/* background-image: var(--jp-icon-add);*/ +/*}*/ + +/*.jp-CutIcon {*/ +/* background-image: var(--jp-icon-cut);*/ +/*}*/ + +/*.jp-CopyIcon {*/ +/* background-image: var(--jp-icon-copy);*/ +/*}*/ + +/*.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-StopIcon {*/ +/* background-image: var(--jp-icon-stop);*/ +/*}*/ diff --git a/packages/theme-dark-extension/style/urls.css b/packages/theme-dark-extension/style/urls.css index fde04072bfbe..fc1e2f5ba40d 100644 --- a/packages/theme-dark-extension/style/urls.css +++ b/packages/theme-dark-extension/style/urls.css @@ -30,7 +30,6 @@ --jp-about-header-logo: url('icons/jupyter/jupyter.svg'); --jp-about-header-wordmark: url('images/jupyterlab-wordmark.svg'); - --jp-icon-add: url('icons/md/ic_add_24px.svg'); --jp-icon-bug: url('icons/md/bug.svg'); --jp-icon-caretdown: url('icons/md/caretdown.svg'); --jp-icon-caretleft: url('icons/md/caretleft.svg'); @@ -43,8 +42,6 @@ --jp-icon-close: url('icons/md/close.svg'); --jp-icon-console-selected: url('icons/jupyter/console_selected.svg'); --jp-icon-console: url('icons/jupyter/console.svg'); - --jp-icon-copy: url('icons/md/copy.svg'); - --jp-icon-cut: url('icons/md/cut.svg'); --jp-icon-download: url('icons/md/download.svg'); --jp-icon-edit: url('icons/md/edit.svg'); --jp-icon-ellipses: url('icons/md/ellipses.svg'); @@ -64,10 +61,6 @@ --jp-icon-link: url('icons/md/link.svg'); --jp-icon-more: url('icons/md/more-horiz.svg'); --jp-icon-new-folder: url('icons/md/ic_create_new_folder_24px.svg'); - --jp-icon-paste: url('icons/md/paste.svg'); - --jp-icon-refresh: url('icons/md/ic_refresh_18px.svg'); - --jp-icon-run: url('icons/md/run.svg'); - --jp-icon-save: url('icons/md/save.svg'); --jp-icon-search-white: url('icons/md/search.svg'); --jp-icon-search: url('icons/md/search.svg'); --jp-icon-search-arrow-up: url('icons/jupyter/search_arrow_up.svg'); @@ -76,7 +69,6 @@ --jp-icon-search-regex: url('icons/jupyter/search_regex.svg'); --jp-icon-settings-selected: url('icons/md/ic_settings_24px_selected.svg'); --jp-icon-settings: url('icons/md/ic_settings_24px.svg'); - --jp-icon-stop: url('icons/md/stop.svg'); --jp-icon-stop-circle: url('icons/md/stop-circle.svg'); --jp-icon-text-editor-selected: url('icons/md/ic_format_align_left_24px_selected.svg'); --jp-icon-text-editor: url('icons/md/ic_format_align_left_24px.svg'); diff --git a/packages/theme-light-extension/style/urls.css b/packages/theme-light-extension/style/urls.css index caf70dd34f84..e44000b8b805 100644 --- a/packages/theme-light-extension/style/urls.css +++ b/packages/theme-light-extension/style/urls.css @@ -30,7 +30,6 @@ --jp-about-header-logo: url('icons/jupyter/jupyter.svg'); --jp-about-header-wordmark: url('images/jupyterlab-wordmark.svg'); - --jp-icon-add: url('icons/md/ic_add_24px.svg'); --jp-icon-bug: url('icons/md/bug.svg'); --jp-icon-caretdown: url('icons/md/caretdown.svg'); --jp-icon-caretleft: url('icons/md/caretleft.svg'); @@ -43,8 +42,6 @@ --jp-icon-close: url('icons/md/close.svg'); --jp-icon-console-selected: url('icons/jupyter/console_selected.svg'); --jp-icon-console: url('icons/jupyter/console.svg'); - --jp-icon-copy: url('icons/md/copy.svg'); - --jp-icon-cut: url('icons/md/cut.svg'); --jp-icon-download: url('icons/md/download.svg'); --jp-icon-edit: url('icons/md/edit.svg'); --jp-icon-ellipses: url('icons/md/ellipses.svg'); @@ -64,10 +61,6 @@ --jp-icon-link: url('icons/md/link.svg'); --jp-icon-more: url('icons/md/more-horiz.svg'); --jp-icon-new-folder: url('icons/md/ic_create_new_folder_24px.svg'); - --jp-icon-paste: url('icons/md/paste.svg'); - --jp-icon-refresh: url('icons/md/ic_refresh_18px.svg'); - --jp-icon-run: url('icons/md/run.svg'); - --jp-icon-save: url('icons/md/save.svg'); --jp-icon-search-white: url('icons/md/search-white.svg'); --jp-icon-search: url('icons/md/search.svg'); --jp-icon-search-arrow-up: url('icons/jupyter/search_arrow_up.svg'); @@ -76,10 +69,18 @@ --jp-icon-search-regex: url('icons/jupyter/search_regex.svg'); --jp-icon-settings-selected: url('icons/md/ic_settings_24px_selected.svg'); --jp-icon-settings: url('icons/md/ic_settings_24px.svg'); - --jp-icon-stop: url('icons/md/stop.svg'); --jp-icon-stop-circle: url('icons/md/stop-circle.svg'); --jp-icon-text-editor-selected: url('icons/md/ic_format_align_left_24px_selected.svg'); --jp-icon-text-editor: url('icons/md/ic_format_align_left_24px.svg'); --jp-icon-undo: url('icons/md/undo.svg'); --jp-icon-vega: url('icons/jupyter/vega.svg'); } + +/*--jp-icon-add: url('icons/md/ic_add_24px.svg');*/ +/*--jp-icon-copy: url('icons/md/copy.svg');*/ +/*--jp-icon-cut: url('icons/md/cut.svg');*/ +/*--jp-icon-paste: url('icons/md/paste.svg');*/ +/*--jp-icon-refresh: url('icons/md/ic_refresh_18px.svg');*/ +/*--jp-icon-run: url('icons/md/run.svg');*/ +/*--jp-icon-save: url('icons/md/save.svg');*/ +/*--jp-icon-stop: url('icons/md/stop.svg');*/ From 816948c7f92f7ab1143805e466f9a32d42fe7156 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 18:20:17 -0400 Subject: [PATCH 08/14] cleanup --- packages/application/style/icons.css | 32 ------------------- packages/theme-light-extension/style/urls.css | 9 ------ 2 files changed, 41 deletions(-) diff --git a/packages/application/style/icons.css b/packages/application/style/icons.css index 58a9e604aad2..569cd0e4b676 100644 --- a/packages/application/style/icons.css +++ b/packages/application/style/icons.css @@ -358,35 +358,3 @@ .jp-VegaIcon { background-image: var(--jp-icon-vega); } - -/*.jp-AddIcon {*/ -/* background-image: var(--jp-icon-add);*/ -/*}*/ - -/*.jp-CutIcon {*/ -/* background-image: var(--jp-icon-cut);*/ -/*}*/ - -/*.jp-CopyIcon {*/ -/* background-image: var(--jp-icon-copy);*/ -/*}*/ - -/*.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-StopIcon {*/ -/* background-image: var(--jp-icon-stop);*/ -/*}*/ diff --git a/packages/theme-light-extension/style/urls.css b/packages/theme-light-extension/style/urls.css index e44000b8b805..36c5c3841128 100644 --- a/packages/theme-light-extension/style/urls.css +++ b/packages/theme-light-extension/style/urls.css @@ -75,12 +75,3 @@ --jp-icon-undo: url('icons/md/undo.svg'); --jp-icon-vega: url('icons/jupyter/vega.svg'); } - -/*--jp-icon-add: url('icons/md/ic_add_24px.svg');*/ -/*--jp-icon-copy: url('icons/md/copy.svg');*/ -/*--jp-icon-cut: url('icons/md/cut.svg');*/ -/*--jp-icon-paste: url('icons/md/paste.svg');*/ -/*--jp-icon-refresh: url('icons/md/ic_refresh_18px.svg');*/ -/*--jp-icon-run: url('icons/md/run.svg');*/ -/*--jp-icon-save: url('icons/md/save.svg');*/ -/*--jp-icon-stop: url('icons/md/stop.svg');*/ From 956c7440f30f797e5194388e9b8454491a148580 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 18:24:44 -0400 Subject: [PATCH 09/14] added 'toolbarButton' icon styling kind --- packages/apputils/src/toolbar.tsx | 1 + packages/ui-components/src/style/icon.ts | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/packages/apputils/src/toolbar.tsx b/packages/apputils/src/toolbar.tsx index 5dc1ec589f6a..f614b866a1f7 100644 --- a/packages/apputils/src/toolbar.tsx +++ b/packages/apputils/src/toolbar.tsx @@ -473,6 +473,7 @@ export function ToolbarButtonComponent(props: ToolbarButtonComponent.IProps) { className={'jp-ToolbarButtonComponent-icon'} fallback={true} center={true} + kind={'toolbarButton'} tag={'span'} /> )} diff --git a/packages/ui-components/src/style/icon.ts b/packages/ui-components/src/style/icon.ts index b4f9910eec7f..f509f2a0da93 100644 --- a/packages/ui-components/src/style/icon.ts +++ b/packages/ui-components/src/style/icon.ts @@ -26,6 +26,7 @@ export type IconKindType = | 'splash' | 'statusBar' | 'tabManager' + | 'toolbarButton' | 'unset'; export interface IIconStyle extends NestedCSSProperties { @@ -126,6 +127,11 @@ const iconCSSTabManager: NestedCSSProperties = { width: '16px' }; +const iconCSSToolbarButton: NestedCSSProperties = { + height: '16px', + width: '16px' +}; + const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = { breadCrumb: iconCSSBreadCrumb, dockPanelBar: iconCSSDockPanelBar, @@ -137,6 +143,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = { splash: iconCSSSplash, statusBar: iconCSSStatusBar, tabManager: iconCSSTabManager, + toolbarButton: iconCSSToolbarButton, unset: {} }; @@ -194,6 +201,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = { splash: containerCSSSplash, statusBar: {}, tabManager: containerCSSTabManager, + toolbarButton: {}, unset: {} }; From 09663dfc2181b4c0f038147bfb4d99d93225b061 Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 19:15:26 -0400 Subject: [PATCH 10/14] fixed up toolbar icon-related unittests --- tests/test-apputils/src/toolbar.spec.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/test-apputils/src/toolbar.spec.ts b/tests/test-apputils/src/toolbar.spec.ts index 6f079b9852be..8ff2347957ea 100644 --- a/tests/test-apputils/src/toolbar.spec.ts +++ b/tests/test-apputils/src/toolbar.spec.ts @@ -286,20 +286,20 @@ describe('@jupyterlab/apputils', () => { }); describe('.createInterruptButton()', () => { - it("should have the `'jp-StopIcon'` class", async () => { + it("should add an inline svg node with the 'stop' icon", async () => { const button = Toolbar.createInterruptButton(session); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-StopIcon')).to.exist; + expect(button.node.querySelector("[data-icon='stop']")).to.exist; }); }); describe('.createRestartButton()', () => { - it("should have the `'jp-RefreshIcon'` class", async () => { + it("should add an inline svg node with the 'refresh' icon", async () => { const button = Toolbar.createRestartButton(session); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-RefreshIcon')).to.exist; + expect(button.node.querySelector("[data-icon='refresh']")).to.exist; }); }); From 224c7e1a80a32b23640d1343616922a649ccb0ff Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 19:54:30 -0400 Subject: [PATCH 11/14] fixed up toolbar unittests in `test-notebook` --- .../test-notebook/src/default-toolbar.spec.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/tests/test-notebook/src/default-toolbar.spec.ts b/tests/test-notebook/src/default-toolbar.spec.ts index a80329a14fb5..e895ad6fe413 100644 --- a/tests/test-notebook/src/default-toolbar.spec.ts +++ b/tests/test-notebook/src/default-toolbar.spec.ts @@ -58,11 +58,11 @@ describe('@jupyterlab/notebook', () => { button.dispose(); }); - it("should have the `'jp-SaveIcon'` class", async () => { + it("should add an inline svg node with the 'save' icon", async () => { const button = ToolbarItems.createSaveButton(panel); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-SaveIcon')).to.exist; + expect(button.node.querySelector("[data-icon='save']")).to.exist; }); }); @@ -77,11 +77,11 @@ describe('@jupyterlab/notebook', () => { button.dispose(); }); - it("should have the `'jp-AddIcon'` class", async () => { + it("should add an inline svg node with the 'add' icon", async () => { const button = ToolbarItems.createInsertButton(panel); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-AddIcon')).to.exist; + expect(button.node.querySelector("[data-icon='add']")).to.exist; button.dispose(); }); }); @@ -100,11 +100,11 @@ describe('@jupyterlab/notebook', () => { button.dispose(); }); - it("should have the `'jp-CutIcon'` class", async () => { + it("should add an inline svg node with the 'cut' icon", async () => { const button = ToolbarItems.createCutButton(panel); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-CutIcon')).to.exist; + expect(button.node.querySelector("[data-icon='cut']")).to.exist; button.dispose(); }); }); @@ -123,11 +123,11 @@ describe('@jupyterlab/notebook', () => { button.dispose(); }); - it("should have the `'jp-CopyIcon'` class", async () => { + it("should add an inline svg node with the 'copy' icon", async () => { const button = ToolbarItems.createCopyButton(panel); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-CopyIcon')).to.exist; + expect(button.node.querySelector("[data-icon='copy']")).to.exist; button.dispose(); }); }); @@ -145,11 +145,11 @@ describe('@jupyterlab/notebook', () => { button.dispose(); }); - it("should have the `'jp-PasteIcon'` class", async () => { + it("should add an inline svg node with the 'paste' icon", async () => { const button = ToolbarItems.createPasteButton(panel); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-PasteIcon')).to.exist; + expect(button.node.querySelector("[data-icon='paste']")).to.exist; button.dispose(); }); }); @@ -270,11 +270,11 @@ describe('@jupyterlab/notebook', () => { await p.promise; }).timeout(30000); // Allow for slower CI - it("should have the `'jp-RunIcon'` class", async () => { + it("should add an inline svg node with the 'run' icon", async () => { const button = ToolbarItems.createRunButton(panel); Widget.attach(button, document.body); await framePromise(); - expect(button.node.querySelector('.jp-RunIcon')).to.exist; + expect(button.node.querySelector("[data-icon='run']")).to.exist; }); }); }); From f8642d9958405d43d59919be2e67e182ed6013de Mon Sep 17 00:00:00 2001 From: telamonian Date: Wed, 11 Sep 2019 20:01:21 -0400 Subject: [PATCH 12/14] optionally replace `import` -> `require` when generating iconimports.ts --- buildutils/src/ensure-package.ts | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/buildutils/src/ensure-package.ts b/buildutils/src/ensure-package.ts index d7615bc79a0e..04999b0c5cf0 100644 --- a/buildutils/src/ensure-package.ts +++ b/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 { +export async function ensureUiComponents( + pkgPath: string, + dorequire: boolean = false +): Promise { const funcName = 'ensureUiComponents'; let messages: string[] = []; @@ -347,14 +352,23 @@ export async function ensureUiComponents(pkgPath: string): Promise { 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'); From 0d59934b3ad59bd9d9bd49df50ae7f7db15be2d6 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 13 Sep 2019 22:13:08 -0400 Subject: [PATCH 13/14] fixes #7189, jupyterlab/jupyterlab-git#411 --- packages/filebrowser/src/listing.ts | 28 +++++++----- packages/statusbar/src/deprecated.tsx | 52 +++++++++++++++++++++++ packages/statusbar/src/index.ts | 6 ++- packages/statusbar/src/style/icon.ts | 15 ------- packages/statusbar/src/style/variables.ts | 3 -- 5 files changed, 74 insertions(+), 30 deletions(-) create mode 100644 packages/statusbar/src/deprecated.tsx delete mode 100644 packages/statusbar/src/style/icon.ts diff --git a/packages/filebrowser/src/listing.ts b/packages/filebrowser/src/listing.ts index fb5e545f317f..d04f0ab5ff5f 100644 --- a/packages/filebrowser/src/listing.ts +++ b/packages/filebrowser/src/listing.ts @@ -1808,16 +1808,24 @@ export namespace DirListing { let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS); if (fileType) { - // 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' - }); + // 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 || ''; + } } else { // use default icon as CSS background image icon.className = ITEM_ICON_CLASS; diff --git a/packages/statusbar/src/deprecated.tsx b/packages/statusbar/src/deprecated.tsx new file mode 100644 index 000000000000..e6e894010f7e --- /dev/null +++ b/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' + }; +}; + +/** + * A namespace for IconItem statics. + */ +export namespace IconItem { + /** + * Props for an IconItem + */ + export interface IProps { + /** + * A CSS class name for the icon. + */ + source: string; + } +} + +/** + * A functional tsx component for an icon. + */ +export function IconItem( + props: IconItem.IProps & React.HTMLAttributes +): React.ReactElement { + const { source, className, ...rest } = props; + return ( +
+ ); +} diff --git a/packages/statusbar/src/index.ts b/packages/statusbar/src/index.ts index 4455c9b240cc..60ebbd28c883 100644 --- a/packages/statusbar/src/index.ts +++ b/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'; diff --git a/packages/statusbar/src/style/icon.ts b/packages/statusbar/src/style/icon.ts deleted file mode 100644 index f65da7124bd1..000000000000 --- a/packages/statusbar/src/style/icon.ts +++ /dev/null @@ -1,15 +0,0 @@ -// Copyright (c) Jupyter Development Team. -// Distributed under the terms of the Modified BSD License. - -import vars from './variables'; -import { NestedCSSProperties } from 'typestyle/lib/types'; - -export default (): NestedCSSProperties => { - return { - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundSize: vars.iconImageSize, - minHeight: vars.height, - width: vars.iconWidth - }; -}; diff --git a/packages/statusbar/src/style/variables.ts b/packages/statusbar/src/style/variables.ts index 740034fd49aa..8ae02561a2ab 100644 --- a/packages/statusbar/src/style/variables.ts +++ b/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 }; From 3220cf96b7021ed9ab995055efd1d5b18b3ca806 Mon Sep 17 00:00:00 2001 From: telamonian Date: Fri, 13 Sep 2019 23:19:46 -0400 Subject: [PATCH 14/14] fix to deprecated docstrings --- packages/statusbar/src/deprecated.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/statusbar/src/deprecated.tsx b/packages/statusbar/src/deprecated.tsx index e6e894010f7e..8be4627b2551 100644 --- a/packages/statusbar/src/deprecated.tsx +++ b/packages/statusbar/src/deprecated.tsx @@ -25,7 +25,7 @@ const icon = (): NestedCSSProperties => { }; /** - * A namespace for IconItem statics. + * (DEPRECATED) A namespace for IconItem statics. */ export namespace IconItem { /** @@ -40,7 +40,7 @@ export namespace IconItem { } /** - * A functional tsx component for an icon. + * (DEPRECATED) A functional tsx component for an icon. */ export function IconItem( props: IconItem.IProps & React.HTMLAttributes