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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

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';