Merge pull request #86 from zhujun24/alert

fixed three problems

components/alert/demo/basic.md

@@ -12,7 +12,7 @@ var Alert = require('antd/lib/alert');
 React.render(
   <div>
     <Alert
-      description="警告提示的文案"
+      message="警告提示的文案"
       type="success"
     />
   </div>,

components/alert/demo/closable.md

+# 可关闭的警告提示
+
+- order: 1
+
+显示关闭按钮，点击可关闭警告提示。
+
+---
+
+````jsx
+var Alert = require('antd/lib/alert');
+
+React.render(
+  <div>
+    <Alert
+      message="警告提示的文案"
+      type="success"
+      closable="true"
+    />
+  </div>,
+document.getElementById('components-alert-demo-closable'));
+````

components/alert/demo/close-type.md

 # 自定义关闭
 
-- order: 3
+- order: 4
 
-可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。
 
 ---
 
@@ -13,7 +13,7 @@ var link = <a href="javascript:;">不再提醒</a>
 React.render(
   <div>
     <Alert
-      description="警告提示的文案"
+      message="警告提示的文案"
       type="info"
       closeText={link}
     />

components/alert/demo/description.md

+# 含有辅助性文字介绍
+
+- order: 2
+
+含有辅助性文字介绍的警告提示。
+
+---
+
+````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'));
+````

components/alert/demo/message.md

-# 含有标题
-
-- order: 2
-
-警告提示的标题文案，当含有标题时，关闭样式只能为默认值。
-
----
-
-````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-message'));
-````

components/alert/demo/onClose.md

 # 回调函数
 
-- order: 4
+- order: 5
 
-警告提示被关闭时触发的回调函数。
+警告提示被关闭时触发的回调函数，必须设置`closable="true"`。
 
 ---
 
@@ -16,14 +16,16 @@ var onClose = function(){
 React.render(
   <div>
     <Alert
-      description="警告提示的文案"
+      message="警告提示的文案"
       type="warn"
+      closable="true"
       onClose={onClose}
     />
     <Alert
       message="警告提示的标题"
       description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
       type="error"
+      closable="true"
       onClose={onClose}
     />
   </div>,

components/alert/demo/style.md

 # 四种样式
 
-- order: 1
+- order: 3
 
 共有四种样式`success`、`info`、`warn`、`error`。
 
@@ -12,19 +12,19 @@ var Alert = require('antd/lib/alert');
 React.render(
   <div>
     <Alert
-      description="警告提示的文案"
+      message="警告提示的文案"
       type="success"
     />
     <Alert
-      description="警告提示的文案警告提示的文案"
+      message="警告提示的文案警告提示的文案"
       type="info"
     />
     <Alert
-      description="警告提示的文案"
+      message="警告提示的文案"
       type="warn"
     />
     <Alert
-      description="警告提示的文案警告提示的文案"
+      message="警告提示的文案警告提示的文案"
       type="error"
     />
   </div>,

components/alert/index.jsx

@@ -16,7 +16,7 @@ export default React.createClass({
     });
   },
   render () {
-    var iconClass = this.props.message ? 'ant-alert-with-message-icon anticon-' : 'ant-alert-icon anticon-';
+    var iconClass = this.props.description ? 'ant-alert-with-description-icon anticon-' : 'ant-alert-icon anticon-';
     switch (this.props.type) {
       case 'success':
         iconClass += 'check-circle';
@@ -31,15 +31,17 @@ export default React.createClass({
       default:
         iconClass += 'default';
     }
-    if (this.props.message) {
+    if (this.props.description) {
+      let close = this.props.closable === 'true' ?
+        <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}><span
+          className='ant-alert-with-description-close-icon-x'></span></a> : '';
       return (
-        <div style={{display: this.state.display}} className={'ant-alert-with-message ant-alert-with-message-' + this.props.type}>
+        <div style={{display: this.state.display}}
+             className={'ant-alert-with-description ant-alert-with-description-' + this.props.type}>
           <i className={'anticon ' + iconClass}></i>
-          <p className={'ant-alert-with-message-message'}>{this.props.message}</p>
-          <span className={'ant-alert-with-message-description'}>{this.props.description}</span>
-          <a onClick={this.handleClose} className={'ant-alert-with-message-close-icon'}>
-            <span className='ant-alert-with-message-close-icon-x'></span>
-          </a>
+          <p className={'ant-alert-with-description-message'}>{this.props.message}</p>
+          <span className={'ant-alert-with-description-description'}>{this.props.description}</span>
+          {close}
         </div>
       );
     } else {
@@ -47,18 +49,20 @@ export default React.createClass({
         return (
           <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
             <i className={'anticon ' + iconClass}></i>
-            <span className={'ant-alert-description'}>{this.props.description}</span>
+            <span className={'ant-alert-description'}>{this.props.message}</span>
             <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
           </div>
         );
       } else {
+        let close = this.props.closable === 'true' ?
+          <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
+            <span className='ant-alert-close-icon-x'></span>
+          </a> : '';
         return (
           <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
             <i className={'anticon ' + iconClass}></i>
-            <span className={'ant-alert-description'}>{this.props.description}</span>
-            <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
-              <span className='ant-alert-close-icon-x'></span>
-            </a>
+            <span className={'ant-alert-description'}>{this.props.message}</span>
+            {close}
           </div>
         );
       }

components/alert/index.md

@@ -16,7 +16,8 @@
 | 参数        | 说明                                                      | 类型        | 默认值 |
 |----------- |---------------------------------------------------------  | ---------- |-------|
 | type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
-| closeText  | 可选参数，自定义关闭                                      | String     | 无  |
-| message    | 可选参数，标题                                           | String     | 无    |
-| description | 必选参数，内容                                           | String     | 无    |
-| onClose     | 可选参数，关闭时触发的回调函数                             | Function    | 无    |
+| closable   | 可选参数，值为字符串`true`时显示关闭按钮，默认不显示             | String     | 无   |
+| closeText  | 可选参数，自定义关闭                                         | String     | 无    |
+| message    | 必选参数，警告提示内容                                       | String     | 无    |
+| description | 可选参数，警告提示的辅助性文字介绍                            | String     | 无    |
+| onClose     | 可选参数，关闭时触发的回调函数                               | Function   | 无    |

style/components/alert.less

 @import "../mixins/index";
 
 @alertPrefixClass: ~"@{css-prefix}alert";
-@alertTitlePrefixClass: ~"@{css-prefix}alert-with-message";
+@alertTitlePrefixClass: ~"@{css-prefix}alert-with-description";
 
 .@{alertPrefixClass} {
   position: relative;
@@ -23,7 +23,7 @@
   }
 
   &-success {
-    border: 1px solid tint(@success-color, 50%);
+    border: 1px solid tint(@success-color, 80%);
     background-color: tint(@success-color, 90%);
     .anticon {
       color: @success-color;
@@ -31,7 +31,7 @@
   }
 
   &-info {
-    border: 1px solid tint(@primary-color, 50%);
+    border: 1px solid tint(@primary-color, 80%);
     background-color: tint(@primary-color, 90%);
     .anticon {
       color: @primary-color;
@@ -39,7 +39,7 @@
   }
 
   &-warn {
-    border: 1px solid tint(@warning-color, 50%);
+    border: 1px solid tint(@warning-color, 80%);
     background-color: tint(@warning-color, 90%);
     .anticon {
       color: @warning-color;
@@ -47,14 +47,14 @@
   }
 
   &-error {
-    border: 1px solid tint(@error-color, 50%);
+    border: 1px solid tint(@error-color, 80%);
     background-color: tint(@error-color, 90%);
     .anticon {
       color: @error-color;
     }
   }
 
-  &-close-icon {
+  &-close-icon, &-with-description-close-icon {
     .iconfont-size-under-12px(10px);
     position: absolute;
     right: 8px;
@@ -83,104 +83,73 @@
   }
 
   &-close-text {
-    float: right;
-  }
-}
-
-.@{alertTitlePrefixClass} {
-  padding: 16px 16px 16px 69px;
-  position: relative;
-  border-radius: @border-radius-base;
-  margin-bottom: 10px;
-  color: @text-color;
-
-  &-icon {
     position: absolute;
-    top: 50%;
-    left: 24px;
-    margin-top: -22px;
-    font-size: 29px;
-  }
-
-  &-close-icon {
-    position: absolute;
-    top: 12px;
     right: 16px;
-    cursor: pointer;
-    .iconfont-size-under-12px(10px);
   }
 
-  &-message {
-    font-size: 14px;
+  &-with-description {
+    padding: 16px 16px 16px 69px;
+    position: relative;
+    border-radius: @border-radius-base;
+    margin-bottom: 10px;
     color: @text-color;
-  }
 
-  &-description {
-    font-size: 12px;
-    color: @legend-color;
-  }
-
-  &-success {
-    border: 1px solid tint(@success-color, 50%);
-    background-color: tint(@success-color, 90%);
-    .anticon {
-      color: @success-color;
+    &-icon {
+      position: absolute;
+      top: 50%;
+      left: 24px;
+      margin-top: -22px;
+      font-size: 29px;
     }
-  }
 
-  &-info {
-    border: 1px solid tint(@primary-color, 50%);
-    background-color: tint(@primary-color, 90%);
-    .anticon {
-      color: @primary-color;
+    &-close-icon {
+      position: absolute;
+      top: 17px;
+      right: 16px;
+      cursor: pointer;
+      .iconfont-size-under-12px(10px);
     }
-  }
 
-  &-warn {
-    border: 1px solid tint(@warning-color, 50%);
-    background-color: tint(@warning-color, 90%);
-    .anticon {
-      color: @warning-color;
+    &-message {
+      font-size: 14px;
+      color: @text-color;
     }
-  }
 
-  &-error {
-    border: 1px solid tint(@error-color, 50%);
-    background-color: tint(@error-color, 90%);
-    .anticon {
-      color: @error-color;
+    &-description {
+      font-size: 12px;
+      color: @legend-color;
     }
-  }
 
-  &-close-icon {
-    .iconfont-size-under-12px(10px);
-    float: right;
-    color: #999;
-    transition: color .3s ease;
-    width: 12px;
-    height: 12px;
-    overflow: hidden;
-    position: absolute;
-    right: 16px;
-    top: 12px;
+    &-success {
+      border: 1px solid tint(@success-color, 80%);
+      background-color: tint(@success-color, 90%);
+      .anticon {
+        color: @success-color;
+      }
+    }
 
-    &-x {
-      position: absolute;
-      top: -4px;
-      &:before {
-        font-weight: 700;
-        text-shadow: 0 1px 0 #fff;
-        content: "\e61e";
-        font-family: "anticon";
+    &-info {
+      border: 1px solid tint(@primary-color, 80%);
+      background-color: tint(@primary-color, 90%);
+      .anticon {
+        color: @primary-color;
       }
     }
 
-    &:hover {
-      color: #444;
+    &-warn {
+      border: 1px solid tint(@warning-color, 80%);
+      background-color: tint(@warning-color, 90%);
+      .anticon {
+        color: @warning-color;
+      }
     }
-  }
 
-  &-close-text {
-    float: right;
+    &-error {
+      border: 1px solid tint(@error-color, 80%);
+      background-color: tint(@error-color, 90%);
+      .anticon {
+        color: @error-color;
+      }
+    }
   }
 }