change steps style. add maxDescriptionWidth property

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
 
-步进条的每一个步
+步骤条的每一个步
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|

style/components/steps.less

@@ -20,7 +20,7 @@
     display: inline-block;
 
     &.@{stepsPrefixClass}-status-wait {
-      .@{stepsPrefixClass}-head {
+      .@{stepsPrefixClass}-head-inner {
         border-color: @wait-color;
         background-color: #fff;
 
@@ -30,7 +30,7 @@
       }
     }
     &.@{stepsPrefixClass}-status-process {
-      .@{stepsPrefixClass}-head {
+      .@{stepsPrefixClass}-head-inner {
         border-color: @active-color;
         background-color: @active-color;
 
@@ -40,17 +40,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;
       }
@@ -63,19 +66,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);
@@ -89,7 +97,6 @@
     }
   }
   .@{stepsPrefixClass}-main {
-    max-width: 75px;
     margin-top: 3px;
   }
   .@{stepsPrefixClass}-title {
@@ -97,14 +104,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 {
@@ -117,19 +133,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 {
@@ -153,13 +167,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;