From d68e6d2aaf3238e0facf5523123ca84c4412a612 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 3 Mar 2020 14:13:54 +0100
Subject: [PATCH] feat(number-input): add size variants (#5459)

* feat(number-input): add size variants

* fix(number-input): update disabled styles

* docs(number-input): use undefined instead of empty string

* docs(components): rename large to default size
---
 .../number-input/_number-input.scss           | 46 +++++++++++++++++++
 .../NumberInput/NumberInput-story.js          |  8 ++++
 .../src/components/NumberInput/NumberInput.js |  8 +++-
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
index 632df88bb93c..de70c36f47c4 100644
--- a/packages/components/src/components/number-input/_number-input.scss
+++ b/packages/components/src/components/number-input/_number-input.scss
@@ -72,6 +72,7 @@
     cursor: not-allowed;
     background-color: $disabled-background-color;
     color: $disabled;
+    border-bottom-color: transparent;
   }
 
   .#{$prefix}--number__input-wrapper {
@@ -220,6 +221,51 @@
     }
   }
 
+  // Size Variant styles
+  .#{$prefix}--number--xl input[type='number'] {
+    height: rem(48px);
+  }
+
+  .#{$prefix}--number--xl .#{$prefix}--number__control-btn {
+    height: rem(24px);
+  }
+
+  .#{$prefix}--number--xl.#{$prefix}--number--mobile
+    .#{$prefix}--number__control-btn {
+    height: rem(48px);
+    width: rem(48px);
+  }
+
+  .#{$prefix}--number--xl .#{$prefix}--number__control-btn.up-icon svg {
+    top: rem(6.6px); // Needed to maintain arrow spacing between input sizes.
+  }
+
+  .#{$prefix}--number--xl .#{$prefix}--number__control-btn.down-icon svg {
+    top: rem(-6.6px); // Needed to maintain arrow spacing between input sizes.
+  }
+
+  .#{$prefix}--number--sm input[type='number'] {
+    height: rem(32px);
+  }
+
+  .#{$prefix}--number--sm .#{$prefix}--number__control-btn {
+    height: rem(16px);
+  }
+
+  .#{$prefix}--number--sm.#{$prefix}--number--mobile
+    .#{$prefix}--number__control-btn {
+    height: rem(32px);
+    width: rem(32px);
+  }
+
+  .#{$prefix}--number--sm .#{$prefix}--number__control-btn.up-icon svg {
+    top: rem(3.4px); // Needed to maintain arrow spacing between input sizes.
+  }
+
+  .#{$prefix}--number--sm .#{$prefix}--number__control-btn.down-icon svg {
+    top: rem(-3.4px); // Needed to maintain arrow spacing between input sizes.
+  }
+
   //No label positioning adjustment
   .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
     margin-top: 0;
diff --git a/packages/react/src/components/NumberInput/NumberInput-story.js b/packages/react/src/components/NumberInput/NumberInput-story.js
index ed8a74a91b11..b7244b087e04 100644
--- a/packages/react/src/components/NumberInput/NumberInput-story.js
+++ b/packages/react/src/components/NumberInput/NumberInput-story.js
@@ -15,10 +15,17 @@ import {
   number,
   text,
   object,
+  select,
 } from '@storybook/addon-knobs';
 import NumberInput from '../NumberInput';
 import NumberInputSkeleton from '../NumberInput/NumberInput.Skeleton';
 
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Default size': undefined,
+  'Small size (sm)': 'sm',
+};
+
 const props = () => ({
   className: 'some-class',
   id: 'tj-input',
@@ -28,6 +35,7 @@ const props = () => ({
   max: number('Maximum value (max)', 100),
   value: number('Value (value)', 50),
   step: number('Step of up/down arrow (step)', 10),
+  size: select('Field size (size)', sizes, undefined) || undefined,
   disabled: boolean('Disabled (disabled)', false),
   readOnly: boolean('Read only (readOnly)', false),
   invalid: boolean('Show form validation UI (invalid)', false),
diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js
index 9b49d24861f8..d765dff89ddb 100644
--- a/packages/react/src/components/NumberInput/NumberInput.js
+++ b/packages/react/src/components/NumberInput/NumberInput.js
@@ -139,6 +139,10 @@ class NumberInput extends Component {
      * `true` to use the mobile variant.
      */
     isMobile: PropTypes.bool,
+    /**
+     * Specify the size of the Number Input. Currently supports either `sm` or `xl` as an option.
+     */
+    size: PropTypes.oneOf(['sm', 'xl']),
   };
 
   static defaultProps = {
@@ -176,7 +180,7 @@ class NumberInput extends Component {
   }
 
   /**
-   * The DOM node refernce to the `<input>`.
+   * The DOM node reference to the `<input>`.
    * @type {HTMLInputElement}
    */
   _inputRef = null;
@@ -281,6 +285,7 @@ class NumberInput extends Component {
       innerRef: ref,
       translateWithId: t,
       isMobile,
+      size,
       ...other
     } = this.props;
 
@@ -292,6 +297,7 @@ class NumberInput extends Component {
         [`${prefix}--number--light`]: light,
         [`${prefix}--number--nolabel`]: hideLabel,
         [`${prefix}--number--mobile`]: isMobile,
+        [`${prefix}--number--${size}`]: size,
       }
     );