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

components/form/demo/basic.md

-# 基本使用
-
-- order: 0
-
-为了获得更好的排列，请将 `label` 标签和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。
-
-`注`：`.ant-input`  类为 `<input>`、`<textarea>`、`<select>` 元素默认设置了 `width: 100%`。
-
-为 `label` 标签添加 `required` 属性，表示该项必选。
-
----
-
-````html
-<form>
-  <div class="ant-form-item">
-    <label for="userName" required>用户名：</label>
-	  <input class="ant-input" type="text" id="userName" placeholder="请输入"/>
-  </div>
-  <div class="ant-form-item">
-    <label for="password" required>密码：</label>
-	  <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
-  </div>
-  <div class="ant-checkbox">
-    <label>
-      <input type="checkbox"> 保持登录
-    </label>
-  </div>
-  <input type="submit" class="ant-btn ant-btn-primary" value="确定" />
-  <input type="submit" class="ant-btn" value="取消" />
-</form>
-````

components/form/demo/disabled.md

 # 禁用状态
 
-- order: 4
+- order: 3
 
 1) 单独为输入框设置 `disabled` 属性；
 
@@ -10,29 +10,46 @@
 
 ````html
 <h4>禁用的表单控件</h4>
-<input class="ant-input" type="text" value="我是禁用的" disabled>
+<form class="ant-form-horizontal">
+  <div class="ant-form-item">
+    <label class="col-5">禁用的输入框：</label>
+    <div class="col-12">
+      <input class="ant-input" type="text" value="我是禁用的" disabled>
+    </div>
+  </div>
+</form>
 
 <br />
 
-<h4>禁用的fieldset</h4>
-<form>
+<h4>禁用的 fieldset</h4>
+<form class="ant-form-horizontal">
   <fieldset disabled>
     <div class="ant-form-item">
-      <label for="disabledTextInput">Input:</label>
-      <input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
+      <label for="disabledTextInput" class="col-5">Input:</label>
+      <div class="col-12">
+        <input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
+      </div>
+    </div>
+    <div class="ant-form-item">
+      <label for="disabledSelect" class="col-5">Select:</label>
+      <div class="col-12">
+        <select id="disabledSelect" class="ant-input">
+          <option>Disabled select</option>
+        </select>
+      </div>
     </div>
     <div class="ant-form-item">
-      <label for="disabledSelect">Select</label>
-      <select id="disabledSelect" class="ant-input">
-        <option>Disabled select</option>
-      </select>
+      <div class="ant-checkbox col-14 col-offset-5">
+        <label>
+          <input type="checkbox"> checkbox
+        </label>
+      </div>
     </div>
-    <div class="ant-checkbox">
-      <label>
-        <input type="checkbox"> checkbox
-      </label>
+    <div class="row">
+      <div class="col-14 col-offset-5">
+        <input type="submit" class="ant-btn ant-btn-primary" value="确定">
+      </div>
     </div>
-    <button type="submit" class="ant-btn ant-btn-primary">Submit</button>
   </fieldset>
 </form>
 

components/form/demo/form-controls.md

 # 表单控件
 
-- order: 3
+- order: 2
 
 展示所有支持的表单控件。
 

components/form/demo/horizontal-form.md

 # 水平排列的表单
 
-- order: 1
+- order: 0
 
 为 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。
 
 如需将一行静态文本和 `<label>` 标签置于同一行，则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。
 
+为 `label` 标签添加 `required` 属性，表示该项必选。
 
 ---
 
@@ -24,13 +25,13 @@
   </div>
   <div class="ant-form-item">
     <label for="password" class="col-6" required>密码：</label>
-    <div class="col-18">
+    <div class="col-14">
       <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
 	 </div>
   </div>
   <div class="ant-form-item">
     <label  class="col-6" required>您的性别：</label>
-    <div class="col-18">
+    <div class="col-14">
       <label class="ant-radio-inline">
         <input type="radio" name="radios" id="male-radio" value="male" checked> 男的
       </label>
@@ -41,13 +42,13 @@
   </div>  
   <div class="ant-form-item">
     <label for="password" class="col-6" required>备注：</label>
-    <div class="col-18">
+    <div class="col-14">
       <textarea class="ant-input" placeholder="随便写"></textarea>
       <p class="ant-form-explain">随便写点什么吧</p>
     </div>
   </div>
   <div class="ant-form-item">
-    <div class="ant-checkbox col-18 col-offset-6">
+    <div class="ant-checkbox col-14 col-offset-6">
       <label>
         <input type="checkbox"> 我是同意的
       </label>

components/form/demo/inline-form.md

 # 行内排列的表单
 
-- order: 2
+- order: 1
 
 在**视口宽度大于等于 768px **时，你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
 

components/form/demo/input-size.md

 # Input 尺寸
 
-- order: 7
+- order: 6
 
-关于尺寸，我们为 `.ant-input` `.ant-input-group` 均提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名后添加后缀即可。
+我们为定义了 `.ant-input` 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。
 
-但是在 `<form>` 表单里面，我们只使用**大尺寸**作为唯一的尺寸。
+但是在 `<form>` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
 
 ---
 
 ````html
-<h4>input</h4>
-<!-- 大尺寸 -->
-<input class="ant-input ant-input-lg" type="text" id="userName" placeholder="大输入框"/>
-<br>
-<!-- 默认尺寸 -->
-<input class="ant-input" type="text" id="userName" placeholder="默认大小输入框"/>
-<br>
-<!-- 小尺寸 -->
-<input class="ant-input ant-input-sm" type="text" id="userName" placeholder="小输入框"/>
 
-<h4>input-group</h4>
-<!-- 大尺寸 -->
-<div class="ant-input-group ant-input-group-lg">
-  <input type="text" class="ant-input" placeholder="大输入框组合">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
+<div class="row">
+  <div class="col-6 pdrg-8">
+    <input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
   </div>
-</div>
-
-<br>
-<!-- 默认尺寸 -->
-<div class="ant-input-group">
-  <input type="text" class="ant-input" placeholder="Search for...">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
+  <div class="col-6 pdrg-8">
+    <input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
   </div>
-</div>
-
-<br>
-<!-- 小尺寸 -->
-<div class="ant-input-group ant-input-group-sm">
-  <input type="text" class="ant-input" placeholder="小输入框组合">
-  <div class="ant-input-group-btn">
-    <button class="input-btn" type="button">
-      <span>.com</span>
-      <i class="anticon anticon-caret-down"></i>
-    </button>
+  <div class="col-6 pdrg-8">
+    <input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
   </div>
 </div>
 

components/form/demo/inputs.md

 # Input 输入框集合
 
-- order: 6
+- order: 5
 
 使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。
 

components/form/demo/mix.md

 # 表单组合
 
-- order: 8
+- order: 7
 
-展示和表单相关的其他 ant-design 组件。
+集中营，展示和表单相关的其他 ant-design 组件。
 
 ---
 
@@ -78,25 +78,25 @@ React.render(
     </div>
     <div className="ant-form-item">
       <label for="" className="col-6" required>Datepicker:</label>
-      <div className="col-8">
+      <div className="col-6">
         <Datepicker value="" />
       </div>
       <div className="col-2">
         <p className="ant-form-split">--</p>
       </div>
-      <div className="col-8">
+      <div className="col-6">
         <Datepicker value="" />
       </div>
     </div>
     <div className="ant-form-item has-error">
       <label for="" className="col-6" required>Datepicker 校验:</label>
-      <div className="col-8">
+      <div className="col-6">
         <Datepicker value="" />
       </div>
       <div className="col-2">
         <p className="ant-form-split">--</p>
       </div>
-      <div className="col-8">
+      <div className="col-6">
         <Datepicker value="" />
       </div>
       <div className="col-19 col-offset-6">

components/form/demo/validate.md

 # 校验提示
 
-- order: 5
+- order: 4
 
 我们为表单控件的校验状态定义了样式，共有三种校验状态类：
 
@@ -15,23 +15,23 @@
 ---
 
 ````html
-<h4>校验提示</h4>
+<h4>不带反馈图标的校验提示</h4>
 <br />
-<div class="ant-form-item has-success">
-  <label for="success">成功校验：</label>
-  <input class="ant-input" type="text" id="success" value="我是正文"/>
-</div>
-
-<div class="ant-form-item has-error">
-  <label for="error">失败校验：</label>
-  <input class="ant-input" type="text" id="error" value="无效选择"/>
-  <div class="ant-form-explain">请输入数字和字母组合</div>
-</div>
-
-<div class="ant-form-item has-warning">
-  <label for="warning">警告校验：</label>
-  <input class="ant-input" type="text" id="warning" value="前方高能预警"/>
-</div>
+<form class="ant-form-horizontal">
+  <div class="ant-form-item has-error">
+    <label for="error" class="col-5">失败校验：</label>
+    <div class="col-12">
+      <input class="ant-input" type="text" id="error" value="无效选择"/>
+      <div class="ant-form-explain">请输入数字和字母组合</div>
+    </div>
+  </div>
+  <div class="ant-form-item has-warning">
+    <label for="warning" class="col-5">警告校验：</label>
+    <div class="col-12">
+      <input class="ant-input" type="text" id="warning" value="前方高能预警"/>
+    </div>
+  </div>
+</form>
 
 <h4>带图标的校验提示（水平排列的表单）</h4>
 <br />

components/form/index.md

@@ -11,7 +11,7 @@
 
 ### 表单
 
-除了默认的排列方式，我们还为 `form` 提供了以下两种排列方式：
+我们为 `form` 提供了以下两种排列方式：
 
 - 水平排列：`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列;
 - 行内排列：`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。

components/steps/demo/custom-icon.md

-# 自定义图标步进条
+# 自定义图标步骤条
 
 - order: 2
 
@@ -25,12 +25,11 @@
 var Steps = antd.Steps;
 var Step = Steps.Step;
 var container = document.getElementById('components-steps-demo-custom-icon');
-var imgIcon = <div className='my-step-icon'><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/></div>
 
 
 React.render(<Steps>
   <Step status='finish' title='步骤1' icon={<div className='my-step-icon'><span className='anticon anticon-cloud'></span></div>}></Step>
-  <Step status='process' title='步骤2' icon={imgIcon}></Step>
+  <Step status='process' title='步骤2' icon={<div className='my-step-icon'><span className='anticon anticon-apple'></span></div>}></Step>
   <Step status='wait' title='步骤3' icon={<div className='my-step-icon'><span className='anticon anticon-github'></span></div>}></Step>
 </Steps>, container);
 ````

components/steps/demo/simple.md

@@ -21,8 +21,8 @@ var steps = [{
   description: '这里是多信息的耶哦耶哦哦耶哦耶哦耶哦耶哦耶'
 }, {
   status: 'wait',
-  title: '待运行',
-  description: '这里是多信息的描述啊描述啊描述啊'
+  title: '又一个待运行',
+  description: '描述啊描述啊'
 }, {
   status: 'wait',
   title: '待运行',

components/steps/demo/small-size.md

@@ -2,7 +2,7 @@
 
 - order: 1
 
-迷你版的步进条，通过设置`<Steps size='small'>`启用.
+迷你版的步骤条，通过设置`<Steps size='small'>`启用.
 
 ---
 

components/steps/demo/step-next.md

@@ -59,9 +59,6 @@ var MyForm = React.createClass({
             ></Steps.Step>
         })}
       </Steps></div>
-      <div>表单输入A：<input /></div>
-      <div>表单输入B：<input /></div>
-      <div>表单输入C：<input /></div>
       <div><span className='ant-btn' onClick={this.nextStep}>下一步</span></div>
     </form>)
   }

components/steps/index.jsx

@@ -7,11 +7,14 @@ var AntSteps = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: 'ant-steps',
-      size: 'default'
+      size: 'default',
+      maxDescriptionWidth: 100
     };
   },
   render() {
-    return (<Steps size={this.props.size} prefixCls={this.props.prefixCls}>
+    return (<Steps size={this.props.size}
+                   maxDescriptionWidth ={this.props.maxDescriptionWidth}
+                   prefixCls={this.props.prefixCls}>
       {this.props.children}
     </Steps>);
   }

components/steps/index.md

@@ -17,15 +17,16 @@
 
 ### Steps
 
-步进条的整体
+步骤条的整体
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
 |  size | 可选参数，指定大小（目前只支持普通和迷你两种大小） | string    |  small, default | default    |
+|  maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度 | number | 无 | 100 |
 
 ### Steps.Step
 
-步进条的每一个步
+步骤条的每一个步
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|

package.json

@@ -21,7 +21,7 @@
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
     "rc-select": "~4.0.0",
-    "rc-steps": "~1.1.0",
+    "rc-steps": "~1.1.2",
     "rc-tabs": "~5.1.0",
     "rc-tooltip": "~2.2.3"
   },

static/style.css

@@ -609,6 +609,8 @@ footer ul li > a {
 
 .markdown > table th {
   white-space: nowrap;
+  color: #5C6B77;
+  font-weight: 600;
 }
 
 .markdown > table th,
@@ -1626,6 +1628,8 @@ footer ul li > a {
 
 .component-demos {
   margin: 2em 0 1em;
+  color: #5C6B77;
+  font-weight: 600;
 }
 
 .component-demos .icon-all {

style/components/button.less

@@ -41,12 +41,12 @@
   &-menu {
     > .@{iconfont-css-prefix} {
       top: -1px;
-      font-size: 12px;
+      font-size: @font-size-base;
       font-size: ~"10px \9"; // ie8-9
       .scale(0.83);
 
       :root & {
-        font-size: 12px; // reset ie9 and above
+        font-size: @font-size-base; // reset ie9 and above
       }
     }
   }

style/components/datepicker/Picker.less

@@ -10,6 +10,7 @@
 .@{prefixCalendarClass}-picker {
   position: relative;
   display: inline-block;
+
   &-input {
     .input;
   }
@@ -20,10 +21,10 @@
     .transition(all .3s @ease-in-out);
     width: 14px;
     height: 14px;
-    right: 14px;
+    line-height: 14px;
+    right: 8px;
     color: #999;
     top: 50%;
-    line-height: 1;
     margin-top: -7px;
     &:after {
       content: "\e60c";
@@ -40,4 +41,7 @@
     border-color: #23c0fa;
     box-shadow: 0 0 3px #23c0fa;
   }
+  .ant-form-item &-input {
+    height: 32px;
+  }
 }

style/components/form.less

@@ -11,13 +11,13 @@ label {
     content: "*";
     color: @label-required-color;
     font-family: SimSun;
-    font-size: 12px;
+    font-size: @font-size-base;
     .translate3d(-10px; 0; 0);
   }
 
   > .@{iconfont-css-prefix} {
     vertical-align: top;
-    font-size: 12px;
+    font-size: @font-size-base;
   }
 }
 
@@ -52,7 +52,7 @@ label {
 form {
   .@{css-prefix}input {
     height: @input-height-lg;
-    font-size: 12px;
+    font-size: @font-size-base;
     padding: @input-padding-horizontal;
   }
   .has-feedback {
@@ -65,14 +65,17 @@ form {
   .@{css-prefix}input-group > .@{css-prefix}input,
   .@{css-prefix}input-group > .@{css-prefix}input-group-addon,
   .@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn {
-    .input-lg();
+    height: @input-height-lg;
+    font-size: @font-size-base;
+    padding: @input-padding-horizontal;
   }
   
   // input[type=file]
   .@{css-prefix}upload {
-    height: 32px;
-    font-size: 12px;
-    padding: 7px;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    max-height: 32px;
+    font-size: @font-size-base;
   }
 }
 
@@ -231,7 +234,7 @@ input[type="checkbox"] {
   margin: 0!important;
   padding-top: 7px;
   padding-bottom: 7px;
-  font-size: 12px;
+  font-size: @font-size-base;
   height: @input-height-lg;
 }
 
@@ -254,6 +257,6 @@ input[type="checkbox"] {
 }
 .@{css-prefix}form-explain {
   display: block;
-  font-size: 12px;
+  font-size: @font-size-base;
 }
 

style/components/steps.less

@@ -18,7 +18,7 @@
     display: inline-block;
 
     &.@{stepsPrefixClass}-status-wait {
-      .@{stepsPrefixClass}-head {
+      .@{stepsPrefixClass}-head-inner {
         border-color: @wait-color;
         background-color: #fff;
 
@@ -28,7 +28,7 @@
       }
     }
     &.@{stepsPrefixClass}-status-process {
-      .@{stepsPrefixClass}-head {
+      .@{stepsPrefixClass}-head-inner {
         border-color: @active-color;
         background-color: @active-color;
 
@@ -38,17 +38,20 @@
       }
     }
     &.@{stepsPrefixClass}-status-finish {
-      .@{stepsPrefixClass}-head {
+      .@{stepsPrefixClass}-head-inner {
         border-color: @active-color;
         background-color: #fff;
         > .@{stepsPrefixClass}-icon {
           color: @active-color;
         }
       }
+      .@{stepsPrefixClass}-tail > i {
+        background-color: @active-color;
+      }
     }
 
     &.@{stepsPrefixClass}-custom {
-      .@{stepsPrefixClass}-head {
+      .@{stepsPrefixClass}-head-inner {
         background: none;
         border: 0;
       }
@@ -61,19 +64,24 @@
 
   }
 
-  .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main, .@{stepsPrefixClass}-tail {
+  .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main {
+    position: relative;
     display: inline-block;
     vertical-align: top;
-
   }
   .@{stepsPrefixClass}-head {
+    background: #fff;
+  }
+
+  .@{stepsPrefixClass}-head-inner {
+    display: block;
     border:2px solid @wait-color;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: 22px;
     text-align: center;
     border-radius: 24px;
-    font-size: 13px;
+    font-size: 14px;
     margin-right: 12px;
     .transition(background-color 0.1s ease);
     .transition(border-color 0.1s ease);
@@ -87,7 +95,6 @@
     }
   }
   .@{stepsPrefixClass}-main {
-    max-width: 75px;
     margin-top: 3px;
   }
   .@{stepsPrefixClass}-title {
@@ -95,14 +102,23 @@
     margin-bottom: 4px;
     color: #666;
     font-weight: bold;
+    background: #fff;
+    display: inline-block;
+    padding-right: 10px;
+  }
+  .@{stepsPrefixClass}-item-last {
+    .@{stepsPrefixClass}-title {
+      padding-right: 0;
+    }
   }
   .@{stepsPrefixClass}-description {
     font-size: 12px;
     color: #999;
   }
   .@{stepsPrefixClass}-tail {
-    width: 0;
-    position: relative;
+    position: absolute;
+    left: 0;
+    width: 100%;
     top: 12px;
     padding:0 10px;
     > i {
@@ -115,19 +131,17 @@
   }
 
   &.@{stepsPrefixClass}-small {
-    .@{stepsPrefixClass}-head {
+    .@{stepsPrefixClass}-head-inner {
       border:1px solid @wait-color;
       width: 18px;
       height: 18px;
       line-height: 18px;
       text-align: center;
       border-radius: 18px;
-      font-size: 10px;
+      font-size: 12px;
       margin-right: 10px;
-
     }
     .@{stepsPrefixClass}-main {
-      max-width: 75px;
       margin-top: 0;
     }
     .@{stepsPrefixClass}-title {
@@ -151,13 +165,7 @@
     }
   }
 
-  &.@{stepsPrefixClass}-init, &.@{stepsPrefixClass}-init.@{stepsPrefixClass}-small {
-    .@{stepsPrefixClass}-tail {
-      padding: 0;
-    }
-  }
-
-  &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head {
+  &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head-inner {
     width: inherit;
     height: inherit;
     line-height: inherit;

style/mixins/form.less

@@ -41,7 +41,7 @@
     width: 100%;
     padding: 0;
     margin-bottom: 20px;
-    font-size: (@font-size-base * 1.5);
+    font-size: 14px;
     line-height: inherit;
     color: @legend-color;
     border: 0;

style/mixins/input.less

@@ -16,7 +16,6 @@
   position: relative;
   display: inline-block;
   padding: @input-padding-vertical-base @input-padding-horizontal;
-  margin-right: 8px;
   width: 100%;
   cursor: text;
   height: @input-height-base;

style/themes/default/custom.less

@@ -107,8 +107,8 @@
 // Form
 // --------------------------------
 // Legend
-@legend-color                : #222;
-@legend-border-color         : #e5e5e5;
+@legend-color                : #999;
+@legend-border-color         : #d9d9d9;
 // Label
 @label-required-color        : #F60;
 @label-color: #999;