From 2eef47ee30d57dbc9598ad03246b432d2a87e7c9 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Wed, 23 Jan 2019 11:12:46 -0800
Subject: [PATCH] [NumericInput] new rightElement prop

---
 .../core/src/components/forms/numericInput.tsx   | 16 +++++++++++-----
 .../core/test/controls/numericInputTests.tsx     | 12 ++++++++----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx
index f9bab4c3d68..b99fe87e0b7 100644
--- a/packages/core/src/components/forms/numericInput.tsx
+++ b/packages/core/src/components/forms/numericInput.tsx
@@ -85,9 +85,6 @@ export interface INumericInputProps extends IIntentProps, IProps {
      */
     leftIcon?: IconName | MaybeElement;
 
-    /** The placeholder text in the absence of any value. */
-    placeholder?: string;
-
     /**
      * The increment between successive values when <kbd>shift</kbd> is held.
      * Pass explicit `null` value to disable this interaction.
@@ -108,6 +105,15 @@ export interface INumericInputProps extends IIntentProps, IProps {
      */
     minorStepSize?: number | null;
 
+    /** The placeholder text in the absence of any value. */
+    placeholder?: string;
+
+    /**
+     * Element to render on right side of input.
+     * For best results, use a minimal button, tag, or small spinner.
+     */
+    rightElement?: JSX.Element;
+
     /**
      * Whether the entire text field should be selected on focus.
      * @default false
@@ -147,12 +153,11 @@ enum IncrementDirection {
     UP = +1,
 }
 
-const NON_HTML_PROPS = [
+const NON_HTML_PROPS: Array<keyof INumericInputProps> = [
     "allowNumericCharactersOnly",
     "buttonPosition",
     "clampValueOnBlur",
     "className",
-    "large",
     "majorStepSize",
     "minorStepSize",
     "onButtonClick",
@@ -301,6 +306,7 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & INumeri
                 onKeyDown={this.handleInputKeyDown}
                 onKeyPress={this.handleInputKeyPress}
                 onPaste={this.handleInputPaste}
+                rightElement={this.props.rightElement}
                 value={this.state.value}
             />
         );
diff --git a/packages/core/test/controls/numericInputTests.tsx b/packages/core/test/controls/numericInputTests.tsx
index 27393201061..c4b4ed06296 100644
--- a/packages/core/test/controls/numericInputTests.tsx
+++ b/packages/core/test/controls/numericInputTests.tsx
@@ -820,10 +820,9 @@ describe("<NumericInput>", () => {
         });
 
         it("shows a left icon if provided", () => {
-            const leftIcon = mount(<NumericInput leftIcon="variable" />)
-                .find(Icon)
-                .first();
-            expect(leftIcon.text()).to.equal("variable");
+            const component = mount(<NumericInput leftIcon="variable" />);
+            const icon = component.find(InputGroup).find(Icon);
+            expect(icon.prop("icon")).to.equal("variable");
         });
 
         it("shows placeholder text if provided", () => {
@@ -835,6 +834,11 @@ describe("<NumericInput>", () => {
             expect(placeholderText).to.equal("Enter a number...");
         });
 
+        it("shows right element if provided", () => {
+            const component = mount(<NumericInput rightElement={<Button />} />);
+            expect(component.find(InputGroup).find(Button)).to.exist;
+        });
+
         it("changes max precision of displayed value to that of the smallest step size defined", () => {
             const component = mount(<NumericInput majorStepSize={1} stepSize={0.1} minorStepSize={0.001} />);
             const incrementButton = component.find(Button).first();