feat(InputGroup): Add InputGroup to PF4

packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.d.ts

@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { Omit } from '../../typeUtils'
+
+export interface InputGroupProps extends Omit<HTMLProps<HTMLDivElement>, 'children'> {
+    children: ReactNode;
+}
+
+declare const InputGroup: SFC<InputGroupProps>;
+
+export default InputGroup;

packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.docs.js

@@ -0,0 +1,16 @@
+import { InputGroup, InputGroupText } from '@patternfly/react-core';
+import SimpleInputGroups from './examples/SimpleInputGroups';
+
+export default {
+  title: 'InputGroup',
+  components: {
+    InputGroup,
+    InputGroupText
+  },
+  examples: [
+    {
+      component: SimpleInputGroups,
+      title: 'Buttons and TextArea'
+    }
+  ]
+};

packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from '@patternfly/patternfly/components/InputGroup/input-group.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import { FormSelect } from '../FormSelect';
+import { TextArea } from '../TextArea';
+import { TextInput } from '../TextInput';
+
+const InputGroup = ({ className, children, ...props }) => {
+  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.toString());
+  const idItem = React.Children.toArray(children).find(
+    child => !formCtrls.includes(child.type.toString()) && child.props.id
+  );
+  return (
+    <div className={css(styles.inputGroup, className)} {...props}>
+      {idItem
+        ? React.Children.map(children, child => {
+          return formCtrls.includes(child.type.toString())
+            ? React.cloneElement(child, { 'aria-describedby': idItem.props.id })
+            : child;
+        })
+        : children}
+    </div>
+  );
+};
+
+InputGroup.propTypes = {
+  /** Additional classes added to the input group. */
+  className: PropTypes.string,
+  /** Content rendered inside the input group. */
+  children: PropTypes.node.isRequired
+};
+
+InputGroup.defaultProps = {
+  className: ''
+};
+
+export default InputGroup;

packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.test.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import InputGroup from './InputGroup';
+import InputGroupText from './InputGroupText';
+import { Button } from '../Button';
+import { TextInput } from '../TextInput';
+
+test('InputGroupText', () => {
+  const view = shallow(
+    <InputGroupText className="inpt-grp-text" id="email-npt-grp">
+      @
+    </InputGroupText>
+  );
+  expect(view.find('span')).toHaveLength(1);
+  const spanProps = view.find('span').props();
+  expect(spanProps.className).toEqual(expect.stringContaining('inpt-grp-text'));
+  expect(spanProps.id).toBe('email-npt-grp');
+  expect(view.text()).toBe('@');
+});
+
+test('InputGroup', () => {
+  const view = shallow(
+    <InputGroup className="text-verify-cls" id="text-1">
+      <TextInput value="this is text" aria-label="data text" />
+    </InputGroup>
+  );
+
+  expect(view.find('div')).toHaveLength(1);
+  const divProps = view.find('div').props();
+  expect(divProps.className).toEqual(expect.stringContaining('text-verify-cls'));
+  expect(divProps.id).toBe('text-1');
+});
+
+test('add aria-describedby to form-control if one of the non form-controls has id', () => {
+  // In this test, TextInput is a form-control component and Button is not.
+  // If Button has an id props, this should be used in aria-describedby.
+  const view = shallow(
+    <InputGroup>
+      <TextInput value="some data" aria-label="some text" />
+      <Button variant="primary" id="button-id">
+        hello
+      </Button>
+    </InputGroup>
+  );
+  expect(view.find(TextInput).props()['aria-describedby']).toBe('button-id');
+});

packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.d.ts

@@ -0,0 +1,11 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { Omit } from '../../typeUtils'
+
+export interface InputGroupTextProps extends Omit<HTMLProps<HTMLSpanElement | HTMLLabelElement>, 'children'> {
+    children: ReactNode;
+    component?: ReactType<HTMLSpanElement> | ReactType<HTMLLabelElement>;
+}
+
+declare const InputGroupText: SFC<InputGroupTextProps>;
+
+export default InputGroupText;

packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from '@patternfly/patternfly/components/InputGroup/input-group.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import { componentShape } from '../../helpers/componentShape';
+
+const InputGroupText = ({ component: Component, className, children, ...props }) => {
+  return (
+    <Component className={css(styles.inputGroupText, className)} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+InputGroupText.propTypes = {
+  /** Additional classes added to the input group text. */
+  className: PropTypes.string,
+  /** Content rendered inside the input group text. */
+  children: PropTypes.node.isRequired,
+  /** Component that wraps the input group text. */
+  component: componentShape,
+};
+
+InputGroupText.defaultProps = {
+  className: '',
+  component: 'span',
+};
+
+export default InputGroupText;

packages/patternfly-4/react-core/src/components/InputGroup/examples/SimpleInputGroups.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { DollarSignIcon, AtIcon, CalendarAltIcon, SearchIcon, QuestionCircleIcon } from '@patternfly/react-icons';
+import {
+  Button,
+  TextArea,
+  InputGroup,
+  InputGroupText,
+  TextInput,
+  Dropdown,
+  DropdownToggle,
+  Popover
+} from '@patternfly/react-core';
+
+class SimpleInputGroups extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <InputGroup>
+          <Button id="textAreaButton1" variant="secondary">
+            Button
+          </Button>
+          <TextArea name="textarea1" id="textarea1" aria-label="textarea with buttons" />
+          <Button variant="tertiary">Button</Button>
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <TextArea name="textarea2" id="textarea2" aria-label="textarea with button" />
+          <Button id="textAreaButton2" variant="tertiary">
+            Button
+          </Button>
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <Button id="textAreaButton3" variant="primary">
+            Button
+          </Button>
+          <Button variant="secondary">Button</Button>
+          <TextArea name="textarea3" id="textarea3" aria-label="textarea with 3 buttons" />
+          <Button variant="tertiary">Button</Button>
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <Dropdown onSelect={() => {}} toggle={<DropdownToggle onToggle={() => {}}>Dropdown</DropdownToggle>}>
+            Dropdown
+          </Dropdown>
+          <TextInput id="textInput3" aria-label="input with dropdown and button" />
+          <Button id="inputDropdownButton1">Button</Button>
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <InputGroupText>
+            <DollarSignIcon />
+          </InputGroupText>
+          <TextInput id="textInput5" type="number" aria-label="Dollar amount input example" />
+          <InputGroupText>.00</InputGroupText>
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <TextInput id="textInput6" type="email" aria-label="email input field" />
+          <InputGroupText id="email-example">@example.com</InputGroupText>
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <InputGroupText id="username" aria-label="@">
+            <AtIcon />
+          </InputGroupText>
+          <TextInput isValid={false} id="textInput7" type="email" aria-label="Error state username example" />
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <InputGroupText component="label" htmlFor="textInput9">
+            <CalendarAltIcon />
+          </InputGroupText>
+          <TextInput name="textInput9" id="textInput9" type="date" aria-label="Date input example" />
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <TextInput name="textInput11" id="textInput11" type="search" aria-label="search input example" />
+          <Button variant="tertiary" aria-label="search button for search input">
+            <SearchIcon />
+          </Button>
+        </InputGroup>
+        <br />
+        <br />
+        <InputGroup>
+          <TextInput name="textInput10" id="textInput10" type="search" aria-label="input example with popover" />
+          <Popover position="top" bodyContent={'This field is an example of input group with popover'}>
+            <Button variant="tertiary" aria-label="popover for input">
+              <QuestionCircleIcon />
+            </Button>
+          </Popover>
+        </InputGroup>
+      </React.Fragment>
+    );
+  }
+}
+
+export default SimpleInputGroups;

packages/patternfly-4/react-core/src/components/InputGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputGroup } from './InputGroup';
+export { default as InputGroupText } from './InputGroupText';

packages/patternfly-4/react-core/src/components/InputGroup/index.js

@@ -0,0 +1,2 @@
+export { default as InputGroup } from './InputGroup';
+export { default as InputGroupText } from './InputGroupText';

packages/patternfly-4/react-core/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './Dropdown';
 export * from './EmptyState';
 export * from './Form';
 export * from './FormSelect';
+export * from './InputGroup';
 export * from './Label';
 export * from './List';
 export * from './LoginPage';