simplification

packages/ui-components/src/icon/lineForm.tsx → packages/statusbar/src/components/lineForm.tsx

@@ -9,8 +9,6 @@ import {
   lineFormButton
 } from '../style/lineForm';
 
-import LineFormSvg from '../../style/icons/line-form.svg';
-
 /**
  * A namespace for LineFormButtonItem statics.
  */
@@ -36,7 +34,7 @@ export namespace LineFormButtonItem {
   }
 }
 
-export function GenericButton(
+export function LineFormButtonItem(
   props: LineFormButtonItem.IProps &
     React.HTMLAttributes<SVGElement> &
     React.HTMLAttributes<HTMLInputElement>
@@ -49,10 +47,3 @@ export function GenericButton(
     </div>
   );
 }
-
-export function LineFormButton(
-  props: { type: string; value: string } & React.HTMLAttributes<SVGElement> &
-    React.HTMLAttributes<HTMLInputElement>
-): React.ReactElement<LineFormButtonItem.IProps> {
-  return <GenericButton SVG={LineFormSvg} {...props} />;
-}

packages/statusbar/src/defaults/lineCol.tsx

@@ -7,7 +7,7 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { LineFormButton } from '@jupyterlab/ui-components';
+import { LineFormSvg } from '@jupyterlab/ui-components';
 
 import { classes } from 'typestyle/lib';
 
@@ -21,6 +21,8 @@ import {
   lineFormCaption
 } from '../style/lineForm';
 
+import { LineFormButtonItem } from '../components/lineForm';
+
 /**
  * A namespace for LineFormComponent statics.
  */
@@ -112,7 +114,7 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-            <LineFormButton type="submit" value="" />
+            <LineFormButtonItem SVG={LineFormSvg} type="submit" value="" />
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}

packages/statusbar/src/style/lineForm.ts

@@ -35,6 +35,29 @@ export const baseLineForm: NestedCSSProperties = {
   right: '0px'
 };
 
+export const lineFormButtonDiv = style(baseLineForm, {
+  top: '4px',
+  right: '8px',
+  height: '24px',
+  padding: '0px 12px',
+  width: '12px'
+});
+
+export const lineFormButtonIcon = style(baseLineForm, {
+  backgroundColor: 'var(--jp-brand-color1)',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: '4px 6px'
+});
+
+export const lineFormButton = style(baseLineForm, {
+  backgroundColor: 'transparent',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box'
+});
+
 export const lineFormWrapper = style({
   overflow: 'hidden',
   padding: '0px 8px',

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

@@ -10,6 +10,7 @@ import icon from '../style/icon';
 // icon svg imports
 
 import KernelSvg from '../../style/icons/kernel-icon.svg';
+import _LineFormSvg from '../../style/icons/line-form.svg';
 import TerminalSvg from '../../style/icons/terminal-icon.svg';
 
 // functions for setting up icons
@@ -49,4 +50,5 @@ export function IconFactory(
 // functions that produce the actual icon React elements
 
 export const KernelIcon = IconFactory({ Svg: KernelSvg });
+export const LineFormSvg = _LineFormSvg;
 export const TerminalIcon = IconFactory({ Svg: TerminalSvg });

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

@@ -2,4 +2,3 @@
 // Distributed under the terms of the Modified BSD License.
 
 export * from './icon';
-export * from './lineForm';