diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
index e1504929e39a..12c2f4f04344 100644
--- a/packages/components/src/components/form/_form.scss
+++ b/packages/components/src/components/form/_form.scss
@@ -83,6 +83,26 @@
}
}
+ //Fluid Form
+ .#{$prefix}--form--fluid
+ .#{$prefix}--text-input__field-wrapper[data-invalid] {
+ display: block;
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+ margin: 0;
+ }
+
+ .#{$prefix}--form--fluid input[data-invalid] {
+ outline: none;
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--form-requirement {
+ margin: 0;
+ padding: $carbon--spacing-03 rem(40px) $carbon--spacing-03
+ $carbon--spacing-05;
+ }
+
// Fix for red ring when input is marked required in Firefox, refs #744
input:not(output):not([data-invalid]):-moz-ui-invalid {
box-shadow: none;
diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
index e10ad33fcbc0..e73495696872 100644
--- a/packages/components/src/components/text-input/_text-input.scss
+++ b/packages/components/src/components/text-input/_text-input.scss
@@ -170,6 +170,60 @@
right: $carbon--spacing-08;
}
}
+
+ //-----------------------------
+ // Fluid Text Input
+ //-----------------------------
+ .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
+ position: relative;
+ background: $field-01;
+ transition: background-color $duration--fast-01 motion(standard, productive),
+ outline $duration--fast-01 motion(standard, productive);
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--label {
+ position: absolute;
+ top: rem(13px);
+ left: $carbon--spacing-05;
+ z-index: 1;
+ margin: 0;
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--form__helper-text {
+ display: none;
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--text-input {
+ min-height: rem(64px);
+ padding: rem(32px) $carbon--spacing-05 rem(13px);
+ }
+
+ .#{$prefix}--text-input__divider,
+ .#{$prefix}--form--fluid .#{$prefix}--text-input__divider {
+ display: none;
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--text-input--invalid {
+ border-bottom: none;
+ }
+
+ .#{$prefix}--form--fluid
+ .#{$prefix}--text-input--invalid
+ + .#{$prefix}--text-input__divider {
+ display: block;
+ margin: 0 1rem;
+ border-style: solid;
+ border-bottom: none;
+ border-color: $ui-03;
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--text-input__invalid-icon {
+ top: rem(80px);
+ }
+
+ .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light {
+ background: $field-02;
+ }
}
@include exports('text-input') {
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 6675236119c5..d63663db22bf 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2568,6 +2568,16 @@ Map {
},
},
},
+ "FluidForm" => Object {
+ "propTypes": Object {
+ "children": Object {
+ "type": "node",
+ },
+ "className": Object {
+ "type": "string",
+ },
+ },
+ },
"FormGroup" => Object {
"defaultProps": Object {
"invalid": false,
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
index bc3e0c25b891..dfb8ea79ae71 100644
--- a/packages/react/src/__tests__/index-test.js
+++ b/packages/react/src/__tests__/index-test.js
@@ -52,6 +52,7 @@ describe('Carbon Components React', () => {
"FileUploaderItem",
"FileUploaderSkeleton",
"Filename",
+ "FluidForm",
"Form",
"FormGroup",
"FormItem",
diff --git a/packages/react/src/components/FluidForm/FluidForm-story.js b/packages/react/src/components/FluidForm/FluidForm-story.js
new file mode 100644
index 000000000000..7afec1823a1f
--- /dev/null
+++ b/packages/react/src/components/FluidForm/FluidForm-story.js
@@ -0,0 +1,67 @@
+/**
+ * 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 { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { withKnobs } from '@storybook/addon-knobs';
+import FluidForm from '../FluidForm';
+import TextInput from '../TextInput';
+
+const additionalProps = {
+ className: 'some-class',
+ onSubmit: e => {
+ e.preventDefault();
+ action('FormSubmitted')(e);
+ },
+};
+
+const TextInputProps = {
+ className: 'some-class',
+ id: 'test2',
+ labelText: 'Text Input label',
+ placeholder: 'Placeholder text',
+};
+
+const InvalidPasswordProps = {
+ className: 'some-class',
+ id: 'test4',
+ labelText: 'Password',
+ invalid: true,
+ invalidText:
+ 'Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.',
+};
+
+storiesOf('FluidForm', module)
+ .addDecorator(withKnobs)
+ .add(
+ 'Default',
+ () => (
+