[NumericInput] new rightElement prop (#3314)

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}
             />
         );

packages/core/test/controls/numericInputTests.tsx

@@ -839,10 +839,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", () => {
@@ -854,6 +853,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();