fix(Input): fixes number arrows

8base · Apr 30, 2019 · 9cbb64f · 9cbb64f
1 parent c5b3ca9
commit 9cbb64f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js
@@ -193,6 +193,7 @@ class Input extends PureComponent<InputProps> {
           modifiers={ rest }
           mask={ mask }
           tagName={ mask ? InputMask : 'input' }
+          hideNumberArrows={ hideNumberArrows }
         />
         <If condition={ !!hasError && !hideErrorIndicator }>
           <InputIndicatorTag modifiers={ rest } hasError={ hasError } tagName="div" />

diff --git a/src/components/Input/Input.test.js b/src/components/Input/Input.test.js
@@ -20,6 +20,7 @@ describe('<Input />', () => {
     hasError={false}
     hasLeftIcon={true}
     hasRightIcon={false}
+    hideNumberArrows={true}
     kind="bordered"
     modifiers={
       Object {
@@ -100,7 +101,12 @@ describe('<Input />', () => {
     it('should increment and decrement number on arrows click', () => {
       const onChange = jest.fn();
       const wrapper = mount(
-        <Input value="" onChange={ onChange } type="number" hideNumberArrows={ false } />,
+        <Input
+          value=""
+          onChange={ onChange }
+          type="number"
+          hideNumberArrows={ false }
+        />,
       );
 
       // From "" (0) to 1

diff --git a/src/components/Input/Input.theme.js b/src/components/Input/Input.theme.js
@@ -10,7 +10,7 @@ const [InputTag, themeInput] = createThemeTag(name, ({ COLORS, SIZES }: *): * =>
     width: props.width ? `${props.width}rem` : props.stretch ? '100%' : '172px',
     outline: 'none',
     paddingLeft: props.hasLeftIcon ? '36px' : '8px',
-    paddingRight: props.hasRightIcon || props.type === 'number' ? '48px' : '16px',
+    paddingRight: props.hasRightIcon || (props.type === 'number' && !props.hideNumberArrows) ? '48px' : '16px',
 
     backgroundColor: (props.disabled || props.readOnly)
       ? COLORS.LIGHT_GRAY5