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

.eslintrc.json

@@ -28,6 +28,7 @@
     "react/no-multi-comp": 0,
     "react/prop-types": 0,
     "react/prefer-es6-class": 0,
+    "react/prefer-stateless-function": 0,
     "react/jsx-closing-bracket-location": 0,
     "react/jsx-no-bind": 0,
     "no-param-reassign": 0,

.travis.yml

@@ -1,4 +1,7 @@
+sudo: false
+
 language: node_js
 
 node_js:
   - "4"
+  - "5"

CHANGELOG.md

@@ -4,6 +4,19 @@
 
 ---
 
+## 0.12.8
+
+`2016-03-06`
+
+- 新增 `heart` `calculator` 图标。
+- Table 补充了 `showHeader` 和 `footer` 属性。
+- Modal 补充了 `maskClosable` 属性。
+- 修正一个 Tag 和 Popover 配合使用的问题。[#1111](https://github.com/ant-design/ant-design/issues/1111)
+- 将 TreeSelect 的 `treeDefaultExpandAll` 默认属性设为 false，并优化了性能。
+- 修复 RadioGroup 无法垂直布局的问题。[#1119](https://github.com/ant-design/ant-design/issues/1119)
+- 统一了 less 文件的部分变量。
+- 修正部分组件的样式。
+
 ## 0.12.7
 
 `2016-03-03`
@@ -27,7 +40,7 @@
 - 增加了一个搜索框和提示功能结合的 [例子](http://ant.design/components/select/#demo-search-box)。
 - 允许可编辑的 Tabs 删除最后一个页签。[#1071](https://github.com/ant-design/ant-design/issues/1071)
 - Table 的 `rowSelect.onSelectAll` 补充了第三个参数 `deselectedRows`, `rowSelect.onChange` 补充了第二个参数 `selectedRows`。[#1105](https://github.com/ant-design/ant-design/issues/1105)
-- 修复了部分组件样式的小问题。
+- 修正部分组件的样式。
 
 ## 0.12.5
 

components/alert/index.md

@@ -19,8 +19,8 @@
 |----------- |---------------------------------------------------------  | ---------- |-------|
 | type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
 | closable   | 可选参数，默认不显示关闭按钮                                  | Boolean   | 无    |
-| closeText  | 可选参数，自定义关闭按钮                                     | String     | 无    |
+| closeText  | 可选参数，自定义关闭按钮                                     | React.Node   | 无    |
-| message    | 必选参数，警告提示内容                                       | String     | 无    |
+| message    | 必选参数，警告提示内容                                       | React.Node   | 无    |
-| description | 可选参数，警告提示的辅助性文字介绍                            | String     | 无    |
+| description | 可选参数，警告提示的辅助性文字介绍                            | React.Node   | 无    |
 | onClose     | 可选参数，关闭时触发的回调函数                                | Function   | 无    |
 | showIcon   | 可选参数，是否显示辅助图标                                 | Boolean   | false    |

components/button/button.jsx

@@ -24,13 +24,19 @@ function insertSpace(child) {
   return child;
 }
 
+function clearButton(button) {
+  button.className = button.className.replace(`${prefix}clicked`, '');
+}
+
 export default class Button extends React.Component {
   handleClick(...args) {
+    // Add click effect
     const buttonNode = findDOMNode(this);
-    buttonNode.className = buttonNode.className.replace(`${prefix}clicked`, '');
+    clearButton(buttonNode);
-    setTimeout(() => {
+    setTimeout(() => buttonNode.className += ` ${prefix}clicked`, 10);
-      buttonNode.className += ` ${prefix}clicked`;
+    clearTimeout(this.timeout);
-    }, 10);
+    this.timeout = setTimeout(() => clearButton(buttonNode), 500);
+
     this.props.onClick(...args);
   }
   render() {
@@ -50,13 +56,16 @@ export default class Button extends React.Component {
       [prefix + shape]: shape,
       [prefix + sizeCls]: sizeCls,
       [`${prefix}loading`]: ('loading' in props && props.loading !== false),
-      [className]: className
+      [className]: className,
     });
 
     const kids = React.Children.map(children, insertSpace);
 
     return (
-      <button {...others} type={htmlType || 'button'} className={classes} onClick={this.handleClick.bind(this)}>
+      <button {...others}
+        type={htmlType || 'button'}
+        className={classes}
+        onClick={this.handleClick.bind(this)}>
         {kids}
       </button>
     );

components/cascader/index.jsx

@@ -70,6 +70,10 @@ class AntCascader extends React.Component {
       [`${prefixCls}-picker`]: true,
       [`${prefixCls}-picker-disabled`]: disabled,
     });
+
+    // Fix bug of https://github.com/facebook/react/pull/5004
+    delete otherProps.onChange;
+
     return (
       <Cascader {...this.props}
         value={this.state.value}

components/icon/index.md

@@ -151,7 +151,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward'
 
 const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
 
-const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o'];
+const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o', 'calculator'];
 
 
 ReactDOM.render(<IconSet icons={icons1} />, document.getElementById('iconset-direction'));

components/input-number/index.md

@@ -21,7 +21,7 @@
 | min     | 最小值   | Number | -Infinity        |
 | max     | 最大值       | Number      | Infinity           |
 | value     | 当前值       | Number      |            |
-| step     | 每次改变步数       | Number      |      1      |
+| step     | 每次改变步数       | Number or String      |  1      |
 | defaultValue     | 初始值       | Number      |            |
 | onChange     | 变化回调       | Function      |            |
 | disabled     | 禁用       | Boolean      |      false      |

components/modal/index.md

@@ -30,7 +30,7 @@
 | footer     | 底部内容       | React.Element    | 确定取消按钮 |
 | okText     | 确认按钮文字    | String           | 确定       |
 | cancelText | 取消按钮文字    | String           | 取消       |
-
+| maskClosable | 点击蒙层是否允许关闭 | Boolean   | true       | 
 
 ### Modal.xxx()
 

components/progress/index.jsx

@@ -8,7 +8,7 @@ const prefixCls = 'ant-progress';
 
 const statusColorMap = {
   normal: '#2db7f5',
-  exception: '#ff6600',
+  exception: '#ff5500',
   success: '#87d068'
 };
 
@@ -31,7 +31,7 @@ let Line = React.createClass({
       strokeWidth: 10,
       status: 'normal', // exception active
       showInfo: true,
-      trailColor: '#e9e9e9'
+      trailColor: '#f3f3f3'
     };
   },
   render() {
@@ -115,7 +115,7 @@ let Circle = React.createClass({
       percent: 0,
       strokeWidth: 6,
       status: 'normal', // exception
-      trailColor: '#f9f9f9',
+      trailColor: '#f3f3f3',
     };
   },
   render() {

components/radio/demo/radiogroup-more.md

@@ -0,0 +1,46 @@
+# RadioGroup 垂直
+
+- order: 2
+
+垂直的 RadioGroup，配合更多输入框选项。
+
+---
+
+````jsx
+import { Radio, Input } from 'antd';
+const RadioGroup = Radio.Group;
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      value: 1,
+    };
+  },
+  onChange(e) {
+    console.log('radio checked', e.target.value);
+    this.setState({
+      value: e.target.value,
+    });
+  },
+  render() {
+    const radioStyle = {
+      display: 'block',
+      height: '30px',
+      lineHeight: '30px',
+    };
+    return (
+      <RadioGroup onChange={this.onChange} value={this.state.value}>
+        <Radio style={radioStyle} key="a" value={1}>Option A</Radio>
+        <Radio style={radioStyle} key="b" value={2}>Option B</Radio>
+        <Radio style={radioStyle} key="c" value={3}>Option C</Radio>
+        <Radio style={radioStyle} key="d" value={4}>
+          More...
+          {this.state.value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
+        </Radio>
+      </RadioGroup>
+    );
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````

components/radio/demo/radiogroup.md

@@ -13,27 +13,26 @@ const RadioGroup = Radio.Group;
 const App = React.createClass({
   getInitialState() {
     return {
-      value: 1
+      value: 1,
     };
   },
   onChange(e) {
     console.log('radio checked', e.target.value);
     this.setState({
-      value: e.target.value
+      value: e.target.value,
     });
   },
   render() {
     return (
-      <div>
       <RadioGroup onChange={this.onChange} value={this.state.value}>
         <Radio key="a" value={1}>A</Radio>
         <Radio key="b" value={2}>B</Radio>
         <Radio key="c" value={3}>C</Radio>
         <Radio key="d" value={null}>D</Radio>
       </RadioGroup>
-      </div>
     );
   }
 });
+
 ReactDOM.render(<App />, mountNode);
 ````

components/radio/group.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
+import Radio from './radio';
+import RadioButton from './radioButton';
 
 function getCheckedValue(children) {
   let value = null;
   let matched = false;
   React.Children.forEach(children, (radio) => {
-    if (radio.props && radio.props.checked) {
+    if (radio && radio.props && radio.props.checked) {
       value = radio.props.value;
       matched = true;
     }
@@ -62,7 +64,7 @@ export default React.createClass({
   render() {
     const props = this.props;
     const children = React.Children.map(props.children, (radio) => {
-      if (radio.props) {
+      if (radio && (radio.type === Radio || radio.type === RadioButton) && radio.props) {
         const keyProps = {};
         if (!('key' in radio) && typeof radio.props.value === 'string') {
           keyProps.key = radio.props.value;
@@ -81,6 +83,6 @@ export default React.createClass({
       [props.prefixCls]: true,
       [`${props.prefixCls}-${props.size}`]: props.size,
     });
-    return <div className={classString}>{children}</div>;
+    return <div className={classString} style={props.style}>{children}</div>;
   },
 });

components/radio/radio.jsx

@@ -9,7 +9,7 @@ const AntRadio = React.createClass({
     };
   },
   render() {
-    const { prefixCls, children, checked, disabled, className } = this.props;
+    const { prefixCls, children, checked, disabled, className, style } = this.props;
     const classString = classNames({
       [prefixCls]: true,
       [`${prefixCls}-checked`]: checked,
@@ -17,8 +17,8 @@ const AntRadio = React.createClass({
       [className]: !!className,
     });
     return (
-      <label className={classString}>
+      <label className={classString} style={style}>
-        <Radio {...this.props} children={null} />
+        <Radio {...this.props} style={null} children={null} />
         {children}
       </label>
     );

components/select/demo/search-box.md

@@ -75,6 +75,7 @@ const SearchInput = React.createClass({
       'ant-search-input': true,
       'ant-search-input-focus': this.state.focus,
     });
+    const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
     return (
       <Input.Group className={searchCls} style={this.props.style}>
         <Select
@@ -88,7 +89,7 @@ const SearchInput = React.createClass({
           onChange={this.handleChange}
           onFocus={this.handleFocusBlur}
           onBlur={this.handleFocusBlur}>
-          {this.state.data.map(d => <Option key={d.value}>{d.text}</Option>)}
+          {options}
         </Select>
         <div className="ant-input-group-wrap">
           <Button className={btnCls} onClick={this.handleSubmit}>

components/select/index.md

@@ -28,7 +28,7 @@
 | defaultValue | 指定默认选中的条目 | string/Array<String>   |  无  |
 | multiple   | 支持多选 | boolean | false |
 | allowClear   | 支持清除, 单选模式有效 | boolean | false |
-| filterOption | 是否根据输入项进行筛选 | boolean | true     |
+| filterOption | 是否根据输入项进行筛选，可为一个函数，返回满足要求的 option 即可 | boolean or function(inputValue, option) | true     |
 | tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无   |
 | onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 |  function(value, option) | 无   |

components/steps/index.md

@@ -17,9 +17,9 @@
 
 ```jsx
 <Steps>
-  <Steps.Step title="第一步"></Steps.Step>
+  <Step title="第一步" />
-  <Steps.Step title="第二步"></Steps.Step>
+  <Step title="第二步" />
-  <Steps.Step title="第三步"></Steps.Step>
+  <Step title="第三步" />
 </Steps>
 ```
 

components/table/demo/fixed-header.md

@@ -4,6 +4,8 @@
 
 方便一页内展示大量数据。
 
+需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。
+
 ---
 
 ````jsx

components/table/index.md

@@ -61,15 +61,18 @@ const columns = [{
 | size          | 正常或迷你类型           | String          | `default` or `small`| default |
 | dataSource    | 数据数组                 | Array           |                     |         |
 | columns       | 表格列的配置描述，具体项见下表 | Array |                     |    无    |
-| rowKey        | 表格列 key 的取值 | Function(record, index):string |                     |    record.key    |
+| rowKey        | 表格行 key 的取值 | Function(record, index):string |                     |    record.key    |
-| expandedRowRender  | 额外的列展开元素 | Function |                     | - |
+| expandedRowRender  | 额外的展开行 | Function |                     | - |
-| defaultExpandedRowKeys | 默认展开的列 | Array |                     | - |
+| defaultExpandedRowKeys | 默认展开的行 | Array |                     | - |
 | onChange      | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) |                     |       |
 | loading       | 页面是否加载中 | Boolean |                     | false      |
-| locale        | 设置排序、过滤按钮的文字或 `title` | Object         | | [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
+| locale        | 默认文案设置，目前包括排序、过滤、空数据文案 | Object         | | `{ filterConfirm: '确定', filterReset: '重置', emptyText: '暂无数据' }` [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
 | indentSize    | 展示树形数据时，每层缩进的宽度，以 px 为单位    | Number   |          | 15      |
 | onRowClick    | 处理行点击事件              | Function(record, index)   |              |     无     |
 | useFixedHeader  | 是否固定表头             | Boolean          |                   | false      |
+| bordered  | 是否展示外边框和列边框       | Boolean          |                   | false      |
+| showHeader  | 是否显示表头             | Boolean          |                   | true      |
+| footer  | 表格底部自定义渲染函数         | Function(currentPageData)   |        |       |
 
 ### Column
 
@@ -112,9 +115,6 @@ const columns = [{
 ![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png)
 
 ```jsx
-const rowKey = function(record) {
+// 比如你的数据主键是 uid
-  return record.uid;  // 比如你的数据主键是 uid
+return <Table rowKey={record => record.uid} />;
-};
-
-return <Table rowKey={rowKey} />;
 ```

components/tag/index.jsx

@@ -36,12 +36,13 @@ class AntTag extends React.Component {
   }
 
   render() {
-    const { prefixCls, closable, color, ...restProps } = this.props;
+    const { prefixCls, closable, color, className, children, ...restProps } = this.props;
     const close = closable ? <Icon type="cross" onClick={this.close.bind(this)} /> : '';
-    const className = classNames({
+    const classString = classNames({
       [prefixCls]: true,
       [`${prefixCls}-${color}`]: !!color,
       [`${prefixCls}-close`]: this.state.closing,
+      [className]: !!className,
     });
     return (
       <Animate component=""
@@ -50,8 +51,8 @@ class AntTag extends React.Component {
         transitionAppear
         onEnd={this.animationEnd.bind(this)}>
         {this.state.closed ? null : (
-          <div data-show={!this.state.closing} className={className}>
+          <div data-show={!this.state.closing} {...restProps} className={classString}>
-            <span className={`${prefixCls}-text`} {...restProps} />
+            <span className={`${prefixCls}-text`}>{children}</span>
             {close}
           </div>
         )}

components/transfer/demo/search.md

@@ -44,6 +44,7 @@ const App = React.createClass({
       <Transfer
         dataSource={this.state.mockData}
         showSearch
+        notFoundContent="xxxxxx"
         targetKeys={this.state.targetKeys}
         onChange={this.handleChange}
         render={item => item.title} />

components/transfer/index.jsx

@@ -147,7 +147,7 @@ class Transfer extends Component {
 
   render() {
     const {
-      prefixCls, titles, operations, showSearch,
+      prefixCls, titles, operations, showSearch, notFoundContent,
       searchPlaceholder, body, footer, listStyle, className,
     } = this.props;
     const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state;
@@ -180,6 +180,7 @@ class Transfer extends Component {
           render={this.props.render}
           showSearch={showSearch}
           searchPlaceholder={searchPlaceholder}
+          notFoundContent={notFoundContent}
           body={body}
           footer={footer}
           prefixCls={`${prefixCls}-list`} />
@@ -204,6 +205,7 @@ class Transfer extends Component {
           render={this.props.render}
           showSearch={showSearch}
           searchPlaceholder={searchPlaceholder}
+          notFoundContent={notFoundContent}
           body={body}
           footer={footer}
           prefixCls={`${prefixCls}-list`} />
@@ -222,6 +224,7 @@ Transfer.defaultProps = {
   operations: [],
   showSearch: false,
   searchPlaceholder: '请输入搜索内容',
+  notFoundContent: 'Not Found',
   body: noop,
   footer: noop,
 };
@@ -239,6 +242,7 @@ Transfer.propTypes = {
   operations: PropTypes.array,
   showSearch: PropTypes.bool,
   searchPlaceholder: PropTypes.string,
+  notFoundContent: PropTypes.node,
   body: PropTypes.func,
   footer: PropTypes.func,
 };

components/transfer/index.md

@@ -28,4 +28,5 @@
 | operations | 操作文案集合,顺序从上至下 | Array | [] |
 | showSearch | 是否显示搜索框 | Boolean | false |
 | searchPlaceholder | 搜索框的默认值 | String | 请输入搜索的内容  |
+| notFoundContent | 当列表为空时显示的内容 | React.node | 'Not Found'  |
 | footer | 底部渲染函数 | Function(props) |  |  |

components/transfer/list.jsx

@@ -69,8 +69,8 @@ class TransferList extends Component {
   }
 
   render() {
-    const { prefixCls, dataSource, titleText, filter, checkedKeys,
+    const { prefixCls, dataSource, titleText, filter, checkedKeys, notFoundContent,
-            checkStatus, body, footer, showSearch } = this.props;
+            checkStatus, body, footer, showSearch, searchPlaceholder } = this.props;
 
     // Custom Layout
     const footerDom = footer({ ...this.props });
@@ -109,12 +109,16 @@ class TransferList extends Component {
         { bodyDom ||
         <div className={ showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
           { showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
-            <Search prefixCls={`${prefixCls}-search`} onChange={this.handleFilter.bind(this)} handleClear={this.handleClear.bind(this)} value={filter} />
+            <Search prefixCls={`${prefixCls}-search`}
+              onChange={this.handleFilter.bind(this)}
+              handleClear={this.handleClear.bind(this)}
+              placeholder={searchPlaceholder}
+              value={filter} />
           </div> : null }
           <Animate component="ul"
             transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
             transitionLeave={false}>
-            {showItems.length > 0 ? showItems : <div className={`${prefixCls}-body-not-found`}>Not Found</div>}
+            {showItems.length > 0 ? showItems : <div className={`${prefixCls}-body-not-found`}>{notFoundContent}</div>}
           </Animate>
         </div>}
         { footerDom ? <div className={`${prefixCls}-footer`}>

components/transfer/search.jsx

@@ -31,7 +31,7 @@ class Search extends Component {
 }
 
 Search.defaultProps = {
-  placeholder: '请输入搜索内容',
+  placeholder: '',
   onChange: noop,
   handleClear: noop,
 };

components/tree-select/demo/checkable.md

@@ -55,7 +55,6 @@ const Demo = React.createClass({
       multiple: true,
       treeCheckable: true,
       searchPlaceholder: '请选择',
-      treeDefaultExpandAll: true,
       style: {
         width: 300,
       },

docs/react/introduce.md

@@ -84,4 +84,4 @@ import 'antd/lib/index.css';  // or 'antd/style/index.less'
 
 ## 如何贡献
 
-在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://dwz.cn/2AF9ao) 或  [提问](https://github.com/ant-design/ant-design/issues)。
+在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://dwz.cn/2AF9ao) 或  [提问](https://github.com/ant-design/ant-design/issues)。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",
@@ -47,7 +47,7 @@
     "rc-dropdown": "~1.4.3",
     "rc-form": "~0.14.0",
     "rc-form-validation": "~2.5.0",
-    "rc-input-number": "~2.4.1",
+    "rc-input-number": "~2.5.0",
     "rc-menu": "~4.10.2",
     "rc-notification": "~1.3.1",
     "rc-pagination": "~1.5.1",
@@ -63,7 +63,7 @@
     "rc-time-picker": "~1.1.0",
     "rc-tooltip": "~3.3.1",
     "rc-tree": "~1.1.0",
-    "rc-tree-select": "~1.1.1",
+    "rc-tree-select": "~1.2.2",
     "rc-trigger": "~1.2.0",
     "rc-upload": "~1.8.0",
     "rc-util": "~3.1.2",

scripts/demo.js

@@ -378,7 +378,11 @@ InstantClickChangeFns.push(function() {
   }
 
   $('.nav-phone-icon').click(function() {
-    $(this).prev().toggle();
+    var navMenu = $(this).prev();
+    navMenu.removeClass('nav-hide').addClass('nav-show').focus();
+    navMenu.one('blur', function() {
+      navMenu.removeClass('nav-show').addClass('nav-hide');
+    });
   });
 
   $.easing['jswing'] = $.easing['swing'];

scripts/home.js

@@ -74,7 +74,10 @@ module.exports = function() {
               <h2 key="h2">ANT <p>DESIGN</p></h2>
               <p key="content">一个 UI 设计语言</p>
               <span className="line" key="line"/>
-              <a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
+              <div className="start-button" key="button">
+                <a href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
+              </div>
+              <iframe key="github-btn" src="https://ghbtns.com/github-btn.html?user=ant-design&repo=ant-design&type=star&count=true" frameBorder="0" scrolling="0" width="98px" height="20px" />
             </QueueAnim>
             <TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
               <Icon type="down"/>

site/static/style.less

@@ -197,7 +197,7 @@ a.logo {
   color: #666;
   width: 100%;
   height: 100%;
-  display: block;
+  display: inline-block;
   padding: 0 22px;
 }
 
@@ -1448,13 +1448,17 @@ a.entry-link:hover .anticon-smile {
 }
 
 @media only screen and (min-width: 320px) and (max-width: 767px) {
-  .nav, .search {
+  #list,
+  .search {
     display: none;
   }
 
-  .logo {
+  a.logo {
-    margin: 10px;
+    width: 144px;
-    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+    display: block;
   }
 
   .banner-entry {
@@ -1465,17 +1469,28 @@ a.entry-link:hover .anticon-smile {
   }
 
   .nav {
-    position: absolute;
+    position: fixed;
     z-index: 1000;
-    top: 50px;
+    top: 0;
-    right: 0;
+    left: 0;
     background: #fff;
-    overflow: hidden;
+    line-height: 60px;
-    height: auto;
-    line-height: 50px;
     margin-right: 0;
-    border: 1px solid #e9e9e9;
     width: 50%;
+    height: 100%;
+    box-shadow: 10px 0 12px rgba(0,0,0,0.1);
+    opacity: 0;
+    transform: translateX(-100%);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .nav.nav-show {
+    animation: moveLeft .2s ease-in forwards;
+  }
+
+  .nav.nav-hide {
+    animation: moveLeftOut .2s ease-in forwards;
   }
 
   .nav .bar {
@@ -1492,26 +1507,23 @@ a.entry-link:hover .anticon-smile {
 
   .nav-phone-icon {
     display: block;
-    width: 49px;
+    width: 18px;
-    height: 49px;
+    height: 50px;
-    float: right;
+    position: absolute;
+    left: 30px;
+    top: 32px;
     cursor: pointer;
-    background: #BEC4C8;
   }
 
-  .nav-phone-icon:before,
+  .nav-phone-icon:before {
-  .nav-phone-icon:after {
     content: "";
     display: block;
     border-radius: 1px;
-    width: 15px;
+    width: 18px;
     height: 2px;
-    background: #EBEDEE;
+    background: #666;
-    margin: 20px 0 0 18px;
+    box-shadow: 0 7px 0 0 #666, 0 14px 0 0 #666;
-  }
+    position: absolute;
-
-  .nav-phone-icon:after {
-    margin-top: 5px;
   }
 
   .main {
@@ -1521,6 +1533,9 @@ a.entry-link:hover .anticon-smile {
   .aside-container {
     float: none;
     width: auto;
+    padding-bottom: 30px;
+    border-bottom: 1px solid #e9e9e9;
+    margin-bottom: 30px;
   }
 
   .main-container {
@@ -1533,6 +1548,7 @@ a.entry-link:hover .anticon-smile {
 
   .main-wrapper {
     width: 100%;
+    border-radius: 0;
   }
 
   .main-container {
@@ -1553,3 +1569,25 @@ a.entry-link:hover .anticon-smile {
     width: auto;
   }
 }
+
+@keyframes moveLeft {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes moveLeftOut {
+  0% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}

site/templates/home.html

@@ -39,6 +39,17 @@
     color: #eee;
   }
 
+  @media only screen and (min-width: 320px) and (max-width: 767px) {
+    header .nav ul li a {
+      color: #666;
+    }
+  }
+
+  .nav-phone-icon:before {
+    background: #eee;
+    box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
+  }
+
   .nav ul li a {
     transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
@@ -62,7 +73,7 @@
   .banner-text-wrapper {
     position: absolute;
     left: 10%;
-    top: 58%;
+    top: 55%;
     color: #fff;
     text-align: right;
   }
@@ -105,26 +116,40 @@
   }
 
   .banner-text-wrapper > p {
-    margin: 10px auto 30px;
+    margin: 10px auto 24px;
     font-size: 16px;
   }
 
-  .banner-text-wrapper a {
+  .banner-text-wrapper .start-button {
-    float: right;
+    margin-bottom: 24px;
+  }
+
+  .banner-text-wrapper .start-button a {
     width: 155px;
     height: 45px;
     border-radius: 6px;
-    border: 1px solid #00AAEE;
+    border: 1px solid #2db7f5;
-    color: #00AAEE;
+    color: #2db7f5;
     font-size: 18px;
     background: transparent;
     transition: box-shadow .45s ease-out;
     text-align: center;
     line-height: 42px;
+    display: inline-block;
+  }
+
+  .banner-text-wrapper iframe {
+    border: 0;
+    opacity: 0.8;
+    transition: opacity 0.3s ease;
+  }
+
+  .banner-text-wrapper iframe:hover {
+    opacity: 1;
   }
 
   .banner-text-wrapper a:hover {
-    box-shadow: 0 0 10px #00AAEE;
+    box-shadow: 0 0 10px #2db7f5;
   }
 
   .banner-text-wrapper a span {

site/templates/layout.html

@@ -56,7 +56,7 @@
       <div class="search">
         <div id="autoComplete"></div>
       </div>
-      <nav class="nav">
+      <nav class="nav" tabindex="-1">
         <span class="bar"></span>
         <ul>
           <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">

style/components/breadcrumb.less

@@ -19,7 +19,7 @@
 
   &-separator {
     margin: 0 8px;
-    color: #d9d9d9;
+    color: @border-color-base;
   }
 
   .anticon + span {

style/components/checkbox.less

@@ -46,7 +46,7 @@
     border-width: 1px;
     border-style: solid;
     border-radius: 3px;
-    border-color: #d9d9d9;
+    border-color: @border-color-base;
     background-color: #fff;
     transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back;
   }
@@ -122,13 +122,13 @@
 
     &:hover {
       .@{checkbox-inner-prefix-cls} {
-        border-color: #d9d9d9;
+        border-color: @border-color-base;
       }
     }
 
     .@{checkbox-inner-prefix-cls} {
       background-color: #f3f3f3;
-      border-color: #d9d9d9;
+      border-color: @border-color-base;
 
       &:after {
         animation-name: none;
@@ -139,12 +139,12 @@
 
   &:hover {
     .@{checkbox-inner-prefix-cls} {
-      border-color: #d9d9d9;
+      border-color: @border-color-base;
     }
   }
 
   .@{checkbox-inner-prefix-cls} {
-    border-color: #d9d9d9;
+    border-color: @border-color-base;
     background-color: #f3f3f3;
     &:after {
       animation-name: none;

style/components/datepicker/MonthPanel.less

@@ -25,8 +25,27 @@
   border-collapse: separate;
 }
 
+.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
+  background: @primary-color;
+  color: #fff;
+
+  &:hover {
+    background: @primary-color;
+    color: #fff;
+  }
+}
+
 .@{calendar-prefix-cls}-month-panel-cell {
   text-align: center;
+
+  &-disabled .@{calendar-prefix-cls}-month-panel-month {
+    &,
+    &:hover {
+      cursor: not-allowed;
+      color: #bcbcbc;
+      background: #f3f3f3;
+    }
+  }
 }
 
 .@{calendar-prefix-cls}-month-panel-month {
@@ -46,13 +65,3 @@
     cursor: pointer;
   }
 }
-
-.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
-  background: @primary-color;
-  color: #fff;
-
-  &:hover {
-    background: @primary-color;
-    color: #fff;
-  }
-}

style/components/form.less

@@ -176,7 +176,7 @@ form {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     &:hover {
-      border-color: #d9d9d9;
+      border-color: @border-color-base;
     }
   }
 
@@ -192,7 +192,7 @@ form {
   }
 
   .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
-    border-color: #d9d9d9;
+    border-color: @border-color-base;
     box-shadow: none;
   }
 }

style/components/inputNumber.less

@@ -25,7 +25,7 @@
   border: 1px solid @border-color-base;
   border-radius: @border-radius-base;
   overflow: hidden;
-  width: 90px;
+  width: 80px;
 
   &-handler {
     text-align: center;
@@ -130,8 +130,6 @@
     }
     .@{input-number-prefix-cls}-input-wrap {
       height: 22px;
-      overflow: hidden;
-      position: relative;
     }
     .@{input-number-prefix-cls}-handler {
       height: 11px;
@@ -140,8 +138,8 @@
     input {
       height: 22px;
       line-height: 22px;
-      position: absolute;
+      margin-top: -1px;
-      top: 0;
+      vertical-align: top;
     }
     .@{input-number-prefix-cls}-handler-up-inner {
       top: -1px;

style/components/menu.less

@@ -64,9 +64,9 @@
 
   &-inline,
   &-vertical {
-    border-right: 1px solid #e9e9e9;
+    border-right: 1px solid @border-color-split;
     .@{menu-prefix-cls}-item {
-      border-right: 1px solid #e9e9e9;
+      border-right: 1px solid @border-color-split;
       margin-left: -1px;
       left: 1px;
       position: relative;
@@ -176,7 +176,7 @@
 
   &-horizontal {
     border: 0;
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom: 1px solid @border-color-split;
     box-shadow: none;
     z-index: 0;
 

style/components/popover.less

@@ -14,7 +14,7 @@
 //** Popover maximum width
 @popover-min-width:                   177px;
 //** Popover border color
-@popover-border-color:                #d9d9d9;
+@popover-border-color:                @border-color-base;
 
 //** Popover arrow width
 @popover-arrow-width:                 4px;
@@ -89,7 +89,7 @@
     padding: 0 16px;
     line-height: 32px;
     height: 32px;
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom: 1px solid @border-color-split;
     color: #666;
   }
 

style/components/progress.less

@@ -21,7 +21,7 @@
   &-line-inner {
     display: inline-block;
     width: 100%;
-    background-color: #e9e9e9;
+    background-color: #f3f3f3;
     border-radius: 100px;
   }
   &-line-bg {

style/components/radio.less

@@ -98,7 +98,7 @@
   }
 }
 
-.@{radio-prefix-cls} + span {
+span.@{radio-prefix-cls} + * {
   margin-left: 8px;
 }
 
@@ -116,6 +116,10 @@
     border: 1px solid @border-color-base;
     border-left: 0;
 
+    a {
+      color: #666;
+    }
+
     > span.@{radio-prefix-cls}-button {
       margin-left: 0;
       display: none;
@@ -138,23 +142,9 @@
       }
     }
 
-    &:before {
-      transition: all 0.3s ease;
-      position: absolute;
-      width: 1px;
-      height: 100%;
-      left: -1px;
-      background: #d9d9d9;
-      content: '';
-      visibility: hidden;
-    }
-
     &:first-child {
       border-radius: @border-radius-base 0 0 @border-radius-base;
       border-left: 1px solid @border-color-base;
-      &:before {
-        display: none;
-      }
     }
 
     &:last-child {
@@ -183,10 +173,6 @@
       color: @primary-color;
       box-shadow: -1px 0 0 0 @primary-color;
 
-      &:before {
-        display: none;
-      }
-
       &:first-child {
         border-color: @primary-color;
         box-shadow: none!important;
@@ -216,9 +202,6 @@
         border-color: @border-color-base;
         background-color: #f4f4f4;
         color: #ccc;
-        &:before {
-          display: none;
-        }
       }
       &:first-child {
         border-left-color: @border-color-base;

style/components/steps.less

@@ -5,7 +5,7 @@
 @process-icon-color: @primary-color;
 @process-title-color: #666;
 @process-description-color: @process-title-color;
-@process-tail-color: #e9e9e9;
+@process-tail-color: @border-color-split;
 @wait-icon-color: #ccc;
 @wait-title-color: #999;
 @wait-description-color: @wait-title-color;
@@ -180,7 +180,7 @@
         content: '';
         top: 0;
         width: 0;
-        background: #e9e9e9;
+        background: @border-color-split;
         height: 100%;
         opacity: 0;
       }

style/components/table.less

@@ -58,6 +58,19 @@
     background: none;
   }
 
+  tfoot tr {
+    background: @table-head-background-color;
+    position: relative;
+    top: -1px;
+    &:hover {
+      background: @table-head-background-color;
+    }
+    td {
+      border-radius: 0 0 @border-radius-base @border-radius-base;
+      border: 0;
+    }
+  }
+
   tr.@{table-prefix-cls}-row-selected {
     background: #fafafa;
   }

style/components/tabs.less

@@ -39,7 +39,6 @@
     overflow: hidden;
     font-size: 14px;
     line-height: @line-height-base;
-    height: 36px;
     box-sizing: border-box;
     position: relative;
     white-space: nowrap;
@@ -377,6 +376,9 @@
 
 
   // card style
+  &&-card &-nav-container {
+    height: 36px;
+  }
   &&-card &-ink-bar {
     visibility: hidden;
   }

style/components/timeline.less

@@ -2,7 +2,7 @@
 
 @timeline-prefix-cls: ~"@{css-prefix}timeline";
 
-@timeline-color: #e9e9e9;
+@timeline-color: @border-color-split;
 
 .@{timeline-prefix-cls} {
   &-item {

style/components/transfer.less

@@ -66,9 +66,10 @@
       }
 
       &-not-found {
-        margin-top: 24px;
+        padding-top: 24px;
         color: #ccc;
         text-align: center;
+        height: 100%;
       }
 
       ul {

style/components/upload.less

@@ -86,7 +86,7 @@
     .anticon-plus {
       font-size: 30px;
       transition: all 0.3s ease;
-      color: #d9d9d9;
+      color: #ccc;
       &:hover {
         color: #999;
       }

style/core/iconfont.less

@@ -18,6 +18,7 @@
 .@{iconfont-css-prefix}-caret-circle-o-up:before        {content:"\e60c";}
 .@{iconfont-css-prefix}-android:before                  {content:"\e64f";}
 .@{iconfont-css-prefix}-chrome:before                   {content:"\e65c";}
+.@{iconfont-css-prefix}-appstore-o:before               {content:"\e6b2";}
 .@{iconfont-css-prefix}-appstore:before                 {content:"\e64d";}
 .@{iconfont-css-prefix}-apple:before                    {content:"\e64e";}
 .@{iconfont-css-prefix}-github:before                   {content:"\e674";}
@@ -185,6 +186,9 @@
 .@{iconfont-css-prefix}-pay-circle-o:before             {content:"\e6a9";}
 .@{iconfont-css-prefix}-message:before                  {content:"\e6a4";}
 .@{iconfont-css-prefix}-file-unknown:before             {content:"\e6a6";}
+.@{iconfont-css-prefix}-heart:before                    {content:"\e68c";}
+.@{iconfont-css-prefix}-heart-o:before                  {content:"\e6b0";}
+.@{iconfont-css-prefix}-calculator:before               {content:"\e6b1";}
 .@{iconfont-css-prefix}-loading:before {
   display: inline-block;
   .animation(loadingCircle 1s infinite linear);

style/mixins/button.less

@@ -153,11 +153,11 @@
 
   &:hover,
   &:focus {
-    .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
+    .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
   }
   &:active,
   &.active {
-    .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
+    .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
   }
 }
 
@@ -168,11 +168,11 @@
 
   &:hover,
   &:focus {
-    .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
+    .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
   }
   &:active,
   &.active {
-    .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
+    .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
   }
 }
 

style/themes/default/custom.less

@@ -21,7 +21,7 @@
 
 // ICONFONT
 @iconfont-css-prefix    : anticon;
-@icon-url               : "//at.alicdn.com/t/font_1452596235_7047422";
+@icon-url               : "//at.alicdn.com/t/font_1457169990_5499172";
 
 // LINK
 @link-color             : #2db7f5;
@@ -63,7 +63,7 @@
 @btn-default-border     : @border-color-base;
 
 @btn-ghost-color        : @text-color;
-@btn-ghost-bg           : #fff;
+@btn-ghost-bg           : transparent;
 @btn-ghost-border       : @border-color-base;
 
 @btn-disable-color      : #ccc;