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

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"
   },

style/components/inputNumber.less

@@ -12,6 +12,7 @@
   vertical-align: middle;
   border: 1px solid #D9D9D9;
   border-radius: 5px;
+  overflow: hidden;
 
   &-handler {
     text-align: center;
@@ -26,6 +27,10 @@
     -webkit-user-select: none;
   }
 
+  &-handler-up-inner {
+    margin-left: -1px;
+  }
+
   &:hover {
     border-color: #23c0fa;
 
@@ -53,7 +58,7 @@
     outline: 0;
     -moz-appearance: textfield;
     line-height: 26px;
-    height: 24px;
+    height: 22px;
     transition: all 0.3s ease;
     color: #666666;
     border: 0;
@@ -72,6 +77,7 @@
   &-handler-up {
     padding-top: 1px;
     border-bottom: 1px solid #D9D9D9;
+    cursor: pointer;
     &-inner {
       .iconfont-mixin();
       top:-2px;
@@ -83,6 +89,7 @@
   }
 
   &-handler-down {
+    cursor: pointer;
     &-inner {
       .iconfont-mixin();
       &:before {
@@ -94,7 +101,9 @@
 
   .handler-disabled() {
     opacity: 0.72;
+    cursor: default;
     &:hover {
+      cursor: default;
       color: #999;
       border-color: #d9d9d9;
     }

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;