From cd33ffa64f59221e8b53d020eaad012075684464 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Mon, 13 Dec 2021 12:21:58 -0600
Subject: [PATCH 1/3] Revert "docs(checkbox): add storybook docs for onClick
 (#10130)" (#10266)

This reverts commit 46eded4832a7e8878ba08e239902d866bc4a785d.

Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
---
 .../react/src/components/Checkbox/Checkbox.mdx  | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/packages/react/src/components/Checkbox/Checkbox.mdx b/packages/react/src/components/Checkbox/Checkbox.mdx
index 5adba1226fcb..26d68a94e3f1 100644
--- a/packages/react/src/components/Checkbox/Checkbox.mdx
+++ b/packages/react/src/components/Checkbox/Checkbox.mdx
@@ -91,23 +91,6 @@ event.
 <Checkbox onChange={()=>{}} labelText={`Checkbox label`} id="checkbox-label-2" />
 ```
 
-### Checkbox onClick
-
-You can use the `onClick` prop to pass in a custom function for event handling.
-This event can be used to control click event bubbling without having to
-implement your own wrapping element/component. It receives the dom event as its
-only argument.
-
-`onClick` is placed on the wrapping `div` containing both the `input` and
-`label`. As such, this will be called twice for every click - once for the
-input, a second time for the label. Due to this, `onClick` should not be used to
-catch state updates when using Checkbox as a controlled component.
-
-```jsx
-<Checkbox onClick={()=>{}} labelText={`Checkbox label`} id="checkbox-label-1" />
-<Checkbox onClick={()=>{}} labelText={`Checkbox label`} id="checkbox-label-2" />
-```
-
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions on Slack,

From ddaadaad1e95dd44dc34b5c16268437568123793 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Mon, 13 Dec 2021 12:46:52 -0600
Subject: [PATCH 2/3] chore: update codeowners to point to the correct SVG
 files (#10270)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 CODEOWNERS | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CODEOWNERS b/CODEOWNERS
index 370a9b256363..d723394cbf6c 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -2,8 +2,8 @@
 * @carbon-design-system/developers-system
 
 # Core icons and pictograms
-/packages/icons/svg/ @laurenmrice @conradennis @dudley-ibm @carbon-design-system/developers-system
-/packages/pictograms/svg/ @laurenmrice @conradennis @dudley-ibm @carbon-design-system/developers-system
+/packages/icons/src/svg/ @laurenmrice @conradennis @dudley-ibm @carbon-design-system/developers-system
+/packages/pictograms/src/svg/ @laurenmrice @conradennis @dudley-ibm @carbon-design-system/developers-system
 
 # Angular icons
 /packages/icons-angular/ @cal-smith @carbon-design-system/developers-system

From 8b01d69dfcd94155b764ad301f45ec60ffe05bcb Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Mon, 13 Dec 2021 16:41:13 -0600
Subject: [PATCH 3/3] refactor(number-input): refactor to functional component
 (#10257)

* refactor(number-input): refactor to functional component

* test(number-input): update tests to work with forwardRef

* docs: revert v11 react migration changes

* test(react): update number input test

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../NumberInput/next/NumberInput.js           | 456 +++++++++++++++++
 .../NumberInput/next/NumberInput.stories.js   | 114 +++--
 .../next/__tests__/NumberInput-test.js        | 477 ++++++++++++++++++
 .../src/components/NumberInput/next/index.js  |   8 +
 4 files changed, 1024 insertions(+), 31 deletions(-)
 create mode 100644 packages/react/src/components/NumberInput/next/NumberInput.js
 create mode 100644 packages/react/src/components/NumberInput/next/__tests__/NumberInput-test.js
 create mode 100644 packages/react/src/components/NumberInput/next/index.js

diff --git a/packages/react/src/components/NumberInput/next/NumberInput.js b/packages/react/src/components/NumberInput/next/NumberInput.js
new file mode 100644
index 000000000000..7a95632f9bd7
--- /dev/null
+++ b/packages/react/src/components/NumberInput/next/NumberInput.js
@@ -0,0 +1,456 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Add16, Subtract16 } from '@carbon/icons-react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+import { useFeatureFlag } from '../../FeatureFlags';
+import { useMergedRefs } from '../../../internal/useMergedRefs';
+import { useNormalizedInputProps as normalize } from '../../../internal/useNormalizedInputProps';
+import { usePrefix } from '../../../internal/usePrefix';
+import deprecate from '../../../prop-types/deprecate';
+
+export const translationIds = {
+  'increment.number': 'increment.number',
+  'decrement.number': 'decrement.number',
+};
+
+const defaultTranslations = {
+  [translationIds['increment.number']]: 'Increment number',
+  [translationIds['decrement.number']]: 'Decrement number',
+};
+
+const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
+  const enabled = useFeatureFlag('enable-v11-release');
+  const {
+    allowEmpty = false,
+    className: customClassName,
+    disabled = false,
+    defaultValue,
+    helperText = '',
+    hideLabel = false,
+    hideSteppers,
+    iconDescription = enabled ? undefined : 'choose a number',
+    id,
+    label,
+    invalid = false,
+    invalidText = enabled ? undefined : 'Provide invalidText',
+    isMobile,
+    light = false,
+    max,
+    min,
+    onChange,
+    onClick,
+    readOnly,
+    size,
+    step = 1,
+    translateWithId: t = (id) => defaultTranslations[id],
+    warn = false,
+    warnText = '',
+    value: controlledValue,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const [value, setValue] = useState(() => {
+    if (controlledValue !== undefined) {
+      return controlledValue;
+    }
+    if (defaultValue !== undefined) {
+      return defaultValue;
+    }
+    return 0;
+  });
+  const [prevControlledValue, setPrevControlledValue] = useState(
+    controlledValue
+  );
+  const inputRef = useRef(null);
+  const ref = useMergedRefs([forwardRef, inputRef]);
+  const numberInputClasses = cx({
+    [`${prefix}--number`]: true,
+    [`${prefix}--number--helpertext`]: true,
+    [`${prefix}--number--readonly`]: readOnly,
+    [`${prefix}--number--light`]: light,
+    [`${prefix}--number--nolabel`]: hideLabel,
+    [`${prefix}--number--nosteppers`]: hideSteppers,
+    [`${prefix}--number--mobile`]: isMobile,
+    [`${prefix}--number--${size}`]: size,
+    [customClassName]: !enabled,
+  });
+  const isInputValid = getInputValidity({
+    allowEmpty,
+    invalid,
+    value,
+    max,
+    min,
+  });
+  const normalizedProps = normalize({
+    id,
+    readOnly,
+    disabled,
+    invalid: !isInputValid,
+    invalidText,
+    warn,
+    warnText,
+  });
+  const [incrementNumLabel, decrementNumLabel] = [
+    t('increment.number'),
+    t('decrement.number'),
+  ];
+  const wrapperClasses = cx(`${prefix}--number__input-wrapper`, {
+    [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,
+  });
+  const iconClasses = cx({
+    [`${prefix}--number__invalid`]:
+      normalizedProps.invalid || normalizedProps.warn,
+    [`${prefix}--number__invalid--warning`]: normalizedProps.warn,
+    [`${prefix}--number__readonly-icon`]: readOnly,
+  });
+
+  if (controlledValue !== prevControlledValue) {
+    setValue(controlledValue);
+    setPrevControlledValue(controlledValue);
+  }
+
+  let ariaDescribedBy = null;
+  if (normalizedProps.invalid) {
+    ariaDescribedBy = normalizedProps.invalidId;
+  }
+  if (normalizedProps.warn) {
+    ariaDescribedBy = normalizedProps.warnId;
+  }
+
+  function handleOnChange(event) {
+    if (disabled) {
+      return;
+    }
+
+    const state = {
+      value: event.target.value,
+      direction: value < event.target.value ? 'up' : 'down',
+    };
+    setValue(state.value);
+
+    if (onChange) {
+      onChange(event, state);
+    }
+  }
+
+  return (
+    <div className={cx(`${prefix}--form-item`, { [customClassName]: enabled })}>
+      <div
+        className={numberInputClasses}
+        data-invalid={normalizedProps.invalid ? true : undefined}>
+        <Label
+          disabled={normalizedProps.disabled}
+          hideLabel={hideLabel}
+          id={id}
+          label={label}
+        />
+        <div className={wrapperClasses}>
+          <input
+            {...rest}
+            data-invalid={normalizedProps.invalid ? true : undefined}
+            aria-invalid={normalizedProps.invalid}
+            aria-describedby={ariaDescribedBy}
+            disabled={normalizedProps.disabled}
+            ref={ref}
+            id={id}
+            max={max}
+            min={min}
+            onClick={onClick}
+            onChange={handleOnChange}
+            pattern="[0-9]*"
+            readOnly={readOnly}
+            step={step}
+            type="number"
+            value={value}
+          />
+          {normalizedProps.icon ? (
+            <normalizedProps.icon className={iconClasses} />
+          ) : null}
+          {!hideSteppers && (
+            <div className={`${prefix}--number__controls`}>
+              <button
+                aria-label={decrementNumLabel || iconDescription}
+                className={`${prefix}--number__control-btn down-icon`}
+                disabled={disabled}
+                onClick={(event) => {
+                  const state = {
+                    value: clamp(max, min, value - step),
+                    direction: 'down',
+                  };
+                  setValue(state.value);
+
+                  if (onChange) {
+                    onChange(event, state);
+                  }
+
+                  if (onClick) {
+                    onClick(event, state);
+                  }
+                }}
+                tabIndex="-1"
+                title={decrementNumLabel || iconDescription}
+                type="button">
+                <Subtract16 className="down-icon" />
+              </button>
+              <div className={`${prefix}--number__rule-divider`} />
+              <button
+                aria-label={incrementNumLabel || iconDescription}
+                className={`${prefix}--number__control-btn up-icon`}
+                disabled={disabled}
+                onClick={(event) => {
+                  const state = {
+                    value: clamp(max, min, value + step),
+                    direction: 'up',
+                  };
+                  setValue(state.value);
+
+                  if (onChange) {
+                    onChange(event, state);
+                  }
+
+                  if (onClick) {
+                    onClick(event, state);
+                  }
+                }}
+                tabIndex="-1"
+                title={incrementNumLabel || iconDescription}
+                type="button">
+                <Add16 className="up-icon" />
+              </button>
+              <div className={`${prefix}--number__rule-divider`} />
+            </div>
+          )}
+        </div>
+        {normalizedProps.validation ? (
+          normalizedProps.validation
+        ) : (
+          <HelperText disabled={disabled} description={helperText} />
+        )}
+      </div>
+    </div>
+  );
+});
+
+NumberInput.propTypes = {
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty: PropTypes.bool,
+
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optional starting value for uncontrolled state
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify whether you want the steppers to be hidden
+   */
+  hideSteppers: PropTypes.bool,
+
+  /**
+   * Provide a description for up/down icons that can be read by screen readers
+   */
+  iconDescription: PropTypes.string,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * `true` to use the mobile variant.
+   */
+  isMobile: deprecate(
+    PropTypes.bool,
+    `The \`isMobile\` prop no longer needed as the default NumberInput styles are now identical to the mobile variant styles. This prop will be removed in the next major version of \`carbon-components-react\``
+  ),
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * The maximum value.
+   */
+  max: PropTypes.number,
+
+  /**
+   * The minimum value.
+   */
+  min: PropTypes.number,
+
+  /**
+   * The new value is available in 'imaginaryTarget.value'
+   * i.e. to get the value: evt.imaginaryTarget.value
+   *
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify if the component should be read-only
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Specify the size of the Number Input. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * TODO V11: remove `xl` (replaced with lg)
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify how much the values should increase/decrease upon clicking on up/down button
+   */
+  step: PropTypes.number,
+
+  /**
+   * Provide custom text for the component for each translation id
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+};
+
+function Label({ disabled, id, hideLabel, label }) {
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--label`]: true,
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel,
+  });
+
+  if (label) {
+    return (
+      <label htmlFor={id} className={className}>
+        {label}
+      </label>
+    );
+  }
+  return null;
+}
+
+Label.propTypes = {
+  disabled: PropTypes.bool,
+  hideLabel: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.node,
+};
+
+function HelperText({ disabled, description }) {
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled,
+  });
+
+  if (description) {
+    return <div className={className}>{description}</div>;
+  }
+  return null;
+}
+
+HelperText.propTypes = {
+  description: PropTypes.node,
+  disabled: PropTypes.bool,
+};
+
+/**
+ * Determine if the given value is invalid based on the given max, min and
+ * conditions like `allowEmpty`. If `invalid` is passed through, it will default
+ * to false.
+ *
+ * @param {object} config
+ * @param {boolean} config.allowEmpty
+ * @param {boolean} config.invalid
+ * @param {number} config.value
+ * @param {number} config.max
+ * @param {number} config.min
+ * @returns {boolean}
+ */
+function getInputValidity({ allowEmpty, invalid, value, max, min }) {
+  if (invalid) {
+    return false;
+  }
+
+  if (value === '') {
+    return allowEmpty;
+  }
+
+  if (value > max || value < min) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Clamp the given value between the upper bound `max` and the lower bound `min`
+ * @param {number} max
+ * @param {number} min
+ * @param {number} value
+ */
+function clamp(max, min, value) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export { NumberInput };
diff --git a/packages/react/src/components/NumberInput/next/NumberInput.stories.js b/packages/react/src/components/NumberInput/next/NumberInput.stories.js
index c1880505cb56..c6b016888cb4 100644
--- a/packages/react/src/components/NumberInput/next/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/next/NumberInput.stories.js
@@ -6,52 +6,104 @@
  */
 
 import React from 'react';
-import { default as NumberInput, NumberInputSkeleton } from '../';
-import { Layer } from '../../Layer';
+import { action } from '@storybook/addon-actions';
+import {
+  withKnobs,
+  boolean,
+  number,
+  text,
+  object,
+  select,
+} from '@storybook/addon-knobs';
+import { NumberInput } from './';
+import NumberInputSkeleton from '../../NumberInput/NumberInput.Skeleton';
+import mdx from '../NumberInput.mdx';
+
+const sizes = {
+  'Small  (sm)': 'sm',
+  'Medium (md) - default': undefined,
+  'Large  (lg)': 'lg',
+};
+
+const props = () => ({
+  className: 'some-class',
+  id: 'tj-input',
+  label: text('Label (label)', 'NumberInput label'),
+  hideLabel: boolean('No label (hideLabel)', false),
+  hideSteppers: boolean('No steppers (hideSteppers)', false),
+  min: number('Minimum value (min)', 0),
+  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),
+  invalidText: text(
+    'Form validation UI content (invalidText)',
+    'Number is not valid'
+  ),
+  warn: boolean('Show warning state (warn)', false),
+  warnText: text(
+    'Warning state text (warnText)',
+    'A high threshold may impact performance'
+  ),
+  helperText: text('Helper text (helperText)', 'Optional helper text.'),
+  light: boolean('Light variant (light)', false),
+  onChange: action('onChange'),
+  onClick: action('onClick'),
+  allowEmpty: boolean('Allow empty value (allowEmpty)', false),
+  numberInputArrowTranslationIds: object(
+    'Number input arrow icon translation IDs (for translateWithId callback)',
+    {
+      'increment.number': 'Increment number',
+      'decrement.number': 'Decrement number',
+    }
+  ),
+});
 
 export default {
   title: 'Components/NumberInput',
+  component: NumberInput,
+  decorators: [withKnobs],
+
   parameters: {
-    component: NumberInput,
+    docs: {
+      page: mdx,
+    },
+
     subcomponents: {
       NumberInputSkeleton,
     },
   },
 };
 
-const numberInputProps = {
-  className: 'some-class',
-  id: 'number-input-1',
-  label: 'Number Input',
-  helperText: 'Optional helper text.',
-  min: 0,
-  max: 100,
-  value: 50,
-  step: 1,
+export const Default = () => {
+  return (
+    <NumberInput
+      id="carbon-number"
+      min={0}
+      max={100}
+      value={50}
+      label="NumberInput label"
+      helperText="Optional helper text."
+      invalidText="Number is not valid"
+    />
+  );
 };
 
-export const Default = () => {
-  return <NumberInput {...numberInputProps} />;
+Default.story = {
+  name: 'Number Input',
 };
 
-export const withLayer = () => {
+export const Playground = () => {
+  const { numberInputArrowTranslationIds, ...rest } = props();
   return (
-    <>
-      <NumberInput {...numberInputProps} />
-      <Layer>
-        <NumberInput {...numberInputProps} />
-        <Layer>
-          <NumberInput {...numberInputProps} />
-        </Layer>
-      </Layer>
-    </>
+    <NumberInput
+      translateWithId={(id) => numberInputArrowTranslationIds[id]}
+      {...rest}
+    />
   );
 };
 
-export const Skeleton = () => (
-  <div>
-    <NumberInputSkeleton />
-    &nbsp;
-    <NumberInputSkeleton small />
-  </div>
-);
+export const Skeleton = () => <NumberInputSkeleton />;
diff --git a/packages/react/src/components/NumberInput/next/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/next/__tests__/NumberInput-test.js
new file mode 100644
index 000000000000..420f9ebf073b
--- /dev/null
+++ b/packages/react/src/components/NumberInput/next/__tests__/NumberInput-test.js
@@ -0,0 +1,477 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Subtract16, Add16 } from '@carbon/icons-react';
+import { settings } from 'carbon-components';
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { NumberInput } from '../NumberInput';
+import NumberInputSkeleton from '../../NumberInput.Skeleton';
+
+const { prefix } = settings;
+
+describe('NumberInput', () => {
+  describe('should render as expected', () => {
+    let wrapper;
+    let label;
+    let numberInput;
+    let container;
+    let formItem;
+    let icons;
+    let helper;
+    let mockProps;
+
+    beforeEach(() => {
+      mockProps = {
+        min: 0,
+        max: 100,
+        id: 'test',
+        label: 'Number Input',
+        className: 'extra-class',
+        invalidText: 'invalid text',
+        helperText: 'testHelper',
+        translateWithId:
+          /*
+          Simulates a condition where up/down button's hover over text matches `iconDescription` in `v10`,
+          which is, when the translation for up/down button are not there
+        */
+          () => undefined,
+      };
+
+      wrapper = mount(<NumberInput {...mockProps} />);
+
+      const iconTypes = [Subtract16, Add16];
+      label = wrapper.find('label');
+      numberInput = wrapper.find('input');
+      container = wrapper.find(`.${prefix}--number`);
+      formItem = wrapper.find(`.${prefix}--form-item`);
+      icons = wrapper.findWhere((n) => iconTypes.includes(n.type()));
+      helper = wrapper.find(`.${prefix}--form__helper-text`);
+    });
+
+    describe('input', () => {
+      it('renders a numberInput', () => {
+        expect(numberInput.length).toEqual(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(
+          container.hasClass(`${prefix}--number ${prefix}--number--helpertext`)
+        ).toEqual(true);
+      });
+
+      it('has renders with form-item wrapper', () => {
+        expect(formItem.hasClass(`${prefix}--form-item`)).toEqual(true);
+      });
+
+      it('applies extra classes via className', () => {
+        expect(container.hasClass('extra-class')).toEqual(true);
+      });
+
+      it('should set a min as expected', () => {
+        expect(numberInput.prop('min')).toEqual(0);
+        wrapper.setProps({ min: 10 });
+        expect(wrapper.find('input').prop('min')).toEqual(10);
+      });
+
+      it('should set a max as expected', () => {
+        expect(numberInput.prop('max')).toEqual(100);
+        wrapper.setProps({ max: 10 });
+        expect(wrapper.find('input').prop('max')).toEqual(10);
+      });
+
+      it('should set step as expected', () => {
+        expect(numberInput.prop('step')).toEqual(1);
+        wrapper.setProps({ step: 10 });
+        expect(wrapper.find('input').prop('step')).toEqual(10);
+      });
+
+      it('should set disabled as expected', () => {
+        expect(numberInput.prop('disabled')).toEqual(false);
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.find('input').prop('disabled')).toEqual(true);
+      });
+
+      it('should set invalid as expected', () => {
+        expect(container.prop('data-invalid')).toEqual(undefined);
+        wrapper.setProps({ invalid: true });
+        expect(wrapper.find(`.${prefix}--number`).prop('data-invalid')).toEqual(
+          true
+        );
+      });
+
+      it('should set invalidText as expected', () => {
+        expect(wrapper.find(`.${prefix}--form-requirement`).length).toEqual(0);
+        wrapper.setProps({ invalid: true });
+        const invalidText = wrapper.find(`.${prefix}--form-requirement`);
+        expect(invalidText.length).toEqual(1);
+        expect(invalidText.text()).toEqual('invalid text');
+      });
+
+      it('should specify light number input as expected', () => {
+        wrapper.setProps({ light: true });
+        expect(wrapper.find(NumberInput).props().light).toEqual(true);
+      });
+
+      it('should hide label as expected', () => {
+        expect(numberInput.prop('min')).toEqual(0);
+        wrapper.setProps({ hideLabel: true });
+        expect(
+          wrapper.find('label').hasClass(`${prefix}--visually-hidden`)
+        ).toEqual(true);
+        expect(
+          wrapper
+            .find(`.${prefix}--number`)
+            .hasClass(`${prefix}--number--nolabel`)
+        ).toEqual(true);
+      });
+
+      describe('initial rendering', () => {
+        const getWrapper = (min, max, value) =>
+          mount(
+            <NumberInput
+              min={min}
+              max={max}
+              value={value}
+              id="test"
+              label="Number Input"
+              className="extra-class"
+              invalidText="Number is not valid"
+            />
+          );
+        const getNumberInput = (wrapper) => wrapper.find('input');
+
+        it('should correctly set defaultValue on uncontrolled input', () => {
+          const wrapper = mount(
+            <NumberInput
+              min={-1}
+              max={100}
+              defaultValue={10}
+              id="test"
+              label="Number Input"
+              className="extra-class"
+            />
+          );
+          const numberInput = getNumberInput(wrapper);
+          expect(numberInput.prop('value')).toEqual(10);
+        });
+
+        it('should set value as expected when value > min', () => {
+          const wrapper = getWrapper(-1, 100, 0);
+          const numberInput = getNumberInput(wrapper);
+          expect(numberInput.prop('value')).toEqual(0);
+        });
+
+        it('should set value as expected when min === 0 and value > min', () => {
+          const wrapper = getWrapper(0, 100, 1);
+          const numberInput = getNumberInput(wrapper);
+          expect(numberInput.prop('value')).toEqual(1);
+        });
+
+        it('should set value when value < min and set invalid state', () => {
+          let wrapper = getWrapper(5, 100, 0);
+          let numberInput = wrapper.find('input');
+          let invalidText = wrapper.find(`.${prefix}--form-requirement`);
+          expect(numberInput.prop('value')).toEqual(0);
+          expect(invalidText.length).toEqual(1);
+          expect(invalidText.text()).toEqual('Number is not valid');
+        });
+
+        it('should set value when min is undefined', () => {
+          let wrapper = getWrapper(undefined, 100, 5);
+          let numberInput = wrapper.find('input');
+          expect(numberInput.prop('value')).toEqual(5);
+        });
+
+        it('should set invalidText when value is empty string', () => {
+          wrapper.find('input').simulate('change', {
+            target: {
+              value: '',
+            },
+          });
+          const invalidText = wrapper.find(`.${prefix}--form-requirement`);
+          expect(invalidText.length).toEqual(1);
+          expect(invalidText.text()).toEqual('invalid text');
+        });
+
+        it('allow empty string value', () => {
+          wrapper.find('input').simulate('change', {
+            target: {
+              value: '',
+            },
+          });
+          wrapper.setProps({ allowEmpty: true });
+          const invalidText = wrapper.find(`.${prefix}--form-requirement`);
+          expect(invalidText.length).toEqual(0);
+        });
+
+        it('should allow updating the value with empty string and not be invalid', () => {
+          wrapper.find('input').simulate('change', {
+            target: {
+              value: 50,
+            },
+          });
+          wrapper.setProps({ value: '', allowEmpty: true });
+          const invalidText = wrapper.find(`.${prefix}--form-requirement`);
+          expect(invalidText.length).toEqual(0);
+        });
+
+        it('should change the value upon change in props', () => {
+          wrapper.setProps({ value: 1 });
+          wrapper.find('input').simulate('change', {
+            target: {
+              value: 2,
+            },
+          });
+          wrapper.setProps({ value: 2 });
+          expect(wrapper.find('input').prop('value')).toEqual(2);
+        });
+
+        it('should not cap the number given to value prop', () => {
+          wrapper.find('input').simulate('change', {
+            target: {
+              value: 0,
+            },
+          });
+
+          wrapper.setProps({ value: 5, min: 10, max: 20 });
+          expect(wrapper.find('input').prop('value')).toEqual(5);
+
+          wrapper.setProps({ value: 25, min: 10, max: 20 });
+          expect(wrapper.find('input').prop('value')).toEqual(25);
+        });
+
+        // NumberInput propTypes do not allow a string to be passed
+        it('should avoid capping when non-number prop is given to value prop', () => {
+          wrapper.find('input').simulate('change', {
+            target: {
+              value: 2,
+            },
+          });
+
+          wrapper.setProps({ value: '', min: 1, max: 3 });
+          expect(wrapper.find('input').prop('value')).toBe('');
+        });
+
+        it('should avoid change the value upon setting props, unless there the value actually changes', () => {
+          wrapper.setProps({ value: 1 });
+          wrapper.find('input').simulate('change', {
+            target: {
+              value: 2,
+            },
+          });
+          wrapper.setProps({ value: 1 });
+          expect(wrapper.find('input').prop('value')).toBe(2);
+        });
+      });
+    });
+
+    describe('Icon', () => {
+      it('renders two Icon components', () => {
+        expect(icons.length).toEqual(2);
+      });
+
+      it('should use correct icons', () => {
+        expect(icons.at(0).type()).toBe(Subtract16);
+        expect(icons.at(1).type()).toBe(Add16);
+      });
+
+      it('adds new iconDescription when passed via props', () => {
+        wrapper.setProps({ iconDescription: 'new description' });
+        expect(wrapper.prop('iconDescription')).toEqual('new description');
+      });
+
+      it('should have iconDescription match Icon component description prop', () => {
+        wrapper.setProps({ iconDescription: 'test' });
+        const iconUpText = wrapper.find('button.up-icon').prop('title');
+        const iconDownText = wrapper.find('button.down-icon').prop('title');
+        const iconDescription = wrapper
+          .find(NumberInput)
+          .prop('iconDescription');
+
+        const matches =
+          iconDescription === iconUpText && iconDescription === iconDownText;
+        expect(matches).toEqual(true);
+      });
+    });
+
+    describe('label', () => {
+      it('renders a label', () => {
+        expect(label.length).toEqual(1);
+      });
+
+      it('has the expected classes', () => {
+        expect(label.hasClass(`${prefix}--label`)).toEqual(true);
+      });
+    });
+
+    describe('helper', () => {
+      it('renders a helper', () => {
+        expect(helper.length).toEqual(1);
+      });
+
+      it('renders children as expected', () => {
+        wrapper.setProps({
+          helperText: <span>This is helper text.</span>,
+        });
+        const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
+        expect(renderedHelper.props().children).toEqual(
+          <span>This is helper text.</span>
+        );
+      });
+
+      it('should set helper text as expected', () => {
+        wrapper.setProps({ helperText: 'Helper text' });
+        expect(helper.text()).toEqual('Helper text');
+      });
+    });
+  });
+
+  describe('events', () => {
+    describe('disabled numberInput', () => {
+      const onClick = jest.fn();
+      const onChange = jest.fn();
+
+      const wrapper = mount(
+        <NumberInput id="test" onClick={onClick} onChange={onChange} disabled />
+      );
+
+      const input = wrapper.find('input');
+      const upArrow = wrapper.find('button.up-icon');
+      const downArrow = wrapper.find('button.down-icon');
+
+      it('should be disabled when numberInput is disabled', () => {
+        expect(upArrow.prop('disabled')).toEqual(true);
+        expect(downArrow.prop('disabled')).toEqual(true);
+      });
+
+      it('should not invoke onClick when up arrow is clicked', () => {
+        upArrow.simulate('click');
+        expect(onClick).not.toHaveBeenCalled();
+      });
+
+      it('should not invoke onClick when down arrow is clicked', () => {
+        downArrow.simulate('click');
+        expect(onClick).not.toHaveBeenCalled();
+      });
+
+      it('should not invoke onChange when numberInput is changed', () => {
+        input.simulate('change');
+        expect(onChange).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('enabled numberInput', () => {
+      let onClick;
+      let onChange;
+      let input;
+      let upArrow;
+      let downArrow;
+      let wrapper;
+
+      beforeEach(() => {
+        onClick = jest.fn();
+        onChange = jest.fn();
+
+        wrapper = mount(
+          <NumberInput
+            id="test"
+            onClick={onClick}
+            onChange={onChange}
+            min={0}
+            max={100}
+          />
+        );
+
+        input = wrapper.find('input');
+        upArrow = wrapper.find(Add16).closest('button');
+        downArrow = wrapper.find(Subtract16).closest('button');
+      });
+
+      it('should invoke onClick when numberInput is clicked', () => {
+        input.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+      });
+
+      it('should invoke onClick when up arrow is clicked', () => {
+        wrapper.setProps({ value: 1 });
+        upArrow.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+        expect(onClick).toHaveBeenCalledWith(expect.anything(), {
+          direction: 'up',
+          value: 2,
+        });
+      });
+
+      it('should only increase the value on up arrow click if value is less than max', () => {
+        wrapper.setProps({ value: 100 });
+        upArrow.simulate('click');
+        expect(wrapper.find('input').prop('value')).toEqual(100);
+      });
+
+      it('should only decrease the value on down arrow click if value is greater than min', () => {
+        wrapper.setProps({ value: 0 });
+        downArrow.simulate('click');
+        expect(wrapper.find('input').prop('value')).toEqual(0);
+      });
+
+      it('should increase by the value of step', () => {
+        wrapper.setProps({
+          step: 10,
+          value: 0,
+        });
+        expect(wrapper.find('input').prop('value')).toEqual(0);
+        upArrow.simulate('click');
+        expect(wrapper.find('input').prop('value')).toEqual(10);
+      });
+
+      it('should decrease by the value of step', () => {
+        wrapper.setProps({
+          step: 10,
+          value: 100,
+        });
+        expect(wrapper.find('input').prop('value')).toEqual(100);
+        downArrow.simulate('click');
+        expect(wrapper.find('input').prop('value')).toEqual(90);
+      });
+
+      it('should invoke onClick when down arrow is clicked and value is above min', () => {
+        wrapper.setProps({ value: 1 });
+        downArrow.simulate('click');
+        expect(onClick).toHaveBeenCalled();
+        expect(onChange).toHaveBeenCalled();
+        expect(onClick).toHaveBeenCalledWith(expect.anything(), {
+          direction: 'down',
+          value: 0,
+        });
+      });
+
+      it('should invoke onChange when numberInput is changed', () => {
+        input.simulate('change');
+        expect(onChange).toHaveBeenCalled();
+        expect(onChange).toHaveBeenCalledWith(
+          expect.anything(),
+          expect.anything()
+        );
+      });
+    });
+  });
+});
+
+describe('NumberInputSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<NumberInputSkeleton />);
+
+    const container = wrapper.find(`.${prefix}--number`);
+    const label = wrapper.find(`.${prefix}--label`);
+
+    it('has the expected classes', () => {
+      expect(container.hasClass(`${prefix}--skeleton`)).toEqual(true);
+      expect(label.hasClass(`${prefix}--skeleton`)).toEqual(true);
+    });
+  });
+});
diff --git a/packages/react/src/components/NumberInput/next/index.js b/packages/react/src/components/NumberInput/next/index.js
new file mode 100644
index 000000000000..14ed7b01ae2e
--- /dev/null
+++ b/packages/react/src/components/NumberInput/next/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { NumberInput } from './NumberInput';