feat(text-input): adds fluid variation of text input

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;

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') {

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,

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

@@ -52,6 +52,7 @@ describe('Carbon Components React', () => {
         "FileUploaderItem",
         "FileUploaderSkeleton",
         "Filename",
+        "FluidForm",
         "Form",
         "FormGroup",
         "FormItem",

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',
+    () => (
+      <FluidForm {...additionalProps}>
+        <TextInput {...TextInputProps} />
+
+        <TextInput
+          type="password"
+          required
+          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
+          {...InvalidPasswordProps}
+        />
+      </FluidForm>
+    ),
+    {
+      info: {
+        text: `
+            Forms are widely used to collect user input.
+
+            Form can have any number of react components enclosed within FormGroup component. FormGroup component
+            is a wrapper for legend and fieldset component.
+
+          `,
+      },
+    }
+  );

packages/react/src/components/FluidForm/FluidForm-test.js

@@ -0,0 +1,58 @@
+/**
+ * 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 FluidForm from '../FluidForm';
+import { shallow, mount } from 'enzyme';
+
+describe('FluidForm', () => {
+  describe('Renders as expected', () => {
+    const wrapper = mount(<FluidForm className="extra-class" />);
+    it('renders children as expected', () => {
+      expect(wrapper.find('.child').length).toBe(0);
+    });
+    it('renders wrapper as expected', () => {
+      expect(wrapper.length).toBe(1);
+    });
+    it('renders extra classes passed in via className', () => {
+      expect(wrapper.hasClass('extra-class')).toEqual(true);
+    });
+
+    it('should render wrapper as expected', () => {
+      const form = shallow(
+        <FluidForm>
+          <div className="test-child1" />
+          <div className="test-child2" />
+        </FluidForm>
+      );
+      expect(form.length).toEqual(1);
+    });
+    it('should render children as expected', () => {
+      const form1 = shallow(
+        <FluidForm>
+          <div className="test-child" />
+          <div className="test-child" />
+        </FluidForm>
+      );
+      expect(form1.find('.test-child').length).toBe(2);
+    });
+
+    it('should handle submit events', () => {
+      const onSubmit = jest.fn();
+      const form1 = mount(
+        <FluidForm>
+          <button className="button" type="submit" onSubmit={onSubmit}>
+            Submit
+          </button>
+        </FluidForm>
+      );
+      const btn = form1.find('button');
+      btn.simulate('submit');
+      expect(onSubmit).toBeCalled();
+    });
+  });
+});

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

@@ -0,0 +1,41 @@
+/**
+ * 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 classnames from 'classnames';
+import { settings } from 'carbon-components';
+import Form from '../Form';
+import { FormContext } from './FormContext';
+
+const { prefix } = settings;
+
+function FluidForm({ className, children, ...other }) {
+  const classNames = classnames(`${prefix}--form--fluid`, className);
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <Form className={classNames} {...other}>
+        {children}
+      </Form>
+    </FormContext.Provider>
+  );
+}
+
+FluidForm.propTypes = {
+  /**
+   * Provide children to be rendered inside of the <form> element
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied on the containing <form> node
+   */
+  className: PropTypes.string,
+};
+
+export default FluidForm;

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

@@ -0,0 +1,12 @@
+/**
+ * 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 { createContext } from 'react';
+
+export const FormContext = createContext({
+  isFluid: false,
+});

packages/react/src/components/FluidForm/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 './FluidForm';
+export { FormContext } from './FormContext';

packages/react/src/components/Form/Form.js

@@ -14,7 +14,6 @@ const { prefix } = settings;
 
 const Form = ({ className, children, ...other }) => {
   const classNames = classnames(`${prefix}--form`, className);
-
   return (
     <form className={classNames} {...other}>
       {' '}

packages/react/src/components/TextInput/TextInput-story.js

@@ -11,6 +11,7 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import TextInput from '../TextInput';
 import TextInputSkeleton from '../TextInput/TextInput.Skeleton';
+import FluidForm from '../FluidForm/FluidForm';
 
 const types = {
   None: '',
@@ -114,6 +115,27 @@ storiesOf('TextInput', module)
       },
     }
   )
+  .add(
+    'Fluid',
+    () => (
+      <FluidForm>
+        <TextInput
+          type={select('Form control type (type)', types, 'text')}
+          {...props.TextInputProps()}
+        />
+      </FluidForm>
+    ),
+    {
+      info: {
+        text: `
+            Text fields enable the user to interact with and input data. A single line
+            field is used when the input anticipated by the user is a single line of
+            text as opposed to a paragraph.
+            The default type is 'text' and its value can be either 'string' or 'number'.
+          `,
+      },
+    }
+  )
   .add(
     'Toggle password visibility',
     () => {