diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx
index f9bab4c3d6..b99fe87e0b 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 shift 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 = [
"allowNumericCharactersOnly",
"buttonPosition",
"clampValueOnBlur",
"className",
- "large",
"majorStepSize",
"minorStepSize",
"onButtonClick",
@@ -301,6 +306,7 @@ export class NumericInput extends AbstractPureComponent
);
diff --git a/packages/core/test/controls/numericInputTests.tsx b/packages/core/test/controls/numericInputTests.tsx
index 2739320106..c4b4ed0629 100644
--- a/packages/core/test/controls/numericInputTests.tsx
+++ b/packages/core/test/controls/numericInputTests.tsx
@@ -820,10 +820,9 @@ describe("", () => {
});
it("shows a left icon if provided", () => {
- const leftIcon = mount()
- .find(Icon)
- .first();
- expect(leftIcon.text()).to.equal("variable");
+ const component = mount();
+ 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("", () => {
expect(placeholderText).to.equal("Enter a number...");
});
+ it("shows right element if provided", () => {
+ const component = mount(} />);
+ 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();
const incrementButton = component.find(Button).first();