diff --git a/e2e/components/FluidNumberInput/FluidNumberInput-test.e2e.js b/e2e/components/FluidNumberInput/FluidNumberInput-test.e2e.js
new file mode 100644
index 000000000000..7a5791f73b31
--- /dev/null
+++ b/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');
+ });
+});
diff --git a/packages/carbon-components-react/scss/components/fluid-combo-box/_fluid-combo-box.scss b/packages/carbon-components-react/scss/components/fluid-combo-box/_fluid-combo-box.scss
new file mode 100644
index 000000000000..64a4f14b230e
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components-react/scss/components/fluid-combo-box/_index.scss b/packages/carbon-components-react/scss/components/fluid-combo-box/_index.scss
new file mode 100644
index 000000000000..a64f42c9dd51
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components-react/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/carbon-components-react/scss/components/fluid-multiselect/_fluid-multiselect.scss
new file mode 100644
index 000000000000..9dee4ac39a3c
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components-react/scss/components/fluid-multiselect/_index.scss b/packages/carbon-components-react/scss/components/fluid-multiselect/_index.scss
new file mode 100644
index 000000000000..19e1d9b4ee48
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components-react/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/carbon-components-react/scss/components/fluid-number-input/_fluid-number-input.scss
new file mode 100644
index 000000000000..59d1d7a6f5b3
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components-react/scss/components/fluid-number-input/_index.scss b/packages/carbon-components-react/scss/components/fluid-number-input/_index.scss
new file mode 100644
index 000000000000..c0cb30559629
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components/scss/components/fluid-combo-box/_fluid-combo-box.scss b/packages/carbon-components/scss/components/fluid-combo-box/_fluid-combo-box.scss
new file mode 100644
index 000000000000..1e76f17a7e78
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components/scss/components/fluid-combo-box/_index.scss b/packages/carbon-components/scss/components/fluid-combo-box/_index.scss
new file mode 100644
index 000000000000..a91f4f0b496b
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/carbon-components/scss/components/fluid-multiselect/_fluid-multiselect.scss
new file mode 100644
index 000000000000..924ab38ff959
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components/scss/components/fluid-multiselect/_index.scss b/packages/carbon-components/scss/components/fluid-multiselect/_index.scss
new file mode 100644
index 000000000000..46c1623dfe37
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/carbon-components/scss/components/fluid-number-input/_fluid-number-input.scss
new file mode 100644
index 000000000000..024e025923f2
--- /dev/null
+++ b/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';
diff --git a/packages/carbon-components/scss/components/fluid-number-input/_index.scss b/packages/carbon-components/scss/components/fluid-number-input/_index.scss
new file mode 100644
index 000000000000..0cb04ae4fba6
--- /dev/null
+++ b/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';
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 7322a1dccb03..448be7c2adcb 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/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 {
diff --git a/packages/react/scss/components/fluid-combo-box/_fluid-combo-box.scss b/packages/react/scss/components/fluid-combo-box/_fluid-combo-box.scss
new file mode 100644
index 000000000000..9d064aaccedf
--- /dev/null
+++ b/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';
diff --git a/packages/react/scss/components/fluid-combo-box/_index.scss b/packages/react/scss/components/fluid-combo-box/_index.scss
new file mode 100644
index 000000000000..b8c4dc60abba
--- /dev/null
+++ b/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';
diff --git a/packages/react/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/react/scss/components/fluid-multiselect/_fluid-multiselect.scss
new file mode 100644
index 000000000000..85dc568d85ec
--- /dev/null
+++ b/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';
diff --git a/packages/react/scss/components/fluid-multiselect/_index.scss b/packages/react/scss/components/fluid-multiselect/_index.scss
new file mode 100644
index 000000000000..58c807b8c7b2
--- /dev/null
+++ b/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';
diff --git a/packages/react/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/react/scss/components/fluid-number-input/_fluid-number-input.scss
new file mode 100644
index 000000000000..6bb1dc097f31
--- /dev/null
+++ b/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';
diff --git a/packages/react/scss/components/fluid-number-input/_index.scss b/packages/react/scss/components/fluid-number-input/_index.scss
new file mode 100644
index 000000000000..83fc59567a63
--- /dev/null
+++ b/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';
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index a34dd9bf8859..42e45baf6741 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/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",
diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
index c49c27a9c330..5d2c387fff2d 100644
--- a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
+++ b/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 = [
diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
index 0022126ab5d0..60ab5ecfde15 100644
--- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
+++ b/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 = (
diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
index f747737cf06f..0f6797afe3e3 100644
--- a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
+++ b/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 = [
diff --git a/packages/react/src/components/FluidForm/FluidForm.stories.js b/packages/react/src/components/FluidForm/FluidForm.stories.js
index 6b8a4eeff38c..710655f509f7 100644
--- a/packages/react/src/components/FluidForm/FluidForm.stories.js
+++ b/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 = () => (
-
+
+
+
+
+
+
+
+ );
+}
+
+FluidNumberInputSkeleton.propTypes = {
+ /**
+ * Specify an optional className to be applied to the outer FluidForm wrapper
+ */
+ className: PropTypes.string,
+};
+
+export default FluidNumberInputSkeleton;
diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.js
new file mode 100644
index 000000000000..ed45d60fadb9
--- /dev/null
+++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.js
@@ -0,0 +1,134 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { NumberInput } from '../NumberInput';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+const FluidNumberInput = React.forwardRef(function FluidNumberInput(
+ { className, ...other },
+ ref
+) {
+ const prefix = usePrefix();
+ const classNames = classnames(`${prefix}--number-input--fluid`, className);
+
+ return (
+
+
+
+ );
+});
+
+FluidNumberInput.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 wheel functionality for the input should be disabled, or not
+ */
+ disableWheel: PropTypes.bool,
+
+ /**
+ * Specify if the control should be disabled, or not
+ */
+ disabled: 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,
+
+ /**
+ * Generic `label` that will be used as the textual representation of what
+ * this field is for
+ */
+ label: PropTypes.node,
+
+ /**
+ * The maximum value.
+ */
+ max: PropTypes.number,
+
+ /**
+ * The minimum value.
+ */
+ min: PropTypes.number,
+
+ /**
+ * Provide an optional handler that is called when the internal state of
+ * NumberInput changes. This handler is called with event and state info.
+ * `(event, { value, direction }) => void`
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Provide an optional function to be called when the up/down button is clicked
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * Provide an optional function to be called when a key is pressed in the number input
+ */
+ onKeyUp: PropTypes.func,
+
+ /**
+ * 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,
+};
+
+export default FluidNumberInput;
diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
new file mode 100644
index 000000000000..102398b6e2f1
--- /dev/null
+++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
@@ -0,0 +1,145 @@
+/**
+ * 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 React from 'react';
+import { FluidNumberInput, FluidNumberInputSkeleton } from '.';
+import {
+ ToggletipLabel,
+ Toggletip,
+ ToggletipButton,
+ ToggletipContent,
+} from '../Toggletip';
+import { Information } from '@carbon/icons-react';
+
+export default {
+ title: 'Experimental/unstable__FluidNumberInput',
+ component: FluidNumberInput,
+ subcomponents: {
+ FluidNumberInputSkeleton,
+ },
+};
+
+const ToggleTip = (
+ <>
+ Label
+
+
+
+
+
+ Additional field information here.
+
+
+ >
+);
+
+export const Default = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export const Skeleton = () => (
+
+
+
+);
+
+export const Playground = (args) => (
+
+
+
+);
+
+Playground.argTypes = {
+ playgroundWidth: {
+ control: { type: 'range', min: 300, max: 800, step: 50 },
+ defaultValue: 400,
+ },
+ defaultValue: {
+ control: {
+ type: 'number',
+ },
+ defaultValue: 50,
+ },
+ invalid: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ invalidText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue:
+ 'Error message that is really long can wrap to more lines but should not be excessively long.',
+ },
+ disabled: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ label: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'Label',
+ },
+ warn: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ warnText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue:
+ 'Warning message that is really long can wrap to more lines but should not be excessively long.',
+ },
+};
diff --git a/packages/react/src/components/FluidNumberInput/__tests__/FluidNumberInput-test.js b/packages/react/src/components/FluidNumberInput/__tests__/FluidNumberInput-test.js
new file mode 100644
index 000000000000..e4d1609003e2
--- /dev/null
+++ b/packages/react/src/components/FluidNumberInput/__tests__/FluidNumberInput-test.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 React from 'react';
+import FluidNumberInput from '../FluidNumberInput';
+import { render } from '@testing-library/react';
+import { FeatureFlags } from '../../FeatureFlags';
+
+const prefix = 'cds';
+
+describe('FluidNumberInput', () => {
+ describe('renders as expected - Component API', () => {
+ it('should render as expected', () => {
+ const { container } = render(
+
+
+
+ );
+
+ expect(container.firstChild).toHaveClass(
+ `${prefix}--number-input--fluid`
+ );
+ });
+ });
+});
diff --git a/packages/react/src/components/FluidNumberInput/index.js b/packages/react/src/components/FluidNumberInput/index.js
new file mode 100644
index 000000000000..eb52477dc3a8
--- /dev/null
+++ b/packages/react/src/components/FluidNumberInput/index.js
@@ -0,0 +1,11 @@
+/**
+ * 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 default from './FluidNumberInput';
+export FluidNumberInput from './FluidNumberInput';
+
+export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';
diff --git a/packages/react/src/components/FluidSelect/FluidSelect.stories.js b/packages/react/src/components/FluidSelect/FluidSelect.stories.js
index a265f9907612..2ff712acab41 100644
--- a/packages/react/src/components/FluidSelect/FluidSelect.stories.js
+++ b/packages/react/src/components/FluidSelect/FluidSelect.stories.js
@@ -20,6 +20,9 @@ import { Information } from '@carbon/icons-react';
export default {
title: 'Experimental/unstable__FluidSelect',
component: FluidSelect,
+ subcomponents: {
+ FluidSelectSkeleton,
+ },
argTypes: {
onChange: {
action: 'onChange',
diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
index 89da14d91fbd..2e80e02442cf 100644
--- a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
+++ b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
@@ -20,6 +20,9 @@ import { Information } from '@carbon/icons-react';
export default {
title: 'Experimental/unstable__FluidTextArea',
component: FluidTextArea,
+ subcomponents: {
+ FluidTextAreaSkeleton,
+ },
argTypes: {
hideLabel: {
table: {
diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
index 33c7a3477eb9..3ef559d89dda 100644
--- a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
+++ b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
@@ -20,6 +20,9 @@ import './test.scss';
export default {
title: 'Experimental/unstable__FluidTextInput',
component: FluidTextInput,
+ subcomponents: {
+ FluidTextInputSkeleton,
+ },
};
export const Default = () => (
diff --git a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js
index cd7d9acbb24d..ea0e71a93f99 100644
--- a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js
+++ b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js
@@ -21,6 +21,10 @@ import { Information } from '@carbon/icons-react';
export default {
title: 'Experimental/unstable__FluidTimePicker',
component: FluidTimePicker,
+ subcomponents: {
+ FluidTimePickerSelect,
+ FluidTimePickerSkeleton,
+ },
};
const ToggleTip = (
diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js
index cb8445630fa2..a258bd29cf74 100644
--- a/packages/react/src/components/NumberInput/NumberInput.js
+++ b/packages/react/src/components/NumberInput/NumberInput.js
@@ -8,12 +8,13 @@
import { Add, Subtract } from '@carbon/icons-react';
import cx from 'classnames';
import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useContext } 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';
+import { FormContext } from '../FluidForm';
export const translationIds = {
'increment.number': 'increment.number',
@@ -57,6 +58,8 @@ const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
...rest
} = props;
const prefix = usePrefix();
+ const { isFluid } = useContext(FormContext);
+ const [isFocused, setIsFocused] = useState(false);
const [value, setValue] = useState(() => {
if (controlledValue !== undefined) {
return controlledValue;
@@ -138,8 +141,27 @@ const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
}
}
+ const handleFocus = (evt) => {
+ if (evt.target.type === 'button') {
+ setIsFocused(false);
+ } else {
+ setIsFocused(evt.type === 'focus' ? true : false);
+ }
+ };
+
+ const outerElementClasses = cx(`${prefix}--form-item`, {
+ [customClassName]: enabled,
+ [`${prefix}--number-input--fluid--invalid`]:
+ isFluid && normalizedProps.invalid,
+ [`${prefix}--number-input--fluid--focus`]: isFluid && isFocused,
+ [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled,
+ });
+
return (
-
+
@@ -245,6 +267,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
)}
+ {isFluid &&
}
{normalizedProps.validation ? (
normalizedProps.validation
) : (
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 3c57f051ba91..bb2cdee38f4c 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -230,6 +230,10 @@ export {
FluidMultiSelect as unstable__FluidMultiSelect,
FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton,
} from './components/FluidMultiSelect';
+export {
+ FluidNumberInput as unstable__FluidNumberInput,
+ FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton,
+} from './components/FluidNumberInput';
export {
FluidSelect as unstable__FluidSelect,
FluidSelectSkeleton as unstable__FluidSelectSkeleton,
diff --git a/packages/styles/__tests__/__snapshots__/styles-test.js.snap b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
index 1a350efc4ceb..672628eb91b6 100644
--- a/packages/styles/__tests__/__snapshots__/styles-test.js.snap
+++ b/packages/styles/__tests__/__snapshots__/styles-test.js.snap
@@ -262,6 +262,16 @@ Array [
"importPath": "@carbon/styles/scss/components/form",
"relativePath": "scss/components/form",
},
+ Object {
+ "filepath": "scss/components/fluid-combo-box/_fluid-combo-box.scss",
+ "importPath": "@carbon/styles/scss/components/fluid-combo-box/fluid-combo-box",
+ "relativePath": "scss/components/fluid-combo-box/fluid-combo-box",
+ },
+ Object {
+ "filepath": "scss/components/fluid-combo-box/_index.scss",
+ "importPath": "@carbon/styles/scss/components/fluid-combo-box",
+ "relativePath": "scss/components/fluid-combo-box",
+ },
Object {
"filepath": "scss/components/fluid-date-picker/_fluid-date-picker.scss",
"importPath": "@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker",
@@ -292,6 +302,26 @@ Array [
"importPath": "@carbon/styles/scss/components/fluid-list-box",
"relativePath": "scss/components/fluid-list-box",
},
+ Object {
+ "filepath": "scss/components/fluid-multiselect/_fluid-multiselect.scss",
+ "importPath": "@carbon/styles/scss/components/fluid-multiselect/fluid-multiselect",
+ "relativePath": "scss/components/fluid-multiselect/fluid-multiselect",
+ },
+ Object {
+ "filepath": "scss/components/fluid-multiselect/_index.scss",
+ "importPath": "@carbon/styles/scss/components/fluid-multiselect",
+ "relativePath": "scss/components/fluid-multiselect",
+ },
+ Object {
+ "filepath": "scss/components/fluid-number-input/_fluid-number-input.scss",
+ "importPath": "@carbon/styles/scss/components/fluid-number-input/fluid-number-input",
+ "relativePath": "scss/components/fluid-number-input/fluid-number-input",
+ },
+ Object {
+ "filepath": "scss/components/fluid-number-input/_index.scss",
+ "importPath": "@carbon/styles/scss/components/fluid-number-input",
+ "relativePath": "scss/components/fluid-number-input",
+ },
Object {
"filepath": "scss/components/fluid-select/_fluid-select.scss",
"importPath": "@carbon/styles/scss/components/fluid-select/fluid-select",
diff --git a/packages/styles/files.js b/packages/styles/files.js
index 621fd5c62685..1e91b581c514 100644
--- a/packages/styles/files.js
+++ b/packages/styles/files.js
@@ -71,12 +71,18 @@ const files = [
'scss/components/file-uploader/_index.scss',
'scss/components/form/_form.scss',
'scss/components/form/_index.scss',
+ 'scss/components/fluid-combo-box/_fluid-combo-box.scss',
+ 'scss/components/fluid-combo-box/_index.scss',
'scss/components/fluid-date-picker/_fluid-date-picker.scss',
'scss/components/fluid-date-picker/_index.scss',
'scss/components/fluid-dropdown/_fluid-dropdown.scss',
'scss/components/fluid-dropdown/_index.scss',
'scss/components/fluid-list-box/_fluid-list-box.scss',
'scss/components/fluid-list-box/_index.scss',
+ 'scss/components/fluid-multiselect/_fluid-multiselect.scss',
+ 'scss/components/fluid-multiselect/_index.scss',
+ 'scss/components/fluid-number-input/_fluid-number-input.scss',
+ 'scss/components/fluid-number-input/_index.scss',
'scss/components/fluid-select/_fluid-select.scss',
'scss/components/fluid-select/_index.scss',
'scss/components/fluid-text-area/_fluid-text-area.scss',
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index 7890dc352fab..20d2b7883985 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -28,6 +28,7 @@
@use 'fluid-dropdown';
@use 'fluid-list-box';
@use 'fluid-multiselect';
+@use 'fluid-number-input';
@use 'fluid-select';
@use 'fluid-text-area';
@use 'fluid-text-input';
diff --git a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss
index 55cc0ebacc12..d14cbe279d4d 100644
--- a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss
+++ b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss
@@ -6,7 +6,7 @@
//
//-----------------------------
-// Fluid ComboBox
+// Fluid Multiselect
//-----------------------------
@use '../../config' as *;
@use '../../motion' as *;
diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
new file mode 100644
index 000000000000..26475ed6ec18
--- /dev/null
+++ b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
@@ -0,0 +1,263 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Fluid Number Input
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../number-input';
+
+@mixin fluid-number-input {
+ .#{$prefix}--number-input--fluid {
+ position: relative;
+ height: 100%;
+ background: $field;
+ }
+
+ .#{$prefix}--number-input--fluid .#{$prefix}--label {
+ position: absolute;
+ z-index: 1;
+ top: rem(13px);
+ left: $spacing-05;
+ display: flex;
+ width: calc(100% - 2rem);
+ height: rem(16px);
+ align-items: center;
+ margin: 0;
+ -ms-overflow-style: none;
+ overflow-x: scroll;
+ scrollbar-width: none;
+ white-space: nowrap;
+ }
+
+ .#{$prefix}--number-input--fluid .#{$prefix}--label::-webkit-scrollbar {
+ display: none;
+ }
+
+ .#{$prefix}--number-input--fluid input[type='number'] {
+ min-height: rem(64px);
+ padding: rem(32px) rem(80px) rem(13px) $spacing-05;
+ background: transparent;
+ outline: none;
+ }
+
+ .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
+ top: rem(23px);
+ height: rem(40px);
+ transform: translate(0);
+ }
+
+ .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn,
+ .#{$prefix}--number-input--fluid
+ input[type='number']:focus
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn {
+ border-bottom: 1px solid transparent;
+ }
+
+ // Focus Overrides
+ .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+ .#{$prefix}--number {
+ @include focus-outline('outline');
+ }
+
+ // Weird overrides (needed to override focus borders on stepper buttons when hovered while input has focus)
+ .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+ .#{$prefix}--number
+ .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+ input[type='number']:focus
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn:hover {
+ outline: 2px solid transparent;
+ }
+
+ .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+ .#{$prefix}--number
+ .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+ input[type='number']:focus
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn:hover::before {
+ top: auto;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ background: $focus;
+ }
+ // End weirdness
+
+ .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+ .#{$prefix}--number-input-wrapper:not(.#{$prefix}--number-input-wrapper__warning)
+ input[type='number']:focus
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn:hover {
+ border-bottom: 1px solid $focus;
+ outline: none;
+ }
+
+ .#{$prefix}--number-input--fluid
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn::after {
+ top: 0;
+ height: calc(100% - rem(1px));
+ }
+
+ .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn.up-icon::after {
+ background: $focus;
+ }
+
+ .#{$prefix}--number-input--fluid
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn.up-icon::after {
+ height: calc(100%);
+ }
+
+ .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn.up-icon:hover::after {
+ height: calc(100%);
+ background-color: $focus;
+ }
+
+ .#{$prefix}--number-input--fluid--invalid
+ input[type='number'][data-invalid]
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn:focus,
+ .#{$prefix}--number-input--fluid--invalid
+ .#{$prefix}--number
+ input[type='number'][data-invalid]
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn:focus:hover {
+ @include focus-outline('outline');
+ }
+
+ // Invalid styles
+ .#{$prefix}--number-input--fluid .#{$prefix}--number-input__divider {
+ display: none;
+ }
+
+ .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid {
+ top: rem(73px);
+ right: $spacing-05;
+ pointer-events: none;
+ }
+
+ .#{$prefix}--number-input--fluid
+ .#{$prefix}--number__controls
+ .#{$prefix}--number__rule-divider:first-of-type {
+ display: none;
+ }
+
+ .#{$prefix}--number-input--fluid
+ .#{$prefix}--number__input-wrapper--warning
+ input[type='number'] {
+ border-bottom: 1px solid transparent;
+ }
+
+ .#{$prefix}--number-input--fluid
+ .#{$prefix}--number__input-wrapper--warning
+ input[type='number']:focus {
+ outline: none;
+ }
+
+ .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+ .#{$prefix}--number-input__divider,
+ .#{$prefix}--number-input--fluid
+ .#{$prefix}--number__input-wrapper--warning
+ + .#{$prefix}--number-input__divider {
+ position: absolute;
+ top: rem(63px);
+ display: block;
+ width: calc(100% - 2rem);
+ height: rem(1px);
+ border: none;
+ border-bottom: 1px solid $border-subtle;
+ margin: 0 1rem;
+ }
+
+ .#{$prefix}--number-input--fluid .#{$prefix}--form-requirement {
+ padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+ margin: 0;
+ }
+
+ .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid:not(.#{$prefix}--number-input--fluid--focus)
+ .#{$prefix}--number {
+ @include focus-outline('invalid');
+ }
+
+ .#{$prefix}--number-input--fluid--invalid
+ .#{$prefix}--number[data-invalid]
+ input[type='number'] {
+ border-bottom: 1px solid transparent;
+ }
+
+ .#{$prefix}--number-input--fluid--invalid
+ .#{$prefix}--number[data-invalid]
+ input[type='number'],
+ .#{$prefix}--number-input--fluid--invalid
+ .#{$prefix}--number
+ input[type='number'][data-invalid]
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn:hover,
+ .#{$prefix}--number-input--fluid
+ .#{$prefix}--number__input-wrapper--warning
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn:hover:not(:focus) {
+ outline: none;
+ }
+
+ .#{$prefix}--number-input--fluid.#{$prefix}--number-input--invalid
+ .#{$prefix}--number__input-wrapper
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn,
+ .#{$prefix}--number-input--fluid
+ .#{$prefix}--number__input-wrapper--warning
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn {
+ border-bottom: none;
+ }
+
+ .#{$prefix}--number-input--fluid--invalid
+ .#{$prefix}--number
+ input[type='number'][data-invalid]
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn,
+ .#{$prefix}--number-input--fluid
+ .#{$prefix}--number
+ input[type='number']
+ ~ .#{$prefix}--number__controls
+ .#{$prefix}--number__control-btn {
+ border: initial;
+ border-bottom-width: rem(1px);
+ }
+
+ // Disabled states
+ .#{$prefix}--number-input--fluid--disabled:not(.#{$prefix}--number-input--fluid--invalid)
+ .#{$prefix}--number {
+ border-bottom: 1px solid $border-subtle;
+ }
+
+ .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid
+ .#{$prefix}--number
+ input[type='number']:disabled {
+ background-color: transparent;
+ }
+}
diff --git a/packages/styles/scss/components/fluid-number-input/_index.scss b/packages/styles/scss/components/fluid-number-input/_index.scss
new file mode 100644
index 000000000000..87a2e12907be
--- /dev/null
+++ b/packages/styles/scss/components/fluid-number-input/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022
+//
+// 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 'fluid-number-input';
+@use 'fluid-number-input';
+
+@include fluid-number-input.fluid-number-input;
diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss
index b1725bfc391d..468f51611383 100644
--- a/packages/styles/scss/components/form/_form.scss
+++ b/packages/styles/scss/components/form/_form.scss
@@ -110,7 +110,7 @@ $input-label-weight: 400 !default;
}
input[type='number'] {
- font-family: carbon--font-family('mono');
+ font-family: font-family('sans');
}
input[data-invalid]:not(:focus),
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index 2406eb410198..fcff70a33e49 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -32,7 +32,7 @@
}
.#{$prefix}--number input[type='number'] {
- @include type-style('code-01');
+ @include type-style('body-compact-01');
@include focus-outline('reset');
display: inline-flex;
@@ -50,7 +50,7 @@
background-color: $field;
border-radius: 0;
color: $text-primary;
- font-family: font-family('mono');
+ font-family: font-family('sans');
font-weight: 400;
transition: background-color $duration-fast-01 motion(standard, productive),
outline $duration-fast-01 motion(standard, productive);