From 4002b599810545586c92f36cfda2087f9497d68f Mon Sep 17 00:00:00 2001
From: Boaz Shuster <boaz.shuster.github@gmail.com>
Date: Tue, 5 Mar 2019 00:14:07 +0200
Subject: [PATCH] chore(inputgroup): add input group to react-integration

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
---
 .../src/components/InputGroup/InputGroup.js   | 12 ++++++----
 .../components/InputGroup/InputGroupText.d.ts |  2 +-
 .../components/InputGroup/InputGroupText.js   | 16 ++++++-------
 .../InputGroup/examples/SimpleInputGroups.js  | 24 +++++++++++++------
 .../react-integration/demo-app-ts/src/App.tsx | 11 ++++++++-
 5 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.js b/packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.js
index 2f85f0dc1ad..ef9a5e7acaa 100644
--- a/packages/patternfly-4/react-core/src/components/InputGroup/InputGroup.js
+++ b/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>
   );
diff --git a/packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.d.ts b/packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.d.ts
index eecc2c4ffe0..6bc6fef94f7 100644
--- a/packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.d.ts
+++ b/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>;
diff --git a/packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.js b/packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.js
index 61f5c660455..eb123710b1d 100644
--- a/packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.js
+++ b/packages/patternfly-4/react-core/src/components/InputGroup/InputGroupText.js
@@ -4,13 +4,11 @@ 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. */
@@ -18,12 +16,12 @@ InputGroupText.propTypes = {
   /** 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;
diff --git a/packages/patternfly-4/react-core/src/components/InputGroup/examples/SimpleInputGroups.js b/packages/patternfly-4/react-core/src/components/InputGroup/examples/SimpleInputGroups.js
index 0b08bfa7d9a..c2c853d01ad 100644
--- a/packages/patternfly-4/react-core/src/components/InputGroup/examples/SimpleInputGroups.js
+++ b/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 />
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx
index c91390ea2a8..f9e21e3f7ff 100755
--- a/packages/patternfly-4/react-integration/demo-app-ts/src/App.tsx
+++ b/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>
     );
   }