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

.eslintrc.json

@@ -7,9 +7,12 @@
     "jest": true,
     "es6": true
   },
+  "parserOptions": {
+    "ecmaVersion": 6,
     "ecmaFeatures": {
       "jsx": true,
       "experimentalObjectRestSpread": true
+    }
   },
   "plugins": [
     "markdown",
@@ -28,6 +31,8 @@
     "react/jsx-closing-bracket-location": 0,
     "react/jsx-no-bind": 0,
     "no-param-reassign": 0,
-    "max-len": 0
+    "no-return-assign": 0,
+    "max-len": 0,
+    "consistent-return": 0
   }
 }

CHANGELOG.md

@@ -4,6 +4,18 @@
 
 ---
 
+## 0.12.4
+
+`2016-02-22`
+
+- Radio 的 value 支持更多类型。[#1043](https://github.com/ant-design/ant-design/pull/1043)
+- 修复 Spin 组件的大小、居中等样式问题。
+- FormItem 补充 extra 属性的文档。[#931](https://github.com/ant-design/ant-design/issues/931)
+- 修复的 Table 下树形数据和选择框配合时的样式问题。
+- 修复一个水平表单的错误提示的样式错位问题。[#1040](https://github.com/ant-design/ant-design/issues/1040)
+- 改进 Input disabled 的样式。
+- 添加了一个轻微的 Button 点击动效。
+
 ## 0.12.3
 
 `2016-02-19`

components/badge/index.jsx

@@ -4,10 +4,6 @@ import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';
 
 class AntBadge extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
   render() {
     let { count, prefixCls, overflowCount, className, style, children } = this.props;
     const dot = this.props.dot;

components/button/button.jsx

@@ -30,9 +30,17 @@ export default class Button extends React.Component {
       window.PIE.attach(findDOMNode(this));
     }
   }
+  handleClick(...args) {
+    const buttonNode = findDOMNode(this);
+    buttonNode.className = buttonNode.className.replace(`${prefix}clicked`, '');
+    setTimeout(() => {
+      buttonNode.className += ` ${prefix}clicked`;
+    }, 10);
+    this.props.onClick(...args);
+  }
   render() {
     const props = this.props;
-    const { type, shape, size, onClick, className, htmlType, children, ...others } = props;
+    const { type, shape, size, className, htmlType, children, ...others } = props;
 
     // large => lg
     // small => sm
@@ -53,7 +61,7 @@ export default class Button extends React.Component {
     const kids = React.Children.map(children, insertSpace);
 
     return (
-      <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
+      <button {...others} type={htmlType || 'button'} className={classes} onClick={this.handleClick.bind(this)}>
         {kids}
       </button>
     );

components/checkbox/Group.jsx

@@ -16,10 +16,14 @@ export default React.createClass({
     onChange: React.PropTypes.func,
   },
   getInitialState() {
-    const { value, defaultValue } = this.props;
-    return {
-      value: value || defaultValue,
-    };
+    const props = this.props;
+    let value;
+    if ('value' in props) {
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    }
+    return { value };
   },
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {

components/checkbox/demo/group.md

@@ -2,7 +2,7 @@
 
 - order: 3
 
-方便的生成一个 Checkbox 组。
+方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。
 
 ---
 

components/collapse/demo/accordion.md

@@ -18,13 +18,13 @@ const text = `
 
 ReactDOM.render(
   <Collapse accordion>
-    <Panel header={`This is panel header 1`} key="1">
+    <Panel header={'This is panel header 1'} key="1">
       <p>{text}</p>
     </Panel>
-    <Panel header={`This is panel header 2`} key="2">
+    <Panel header={'This is panel header 2'} key="2">
       <p>{text}</p>
     </Panel>
-    <Panel header={`This is panel header 3`} key="3">
+    <Panel header={'This is panel header 3'} key="3">
       <p>{text}</p>
     </Panel>
   </Collapse>

components/collapse/demo/mix.md

@@ -22,17 +22,17 @@ const text = `
 
 ReactDOM.render(
   <Collapse onChange={callback} accordion>
-    <Panel header={`This is panel header 1`} key="1">
+    <Panel header={'This is panel header 1'} key="1">
       <Collapse defaultActiveKey="1">
-        <Panel header={`This is panel nest panel`} key="1">
+        <Panel header={'This is panel nest panel'} key="1">
           <p>{text}</p>
         </Panel>
       </Collapse>
     </Panel>
-    <Panel header={`This is panel header 2`} key="2">
+    <Panel header={'This is panel header 2'} key="2">
       <p>{text}</p>
     </Panel>
-    <Panel header={`This is panel header 3`} key="3">
+    <Panel header={'This is panel header 3'} key="3">
       <p>{text}</p>
     </Panel>
   </Collapse>

components/form/FormItem.jsx

@@ -58,6 +58,8 @@ class FormItem extends React.Component {
     } else if (getFieldValue(field) !== undefined) {
       return 'success';
     }
+
+    return '';
   }
 
   renderValidateWrapper(c1, c2, c3) {

components/form/ValueMixin.jsx

@@ -1,14 +1,3 @@
-function merge() {
-  const ret = {};
-  const args = [].slice.call(arguments, 0);
-  args.forEach((a) => {
-    Object.keys(a).forEach((k) => {
-      ret[k] = a[k];
-    });
-  });
-  return ret;
-}
-
 const ValueMixin = {
   setValue(field, e) {
     let v = e;
@@ -24,7 +13,10 @@ const ValueMixin = {
     const newFormData = {};
     newFormData[field] = v;
     this.setState({
-      formData: merge(this.state.formData, newFormData),
+      formData: {
+        ...this.state.formData,
+        ...newFormData,
+      },
     });
   },
 };

components/form/demo/disabled.md

@@ -1,50 +0,0 @@
-# 禁用状态
-
-- order: 7
-
-1) 单独为输入控件设置 `disabled` 属性；
-
-2) 为 `<fieldset>` 设置 `disabled` 属性，可以禁用 `<fieldset>` 中包含的所有控件。
-
----
-
-````jsx
-import { Row, Col, Button, Input, Form } from 'antd';
-const FormItem = Form.Item;
-
-ReactDOM.render(
-  <Form horizontal>
-    <FormItem
-      label="单独禁用输入框："
-      labelCol={{ span: 5 }}
-      wrapperCol={{ span: 12 }}>
-      <Input defaultValue="我是禁用的" disabled />
-    </FormItem>
-
-    <fieldset disabled>
-      <legend>禁用的 fieldset</legend>
-      <FormItem
-        id="userName"
-        label="用户名："
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 12 }}
-        required>
-        <p className="ant-form-text">大眼萌 minion</p>
-      </FormItem>
-      <FormItem
-        id="password"
-        label="密码："
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 12 }}
-        required>
-        <Input type="password" defaultValue="123456" id="password" />
-      </FormItem>
-      <Row>
-        <Col span="12" offset="5">
-          <Button htmlType="submit" type="primary">确定</Button>
-        </Col>
-      </Row>
-    </fieldset>
-  </Form>
-, mountNode);
-````

components/form/index.md

@@ -101,6 +101,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 |  labelCol | label 标签布局，通 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` | object |  |  |
 |  wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object |  |  |
 |  help | 提示信息，如不设置，则会根据校验规则自动生成 | string |  |   |
+|  extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string |  |   |
 |  required | 是否必填，如不设置，则会根据校验规则自动生成 | bool |  | false  |
 |  validateStatus | 校验状态，如不设置，则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating'  |   |
 |  hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool |  | false  |

components/radio/demo/radiogroup.md

@@ -13,11 +13,11 @@ const RadioGroup = Radio.Group;
 const App = React.createClass({
   getInitialState() {
     return {
-      value: 'a'
+      value: 1
     };
   },
   onChange(e) {
-    console.log(`radio checked:${e.target.value}`);
+    console.log('radio checked', e.target.value);
     this.setState({
       value: e.target.value
     });
@@ -26,12 +26,11 @@ const App = React.createClass({
     return (
       <div>
         <RadioGroup onChange={this.onChange} value={this.state.value}>
-          <Radio value="a">A</Radio>
-          <Radio value="b">B</Radio>
-          <Radio value="c">C</Radio>
-          <Radio value="d">D</Radio>
+          <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 style={{ marginTop: 20 }}>你选中的: {this.state.value}</div>
       </div>
     );
   }

components/radio/group.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
 function getCheckedValue(children) {
-  let checkedValue = null;
+  let value = null;
+  let matched = false;
   React.Children.forEach(children, (radio) => {
     if (radio.props && radio.props.checked) {
-      checkedValue = radio.props.value;
+      value = radio.props.value;
+      matched = true;
     }
   });
-  return checkedValue;
+  return matched ? { value } : undefined;
 }
 
 export default React.createClass({
@@ -16,34 +18,56 @@ export default React.createClass({
       prefixCls: 'ant-radio-group',
       disabled: false,
       onChange() {
-      }
+      },
     };
   },
   getInitialState() {
     let props = this.props;
+    let value;
+    if ('value' in props) {
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    } else {
+      const checkedValue = getCheckedValue(props.children);
+      value = checkedValue && checkedValue.value;
+    }
     return {
-      value: props.value || props.defaultValue || getCheckedValue(props.children)
+      value,
     };
   },
   componentWillReceiveProps(nextProps) {
-    if ('value' in nextProps || getCheckedValue(nextProps.children)) {
+    if ('value' in nextProps) {
       this.setState({
-        value: nextProps.value || getCheckedValue(nextProps.children)
+        value: nextProps.value,
       });
+    } else {
+      const checkedValue = getCheckedValue(nextProps.children);
+      if (checkedValue) {
+        this.setState({
+          value: checkedValue.value,
+        });
+      }
     }
   },
   onRadioChange(ev) {
+    if (!('value' in this.props)) {
       this.setState({
-      value: ev.target.value
+        value: ev.target.value,
       });
+    }
     this.props.onChange(ev);
   },
   render() {
     const props = this.props;
     const children = React.Children.map(props.children, (radio) => {
       if (radio.props) {
+        const keyProps = {};
+        if (!('key' in radio) && typeof radio.props.value === 'string') {
+          keyProps.key = radio.props.value;
+        }
         return React.cloneElement(radio, {
-          key: radio.props.value,
+          ...keyProps,
           ...radio.props,
           onChange: this.onRadioChange,
           checked: this.state.value === radio.props.value,

components/table/demo/expand-children.md

@@ -78,7 +78,7 @@ const data = [{
 }];
 
 ReactDOM.render(
-  <Table columns={columns} dataSource={data} indentSize={30} />,
+  <Table columns={columns} dataSource={data} indentSize={20} />,
   mountNode
 );
 ````

components/table/filterDropdown.jsx

@@ -59,9 +59,7 @@ let FilterMenu = React.createClass({
         const keyPathOfSelectedItem = this.state.keyPathOfSelectedItem;
         const containSelected = Object.keys(keyPathOfSelectedItem).some(key => {
           const keyPath = keyPathOfSelectedItem[key];
-          if (keyPath.indexOf(item.value) >= 0) {
-            return true;
-          }
+          return keyPath.indexOf(item.value) >= 0;
         });
         const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : '';
         return (

components/table/index.jsx

@@ -134,8 +134,8 @@ let AntTable = React.createClass({
       }
     }
     if (typeof column.sorter === 'function') {
-      sorter = function () {
-        let result = column.sorter.apply(this, arguments);
+      sorter = function (...args) {
+        let result = column.sorter.apply(this, args);
         if (sortOrder === 'ascend') {
           return result;
         } else if (sortOrder === 'descend') {
@@ -517,10 +517,7 @@ let AntTable = React.createClass({
     // 否则进行读取分页数据
     if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
       data = data.filter((item, i) => {
-        if (i >= (current - 1) * pageSize &&
-          i < current * pageSize) {
-          return item;
-        }
+        return i >= (current - 1) * pageSize && i < current * pageSize;
       });
     }
     return data;
@@ -587,6 +584,7 @@ let AntTable = React.createClass({
           data={data}
           columns={columns}
           className={classString}
+          expandIconColumnIndex={columns[0].key === 'selection-column' ? 1 : 0}
           expandIconAsCell={expandIconAsCell} />
           {emptyText}
       </div>

components/transfer/demo/advanced.md

@@ -8,7 +8,6 @@
 
 ````jsx
 import { Transfer, Button } from 'antd';
-const container = mountNode;
 
 const App = React.createClass({
   getInitialState() {
@@ -66,5 +65,5 @@ const App = React.createClass({
   }
 });
 
-ReactDOM.render(<App />, container);
+ReactDOM.render(<App />, mountNode);
 ````

components/transfer/index.jsx

@@ -33,6 +33,7 @@ class Transfer extends Component {
             leftDataSource.splice(index, 1);
             return true;
           }
+          return false;
         })[0]);
       });
     }

components/transfer/list.jsx

@@ -81,21 +81,19 @@ class TransferList extends Component {
       [`${prefixCls}-with-footer`]: !!footerDom,
     });
 
-    const showItems = dataSource.map((item) => {
-      // apply filter
+    const showItems = dataSource.filter((item) => {
       const itemText = this.props.render(item);
       const filterResult = this.matchFilter(itemText, filter);
+      return !!filterResult;
+    }).map((item) => {
       const renderedText = this.props.render(item);
-
-      if (filterResult) {
       return (
         <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
           <Checkbox checked={checkedKeys.some(key => key === item.key)} />
           {renderedText}
         </li>
       );
-      }
-    }).filter(item => !!item);
+    });
 
     return (
       <div className={listCls} {...this.props}>
@@ -104,7 +102,7 @@ class TransferList extends Component {
             prefixCls: 'ant-transfer',
             checked: checkStatus === 'all',
             checkPart: checkStatus === 'part',
-            checkable: <span className={`ant-transfer-checkbox-inner`}></span>
+            checkable: <span className={'ant-transfer-checkbox-inner'}></span>
           })}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} 条</span>
           <span className={`${prefixCls}-header-title`}>{titleText}</span></span>
         </div>

components/transfer/search.jsx

@@ -4,10 +4,6 @@ function noop() {
 }
 
 class Search extends Component {
-  constructor(props) {
-    super(props);
-  }
-
   handleChange(e) {
     this.props.onChange(e);
   }

components/tree-select/demo/basic.md

@@ -22,7 +22,7 @@ const Demo = React.createClass({
   },
   render() {
     return (
-      <TreeSelect style={{ width: 360 }}
+      <TreeSelect style={{ width: 300 }}
         value={this.state.value}
         dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
         placeholder="请选择"

components/tree-select/demo/checkable.md

@@ -54,9 +54,10 @@ const Demo = React.createClass({
       onChange: this.onChange,
       multiple: true,
       treeCheckable: true,
+      searchPlaceholder: '请选择',
       treeDefaultExpandAll: true,
       style: {
-        width: 360,
+        width: 300,
       },
     };
     return <TreeSelect {...tProps} />;

components/tree-select/demo/treeData.md

@@ -40,7 +40,7 @@ const Demo = React.createClass({
   },
   render() {
     return (
-      <TreeSelect style={{ width: 360 }}
+      <TreeSelect style={{ width: 300 }}
         value={this.state.value}
         dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
         treeData={treeData}

docs/react/getting-started.md

@@ -102,7 +102,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
 
 <style>
 .code-line-highlight {
-  box-shadow: 0px 190px 0px rgba(255, 207, 0, 0.16);
+  box-shadow: 0px 195px 0px rgba(255, 207, 0, 0.16);
   height: 42px;
   margin-top: -42px;
   position: relative;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",
@@ -41,7 +41,7 @@
     "rc-animate": "~2.0.2",
     "rc-calendar": "~5.4.0",
     "rc-cascader": "~0.9.0",
-    "rc-checkbox": "~1.2.0",
+    "rc-checkbox": "~1.3.0",
     "rc-collapse": "~1.4.4",
     "rc-dialog": "~5.3.1",
     "rc-dropdown": "~1.4.3",
@@ -58,7 +58,7 @@
     "rc-slider": "~3.3.0",
     "rc-steps": "~1.4.1",
     "rc-switch": "~1.3.2",
-    "rc-table": "~3.9.0",
+    "rc-table": "~3.10.1",
     "rc-tabs": "~5.7.0",
     "rc-time-picker": "~1.1.0",
     "rc-tooltip": "~3.3.1",
@@ -86,12 +86,12 @@
     "css-loader": "^0.23.0",
     "cz-conventional-changelog": "^1.1.5",
     "es3ify-loader": "^0.1.0",
-    "eslint": "^1.1.0",
-    "eslint-config-airbnb": "latest",
+    "eslint": "^2.2.0",
+    "eslint-config-airbnb": "^6.0.1",
     "eslint-plugin-babel": "^3.0.0",
     "eslint-plugin-markdown": "*",
-    "eslint-plugin-react": "^3.3.1",
-    "eslint-tinker": "~0.2.0",
+    "eslint-plugin-react": "^4.0.0",
+    "eslint-tinker": "^0.3.1",
     "extract-text-webpack-plugin": "^1.0.1",
     "gh-pages": "^0.9.0",
     "history": "^1.17.0",
@@ -130,7 +130,7 @@
     "just-deploy": "npm run site && node scripts/deploy.js",
     "lint": "npm run srclint && npm run mdlint && npm run lesshint",
     "srclint": "eslint components test index.js --ext '.js,.jsx'",
-    "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM,mountNode' --rule 'no-console: 0,eol-last: 0'",
+    "mdlint": "eslint components/*/demo/*.md --ext '.md' --global 'React,ReactDOM,mountNode' --rule 'no-console: 0, eol-last: 0, prefer-rest-params: 0'",
     "lesshint": "lesshint style/ -e 'style/+(core|mixins)/+(base|iconfont|normalize|layouts|compatibility|grid).less'",
     "eslint-fix": "eslint --fix components test index.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md",
     "test": "npm run lint && webpack && npm run jest",

site/static/style.less

@@ -361,7 +361,6 @@ footer ul li > h2 {
 }
 
 footer ul li > div {
-  text-align: left;
   margin: auto;
   margin: 10px 0;
 }
@@ -1541,6 +1540,10 @@ a.entry-link:hover .anticon-smile {
     padding-right: 30px;
   }
 
+  .prev-next-nav {
+    padding-left: 0;
+  }
+
   footer {
     text-align: center;
   }

site/static/tomorrow.less

@@ -51,6 +51,6 @@ pre code {
   border: 1px solid #e9e9e9;
   padding: 10px 15px;
   border-radius: 6px;
-  font-size: 0.9rem;
+  font-size: 14px;
   white-space: pre;
 }

style/components/button.less

@@ -97,4 +97,26 @@
   > span + .@{iconfont-css-prefix} {
     margin-left: 0.5em;
   }
+
+  &-clicked:before {
+  	content: '';
+  	position: absolute;
+  	top: -6px;
+  	left: -6px;
+  	bottom: -6px;
+  	right: -6px;
+  	border-radius: inherit;
+  	z-index: -1;
+    background: inherit;
+  	opacity: 1;
+  	transform: scale3d(0.5, 0.5, 1);
+    animation: buttonEffect 0.48s ease forwards;
+  }
+}
+
+@keyframes buttonEffect {
+	to {
+		opacity: 0;
+		transform: scale3d(1, 1, 1);
+	}
 }

style/components/form.less

@@ -268,6 +268,11 @@ form {
   .has-feedback {
     display: inline-block;
   }
+
+  // Fix https://github.com/ant-design/ant-design/issues/1040
+  .@{css-prefix}form-explain {
+    position: absolute;
+  }
 }
 
 .@{css-prefix}form-horizontal,

style/components/message.less

@@ -6,6 +6,7 @@
   z-index: 1050;
   width: 100%;
   top: 16px;
+  left: 0;
 
   &-notice {
     width: auto;

style/components/spin.less

@@ -10,12 +10,13 @@
 .@{spin-prefix-cls} {
   color: @primary-color;
   display: inline-block;
-  font-size: @spin-dot-size;
+  vertical-align: middle;
   text-align: center;
   opacity: 0;
   position: absolute;
   visibility: hidden;
   transition: opacity 0.3s @ease-in-out-circ;
+  font-size: @font-size-base;
 
   &-spining {
     opacity: 1;
@@ -30,10 +31,12 @@
   &-nested-loading & {
     position: absolute;
     top: 50%;
-    left: 50%;
-    margin-top: -0.75em;
-    margin-left: -2.5em;
+    height: 20px;
+    line-height: 20px;
+    margin-top: -10px;
     z-index: 4;
+    text-align: center;
+    width: 100%;
   }
 
   &-container {
@@ -42,6 +45,7 @@
 
   &-nested-loading > &-container {
     opacity: 0.7;
+    -webkit-filter: blur(1px);
     filter: blur(1px);
     filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)"; /* IE6~IE9 */
     pointer-events: none;
@@ -52,30 +56,38 @@
 
   &-dot {
     .animation(antSpinPulse 1.2s infinite @ease-in-out-circ);
-    .square(1em);
+    .square(@spin-dot-size);
     border-radius: 50%;
     display: inline-block;
     background-color: @primary-color;
   }
   &-dot-second {
     .animation-delay(200ms);
-    margin-left: 1em;
   }
   &-dot-third {
     .animation-delay(400ms);
-    margin-left: 1em;
+  }
+
+  &-dot + &-dot {
+    margin-left: @spin-dot-size;
   }
 
   // Sizes
   // ------------------------------
   // small
-  &-sm {
-    font-size: @spin-dot-size-sm;
+  &-sm &-dot {
+    .square(@spin-dot-size-sm);
+    + & {
+      margin-left: @spin-dot-size-sm;
+    }
   }
 
   // large
-  &-lg {
-    font-size: @spin-dot-size-lg;
+  &-lg &-dot {
+    .square(@spin-dot-size-lg);
+    + & {
+      margin-left: @spin-dot-size-lg;
+    }
   }
 }
 

style/components/table.less

@@ -318,6 +318,15 @@
         content: '.';
       }
     }
+
+    // Hide selection component in children data
+    &[class*="@{table-prefix-cls}-row-level-"] .@{table-prefix-cls}-selection-column > span {
+      display: none;
+    }
+
+    &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
+      display: inline-block;
+    }
   }
   tr&-expanded-row {
     &,

style/components/treeSelect.less

@@ -231,12 +231,21 @@
 
     .@{tree-select-prefix-cls}-selection--multiple {
       min-height: 32px;
-      .@{tree-select-prefix-cls}-selection__rendered {
-        li {
-          height: 24px;
-          .@{tree-select-prefix-cls}-selection__choice__content {
+
+      .@{tree-select-prefix-cls}-search__field__placeholder {
+        left: 10px;
+        margin-top: 4px;
         font-size: 14px;
         line-height: 24px;
+        height: 24px;
+      }
+
+      .@{tree-select-prefix-cls}-selection__rendered {
+        li {
+          height: 22px;
+          .@{tree-select-prefix-cls}-selection__choice__content {
+            font-size: 14px;
+            line-height: 22px;
           }
         }
       }
@@ -259,7 +268,8 @@
         li {
           height: 14px;
           .@{tree-select-prefix-cls}-selection__choice__content {
-            line-height: 14px;
+            line-height: 10px;
+            font-size: 8px;
             position: relative;
             top: -3px;
           }
@@ -315,8 +325,10 @@
     cursor: text;
 
     .@{tree-select-prefix-cls}-search__field__placeholder {
-      top: 6px;
       left: 10px;
+      margin-top: 4px;
+      height: 20px;
+      line-height: 20px;
     }
 
     .@{tree-select-prefix-cls}-search--inline {

style/mixins/button.less

@@ -250,8 +250,8 @@
 
   .@{btnClassName}:not(:first-child):not(:last-child) {
     border-radius: 0;
-    padding-left: 7px;
-    padding-right: 7px;
+    padding-left: 8px;
+    padding-right: 8px;
   }
 
   > .@{btnClassName}:first-child {
@@ -259,14 +259,14 @@
     &:not(:last-child) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      padding-right: 7px;
+      padding-right: 8px;
     }
   }
 
   > .@{btnClassName}:last-child:not(:first-child) {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    padding-left: 7px;
+    padding-left: 8px;
   }
 
  & > & {
@@ -281,13 +281,13 @@
     > .@{btnClassName}:last-child {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      padding-right: 7px;
+      padding-right: 8px;
     }
   }
 
  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    padding-left: 7px;
+    padding-left: 8px;
   }
 }

style/mixins/grid.less

@@ -10,7 +10,6 @@
 
 .make-row(@gutter: @grid-gutter-width) {
   position: relative;
-  width: 100%;
   margin-left: (@gutter / -2);
   margin-right: (@gutter / -2);
   height: auto;

style/mixins/input.less

@@ -27,6 +27,7 @@
   background-color: @input-disabled-bg;
   opacity: 1;
   cursor: @cursor-disabled;
+  color: #ccc;
   &:hover {
     .hover(@input-border-color);
   }

style/themes/default/custom.less

@@ -67,13 +67,13 @@
 @btn-ghost-border       : @border-color-base;
 
 @btn-disable-color      : #ccc;
-@btn-disable-bg         : #f3f5f7;
+@btn-disable-bg         : #f4f4f4;
 @btn-disable-border     : @border-color-base;
 
-@btn-padding-base       : 4px 11px;
+@btn-padding-base       : 4px 15px;
 
 @btn-font-size-lg       : 14px;
-@btn-padding-lg         : 4px 11px 5px 11px;
+@btn-padding-lg         : 4px 15px 5px 15px;
 
 @btn-padding-sm         : 1px 7px;
 
@@ -136,6 +136,6 @@
 
 @input-hover-border-color    : @primary-color;
 @input-focus-border-color    : @primary-color;
-@input-disabled-bg           : #f3f5f7;
+@input-disabled-bg           : #f4f4f4;
 
 @form-item-margin-bottom     : 24px;