feat(ControlGroup): add ControlGroup component

Author: liorocks

__tests__/ControlGroup.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ControlGroup } from '../src/index';
+
+describe('<ControlGroup />', () => {
+  it('renders basic <ControlGroup />', () => {
+    expect(renderToStaticMarkup(<ControlGroup />)).toEqual(
+      '<div class="pt-control-group"></div>'
+    );
+  });
+
+  it('renders basic <ControlGroup /> with props', () => {
+    expect(renderToStaticMarkup(<ControlGroup fill />)).toEqual(
+      '<div class="pt-control-group pt-fill"></div>'
+    );
+
+    expect(renderToStaticMarkup(<ControlGroup vertical />)).toEqual(
+      '<div class="pt-control-group pt-vertical"></div>'
+    );
+
+    expect(
+      renderToStaticMarkup(<ControlGroup fill className="css-extra-class" />)
+    ).toEqual('<div class="pt-control-group pt-fill css-extra-class"></div>');
+  });
+
+  it('renders basic <ControlGroup /> with children', () => {
+    expect(
+      renderToStaticMarkup(<ControlGroup>Children Content</ControlGroup>)
+    ).toEqual('<div class="pt-control-group">Children Content</div>');
+  });
+});

src/components/ControlGroup/ControlGroup.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const ControlGroup = ({ children, fill, vertical, className, ...rest }) => {
+  return (
+    <div
+      className={classnames(
+        'pt-control-group',
+        { 'pt-fill': fill },
+        { 'pt-vertical': vertical },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * ControlGroup property types.
+ */
+ControlGroup.propTypes = {
+  /**
+   * Primary content.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Additional CSS classes.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Make all elements expand equally.
+   */
+  fill: PropTypes.bool,
+
+  /**
+   * Create a vertical control group.
+   */
+  vertical: PropTypes.bool,
+};
+
+/**
+ * ControlGroup default properties.
+ */
+ControlGroup.defaultProps = {
+  children: null,
+  className: '',
+  fill: false,
+  vertical: false,
+};
+
+export default ControlGroup;

src/components/ControlGroup/ControlGroup.md

@@ -0,0 +1,94 @@
+Control group renders several distinct controls as one unit, squaring the borders between them.
+
+ It supports any number of `Button`, `InputGroup`, `input` and `select` elements as direct children.
+
+ > Note that `ControlGroup` does not cascade any modifiers to its children. For example, each child must be marked individually as `.pt-large` for uniform large appearance.
+
+```js static
+import { ControlGroup } from 'blueprint-components';
+```
+
+Additionally:
+
+```js static
+import { Button, Classes, Icon, InputGroup, Intent } from '@blueprintjs/core';
+```
+
+```jsx
+<ControlGroup>
+  <Button text="filter" iconName="filter" />
+  <input type="text" className="pt-input" placeholder="Find filters..." />
+</ControlGroup>
+```
+
+```jsx
+<ControlGroup>
+  <div className="pt-select">
+    <select onChange={() => {}}>
+      <option>Filter...</option>
+      <option value="1">Issues</option>
+      <option value="2">Requests</option>
+      <option value="3">Projects</option>
+    </select>
+  </div>
+  <InputGroup leftIconName="search" placeholder="from:ggray to:allorca" />
+</ControlGroup>
+```
+
+```jsx
+<ControlGroup>
+  <InputGroup 
+    leftIconName="people" 
+    placeholder="Find collaborators..."
+    rightElement={<Button text="can view" rightIconName="caret-down" className="pt-minimal" intent={Intent.PRIMARY} />}
+  />
+  <Button intent={Intent.PRIMARY} text="Add" />
+</ControlGroup>
+```
+
+### Responsive Control Group
+
+To make all elements expand equally to fill the available space, just add the optional `fill` prop.
+
+Then add `Classes.FIXED` or `pt-fixed` CSS class to individual elements to revert them to their original default sizes.
+
+```html static
+<ControlGroup fill>
+  ...
+</ControlGroup>
+```
+
+```jsx
+<ControlGroup fill>
+  <Button className={Classes.FIXED} iconName="minus" />
+  <input type="text" placeholder="Enter a value..." className="pt-input" />
+  <Button className={Classes.FIXED} iconName="plus" />
+</ControlGroup>
+```
+
+> Note: In the example below, `ControlGroup` does not have `fill` prop, but instead `InputGroup` has `className={Classes.FILL}`.
+
+```jsx
+<ControlGroup>
+  <InputGroup className={Classes.FILL} leftIconName="people" placeholder="Find collaborators..." />
+  <Button intent={Intent.PRIMARY} text="Add" />
+</ControlGroup>
+```
+
+### Vertical Control Group
+
+To create a vertical control group, just add optional `vertical` prop:
+
+```html static
+<ControlGroup vertical>
+  ...
+</ControlGroup>
+```
+
+```jsx
+<ControlGroup vertical style={{width: 300}}>
+  <InputGroup className={Classes.LARGE} leftIconName="person" placeholder="Username" />
+  <InputGroup className={Classes.LARGE} leftIconName="lock" placeholder="Password" />
+  <Button className={Classes.LARGE} intent={Intent.PRIMARY} text="Login" />
+</ControlGroup>
+```

src/components/ControlGroup/index.js

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

src/index.js

@@ -1,6 +1,7 @@
 export { ButtonGroup } from './components/ButtonGroup';
 export { Callout } from './components/Callout';
 export { Card } from './components/Card';
+export { ControlGroup } from './components/ControlGroup';
 export { Navbar } from './components/Navbar';
 export { NavbarDivider } from './components/NavbarDivider';
 export { NavbarGroup } from './components/NavbarGroup';