Add size for RadioButton, close #904

components/alert/index.jsx

@@ -44,20 +44,20 @@ export default React.createClass({
 
     let iconType = '';
     switch (type) {
-    case 'success':
-      iconType = 'check-circle';
-      break;
-    case 'info':
-      iconType = 'info-circle';
-      break;
-    case 'error':
-      iconType = 'exclamation-circle';
-      break;
-    case 'warn':
-      iconType = 'exclamation-circle';
-      break;
-    default:
-      iconType = 'default';
+      case 'success':
+        iconType = 'check-circle';
+        break;
+      case 'info':
+        iconType = 'info-circle';
+        break;
+      case 'error':
+        iconType = 'exclamation-circle';
+        break;
+      case 'warn':
+        iconType = 'exclamation-circle';
+        break;
+      default:
+        iconType = 'default';
     }
 
     // use outline icon in alert with description

components/form/index.md

@@ -35,6 +35,8 @@
 <Input {...props} />
 ```
 
+> 注：标准表单中一律使用大号控件。
+
 ## API
 
 ### Form

components/input/index.jsx

@@ -72,9 +72,9 @@ class Input extends React.Component {
     }
 
     switch (props.size) {
-    case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
-    case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
-    default:
+      case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
+      case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
+      default:
     }
     let placeholder = props.placeholder;
     if (placeholder && ieGT9()) {
@@ -84,14 +84,14 @@ class Input extends React.Component {
       props.value = fixControlledValue(props.value);
     }
     switch (props.type) {
-    case 'textarea':
-      return (
+      case 'textarea':
+        return (
           <textarea {...props} placeholder={placeholder}
             className={inputClassName} ref="input" />
         );
-    default:
-      inputClassName = props.className ? props.className : inputClassName;
-      return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
+      default:
+        inputClassName = props.className ? props.className : inputClassName;
+        return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
     }
   }
 

components/menu/index.jsx

@@ -43,16 +43,16 @@ const AntMenu = React.createClass({
     let openAnimation = this.props.openAnimation || this.props.openTransitionName;
     if (!openAnimation) {
       switch (this.props.mode) {
-      case 'horizontal':
-        openAnimation = 'slide-up';
-        break;
-      case 'vertical':
-        openAnimation = 'zoom-big';
-        break;
-      case 'inline':
-        openAnimation = animation;
-        break;
-      default:
+        case 'horizontal':
+          openAnimation = 'slide-up';
+          break;
+        case 'vertical':
+          openAnimation = 'zoom-big';
+          break;
+        case 'inline':
+          openAnimation = animation;
+          break;
+        default:
       }
     }
 

components/notification/index.jsx

@@ -32,20 +32,20 @@ function notice(args) {
     let prefixCls = ' ant-notification-notice-content-icon-';
     let iconType = '';
     switch (args.icon) {
-    case 'success':
-      iconType = 'check-circle-o';
-      break;
-    case 'info':
-      iconType = 'info-circle-o';
-      break;
-    case 'error':
-      iconType = 'exclamation-circle-o';
-      break;
-    case 'warn':
-      iconType = 'question-circle-o';
-      break;
-    default:
-      iconType = 'info-circle';
+      case 'success':
+        iconType = 'check-circle-o';
+        break;
+      case 'info':
+        iconType = 'info-circle-o';
+        break;
+      case 'error':
+        iconType = 'exclamation-circle-o';
+        break;
+      case 'warn':
+        iconType = 'question-circle-o';
+        break;
+      default:
+        iconType = 'info-circle';
     }
 
     getNotificationInstance().notice({

components/radio/demo/radiobutton.md

@@ -16,7 +16,7 @@ function onChange(e) {
 }
 
 ReactDOM.render(<div>
-  <div style={{ marginTop: 16 }}>
+  <div>
     <RadioGroup onChange={onChange} defaultValue="a">
       <RadioButton value="a">杭州</RadioButton>
       <RadioButton value="b">上海</RadioButton>

components/radio/demo/size.md

@@ -0,0 +1,40 @@
+# 大小
+
+- order: 5
+
+大中小三种组合，可以和表单输入框进行对应配合。
+
+---
+
+````jsx
+import { Radio } from 'antd';
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+
+ReactDOM.render(<div>
+  <div>
+    <RadioGroup defaultValue="a" size="large">
+      <RadioButton value="a">杭州</RadioButton>
+      <RadioButton value="b">上海</RadioButton>
+      <RadioButton value="c">北京</RadioButton>
+      <RadioButton value="d">成都</RadioButton>
+    </RadioGroup>
+  </div>
+  <div style={{ marginTop: 16 }}>
+    <RadioGroup defaultValue="a">
+      <RadioButton value="a">杭州</RadioButton>
+      <RadioButton value="b">上海</RadioButton>
+      <RadioButton value="c">北京</RadioButton>
+      <RadioButton value="d">成都</RadioButton>
+    </RadioGroup>
+  </div>
+  <div style={{ marginTop: 16 }}>
+    <RadioGroup defaultValue="a" size="small">
+      <RadioButton value="a">杭州</RadioButton>
+      <RadioButton value="b">上海</RadioButton>
+      <RadioButton value="c">北京</RadioButton>
+      <RadioButton value="d">成都</RadioButton>
+    </RadioGroup>
+  </div>
+</div>, mountNode);
+````

components/radio/group.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Radio from './radio';
 
 function getCheckedValue(children) {
   let checkedValue = null;
@@ -16,6 +15,7 @@ export default React.createClass({
     return {
       prefixCls: 'ant-radio-group',
       disabled: false,
+      size: 'default',
       onChange() {
       }
     };
@@ -33,30 +33,30 @@ export default React.createClass({
       });
     }
   },
-  render() {
-    let props = this.props;
-    let children = React.Children.map(props.children, (radio) => {
-      if (radio.props) {
-        return (
-          <Radio key={radio.props.value}
-            {...radio.props}
-            onChange={this.onRadioChange}
-            checked={this.state.value === radio.props.value}
-            disabled={radio.props.disabled || this.props.disabled}/>
-        );
-      }
-      return radio;
-    });
-    return (
-      <div className={props.prefixCls}>
-        {children}
-      </div>
-    );
-  },
   onRadioChange(ev) {
     this.setState({
       value: ev.target.value
     });
     this.props.onChange(ev);
-  }
+  },
+  render() {
+    const props = this.props;
+    const children = React.Children.map(props.children, (radio) => {
+      if (radio.props) {
+        return React.cloneElement(radio, {
+          key: radio.props.value,
+          ...radio.props,
+          onChange: this.onRadioChange,
+          checked: this.state.value === radio.props.value,
+          disabled: radio.props.disabled || this.props.disabled,
+        });
+      }
+      return radio;
+    });
+    return (
+      <div className={`${props.prefixCls} ${props.prefixCls}-${props.size}`}>
+        {children}
+      </div>
+    );
+  },
 });

components/radio/index.md

@@ -33,3 +33,4 @@
 | onChange       | 选项变化时的回调函数             | Function(e:Event) | 无     | 无     |
 | value          | 用于设置当前选中的值             | String            | 无     | 无     |
 | defaultValue   | 默认选中的值                     | String            | 无     | 无     |
+| size           | 大小，只对按钮样式生效           | String            | `large` `default` `small` | `default` |

components/radio/radio.jsx

@@ -1,5 +1,6 @@
 import Radio from 'rc-radio';
 import React from 'react';
+import classNames from 'classnames';
 
 const AntRadio = React.createClass({
   getDefaultProps() {
@@ -8,17 +9,17 @@ const AntRadio = React.createClass({
     };
   },
   render() {
-    let classString = this.props.className;
-    if (classString) {
-      classString += this.props.checked ? (' ' + classString + '-checked') : '';
-    }
-    if (this.props.disabled) {
-      classString += ' ' + this.props.className + '-disabled';
-    }
+    const { prefixCls, children, checked, disabled, className } = this.props;
+    const classString = classNames({
+      [prefixCls]: true,
+      [prefixCls + '-checked']: checked,
+      [prefixCls + '-disabled']: disabled,
+      [className]: !!className,
+    });
     return (
       <label className={classString}>
         <Radio {...this.props} children={null} />
-        {this.props.children}
+        {children}
       </label>
     );
   }

components/radio/radioButton.jsx

@@ -4,7 +4,7 @@ import AntRadio from './radio';
 const RadioButton = React.createClass({
   getDefaultProps() {
     return {
-      className: 'ant-radio-button'
+      prefixCls: 'ant-radio-button',
     };
   },
   render() {

style/components/radio.less

@@ -69,7 +69,6 @@
 
 // 选中状态
 .@{radio-prefix-cls}-checked {
-
   .@{radio-inner-prefix-cls} {
     border-color: @border-color-base;
     &:after {
@@ -106,7 +105,7 @@
 .@{radio-prefix-cls} {
   label&-button {
     background: #fff;
-    padding: 0 15px;
+    padding: 0 16px;
     margin: 0;
     height: 28px;
     line-height: 26px;
@@ -117,8 +116,26 @@
     border: 1px solid @border-color-base;
     border-left: 0;
 
-    > span {
+    > span.@{radio-prefix-cls}-button {
       margin-left: 0;
+      display: none;
+    }
+
+    .@{radio-group-prefix-cls}-large & {
+      height: 32px;
+      line-height: 30px;
+    }
+
+    .@{radio-group-prefix-cls}-small & {
+      height: 22px;
+      line-height: 20px;
+      padding: 0 12px;
+      &:first-child {
+        border-radius: @border-radius-sm 0 0 @border-radius-sm;
+      }
+      &:last-child {
+        border-radius: 0 @border-radius-sm @border-radius-sm 0;
+      }
     }
 
     &:before {