chore(inputgroup): add input group to react-integration

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

@@ -14,11 +14,13 @@ const InputGroup = ({ className, children, ...props }) => {
   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;
-        })
+        ? React.Children.map(
+            children,
+            child =>
+              formCtrls.includes(child.type.toString())
+                ? React.cloneElement(child, { 'aria-describedby': idItem.props.id })
+                : child
+          )
         : children}
     </div>
   );

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

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

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

@@ -4,26 +4,24 @@ 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>
-  );
-};
+const InputGroupText = ({ component: Component, className, children, ...props }) => (
+  <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,
+  component: componentShape
 };
 
 InputGroupText.defaultProps = {
   className: '',
-  component: 'span',
+  component: 'span'
 };
 
 export default InputGroupText;

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

@@ -26,10 +26,10 @@ class SimpleInputGroups extends React.Component {
     });
   };
 
-  onSelect = (event) => {
+  onSelect = event => {
     this.setState({
       isOpen: false,
-      selected: event.currentTarget.value,
+      selected: event.currentTarget.value
     });
   };
   render() {
@@ -65,12 +65,22 @@ class SimpleInputGroups extends React.Component {
         <InputGroup>
           <Dropdown
             onSelect={this.onSelect}
-            toggle={<DropdownToggle onToggle={this.onToggle}>{this.state.selected ? this.state.selected : 'Dropdown' }</DropdownToggle>}
+            toggle={
+              <DropdownToggle onToggle={this.onToggle}>
+                {this.state.selected ? this.state.selected : 'Dropdown'}
+              </DropdownToggle>
+            }
             isOpen={this.state.isOpen}
             dropdownItems={[
-              <DropdownItem key="opt-1" value="Option 1" component="button">Option 1</DropdownItem>,
-              <DropdownItem key="opt-2" value="Option 2" component="button">Option 2</DropdownItem>,
-              <DropdownItem key="opt-3" value="Option 3" component="button">Option 3</DropdownItem>,
+              <DropdownItem key="opt-1" value="Option 1" component="button">
+                Option 1
+              </DropdownItem>,
+              <DropdownItem key="opt-2" value="Option 2" component="button">
+                Option 2
+              </DropdownItem>,
+              <DropdownItem key="opt-3" value="Option 3" component="button">
+                Option 3
+              </DropdownItem>
             ]}
           >
             Dropdown
@@ -124,7 +134,7 @@ class SimpleInputGroups extends React.Component {
           <Popover
             aria-label="popover example"
             position={PopoverPosition.top}
-            bodyContent={'This field is an example of input group with popover'}
+            bodyContent="This field is an example of input group with popover"
           >
             <Button variant={ButtonVariant.tertiary} aria-label="popover for input">
               <QuestionCircleIcon />

packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx

@@ -9,9 +9,12 @@ import {
   AlertActionCloseButton,
   AlertActionLink,
   AlertVariant,
+  InputGroup,
+  InputGroupText,
   Select,
   SelectOption,
-  SelectVariant
+  SelectVariant,
+  TextInput
 } from '@patternfly/react-core';
 import React, { Component } from 'react';
 import logo from './logo.svg';
@@ -88,6 +91,12 @@ class App extends Component {
           <SelectOption value="option 2" />
           <SelectOption value="option 3" />
         </Select>
+        <InputGroup>
+          <InputGroupText component="label" htmlFor="dollar_number">
+            $
+          </InputGroupText>
+          <TextInput id="dollar_number" type="number" />
+        </InputGroup>
       </div>
     );
   }