Merge branch '0.8.0' of github.com:ant-design/ant-design into 0.8.0

components/datepicker/demo/size.md

@@ -11,9 +11,9 @@ var Datepicker = antd.Datepicker;
 
 React.render(
   <div>
-    <Datepicker size="lg" />
+    <Datepicker size="large" />
     <Datepicker />
-    <Datepicker size="sm" />
+    <Datepicker size="small" />
   </div>
 , document.getElementById('components-datepicker-demo-size'));
 ````

components/datepicker/index.jsx

@@ -64,6 +64,12 @@ export default React.createClass({
         showOk={this.props.showTime}
         showClear={false}/>
     );
+    var sizeClass = '';
+    if (this.props.size === 'large') {
+      sizeClass = ' ant-input-lg';
+    } else if (this.props.size === 'small') {
+      sizeClass = ' ant-input-sm';
+    }
     return (
       <Datepicker
         transitionName={this.props.transitionName}
@@ -82,7 +88,7 @@ export default React.createClass({
         onChange={this.handleChange}>
         <input
           placeholder={this.props.placeholder}
-          className={'ant-calendar-picker-input ant-input ant-input-' + this.props.size}/>
+          className={'ant-calendar-picker-input ant-input' + sizeClass}/>
       </Datepicker>
     );
   }

components/datepicker/index.md

@@ -27,7 +27,7 @@
 | onSelect     | 选择日期的回调 | function | 无           |
 | showTime     | 显示时间选择条 | boolean  | false        |
 | disabled     | 禁用           | bool     | false        |
-| size         | 输入框大小，`lg`代表高为32px，`sm`代表高为22px，默认28px      | string   | 无        |
+| size         | 输入框大小，`large`代表高为32px，`small`代表高为22px，默认28px      | string   | 无        |
 
 <style>
 .code-box-demo .ant-calendar-picker {

components/form/demo/form-controls.md

@@ -36,7 +36,7 @@ React.render(
   <div className="ant-form-item">
     <label className="col-6">Select 选择器：</label>
     <div className="col-14">
-      <Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
+      <Select size="large" value="lucy" style={{width:200}} onChange={handleSelectChange}>
         <Option value="jack">jack</Option>
         <Option value="lucy">lucy</Option>
         <Option value="disabled" disabled>disabled</Option>

components/form/demo/mix.md

@@ -41,7 +41,7 @@ React.render(
   <div className="ant-form-item">
     <label className="col-8" required>InputNumber 数字输入框：</label>
     <div className="col-10">
-      <InputNumber min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
+      <InputNumber size="large" min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
       <span className="ant-form-text"> 台机器</span>
     </div>
   </div>
@@ -71,7 +71,7 @@ React.render(
   <div className="ant-form-item">
     <label for="" className="col-8" required>Select 选择器：</label>
     <div className="col-16">
-      <Select value="lucy" style={{width:200}} onChange={handleSelectChange}>
+      <Select size="large" value="lucy" style={{width:200}} onChange={handleSelectChange}>
         <Option value="jack">jack</Option>
         <Option value="lucy">lucy</Option>
         <Option value="disabled" disabled>disabled</Option>

components/input-number/demo/disabled.md

 # 不可用
 
-- order: 0
+- order: 2
 
 点击按钮切换可用状态。
 

components/input-number/demo/size.md

+# 三种大小
+
+- order: 1
+
+三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px`
+
+---
+
+````jsx
+var InputNumber = antd.InputNumber;
+
+function onChange(value) {
+  console.log('changed', value);
+}
+
+React.render(
+<div>
+  <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
+  <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
+  <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
+</div>
+, document.getElementById('components-input-number-demo-size'));
+````
+
+````css
+.ant-input-number{
+  margin-right: 10px;
+}
+````
\ No newline at end of file

components/input-number/index.jsx

@@ -8,6 +8,12 @@ export default React.createClass({
     };
   },
   render() {
-    return <InputNumber style={{width: 90}} {...this.props} />;
+    var sizeClass = '';
+    if (this.props.size === 'large') {
+      sizeClass = 'ant-input-number-lg';
+    } else if (this.props.size === 'small') {
+      sizeClass = 'ant-input-number-sm';
+    }
+    return <InputNumber className={sizeClass} style={{width: 90}} {...this.props} />;
   }
 });

components/input-number/index.md

@@ -25,3 +25,4 @@
 | defaultValue     | 初始值       | Number      |            |
 | onChange     | 变化回调       | Function      |            |
 | disabled     | 禁用       | Boolean      |      false      |
+| size    | 输入框大小  | String      |      无      |

components/select/demo/size.md

+# 三种大小
+
+- order: 0
+
+三种大小的选择框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px`
+
+---
+
+````jsx
+var Select = antd.Select;
+var Option = Select.Option;
+
+function handleChange(value) {
+  console.log('selected ' + value);
+}
+
+React.render(
+  <div>
+  <Select size="large" value="lucy" style={{width:200}} onChange={handleChange}>
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>Disabled</Option>
+      <Option value="yiminghe">yiminghe</Option>
+    </Select>
+    <Select value="lucy" style={{width:200}} onChange={handleChange}>
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>Disabled</Option>
+      <Option value="yiminghe">yiminghe</Option>
+    </Select>
+    <Select size="small" value="lucy" style={{width:200}} onChange={handleChange}>
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>Disabled</Option>
+      <Option value="yiminghe">yiminghe</Option>
+    </Select>
+  </div>
+, document.getElementById('components-select-demo-size'));
+````
+
+````css
+.ant-select{
+  margin: 0 10px 10px 0;
+}
+````
\ No newline at end of file

components/select/index.jsx

@@ -11,8 +11,14 @@ var AntSelect = React.createClass({
     };
   },
   render() {
+    var sizeClass = '';
+    if (this.props.size === 'large') {
+      sizeClass = 'ant-select-lg';
+    } else if (this.props.size === 'small') {
+      sizeClass = 'ant-select-sm';
+    }
     return (
-      <Select {...this.props} />
+      <Select className={sizeClass} {...this.props} />
     );
   }
 });

components/select/index.md

@@ -36,6 +36,7 @@
 | placeholder | 选择框默认文字 | string | 无 |
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
 | combobox | 输入框自动提示模式 | | false |
+| size    | 选择框大小  | String      |      无      |
 
 ### Option props
 

style/components/inputNumber.less

@@ -75,6 +75,60 @@
       .disabled();
     }
   }
+  
+  &-lg {
+    padding: 0;
+    .ant-input-number-handler-wrap {
+      height: 32px;
+    }
+    .ant-input-number-input-wrap {
+      height: 32px;
+    }
+    .ant-input-number-handler {
+      height: 16px;
+    }
+
+    input {
+      height: 32px;
+      line-height: 32px;
+      font-size: 14px;
+    }
+
+    .ant-input-number-handler-up-inner {
+      top: 2px;
+    }
+    .ant-input-number-handler-down-inner {
+      top: 18px;
+    }
+  }
+
+  &-sm {
+    padding: 0;
+    .ant-input-number-handler-wrap {
+      height: 22px;
+    }
+    .ant-input-number-input-wrap {
+      height: 22px;
+      overflow: hidden;
+      position: relative;
+    }
+    .ant-input-number-handler {
+      height: 11px;
+    }
+
+    input {
+      height: 22px;
+      line-height: 22px;
+      position: absolute;
+      top: 0;
+    }
+    .ant-input-number-handler-up-inner {
+      top: -1px;
+    }
+    .ant-input-number-handler-down-inner {
+      top: 10px;
+    }
+  }
 
   &-handler-wrap {
     float: right;
@@ -109,7 +163,7 @@
 
   .handler-disabled() {
     opacity: 0.72;
-    color: #ccc!important;
+    color: #ccc !important;
     cursor: default;
     &:hover {
       color: #ccc;

style/components/select.less

@@ -7,6 +7,7 @@
   float: right;
   font-weight: bold;
 }
+
 .selected_icon() {
   position: relative;
   &:after {
@@ -116,6 +117,55 @@
     }
   }
 
+  &-lg {
+    .ant-select-selection--single {
+      height: 32px;
+      .ant-select-selection__rendered {
+        line-height: 30px;
+        font-size: 14px;
+      }
+    }
+
+    .ant-select-selection--multiple {
+      min-height: 32px;
+      .ant-select-selection__rendered {
+        li {
+          height: 24px;
+          .ant-select-selection__choice__content {
+            font-size: 14px;
+            line-height: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  &-sm {
+    .ant-select-selection--single {
+      height: 22px;
+      .ant-select-selection__rendered {
+        line-height: 20px;
+      }
+    }
+    .ant-select-selection--multiple {
+      min-height: 22px;
+      .ant-select-selection__rendered {
+        li {
+          height: 14px;
+          .ant-select-selection__choice__content {
+            line-height: 14px;
+            position: relative;
+            top: -3px;
+          }
+          .ant-select-selection__choice__remove {
+            position: relative;
+            top: -4px;
+          }
+        }
+      }
+    }
+  }
+
   &-disabled &-selection__choice__remove {
     color: #ccc;
     cursor: default;