fix(NumberInput): small size (#222)

Author: tenphi

.changeset/five-walls-beam.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix for the small size of the NumberInput.

src/components/forms/NumberInput/NumberInput.stories.tsx

@@ -31,3 +31,13 @@ Default.args = {};
 
 export const WithDefaultValue = Template.bind({});
 WithDefaultValue.args = { defaultValue: 5 };
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  isDisabled: true,
+};

src/components/forms/NumberInput/NumberInput.tsx

@@ -66,8 +66,18 @@ function NumberInput(props: WithNullableValue<CubeNumberInputProps>, ref) {
       suffix={
         showStepper ? (
           <StepperContainer>
-            <StepButton direction="up" {...incrementButtonProps} />
-            <StepButton direction="down" {...decrementButtonProps} />
+            <StepButton
+              isDisabled={props.isDisabled}
+              direction="up"
+              {...incrementButtonProps}
+              size={otherProps.size}
+            />
+            <StepButton
+              isDisabled={props.isDisabled}
+              direction="down"
+              {...decrementButtonProps}
+              size={otherProps.size}
+            />
           </StepperContainer>
         ) : null
       }

src/components/forms/NumberInput/StepButton.tsx

@@ -9,9 +9,20 @@ const STEP_BUTTON_STYLES: Styles = {
     '': '0 (1r - 1bw) 0 0',
     down: '0 0 (1r - 1bw) 0',
   },
-  preset: 't4',
-  lineHeight: '1em',
+  fontSize: '12px',
+  lineHeight: '12px',
   height: 'auto',
+  fill: {
+    '': '#dark.0',
+    hovered: '#dark.04',
+    pressed: '#purple.10',
+    '[disabled]': '#dark.0',
+  },
+
+  '@icon-size': {
+    '': '14px',
+    '[data-size="small"]': '13px',
+  },
 };
 
 /**
@@ -24,7 +35,11 @@ export function StepButton(props) {
       type="neutral"
       styles={STEP_BUTTON_STYLES}
       icon={
-        props.direction === 'up' ? <CaretUpOutlined /> : <CaretDownOutlined />
+        props.direction === 'up' ? (
+          <CaretUpOutlined style={{ fontSize: 'var(--icon-size)' }} />
+        ) : (
+          <CaretDownOutlined style={{ fontSize: 'var(--icon-size)' }} />
+        )
       }
       mods={{
         up: props.direction === 'up',