diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.js b/packages/react/src/components/FluidTextInput/FluidTextInput.js new file mode 100644 index 000000000000..1cd0fb098365 --- /dev/null +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.js @@ -0,0 +1,91 @@ +/** + * 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 PropTypes from 'prop-types'; +import React from 'react'; +import FluidForm from '../FluidForm'; +import TextInput from '../TextInput'; + +function FluidTextInput({ className, ...other }) { + return ( + + + + ); +} + +FluidTextInput.propTypes = { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className: PropTypes.string, + + /** + * Optionally provide the default value of the `` + */ + defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + + /** + * Specify whether the `` should be disabled + */ + disabled: PropTypes.bool, + + /** + * Specify a custom `id` for the `` + */ + id: PropTypes.string.isRequired, + + /** + * Specify whether the control is currently invalid + */ + invalid: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText: PropTypes.node, + + /** + * Provide the text that will be read by a screen reader when visiting this + * control + */ + labelText: PropTypes.node.isRequired, + + /** + * Optionally provide an `onChange` handler that is called whenever `` + * is updated + */ + onChange: PropTypes.func, + + /** + * Optionally provide an `onClick` handler that is called whenever the + * `` is clicked + */ + onClick: PropTypes.func, + + /** + * Specify the placeholder attribute for the `` + */ + placeholder: PropTypes.string, + + /** + * Specify the value of the `` + */ + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + + /** + * 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 FluidTextInput; diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js new file mode 100644 index 000000000000..5a0da4cb0eb8 --- /dev/null +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js @@ -0,0 +1,116 @@ +/** + * 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 FluidTextInput from '../FluidTextInput'; +import { + ToggletipLabel, + Toggletip, + ToggletipButton, + ToggletipContent, +} from '../Toggletip'; +import { Information } from '@carbon/icons-react'; + +export default { + title: 'Components/FluidTextInput', + component: FluidTextInput, +}; + +export const Default = () => ( + +); + +const ToggleTip = ( + <> + Label + + + + + +

Additional field information here.

+
+
+ +); + +export const DefaultWithTooltip = () => ( + +); + +export const Playground = (args) => ( +
+ +
+); + +Playground.argTypes = { + playgroundWidth: { + control: { type: 'range', min: 300, max: 800, step: 50 }, + defaultValue: 300, + }, + className: { + control: { + type: 'text', + }, + defaultValue: 'test-class', + }, + defaultValue: { + control: { + type: 'text', + }, + }, + placeholder: { + control: { + type: 'text', + }, + defaultValue: 'Placeholder text', + }, + 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, + }, + labelText: { + 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.', + }, + value: { + control: { + type: 'text', + }, + }, +}; diff --git a/packages/react/src/components/FluidTextInput/index.js b/packages/react/src/components/FluidTextInput/index.js new file mode 100644 index 000000000000..df90b5ae9178 --- /dev/null +++ b/packages/react/src/components/FluidTextInput/index.js @@ -0,0 +1,9 @@ +/** + * 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 './FluidTextInput'; +export { FluidTextInput } from './FluidTextInput'; diff --git a/packages/react/src/index.js b/packages/react/src/index.js index d6052ea636d5..194496ea6568 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -66,6 +66,7 @@ export FileUploader, { export { FilterableMultiSelect } from './components/FilterableMultiSelect'; export Form from './components/Form'; export FluidForm from './components/FluidForm'; +export FluidTextInput from './components/FluidTextInput'; export FormGroup from './components/FormGroup'; export FormItem from './components/FormItem'; export FormLabel from './components/FormLabel';