Converted InputGroup.

src/components/Input/Input.js

@@ -163,12 +163,9 @@ export default class BaseInput extends React.Component {
         inputProps.checked = state.checked;
         inputProps.multiple = props.multiple;
 
-        if (
-          !props.id &&
-          (props.multiple || props.type === 'radio') &&
-          typeof state.value === 'string'
-        ) {
-          inputProps.id += `-${state.value}`;
+        if (!props.id && (props.multiple || props.type === 'radio')) {
+          // $FlowIgnore We know these are strings
+          inputProps.id = `${inputProps.id}-${state.value}`;
         }
 
       // eslint-disable-next-line no-fallthrough

src/components/InputGroup/Addon.js

@@ -2,37 +2,46 @@
  * @copyright   2010-2017, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
+ * @flow
  */
 
 import React, { PropTypes } from 'react';
-import Component from '../../Component';
-import { defaultSizeProps, sizePropTypes } from '../../propTypes';
-import MODULE from './module';
+import style, { classes } from '../../styler';
+import { classNamesPropType, sizeDefaults, sizePropTypes } from '../../propTypes';
 
-export default class Addon extends Component {
-  static module = MODULE;
+import type { InputGroupAddonProps } from './types';
 
-  static defaultProps = {
-    ...defaultSizeProps,
-  };
+export function ToolkitInputGroupAddon({
+  children,
+  classNames,
+  large,
+  small,
+}: InputGroupAddonProps) {
+  return (
+    <span
+      className={classes(classNames.addon, {
+        [classNames.addon__large]: large,
+        [classNames.addon__small]: small,
+      })}
+    >
+      {children}
+    </span>
+  );
+}
 
-  static propTypes = {
-    ...sizePropTypes,
-    children: PropTypes.node,
-  };
+ToolkitInputGroupAddon.propTypes = {
+  ...sizePropTypes,
+  children: PropTypes.node,
+  classNames: classNamesPropType.isRequired,
+};
 
-  render() {
-    const props = this.props;
+ToolkitInputGroupAddon.defaultProps = {
+  ...sizeDefaults,
+  children: null,
+};
 
-    return (
-      <span
-        className={this.formatChildClass('addon', {
-          '@large': props.large,
-          '@small': props.small,
-        })}
-      >
-        {props.children}
-      </span>
-    );
-  }
-}
+export default style({
+  addon: 'input-group__addon',
+  addon__large: 'input-group__addon--large',
+  addon__small: 'input-group__addon--small',
+})(ToolkitInputGroupAddon);

src/components/InputGroup/InputGroup.js

@@ -2,22 +2,28 @@
  * @copyright   2010-2017, The Titon Project
  * @license     http://opensource.org/licenses/BSD-3-Clause
  * @link        http://titon.io
+ * @flow
  */
 
-import React from 'react';
-import Component from '../../Component';
-import MODULE from './module';
+import React, { PropTypes } from 'react';
+import style, { classes } from '../../styler';
+import { classNamesPropType } from '../../propTypes';
 
-export default class InputGroup extends Component {
-  static module = MODULE;
+import type { InputGroupProps } from './types';
 
-  render() {
-    const props = this.props;
-
-    return (
-      <span className={this.formatClass()}>
-        {props.children}
-      </span>
-    );
-  }
+export function ToolkitInputGroup({ children, classNames }: InputGroupProps) {
+  return (
+    <span className={classes(classNames.inputGroup)}>
+      {children}
+    </span>
+  );
 }
+
+ToolkitInputGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+  classNames: classNamesPropType.isRequired,
+};
+
+export default style({
+  inputGroup: 'input-group',
+})(ToolkitInputGroup);

src/components/InputGroup/types.js

@@ -0,0 +1,20 @@
+/**
+ * @copyright   2010-2017, The Titon Project
+ * @license     http://opensource.org/licenses/BSD-3-Clause
+ * @link        http://titon.io
+ * @flow
+ */
+
+import type { ReactChildren, ClassNameMap } from '../../types';
+
+export type InputGroupProps = {
+  children: ReactChildren,
+  classNames: ClassNameMap,
+};
+
+export type InputGroupAddonProps = {
+  children: ReactChildren,
+  classNames: ClassNameMap,
+  large: boolean,
+  small: boolean,
+};