From 77c9f09870b5cefcd8f916ba0f6a339a38b5895c Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 24 Jan 2017 20:44:50 +0200
Subject: [PATCH 1/2] style(Button): update typings and propTypes usage

---
 src/elements/Button/Button.js                 | 127 ++++++++--------
 src/elements/Button/ButtonContent.js          |  19 ++-
 src/elements/Button/ButtonGroup.js            |  80 ++++++-----
 src/elements/Button/ButtonOr.js               |   2 +-
 src/elements/Button/index.d.ts                | 136 +++++++++++-------
 src/index.d.ts                                |   2 -
 test/specs/elements/Button/Button-test.js     |   2 +-
 .../elements/Button/ButtonContent-test.js     |   3 +-
 8 files changed, 204 insertions(+), 167 deletions(-)

diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index eac59cb854..a047d8f176 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
 import {
@@ -16,37 +16,14 @@ import {
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Label from '../Label/Label'
-
 import ButtonContent from './ButtonContent'
 import ButtonGroup from './ButtonGroup'
 import ButtonOr from './ButtonOr'
 
 const debug = makeDebugger('button')
 
-const _meta = {
-  name: 'Button',
-  type: META.TYPES.ELEMENT,
-  props: {
-    animated: ['fade', 'vertical'],
-    attached: ['left', 'right', 'top', 'bottom'],
-    color: [
-      ...SUI.COLORS,
-      'facebook',
-      'twitter',
-      'google plus',
-      'vk',
-      'linkedin',
-      'instagram',
-      'youtube',
-    ],
-    floated: SUI.FLOATS,
-    labelPosition: ['right', 'left'],
-    size: SUI.SIZES,
-  },
-}
-
 /**
- * A Button indicates a possible user action
+ * A Button indicates a possible user action.
  * @see Form
  * @see Icon
  * @see Label
@@ -56,19 +33,19 @@ class Button extends Component {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
-    /** A button can show it is currently the active user selection */
+    /** A button can show it is currently the active user selection. */
     active: PropTypes.bool,
 
-    /** A button can animate to show hidden content */
+    /** A button can animate to show hidden content. */
     animated: PropTypes.oneOfType([
       PropTypes.bool,
-      PropTypes.oneOf(_meta.props.animated),
+      PropTypes.oneOf(['fade', 'vertical']),
     ]),
 
-    /** A button can be attached to the top or bottom of other content */
-    attached: PropTypes.oneOf(_meta.props.attached),
+    /** A button can be attached to the top or bottom of other content. */
+    attached: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
 
-    /** A basic button is less pronounced */
+    /** A basic button is less pronounced. */
     basic: PropTypes.bool,
 
     /** Primary content. */
@@ -87,31 +64,34 @@ class Button extends Component {
       ),
     ]),
 
-    /** A button can be circular */
-    circular: PropTypes.bool,
-
     /** Additional classes. */
     className: PropTypes.string,
 
-    /** Shorthand for primary content. */
-    content: customPropTypes.contentShorthand,
+    /** A button can be circular. */
+    circular: PropTypes.bool,
 
     /** A button can have different colors */
-    color: PropTypes.oneOf(_meta.props.color),
+    color: PropTypes.oneOf([
+      ...SUI.COLORS,
+      'facebook', 'google plus', 'instagram', 'linkedin', 'twitter', 'vk', 'youtube',
+    ]),
 
-    /** A button can reduce its padding to fit into tighter spaces */
+    /** A button can reduce its padding to fit into tighter spaces. */
     compact: PropTypes.bool,
 
-    /** A button can show it is currently unable to be interacted with */
+    /** Shorthand for primary content. */
+    content: customPropTypes.contentShorthand,
+
+    /** A button can show it is currently unable to be interacted with. */
     disabled: PropTypes.bool,
 
-    /** A button can be aligned to the left or right of its container */
-    floated: PropTypes.oneOf(_meta.props.floated),
+    /** A button can be aligned to the left or right of its container. */
+    floated: PropTypes.oneOf(SUI.FLOATS),
 
-    /** A button can take the width of its container */
+    /** A button can take the width of its container. */
     fluid: PropTypes.bool,
 
-    /** Add an Icon by name, props object, or pass an <Icon /> */
+    /** Add an Icon by name, props object, or pass an <Icon />. */
     icon: customPropTypes.some([
       PropTypes.bool,
       PropTypes.string,
@@ -119,23 +99,23 @@ class Button extends Component {
       PropTypes.element,
     ]),
 
-    /** A button can be formatted to appear on dark backgrounds */
+    /** A button can be formatted to appear on dark backgrounds. */
     inverted: PropTypes.bool,
 
-    /** A labeled button can format a Label or Icon to appear on the left or right */
-    labelPosition: PropTypes.oneOf(_meta.props.labelPosition),
-
-    /** Add a Label by text, props object, or pass a <Label /> */
+    /** Add a Label by text, props object, or pass a <Label />. */
     label: customPropTypes.some([
       PropTypes.string,
       PropTypes.object,
       PropTypes.element,
     ]),
 
-    /** A button can show a loading indicator */
+    /** A labeled button can format a Label or Icon to appear on the left or right. */
+    labelPosition: PropTypes.oneOf(['right', 'left']),
+
+    /** A button can show a loading indicator. */
     loading: PropTypes.bool,
 
-    /** A button can hint towards a negative consequence */
+    /** A button can hint towards a negative consequence. */
     negative: PropTypes.bool,
 
     /**
@@ -145,25 +125,25 @@ class Button extends Component {
      */
     onClick: PropTypes.func,
 
-    /** A button can hint towards a positive consequence */
+    /** A button can hint towards a positive consequence. */
     positive: PropTypes.bool,
 
-    /** A button can be formatted to show different levels of emphasis */
+    /** A button can be formatted to show different levels of emphasis. */
     primary: PropTypes.bool,
 
-    /** A button can be formatted to show different levels of emphasis */
+    /** A button can be formatted to show different levels of emphasis. */
     secondary: PropTypes.bool,
 
-    /** A button can have different sizes */
-    size: PropTypes.oneOf(_meta.props.size),
+    /** A button can have different sizes. */
+    size: PropTypes.oneOf(SUI.SIZES),
 
     /** A button can receive focus. */
     tabIndex: PropTypes.oneOfType([
-      PropTypes.string,
       PropTypes.number,
+      PropTypes.string,
     ]),
 
-    /** A button can be formatted to toggle on and off */
+    /** A button can be formatted to toggle on and off. */
     toggle: PropTypes.bool,
   }
 
@@ -171,7 +151,11 @@ class Button extends Component {
     as: 'button',
   }
 
-  static _meta = _meta
+  static _meta = {
+    name: 'Button',
+    type: META.TYPES.ELEMENT,
+  }
+
   static Content = ButtonContent
   static Group = ButtonGroup
   static Or = ButtonOr
@@ -187,6 +171,14 @@ class Button extends Component {
     if (onClick) onClick(e, this.props)
   }
 
+  computeTabIndex = ElementType => {
+    const { disabled, tabIndex } = this.props
+
+    if (!_.isNil(tabIndex)) return tabIndex
+    if (disabled) return -1
+    if (ElementType === 'div') return 0
+  }
+
   render() {
     const {
       active,
@@ -212,7 +204,6 @@ class Button extends Component {
       primary,
       secondary,
       size,
-      tabIndex,
       toggle,
     } = this.props
 
@@ -224,13 +215,10 @@ class Button extends Component {
       color,
       size,
       useKeyOnly(active, 'active'),
-      useKeyOrValueAndKey(animated, 'animated'),
-      useKeyOrValueAndKey(attached, 'attached'),
       useKeyOnly(basic, 'basic'),
       useKeyOnly(circular, 'circular'),
       useKeyOnly(compact, 'compact'),
       useKeyOnly(disabled, 'disabled'),
-      useValueAndKey(floated, 'floated'),
       useKeyOnly(fluid, 'fluid'),
       useKeyOnly(icon === true || icon && (labelPosition || !children && !content), 'icon'),
       useKeyOnly(inverted, 'inverted'),
@@ -240,22 +228,21 @@ class Button extends Component {
       useKeyOnly(primary, 'primary'),
       useKeyOnly(secondary, 'secondary'),
       useKeyOnly(toggle, 'toggle'),
+      useKeyOrValueAndKey(animated, 'animated'),
+      useKeyOrValueAndKey(attached, 'attached'),
+      useValueAndKey(floated, 'floated'),
     )
     const rest = getUnhandledProps(Button, this.props)
     const ElementType = getElementType(Button, this.props, () => {
       if (!_.isNil(label) || !_.isNil(attached)) return 'div'
     })
-
-    let computedTabIndex
-    if (!_.isNil(tabIndex)) computedTabIndex = tabIndex
-    else if (disabled) computedTabIndex = -1
-    else if (ElementType === 'div') computedTabIndex = 0
+    const tabIndex = this.computeTabIndex(ElementType)
 
     if (!_.isNil(children)) {
       const classes = cx('ui', baseClasses, labeledClasses, 'button', className)
       debug('render children:', { classes })
       return (
-        <ElementType {...rest} className={classes} tabIndex={computedTabIndex} onClick={this.handleClick}>
+        <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
           {children}
         </ElementType>
       )
@@ -285,7 +272,7 @@ class Button extends Component {
       const classes = cx('ui', labeledClasses, baseClasses, 'button', className)
       debug('render icon && !label:', { classes })
       return (
-        <ElementType {...rest} className={classes} tabIndex={computedTabIndex} onClick={this.handleClick}>
+        <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
           {Icon.create(icon)} {content}
         </ElementType>
       )
@@ -295,7 +282,7 @@ class Button extends Component {
     debug('render default:', { classes })
 
     return (
-      <ElementType {...rest} className={classes} tabIndex={computedTabIndex} onClick={this.handleClick}>
+      <ElementType {...rest} className={classes} tabIndex={tabIndex} onClick={this.handleClick}>
         {content}
       </ElementType>
     )
diff --git a/src/elements/Button/ButtonContent.js b/src/elements/Button/ButtonContent.js
index 977458c2e0..0368465772 100644
--- a/src/elements/Button/ButtonContent.js
+++ b/src/elements/Button/ButtonContent.js
@@ -10,10 +10,15 @@ import {
 } from '../../lib'
 
 /**
- * Used in some Button types, such as `animated`
+ * Used in some Button types, such as `animated`.
  */
 function ButtonContent(props) {
-  const { children, className, hidden, visible } = props
+  const {
+    children,
+    className,
+    hidden,
+    visible,
+  } = props
   const classes = cx(
     useKeyOnly(visible, 'visible'),
     useKeyOnly(hidden, 'hidden'),
@@ -36,16 +41,16 @@ ButtonContent.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Additional classes. */
-  className: PropTypes.string,
-
   /** Primary content. */
   children: PropTypes.node,
 
-  /** Initially hidden, visible on hover */
+  /** Additional classes. */
+  className: PropTypes.string,
+
+  /** Initially hidden, visible on hover. */
   hidden: PropTypes.bool,
 
-  /** Initially visible, hidden on hover */
+  /** Initially visible, hidden on hover. */
   visible: PropTypes.bool,
 }
 
diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
index 7be2b07c17..36d3d3ee38 100644
--- a/src/elements/Button/ButtonGroup.js
+++ b/src/elements/Button/ButtonGroup.js
@@ -13,20 +13,34 @@ import {
 } from '../../lib'
 
 /**
- * Button.Group
+ * Buttons can be grouped.
  */
 function ButtonGroup(props) {
   const {
-    attached, basic, children, className, color, compact,
-    fluid, icon, inverted, labeled, negative, positive, primary,
-    secondary, size, toggle, vertical, widths,
+    attached,
+    basic,
+    children,
+    className,
+    color,
+    compact,
+    fluid,
+    icon,
+    inverted,
+    labeled,
+    negative,
+    positive,
+    primary,
+    secondary,
+    size,
+    toggle,
+    vertical,
+    widths,
   } = props
 
   const classes = cx(
     'ui',
-    size,
     color,
-    useValueAndKey(attached, 'attached'),
+    size,
     useKeyOnly(basic, 'basic'),
     useKeyOnly(compact, 'compact'),
     useKeyOnly(fluid, 'fluid'),
@@ -39,11 +53,11 @@ function ButtonGroup(props) {
     useKeyOnly(secondary, 'secondary'),
     useKeyOnly(toggle, 'toggle'),
     useKeyOnly(vertical, 'vertical'),
+    useValueAndKey(attached, 'attached'),
     useWidthProp(widths),
     'buttons',
     className,
   )
-
   const rest = getUnhandledProps(ButtonGroup, props)
   const ElementType = getElementType(ButtonGroup, props)
 
@@ -54,71 +68,65 @@ ButtonGroup._meta = {
   name: 'ButtonGroup',
   parent: 'Button',
   type: META.TYPES.ELEMENT,
-  props: {
-    attached: ['left', 'right', 'top', 'bottom'],
-    color: SUI.COLORS,
-    size: SUI.SIZES,
-    widths: SUI.WIDTHS,
-  },
 }
 
 ButtonGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A button can be attached to the top or bottom of other content */
-  attached: PropTypes.oneOf(ButtonGroup._meta.props.attached),
+  /** A button can be attached to the top or bottom of other content. */
+  attached: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
 
-  /** Groups can be less pronounced */
+  /** Groups can be less pronounced. */
   basic: PropTypes.bool,
 
-  /** Additional classes. */
-  className: PropTypes.string,
-
   /** Primary content. */
   children: PropTypes.node,
 
-  /** Groups can have a shared color */
-  color: PropTypes.oneOf(ButtonGroup._meta.props.color),
+  /** Additional classes. */
+  className: PropTypes.string,
+
+  /** Groups can have a shared color. */
+  color: PropTypes.oneOf(SUI.COLORS),
 
-  /** Groups can reduce their padding to fit into tighter spaces */
+  /** Groups can reduce their padding to fit into tighter spaces. */
   compact: PropTypes.bool,
 
-  /** Groups can take the width of their container */
+  /** Groups can take the width of their container. */
   fluid: PropTypes.bool,
 
-  /** Groups can be formatted as icons */
+  /** Groups can be formatted as icons. */
   icon: PropTypes.bool,
 
-  /** Groups can be formatted to appear on dark backgrounds */
+  /** Groups can be formatted to appear on dark backgrounds. */
   inverted: PropTypes.bool,
 
-  /** Groups can be formatted as labeled icon buttons */
+  /** Groups can be formatted as labeled icon buttons. */
   labeled: PropTypes.bool,
 
-  /** Groups can hint towards a negative consequence */
+  /** Groups can hint towards a negative consequence. */
   negative: PropTypes.bool,
 
-  /** Groups can hint towards a positive consequence */
+  /** Groups can hint towards a positive consequence. */
   positive: PropTypes.bool,
 
-  /** Groups can be formatted to show different levels of emphasis */
+  /** Groups can be formatted to show different levels of emphasis. */
   primary: PropTypes.bool,
 
-  /** Groups can be formatted to show different levels of emphasis */
+  /** Groups can be formatted to show different levels of emphasis. */
   secondary: PropTypes.bool,
 
-  /** Groups can have different sizes */
-  size: PropTypes.oneOf(ButtonGroup._meta.props.size),
+  /** Groups can have different sizes. */
+  size: PropTypes.oneOf(SUI.SIZES),
 
-  /** Groups can be formatted to toggle on and off */
+  /** Groups can be formatted to toggle on and off. */
   toggle: PropTypes.bool,
 
-  /** Groups can be formatted to appear vertically */
+  /** Groups can be formatted to appear vertically. */
   vertical: PropTypes.bool,
 
-  /** Groups can have their widths divided evenly */
-  widths: PropTypes.oneOf(ButtonGroup._meta.props.widths),
+  /** Groups can have their widths divided evenly. */
+  widths: PropTypes.oneOf(SUI.WIDTHS),
 }
 
 export default ButtonGroup
diff --git a/src/elements/Button/ButtonOr.js b/src/elements/Button/ButtonOr.js
index e3611d8b0d..087b6b032e 100644
--- a/src/elements/Button/ButtonOr.js
+++ b/src/elements/Button/ButtonOr.js
@@ -9,7 +9,7 @@ import {
 } from '../../lib'
 
 /**
- * Used in some Button types, such as `animated`
+ * Used in some Button types, such as `animated`.
  */
 function ButtonOr(props) {
   const { className } = props
diff --git a/src/elements/Button/index.d.ts b/src/elements/Button/index.d.ts
index 730486b794..2606b8281a 100644
--- a/src/elements/Button/index.d.ts
+++ b/src/elements/Button/index.d.ts
@@ -1,106 +1,113 @@
 import * as React from 'react';
 import {
-  ReactMouseEvents,
   SemanticCOLORS,
-  SemanticSOCIAL,
   SemanticFLOATS,
   SemanticSIZES,
   SemanticWIDTHS
 } from '../../index';
 
-export type SemanticButtonLABELPOSITIONS = 'right' | 'left';
+export interface ButtonProps {
+  [key: string]: any;
 
-export interface ButtonProps extends ReactMouseEvents<HTMLButtonElement> {
   /** An element type to render as (string or function). */
   as?: any;
 
-  /** A button can show it is currently the active user selection */
+  /** A button can show it is currently the active user selection. */
   active?: boolean;
 
-  /** A button can animate to show hidden content */
+  /** A button can animate to show hidden content. */
   animated?: 'fade' | 'vertical';
 
-  /** A button can be attached to the top or bottom of other content */
+  /** A button can be attached to the top or bottom of other content. */
   attached?: 'left' | 'right' | 'top' | 'bottom';
 
-  /** A basic button is less pronounced */
+  /** A basic button is less pronounced. */
   basic?: boolean;
 
   /** Primary content. */
   children?: React.ReactNode;
 
-  /** A button can be circular */
+  /** A button can be circular. */
   circular?: boolean;
 
   /** Additional classes. */
   className?: string;
 
-  /** A button can have different colors */
-  color?: SemanticCOLORS | SemanticSOCIAL;
+  /** A button can have different colors. */
+  color?: SemanticCOLORS | 'facebook' | 'google plus' | 'vk' | 'twitter' | 'linkedin' | 'instagram' | 'youtube';
 
-  /** A button can reduce its padding to fit into tighter spaces */
+  /** A button can reduce its padding to fit into tighter spaces. */
   compact?: boolean;
 
   /** Shorthand for primary content. */
-  content?: any;
+  content?: React.ReactNode;
 
-  /** A button can show it is currently unable to be interacted with */
+  /** A button can show it is currently unable to be interacted with. */
   disabled?: boolean;
 
-  /** A button can be aligned to the left or right of its container */
+  /** A button can be aligned to the left or right of its container. */
   floated?: SemanticFLOATS;
 
-  /** A button can take the width of its container */
+  /** A button can take the width of its container. */
   fluid?: boolean;
 
-  /** Add an Icon by name, props object, or pass an <Icon /> */
+  /** Add an Icon by name, props object, or pass an <Icon />. */
   icon?: any;
 
-  /** A button can be formatted to appear on dark backgrounds */
+  /** A button can be formatted to appear on dark backgrounds. */
   inverted?: boolean;
 
-  /** Add a Label by text, props object, or pass a <Label /> */
+  /** Add a Label by text, props object, or pass a <Label />. */
   label?: any;
 
-  /** A labeled button can format a Label or Icon to appear on the left or right */
-  labelPosition?: SemanticButtonLABELPOSITIONS;
+  /** A labeled button can format a Label or Icon to appear on the left or right. */
+  labelPosition?: 'right' | 'left';
 
-  /** A button can show a loading indicator */
+  /** A button can show a loading indicator. */
   loading?: boolean;
 
-  /** A button can hint towards a negative consequence */
+  /** A button can hint towards a negative consequence. */
   negative?: boolean;
 
-  /** A button can hint towards a positive consequence */
+  /**
+   * Called after user's click.
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All props.
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>, data: ButtonProps) => void;
+
+  /** A button can hint towards a positive consequence. */
   positive?: boolean;
 
-  /** A button can be formatted to show different levels of emphasis */
+  /** A button can be formatted to show different levels of emphasis. */
   primary?: boolean;
 
-  /** A button can be formatted to show different levels of emphasis */
+  /** A button can be formatted to show different levels of emphasis. */
   secondary?: boolean;
 
-  /** A button can have different sizes */
+  /** A button can have different sizes. */
   size?: SemanticSIZES;
 
-  /** A button can be formatted to toggle on and off */
-  toggle?: boolean;
+  /** A button can receive focus. */
+  tabIndex: number | string;
 
-  // TODO why not in list?
-  type?: string;
+  /** A button can be formatted to toggle on and off. */
+  toggle?: boolean;
 }
 
-interface ButtonClass extends React.ComponentClass<ButtonProps> {
+interface ButtonComponent extends React.ComponentClass<ButtonProps> {
   Content: typeof ButtonContent;
   Group: typeof ButtonGroup;
   Or: typeof ButtonOr;
 }
 
-export const Button: ButtonClass;
+export const Button: ButtonComponent;
 
 interface ContentProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
-    as?: any;
+  as?: any;
 
   /** Primary content. */
   children?: React.ReactNode;
@@ -108,23 +115,25 @@ interface ContentProps {
   /** Additional classes. */
   className?: string;
 
-  /** Initially hidden, visible on hover */
+  /** Initially hidden, visible on hover. */
   hidden?: boolean;
 
-  /** Initially visible, hidden on hover */
+  /** Initially visible, hidden on hover. */
   visible?: boolean;
 }
 
-export const ButtonContent: React.ComponentClass<ContentProps>;
+export const ButtonContent: React.StatelessComponent<ContentProps>;
 
 interface GroupProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
-  /** A button can be attached to the top or bottom of other content */
-  attached?: string;
+  /** A button can be attached to the top or bottom of other content. */
+  attached?: 'left' | 'right' | 'top' | 'bottom';
 
-  /** Groups can be less pronounced */
+  /** Groups can be less pronounced. */
   basic?: boolean;
 
   /** Primary content. */
@@ -133,25 +142,54 @@ interface GroupProps {
   /** Additional classes. */
   className?: string;
 
-  /** Groups can have a shared color */
-  color?: SemanticCOLORS | SemanticSOCIAL;
+  /** Groups can have a shared color. */
+  color?: SemanticCOLORS;
 
-  /** Groups can be formatted as icons */
-  icon?: any;
+  /** Groups can reduce their padding to fit into tighter spaces. */
+  compact?: boolean;
+
+  /** Groups can take the width of their container. */
+  fluid?: boolean;
+
+  /** Groups can be formatted as icons. */
+  icon?: boolean;
+
+  /** Groups can be formatted to appear on dark backgrounds. */
+  inverted?: boolean;
 
-  /** Groups can be formatted as labeled icon buttons */
+  /** Groups can be formatted as labeled icon buttons. */
   labeled?: boolean;
 
-  /** Groups can have different sizes */
+  /** Groups can hint towards a negative consequence. */
+  negative?: boolean;
+
+  /** Groups can hint towards a positive consequence. */
+  positive?: boolean;
+
+  /** Groups can be formatted to show different levels of emphasis. */
+  primary?: boolean;
+
+  /** Groups can be formatted to show different levels of emphasis. */
+  secondary?: boolean;
+
+  /** Groups can have different sizes. */
   size?: SemanticSIZES;
 
-  /** Groups can have their widths divided evenly */
+  /** Groups can be formatted to toggle on and off. */
+  toggle?: boolean;
+
+  /** Groups can be formatted to appear vertically. */
+  vertical?: boolean;
+
+  /** Groups can have their widths divided evenly. */
   widths?: SemanticWIDTHS;
 }
 
-export const ButtonGroup: React.ComponentClass<GroupProps>;
+export const ButtonGroup: React.StatelessComponent<GroupProps>;
 
 interface OrProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -159,4 +197,4 @@ interface OrProps {
   className?: string;
 }
 
-export const ButtonOr: React.ComponentClass<OrProps>;
+export const ButtonOr: React.StatelessComponent<OrProps>;
diff --git a/src/index.d.ts b/src/index.d.ts
index 6106ca507a..fb278cf42a 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -2,8 +2,6 @@ export type InputType = 'color' | 'date' | 'datetime' | 'datetime-local' | 'emai
 
 export type SemanticCOLORS = 'red' | 'orange' | 'yellow' | 'olive' | 'green' | 'teal' | 'blue' | 'violet' | 'purple' | 'pink' | 'brown' | 'grey' | 'black' | 'twitter' | 'google plus' | 'facebook';
 
-export type SemanticSOCIAL = 'facebook' | 'google plus' | 'vk' | 'twitter' | 'linkedin' | 'instagram' | 'youtube';
-
 export type SemanticROTATION = 'clockwise' | 'counterclockwise';
 
 export type SemanticFLOATS = 'left' | 'right';
diff --git a/test/specs/elements/Button/Button-test.js b/test/specs/elements/Button/Button-test.js
index ba10e1908c..9e5c0572e6 100644
--- a/test/specs/elements/Button/Button-test.js
+++ b/test/specs/elements/Button/Button-test.js
@@ -12,8 +12,8 @@ const syntheticEvent = { preventDefault: () => undefined }
 
 describe('Button', () => {
   common.isConformant(Button)
-  common.hasUIClassName(Button)
   common.hasSubComponents(Button, [ButtonContent, ButtonGroup, ButtonOr])
+  common.hasUIClassName(Button)
   common.rendersChildren(Button)
 
   common.implementsCreateMethod(Button)
diff --git a/test/specs/elements/Button/ButtonContent-test.js b/test/specs/elements/Button/ButtonContent-test.js
index f9623f3202..4787f43250 100644
--- a/test/specs/elements/Button/ButtonContent-test.js
+++ b/test/specs/elements/Button/ButtonContent-test.js
@@ -3,7 +3,8 @@ import * as common from 'test/specs/commonTests'
 
 describe('ButtonContent', () => {
   common.isConformant(ButtonContent)
+  common.rendersChildren(ButtonContent)
+
   common.propKeyOnlyToClassName(ButtonContent, 'hidden')
   common.propKeyOnlyToClassName(ButtonContent, 'visible')
-  common.rendersChildren(ButtonContent)
 })

From 6d406128361cd2c715643c03028f9441d9d02dc5 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Tue, 24 Jan 2017 21:19:39 +0200
Subject: [PATCH 2/2] style(typings): fix colors type

---
 src/index.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index fb278cf42a..b46b739648 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,6 +1,7 @@
 export type InputType = 'color' | 'date' | 'datetime' | 'datetime-local' | 'email' | 'number' | 'range' | 'search' | 'select' | 'password' | 'tel' | 'text' | 'time' | 'url' | 'week';
 
-export type SemanticCOLORS = 'red' | 'orange' | 'yellow' | 'olive' | 'green' | 'teal' | 'blue' | 'violet' | 'purple' | 'pink' | 'brown' | 'grey' | 'black' | 'twitter' | 'google plus' | 'facebook';
+export type SemanticCOLORS = 'red' | 'orange' | 'yellow' | 'olive' |'green' | 'teal' | 'blue' | 'violet' | 'purple' |
+  'pink' | 'brown' | 'grey' | 'black';
 
 export type SemanticROTATION = 'clockwise' | 'counterclockwise';