Merge branch 'alert' into notification

components/alert/demo/basic.md

@@ -9,6 +9,10 @@
 ````jsx
 var Alert = require('antd/lib/alert');
 
-React.render(<Alert message="警告提示的文案" type="success" />
+React.render(
+  <Alert
+    message="成功提示的文案"
+    type="success"
+  />
 , document.getElementById('components-alert-demo-basic'));
 ````

components/alert/demo/closable.md

@@ -13,16 +13,19 @@ var onClose = function(e) {
   console.log(e, '我要被关闭啦！');
 };
 
-React.render(<div>
-  <Alert message="警告提示的文案"
-    type="warn"
-    closable
-    onClose={onClose} />
-  <Alert message="警告提示的标题"
-    description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
-    type="error"
-    closable
-    onClose={onClose} />
-</div>, document.getElementById('components-alert-demo-closable'));
+React.render(
+  <div>
+    <Alert message="成功提示的文案"
+      type="success"
+      closable
+      onClose={onClose}
+    />
+    <Alert message="错误提示的文案"
+      description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
+      type="error"
+      closable
+      onClose={onClose}
+    />
+  </div>
+, document.getElementById('components-alert-demo-closable'));
 ````
-

components/alert/demo/close-type.md

@@ -8,9 +8,14 @@
 
 ````jsx
 var Alert = require('antd/lib/alert');
+
 var link = <a href="javascript:;">不再提醒</a>
 
 React.render(
-<Alert message="警告提示的文案" type="info" closeText={link} />
+  <Alert
+    message="消息提示的文案"
+    type="info"
+    closeText={link}
+  />
 , document.getElementById('components-alert-demo-close-type'));
 ````

components/alert/demo/description.md

@@ -9,20 +9,28 @@
 ````jsx
 var Alert = require('antd/lib/alert');
 
-React.render(<div>
-  <Alert message="警告提示的文案"
-    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
-    type="success" />
-  <Alert message="警告提示的文案"
-    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
-    type="info" />
-  <Alert
-    message="警告提示的文案"
-    description="警告提示的辅助性文字介绍"
-    type="warn" />
-  <Alert
-    message="警告提示的文案"
-    description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
-    type="error" />
-</div>, document.getElementById('components-alert-demo-description'));
+React.render(
+  <div>
+    <Alert 
+      message="成功提示的文案"
+      description="成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍成功提示的辅助性文字介绍"
+      type="success"
+    />
+    <Alert 
+      message="消息提示的文案"
+      description="消息提示的辅助性文字介绍消息提示的辅助性文字介绍消息提示的辅助性文字介绍"
+      type="info"
+    />
+    <Alert 
+      message="警告提示的文案"
+      description="警告提示的辅助性文字介绍警告提示的辅助性文字介绍"
+      type="warn"
+    />
+    <Alert 
+      message="错误提示的文案"
+      description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
+      type="error"
+    />
+  </div>
+, document.getElementById('components-alert-demo-description'));
 ````

components/alert/demo/onClose.md

@@ -0,0 +1,33 @@
+# 回调函数
+
+- order: 5
+
+警告提示被关闭时触发的回调函数，必须设置`closable="true"`。
+
+---
+
+````jsx
+var Alert = require('antd/lib/alert');
+
+var onClose = function(){
+  console.log('我要被关闭啦！');
+}
+
+React.render(
+  <div>
+    <Alert
+      message="警告提示的文案"
+      type="warn"
+      closable="true"
+      onClose={onClose}
+    />
+    <Alert
+      message="错误提示的文案"
+      description="错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍错误提示的辅助性文字介绍"
+      type="error"
+      closable="true"
+      onClose={onClose}
+    />
+  </div>,
+document.getElementById('components-alert-demo-onclose'));
+````

components/alert/demo/style.md

@@ -9,11 +9,24 @@
 ````jsx
 var Alert = require('antd/lib/alert');
 
-React.render(<div>
-  <Alert message="警告提示的文案" type="success" />
-  <Alert message="警告提示的文案警告提示的文案" type="info" />
-  <Alert message="警告提示的文案" type="warn" />
-  <Alert message="警告提示的文案警告提示的文案" type="error" />
-</div>,
-document.getElementById('components-alert-demo-style'));
+React.render(
+  <div>
+    <Alert
+      message="成功提示的文案"
+      type="success"
+    />
+    <Alert
+      message="消息提示的文案"
+      type="info"
+    />
+    <Alert
+      message="警告提示的文案"
+      type="warn"
+    />
+    <Alert
+      message="错误提示的文案"
+      type="error"
+    />
+  </div>
+, document.getElementById('components-alert-demo-style'));
 ````

components/alert/index.jsx

@@ -26,13 +26,15 @@ export default React.createClass({
       case 'success':
         iconClass += 'check-circle';
         break;
-      case 'info':
+      case 'warn':
         iconClass += 'question-circle';
         break;
-      case 'error':
-      case 'warn':
+      case 'info':
         iconClass += 'info-circle';
         break;
+      case 'error':
+        iconClass += 'exclamation-circle';
+        break;
       default:
         iconClass += 'default';
     }

components/button/demo/loading.md

@@ -2,16 +2,51 @@
 
 - order: 7
 
-点击后进入加载状态。
+加载按钮。最后一个按钮演示点击后进入加载状态。
 
 ---
 
-````html
-<button class="ant-btn ant-btn-primary ant-btn-circle">
-  <span class="anticon anticon-loading"></span>
-</button>
-<button class="ant-btn ant-btn-primary">
-  <span>加载按钮</span>
-  <span class="anticon anticon-loading"></span>
-</button>
+````jsx
+var App = React.createClass({
+  getInitialState() {
+    return {
+      loading: false
+    };
+  },
+  enterLoading() {
+    this.setState({
+      loading: true
+    });
+  },
+  render() {
+    var loadingClass = this.state.loading ? 'ant-btn-loading' : '';
+    return <div>
+      <button className="ant-btn ant-btn-primary ant-btn-circle">
+        <i className="anticon anticon-loading"></i>
+      </button>
+      <button className="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading">
+        加载中
+      </button>
+      <button className="ant-btn ant-btn-primary ant-btn-loading">
+        加载中
+      </button>
+      <button className="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading">
+        加载中
+      </button>
+      <br />
+      <button className={'ant-btn ant-btn-primary ' + loadingClass} onClick={this.enterLoading}>
+        点击变加载
+      </button>
+    </div>;
+  }
+});
+
+React.render(<App />, document.getElementById('components-button-demo-loading'));
 ````
+
+<style>
+#components-button-demo-loading .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

style/components/button.less

@@ -42,6 +42,28 @@
     .btn-circle-outline;
   }
 
+  &-loading {
+    padding-right: 31px;
+    &:after {
+      font-family: anticon;
+      .animation(loadingCircle 1s infinite linear);
+      content: "\e610";
+      position: absolute;
+      height: 12px;
+      line-height: 12px;
+      right: 13px;
+      top: 50%;
+      margin-top: -6px;
+    }
+  }
+
+  &-sm&-loading {
+    padding-right: 24px;
+    &:after {
+      right: 8px;
+    }
+  }
+
   &-menu {
     > .@{iconfont-css-prefix} {
       .iconfont-size-under-12px(10px);

style/components/index.less

@@ -12,7 +12,6 @@
 @import "popover";
 @import "pagination";
 @import "form";
-@import "loading";
 @import "progress";
 @import "steps";
 @import "breadcrumb";