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

2024-12-12 15:19:58 +08:00 · 2016-03-07 15:21:05 +08:00 · 2016-03-07 15:21:05 +08:00 · f35a81a862
commit f35a81a862
parent b346949e97 400b7b8a27
51 changed files with 329 additions and 159 deletions
--- a/.eslintrc.json
+++ b/.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,
--- a/.travis.yml
+++ b/.travis.yml
@ -1,4 +1,7 @@
+sudo: false
+
 language: node_js

 node_js:
  - "4"
+  - "5"
--- a/CHANGELOG.md
+++ b/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

--- a/components/alert/index.md
+++ b/components/alert/index.md
@ -19,8 +19,8 @@
 |----------- |---------------------------------------------------------  | ---------- |-------|
 | type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
 | closable   | 可选参数，默认不显示关闭按钮                                  | Boolean   | 无    |
-| closeText  | 可选参数，自定义关闭按钮                                     | String     | 无    |
-| message    | 必选参数，警告提示内容                                       | String     | 无    |
-| description | 可选参数，警告提示的辅助性文字介绍                            | String     | 无    |
+| closeText  | 可选参数，自定义关闭按钮                                     | React.Node   | 无    |
+| message    | 必选参数，警告提示内容                                       | React.Node   | 无    |
+| description | 可选参数，警告提示的辅助性文字介绍                            | React.Node   | 无    |
 | onClose     | 可选参数，关闭时触发的回调函数                                | Function   | 无    |
 | showIcon   | 可选参数，是否显示辅助图标                                 | Boolean   | false    |
--- a/components/button/button.jsx
+++ b/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`, '');
-    setTimeout(() => {
-      buttonNode.className += ` ${prefix}clicked`;
-    }, 10);
+    clearButton(buttonNode);
+    setTimeout(() => buttonNode.className += ` ${prefix}clicked`, 10);
+    clearTimeout(this.timeout);
+    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>
    );
--- a/components/cascader/index.jsx
+++ b/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}
--- a/components/icon/index.md
+++ b/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'));
--- a/components/input-number/index.md
+++ b/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      |
--- a/components/modal/index.md
+++ b/components/modal/index.md
@ -30,7 +30,7 @@
 | footer     | 底部内容       | React.Element    | 确定取消按钮 |
 | okText     | 确认按钮文字    | String           | 确定       |
 | cancelText | 取消按钮文字    | String           | 取消       |
-
+| maskClosable | 点击蒙层是否允许关闭 | Boolean   | true       | 

 ### Modal.xxx()

--- a/components/progress/index.jsx
+++ b/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() {
--- a/components/radio/demo/radiogroup-more.md
+++ b/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);
+````
--- a/components/radio/demo/radiogroup.md
+++ b/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>
+      <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>
    );
  }
 });
+
 ReactDOM.render(<App />, mountNode);
 ````
--- a/components/radio/group.jsx
+++ b/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>;
  },
 });
--- a/components/radio/radio.jsx
+++ b/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}>
-        <Radio {...this.props} children={null} />
+      <label className={classString} style={style}>
+        <Radio {...this.props} style={null} children={null} />
        {children}
      </label>
    );
--- a/components/select/demo/search-box.md
+++ b/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}>
--- a/components/select/index.md
+++ b/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) | 无   |
--- a/components/steps/index.md
+++ b/components/steps/index.md
@ -17,9 +17,9 @@

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

--- a/components/table/demo/fixed-header.md
+++ b/components/table/demo/fixed-header.md
@ -4,6 +4,8 @@

 方便一页内展示大量数据。

+需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。
+
 ---

 ````jsx
--- a/components/table/index.md
+++ b/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    |
-| expandedRowRender  | 额外的列展开元素 | Function |                     | - |
-| defaultExpandedRowKeys | 默认展开的列 | Array |                     | - |
+| rowKey        | 表格行 key 的取值 | Function(record, index):string |                     |    record.key    |
+| expandedRowRender  | 额外的展开行 | Function |                     | - |
+| 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) {
-  return record.uid;  // 比如你的数据主键是 uid
-};
-
-return <Table rowKey={rowKey} />;
+// 比如你的数据主键是 uid
+return <Table rowKey={record => record.uid} />;
 ```
--- a/components/tag/index.jsx
+++ b/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}>
-            <span className={`${prefixCls}-text`} {...restProps} />
+          <div data-show={!this.state.closing} {...restProps} className={classString}>
+            <span className={`${prefixCls}-text`}>{children}</span>
            {close}
          </div>
        )}
--- a/components/transfer/demo/search.md
+++ b/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} />
--- a/components/transfer/index.jsx
+++ b/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,
 };
--- a/components/transfer/index.md
+++ b/components/transfer/index.md
@ -28,4 +28,5 @@
 | operations | 操作文案集合,顺序从上至下 | Array | [] |
 | showSearch | 是否显示搜索框 | Boolean | false |
 | searchPlaceholder | 搜索框的默认值 | String | 请输入搜索的内容  |
+| notFoundContent | 当列表为空时显示的内容 | React.node | 'Not Found'  |
 | footer | 底部渲染函数 | Function(props) |  |  |
--- a/components/transfer/list.jsx
+++ b/components/transfer/list.jsx
@ -69,8 +69,8 @@ class TransferList extends Component {
  }

  render() {
-    const { prefixCls, dataSource, titleText, filter, checkedKeys,
-            checkStatus, body, footer, showSearch } = this.props;
+    const { prefixCls, dataSource, titleText, filter, checkedKeys, notFoundContent,
+            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`}>
--- a/components/transfer/search.jsx
+++ b/components/transfer/search.jsx
@ -31,7 +31,7 @@ class Search extends Component {
 }

 Search.defaultProps = {
-  placeholder: '请输入搜索内容',
+  placeholder: '',
  onChange: noop,
  handleClear: noop,
 };
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@ -55,7 +55,6 @@ const Demo = React.createClass({
      multiple: true,
      treeCheckable: true,
      searchPlaceholder: '请选择',
-      treeDefaultExpandAll: true,
      style: {
        width: 300,
      },
--- a/docs/react/introduce.md
+++ b/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)。
--- a/package.json
+++ b/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",
--- a/scripts/demo.js
+++ b/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'];
--- a/scripts/home.js
+++ b/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"/>
--- a/site/static/style.less
+++ b/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 {
-    margin: 10px;
-    height: auto;
+  a.logo {
+    width: 144px;
+    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;
-    right: 0;
+    top: 0;
+    left: 0;
    background: #fff;
-    overflow: hidden;
-    height: auto;
-    line-height: 50px;
+    line-height: 60px;
    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;
-    height: 49px;
-    float: right;
+    width: 18px;
+    height: 50px;
+    position: absolute;
+    left: 30px;
+    top: 32px;
    cursor: pointer;
-    background: #BEC4C8;
  }

-  .nav-phone-icon:before,
-  .nav-phone-icon:after {
+  .nav-phone-icon:before {
    content: "";
    display: block;
    border-radius: 1px;
-    width: 15px;
+    width: 18px;
    height: 2px;
-    background: #EBEDEE;
-    margin: 20px 0 0 18px;
-  }
-
-  .nav-phone-icon:after {
-    margin-top: 5px;
+    background: #666;
+    box-shadow: 0 7px 0 0 #666, 0 14px 0 0 #666;
+    position: absolute;
  }

  .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;
+  }
+}
--- a/site/templates/home.html
+++ b/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 {
-    float: right;
+  .banner-text-wrapper .start-button {
+    margin-bottom: 24px;
+  }
+
+  .banner-text-wrapper .start-button a {
    width: 155px;
    height: 45px;
    border-radius: 6px;
-    border: 1px solid #00AAEE;
-    color: #00AAEE;
+    border: 1px solid #2db7f5;
+    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 {
--- a/site/templates/layout.html
+++ b/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 %}">
--- a/style/components/breadcrumb.less
+++ b/style/components/breadcrumb.less
@ -19,7 +19,7 @@

  &-separator {
    margin: 0 8px;
-    color: #d9d9d9;
+    color: @border-color-base;
  }

  .anticon + span {
--- a/style/components/checkbox.less
+++ b/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;
--- a/style/components/datepicker/MonthPanel.less
+++ b/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;
-  }
-}
--- a/style/components/form.less
+++ b/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;
  }
 }
--- a/style/components/inputNumber.less
+++ b/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;
-      top: 0;
+      margin-top: -1px;
+      vertical-align: top;
    }
    .@{input-number-prefix-cls}-handler-up-inner {
      top: -1px;
--- a/style/components/menu.less
+++ b/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;

--- a/style/components/popover.less
+++ b/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;
  }

--- a/style/components/progress.less
+++ b/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 {
--- a/style/components/radio.less
+++ b/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;
--- a/style/components/steps.less
+++ b/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;
      }
--- a/style/components/table.less
+++ b/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;
  }
--- a/style/components/tabs.less
+++ b/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;
  }
--- a/style/components/timeline.less
+++ b/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 {
--- a/style/components/transfer.less
+++ b/style/components/transfer.less
@ -66,9 +66,10 @@
      }

      &-not-found {
-        margin-top: 24px;
+        padding-top: 24px;
        color: #ccc;
        text-align: center;
+        height: 100%;
      }

      ul {
--- a/style/components/upload.less
+++ b/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;
      }
--- a/style/core/iconfont.less
+++ b/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);
--- a/style/mixins/button.less
+++ b/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%));
  }
 }

--- a/style/themes/default/custom.less
+++ b/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;