feat(FluidNumberInput): add FluidNumberInput variant (#12737)

* feat(FluidNumberInput): scaffold out react files

* feat(FluidNumberInput): scaffold out sass files

* style(FluidNumberInput): add initial styles

* style(FluidNumberInput): add initial invalid styles

* style(FluidNumberInput): clean up invalid styles, add warning styles

* style(FluidNumberInput): clean up styles

* test(e2e): add e2e tests for FluidNumberInput

* Update packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* chore(Fluid): add fluid skeletons as subcomponents in story files

* fix(FluidNumberInput): adjust label overflow

* style(NumberInput): change from mono code-01 to body-compact-01

* style(NumberInput): use IBM Plex Sans for number inputs

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

e2e/components/FluidNumberInput/FluidNumberInput-test.e2e.js

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+
+test.describe('FluidNumberInput', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('fluid text input @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'FluidNumberInput',
+          id: 'experimental-unstable-fluidnumberinput--default',
+          theme,
+        });
+      });
+    });
+  });
+
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FluidNumberInput',
+      id: 'experimental-unstable-fluidnumberinput--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FluidNumberInput');
+  });
+});

packages/carbon-components-react/scss/components/fluid-combo-box/_fluid-combo-box.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-combo-box/fluid-combo-box';

packages/carbon-components-react/scss/components/fluid-combo-box/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-combo-box';

packages/carbon-components-react/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-multiselect/fluid-multiselect';

packages/carbon-components-react/scss/components/fluid-multiselect/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-multiselect';

packages/carbon-components-react/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-number-input/fluid-number-input';

packages/carbon-components-react/scss/components/fluid-number-input/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-number-input';

packages/carbon-components/scss/components/fluid-combo-box/_fluid-combo-box.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-combo-box/fluid-combo-box';

packages/carbon-components/scss/components/fluid-combo-box/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-combo-box';

packages/carbon-components/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-multiselect/fluid-multiselect';

packages/carbon-components/scss/components/fluid-multiselect/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-multiselect';

packages/carbon-components/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-number-input/fluid-number-input';

packages/carbon-components/scss/components/fluid-number-input/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-number-input';

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -9826,6 +9826,100 @@ Map {
       },
     },
   },
+  "unstable__FluidNumberInput" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "allowEmpty": Object {
+        "type": "bool",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "defaultValue": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "number",
+            },
+            Object {
+              "type": "string",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "disableWheel": Object {
+        "type": "bool",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "iconDescription": Object {
+        "type": "string",
+      },
+      "id": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
+      "label": Object {
+        "type": "node",
+      },
+      "max": Object {
+        "type": "number",
+      },
+      "min": Object {
+        "type": "number",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+      "onClick": Object {
+        "type": "func",
+      },
+      "onKeyUp": Object {
+        "type": "func",
+      },
+      "step": Object {
+        "type": "number",
+      },
+      "translateWithId": Object {
+        "type": "func",
+      },
+      "value": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "number",
+            },
+            Object {
+              "type": "string",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
+    },
+    "render": [Function],
+  },
+  "unstable__FluidNumberInputSkeleton" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable__FluidSelect" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

packages/react/scss/components/fluid-combo-box/_fluid-combo-box.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-combo-box/fluid-combo-box';

packages/react/scss/components/fluid-combo-box/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-combo-box';

packages/react/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-multiselect/fluid-multiselect';

packages/react/scss/components/fluid-multiselect/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-multiselect';

packages/react/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-number-input/fluid-number-input';

packages/react/scss/components/fluid-number-input/_index.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/fluid-number-input';

packages/react/src/__tests__/index-test.js

@@ -239,6 +239,8 @@ describe('Carbon Components React', () => {
         "unstable__FluidDropdownSkeleton",
         "unstable__FluidMultiSelect",
         "unstable__FluidMultiSelectSkeleton",
+        "unstable__FluidNumberInput",
+        "unstable__FluidNumberInputSkeleton",
         "unstable__FluidSelect",
         "unstable__FluidSelectSkeleton",
         "unstable__FluidTextArea",

packages/react/src/components/FluidComboBox/FluidComboBox.stories.js

@@ -18,6 +18,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidComboBox',
   component: FluidComboBox,
+  subcomponents: {
+    FluidComboBoxSkeleton,
+  },
 };
 
 const items = [

packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js

@@ -20,6 +20,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidDatePicker',
   component: FluidDatePicker,
+  subcomponents: {
+    FluidDatePickerSkeleton,
+  },
 };
 
 const ToggleTip = (

packages/react/src/components/FluidDropdown/FluidDropdown.stories.js

@@ -18,6 +18,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidDropdown',
   component: FluidDropdown,
+  subcomponents: {
+    FluidDropdownSkeleton,
+  },
 };
 
 const items = [

packages/react/src/components/FluidForm/FluidForm.stories.js

@@ -17,6 +17,7 @@ import FluidTextInput from '../FluidTextInput';
 import FluidTextArea from '../FluidTextArea';
 import FluidTimePicker from '../FluidTimePicker';
 import FluidTimePickerSelect from '../FluidTimePickerSelect';
+import FluidNumberInput from '../FluidNumberInput';
 import ModalWrapper from '../ModalWrapper';
 
 const additionalProps = {
@@ -100,7 +101,19 @@ export const Default = () => (
           </SelectItemGroup>
         </FluidSelect>
       </div>
-      <FluidTextInput {...TextInputProps} />
+      <div style={{ display: 'flex' }}>
+        <FluidTextInput {...TextInputProps} />
+        <FluidNumberInput
+          label="Number Input Label"
+          placeholder="Placeholder text"
+          id="input-default"
+          step={10}
+          min={0}
+          max={100}
+          defaultValue={50}
+        />
+      </div>
+
       <FluidTextInput
         type="password"
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"

packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js

@@ -21,6 +21,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidMultiSelect',
   component: FluidMultiSelect,
+  subcomponents: {
+    FluidMultiSelectSkeleton,
+  },
 };
 
 const items = [