Add error step, close #1098

components/steps/demo/error.md

@@ -0,0 +1,27 @@
+---
+order: 6
+title: 发生错误
+---
+
+使用 Steps 的 `status` 属性来指定当前步骤的状态。
+
+````jsx
+import { Steps } from 'antd';
+const Step = Steps.Step;
+
+const steps = [{
+  title: '已完成',
+  description: '这里是多信息的描述啊'
+}, {
+  title: '错误示例',
+  description: '这里是多信息的耶哦耶哦哦耶哦耶'
+}, {
+  title: '又一个待运行',
+  description: '描述啊描述啊'
+}, {
+  title: '待运行',
+  description: '这里是多信息的描述啊'
+}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
+
+ReactDOM.render(<Steps current={1} status="error">{steps}</Steps>, mountNode);
+````

components/steps/index.jsx

@@ -8,7 +8,7 @@ export default class Steps extends React.Component {
     prefixCls: 'ant-steps',
     iconPrefix: 'ant',
     maxDescriptionWidth: 100,
-    current: 0
+    current: 0,
   }
 
   render() {
@@ -17,14 +17,7 @@ export default class Steps extends React.Component {
       maxDescriptionWidth = 'auto';
     }
     return (
-      <RcSteps size={this.props.size}
-        current={this.props.current}
-        direction={this.props.direction}
-        iconPrefix={this.props.iconPrefix}
-        maxDescriptionWidth={maxDescriptionWidth}
-        prefixCls={this.props.prefixCls}>
-        {this.props.children}
-      </RcSteps>
+      <RcSteps {...this.props} maxDescriptionWidth={maxDescriptionWidth} />
     );
   }
 }

components/steps/index.md

@@ -27,8 +27,9 @@ english: Steps
 整体步骤条。
 
 | 参数      | 说明                                      | 类型         | 默认值 |
-|-----------|------------------------------------------|-------------|-------|
+|----------|------------------------------------------|-------------|-------|
 | current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
+| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |
 | size | 指定大小，目前支持普通（`default`）和迷你（`small`）| string | default |
 | direction | 指定步骤条方向。目前支持水平和竖直（`vertical`）两种方向，默认水平方向） | string | -  |
 | maxDescriptionWidth | 指定步骤的详细描述文字的最大宽度（单位 px） | number | 100 |
@@ -39,7 +40,7 @@ english: Steps
 
 | 参数      | 说明                                     | 类型       | 默认值 |
 |----------|-----------------------------------------|------------|-------|
-| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` | string | `wait` |
+| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` |
 | title | 标题 | React.Element | -     |
 | description | 步骤的详情描述，可选 | React.Element | -  |
 | icon | 步骤图标，可选 | React.Element | - |

package.json

@@ -55,7 +55,7 @@
     "rc-rate": "~1.1.0",
     "rc-select": "~6.0.1",
     "rc-slider": "~3.5.1",
-    "rc-steps": "~1.4.1",
+    "rc-steps": "~1.5.0",
     "rc-switch": "~1.3.2",
     "rc-table": "~4.0.0-beta.3",
     "rc-tabs": "~5.8.0",

style/components/steps.less

@@ -14,7 +14,10 @@
 @finish-title-color: @wait-title-color;
 @finish-description-color: @finish-title-color;
 @finish-tail-color: @process-icon-color;
-
+@error-icon-color: @error-color;
+@error-title-color: @error-color;
+@error-description-color: @error-color;
+@error-tail-color: @error-color;
 
 .@{steps-prefix-cls} {
   font-size: 0;
@@ -83,6 +86,32 @@
       }
     }
 
+    &.@{steps-prefix-cls}-status-error {
+      .@{steps-prefix-cls}-head-inner {
+        border-color: @error-icon-color;
+        background-color: @error-icon-color;
+        > .@{steps-prefix-cls}-icon {
+          color: #fff;
+        }
+      }
+      .@{steps-prefix-cls}-title {
+        color: @error-title-color;
+      }
+      .@{steps-prefix-cls}-description {
+        color: @error-description-color;
+      }
+      .@{steps-prefix-cls}-tail > i {
+        background-color: @process-tail-color;
+      }
+    }
+
+    &.@{steps-prefix-cls}-next-error {
+      .@{steps-prefix-cls}-tail > i,
+      .@{steps-prefix-cls}-tail > i:after {
+        background-color: @error-tail-color;
+      }
+    }
+
     &.@{steps-prefix-cls}-custom {
       .@{steps-prefix-cls}-head-inner {
         background: none;