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

components/button/index.md

@@ -10,7 +10,7 @@
 
 ## 何时使用
 
-标记了一个（或一组）操作命令，引导用户点击。
+标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 
 
 ## 如何使用

components/datepicker/demo/formatter.md

@@ -2,7 +2,7 @@
 
 - order: 1
 
-使用 `format` 属性自定义您需要的日期定义格式：yyyy/MM/dd
+使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。
 
 ---
 

components/datepicker/demo/range.md

@@ -2,9 +2,9 @@
 
 - order: 3
 
-设置可选日期的范围，用 disabled 方法来定义不可选择时间。
+设置 `disabled` 方法，来确定不可选时段。
 
-比如不可选择今天之后的日期。
+如上例：不可选择今天之后的日期。
 
 ---
 

components/dropdown/demo/basic.md

@@ -22,7 +22,7 @@ var menu = <Menu>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-default">
+    <button className="ant-btn ant-btn-menu">
       某按钮 <i className="anticon anticon-down"></i>
     </button>
   </Dropdown>

components/dropdown/demo/event.md

@@ -21,7 +21,7 @@ var menu = <Menu onClick={onClick}>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-default">
+    <button className="ant-btn ant-btn-menu">
       鼠标移入，点击菜单 <i className="anticon anticon-down"></i>
     </button>
   </Dropdown>

components/dropdown/demo/item.md

@@ -23,7 +23,7 @@ var menu = <Menu>
 
 React.render(
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-default">
+    <button className="ant-btn ant-btn-menu">
       鼠标移入 <i className="anticon anticon-down"></i>
     </button>
   </Dropdown>

components/dropdown/demo/trigger.md

@@ -23,12 +23,12 @@ var menu = <Menu>
 
 React.render(<div>
   <Dropdown overlay={menu} trigger="click">
-    <button className="ant-btn ant-btn-primary">
+    <button className="ant-btn ant-btn-primary ant-btn-menu">
       点击触发 <i className="anticon anticon-down"></i>
     </button>
   </Dropdown>
   <Dropdown overlay={menu}>
-    <button className="ant-btn ant-btn-default">
+    <button className="ant-btn ant-btn-menu">
       鼠标移入 <i className="anticon anticon-down"></i>
     </button>
   </Dropdown>

components/popover/demo/basic.md

+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Popover = antd.Popover;
+var content = [
+  <p>内容</p>,
+  <p>内容</p>,
+  <p>内容</p>
+];
+
+React.render(
+  <Popover overlay={content} title="标题">
+    <button className="ant-btn ant-btn-primary">弹出卡片</button>
+  </Popover>
+, document.getElementById('components-popover-demo-basic'));
+````

components/popover/demo/placement.md

+# 位置
+
+- order: 1
+
+位置有四个方向。
+
+---
+
+````jsx
+var Popover = antd.Popover;
+var text = <span>标题</span>;
+var content = [
+  <p>内容</p>,
+  <p>内容</p>,
+  <p>内容</p>
+];
+
+React.render(<div>
+  <Popover placement="left" title={text} overlay={content}>
+    <button className="ant-btn">左</button>
+  </Popover>
+  <Popover placement="right" title={text} overlay={content}>
+    <button className="ant-btn">右</button>
+  </Popover>
+  <Popover placement="top" title={text} overlay={content}>
+    <button className="ant-btn">上</button>
+  </Popover>
+  <Popover placement="bottom" title={text} overlay={content}>
+    <button className="ant-btn">下</button>
+  </Popover>
+</div>, document.getElementById('components-popover-demo-placement'));
+````
+
+<style>
+.code-box-demo .ant-btn {
+  margin-right: 1em;
+}
+</style>
+

components/popover/demo/triggerType.md

+# 三种触发方式
+
+- order: 2
+
+鼠标移入、聚集、点击。
+
+---
+
+````jsx
+var Popover = antd.Popover;
+var content = [
+  <p>内容</p>,
+  <p>内容</p>,
+  <p>内容</p>
+];
+
+React.render(<div>
+  <Popover overlay={content} title="标题" trigger="hover">
+    <button className="ant-btn">移入</button>
+  </Popover>
+  <Popover overlay={content} title="标题" trigger="focus">
+    <a href="javascript:;" className="ant-btn">聚焦</a>
+  </Popover>
+  <Popover overlay={content} title="标题" trigger="click">
+    <button className="ant-btn">点击</button>
+  </Popover>
+</div>, document.getElementById('components-popover-demo-triggertype'));
+````

components/popover/index.jsx

+'use strict';
+
+var React = require('react');
+var Tooltip = require('rc-tooltip');
+
+module.exports = React.createClass({
+  getDefaultProps() {
+    return {
+      transitionName: '',
+      placement: 'top',
+      trigger: 'hover'
+    };
+  },
+  render() {
+    var overlay = <div>
+      <div className="popover-title">
+        {this.props.title}
+      </div>
+      <div className="popover-content">
+        {this.props.overlay}
+      </div>
+    </div>;
+
+    var transitionName = ({
+      top: 'zoom-down',
+      bottom: 'zoom-up',
+      left: 'zoom-right',
+      right: 'zoom-left'
+    })[this.props.placement];
+
+    return (
+      <Tooltip placement={this.props.placement}
+        prefixCls="popover"
+        renderPopupToBody={false}
+        transitionName={transitionName}
+        trigger={this.props.trigger}
+        overlay={overlay}>
+        {this.props.children}
+      </Tooltip>
+    );
+  }
+});

components/popover/index.md

@@ -5,3 +5,20 @@
 
 ---
 
+点击/鼠标移入元素，弹出气泡式的卡片浮层。
+
+## 何时使用
+
+当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户交互展现。
+
+和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容。
+
+
+## API
+
+| 参数      | 说明                                     | 类型          | 默认值 |
+|-----------|------------------------------------------|---------------|--------|
+| trigger   | 触发行为，可选 `hover/focus/click`       | string        | hover  |
+| placement | 气泡框位置，可选 `top/left/right/bottom` | string        | top    |
+| title     | 提示文字                                 | React.Element | 无     |
+| content   | 提示文字                                 | React.Element | 无     |

components/progress/index.md

@@ -10,8 +10,8 @@
 
 ## 何时使用
 
-- 需要告知用户进行时、失败、已完成的等运行状态。
-- 需要展示操作的百分比时。
+- 需要告知用户操作的运行状态，如：进行中、已完成、已失败。
+- 需要展示操作的进度时。
 
 ## 属性参数
 

components/tooltip/index.jsx

@@ -4,16 +4,23 @@ var React = require('react');
 var Tooltip = require('rc-tooltip');
 
 module.exports = React.createClass({
-  getDefaultProps: function () {
+  getDefaultProps() {
     return {
       placement: 'top'
     };
   },
-  render: function() {
+  render() {
+    var transitionName = ({
+      top: 'zoom-down',
+      bottom: 'zoom-up',
+      left: 'zoom-right',
+      right: 'zoom-left'
+    })[this.props.placement];
     return (
       <Tooltip placement={this.props.placement}
         prefixCls="ant-tooltip"
         trigger={this.props.trigger}
+        transitionName={transitionName}
         overlay={this.props.title}>
         {this.props.children}
       </Tooltip>

components/tooltip/index.md

@@ -12,7 +12,7 @@
 
 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
 
-可用来代替系统默认的 title 提示，提供一个按钮/文字/操作的文案解释。
+可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。
 
 ## API
 

index.js

@@ -8,6 +8,7 @@ var antd = {
   Menu: require('rc-menu'),
   Dropdown: require('./components/dropdown'),
   Progress: require('./components/progress'),
+  Popover: require('./components/popover'),
   Select: require('./components/select'),
   confirm: require('./components/modal/confirm')
 };

package.json

 {
   "name": "antd",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "title": "Ant Design",
   "description": "下一个设计&前端框架",
   "homepage": "http://ant-design.github.io/",

static/style.css

@@ -563,6 +563,13 @@ footer ul li > a {
   margin: 20px 0;
 }
 
+.markdown code,
+.markdown kbd,
+.markdown pre,
+.markdown samp {
+  font-family: Consolas, monospace;
+}
+
 .markdown p,
 .markdown pre {
   margin: 1.2em 0;

style/components/datepicker/Picker.less

@@ -12,6 +12,7 @@
   display: inline-block;
   &-input {
     .ant-input;
+    cursor: text;
   }
   &-icon {
     position: absolute;

style/components/dropdown.less

@@ -15,6 +15,15 @@
 
   &-wrap {
     position: relative;
+    .anticon-down {
+      transition: transform 0.2s ease;
+    }
+  }
+
+  &-wrap-open {
+    .anticon-down {
+      transform: rotate(180deg);
+    }
   }
 
   &-hidden {
@@ -55,9 +64,13 @@
       clear: both;
       font-size: 12px;
       font-weight: normal;
-      color: #666666;
+      color: #666;
       white-space: nowrap;
 
+      a {
+        color: #666;
+      }
+
       &:hover {
         background-color: #ebfaff;
       }
@@ -148,4 +161,4 @@
       transform: scaleY(0);
     }
   }
-}
\ No newline at end of file
+}

style/components/index.less

@@ -7,6 +7,7 @@
 @import "confirm";
 @import "tabs";
 @import "tooltip";
+@import "popover";
 @import "form";
 @import "loading";
-@import "progress";
\ No newline at end of file
+@import "progress";

style/components/popover.less

+@import "../mixins/index";
+@popoverPrefixClass: ~"@{css-prefix}popover";
+
+//
+// Popovers
+// --------------------------------------------------
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg:                          #fff;
+//** Popover maximum width
+@popover-min-width:                   177px;
+@popover-max-width:                   276px;
+//** Popover border color
+@popover-border-color:                #d9d9d9;
+
+//** Popover arrow width
+@popover-arrow-width:                 4px;
+//** Popover distance with trigger
+@popover-distance:                    @popover-arrow-width+4;
+//** Popover arrow color
+@popover-arrow-color:                 @popover-bg;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1080;
+  cursor: auto;
+  -moz-user-select: text;
+  user-select: text;
+  white-space: normal;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  font-weight: normal;
+  text-align: left;
+
+  &:after {
+    content: "";
+    position: absolute;
+    background: rgba(255,255,255,0.01);
+  }
+
+  &-hidden {
+    display: none;
+  }
+
+  // Offset the popover to account for the popover arrow
+  &-placement-top {
+    margin-top: -@popover-arrow-width;
+    padding-bottom: @popover-distance;
+    &:after {
+      top: 100%;
+      left: 0;
+      width: 100%;
+      height: 8px;
+    }
+  }
+
+  &-placement-right {
+    margin-left: @popover-arrow-width;
+    padding-left: @popover-distance;
+    &:after {
+      top: 0;
+      left: -8px;
+      width: 8px;
+      height: 100%;
+    }
+  }
+
+  &-placement-bottom {
+    margin-top: @popover-arrow-width;
+    padding-top: @popover-distance;
+    &:after {
+      top: -8px;
+      left: 0;
+      width: 100%;
+      height: 8px;
+    }
+  }
+
+  &-placement-left {
+    margin-left: -@popover-arrow-width;
+    padding-right: @popover-distance;
+    &:after {
+      top: 0;
+      left: 100%;
+      width: 8px;
+      height: 100%;
+    }
+  }
+
+  &-inner {
+    max-width: @popover-max-width;
+    min-width: @popover-min-width;
+    background-color: @popover-bg;
+    background-clip: padding-box;
+    border: 1px solid @popover-border-color;
+    border-radius: @border-radius-base;
+    padding: 1px;
+    box-shadow: 0 0 4px #d9d9d9;
+  }
+
+  &-title {
+    margin: 0; // reset heading margin
+    padding: 0 8px;
+    line-height: 30px;
+    height: 30px;
+    background-color: @popover-bg;
+    border-bottom: 1px solid #e9e9e9;
+    color: #666;
+  }
+
+  &-content {
+    padding: 8px;
+  }
+
+  &-descrition {
+    [icon] {
+      font-size: 16px;
+      margin-right: 2px;
+      line-height: 18px;
+    }
+    [icon='warn-circle'] {
+      color: #F9C35A;
+    }
+  }
+
+  &-buttons {
+    text-align: right;
+    margin-top: 12px;
+
+    button {
+      margin-left: 2px;
+    }
+  }
+
+  // Arrows
+  // .popover-arrow is outer, .popover-arrow:after is inner
+
+  &-arrow {
+    &,
+    &:after {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+
+  &-arrow {
+    border-width: @popover-arrow-outer-width;
+  }
+  &-arrow:after {
+    border-width: @popover-arrow-width;
+    content: "";
+  }
+
+  &-placement-top > &-arrow {
+    left: 50%;
+    margin-left: -@popover-arrow-outer-width;
+    border-bottom-width: 0;
+    border-top-color: @popover-arrow-outer-color;
+    bottom: @popover-distance - @popover-arrow-outer-width + 1;
+    &:after {
+      content: " ";
+      bottom: 1px;
+      margin-left: -@popover-arrow-width;
+      border-bottom-width: 0;
+      border-top-color: @popover-arrow-color;
+    }
+  }
+  &-placement-right > &-arrow {
+    top: 50%;
+    left: @popover-distance - @popover-arrow-outer-width + 1;
+    margin-top: -@popover-arrow-outer-width;
+    border-left-width: 0;
+    border-right-color: @popover-arrow-outer-color;
+    &:after {
+      content: " ";
+      left: 1px;
+      bottom: -@popover-arrow-width;
+      border-left-width: 0;
+      border-right-color: @popover-arrow-color;
+    }
+  }
+  &-placement-bottom > &-arrow {
+    left: 50%;
+    margin-left: -@popover-arrow-outer-width;
+    border-top-width: 0;
+    border-bottom-color: @popover-arrow-outer-color;
+    top: @popover-distance - @popover-arrow-outer-width + 1;
+    &:after {
+      content: " ";
+      top: 1px;
+      margin-left: -@popover-arrow-width;
+      border-top-width: 0;
+      border-bottom-color: @popover-arrow-color;
+    }
+  }
+
+  &-placement-left > &-arrow {
+    top: 50%;
+    right: @popover-distance - @popover-arrow-outer-width + 1;
+    margin-top: -@popover-arrow-outer-width;
+    border-right-width: 0;
+    border-left-color: @popover-arrow-outer-color;
+    &:after {
+      content: " ";
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: @popover-arrow-color;
+      bottom: -@popover-arrow-width;
+    }
+  }
+}

style/components/tooltip.less

@@ -15,7 +15,7 @@
 
 //** Tooltip arrow width
 @tooltip-arrow-width:         5px;
-//** Tooltip arrow color
+//** Tooltip distance with trigger
 @tooltip-distance:            @tooltip-arrow-width+4;
 //** Tooltip arrow color
 @tooltip-arrow-color:         @tooltip-bg;
@@ -31,7 +31,7 @@
   font-size: @font-size-base;
   line-height: @line-height-base;
   opacity: @tooltip-opacity;
-  
+
   &-hidden {
     display: none;
   }
@@ -51,7 +51,7 @@
   text-decoration: none;
   background-color: @tooltip-bg;
   border-radius: @border-radius-base;
-  box-shadow: 0 0 4px rgba(0,0,0,0.4);
+  box-shadow: 0 0 4px #d9d9d9;
 }
 
 // Arrows

style/core/motion.less

@@ -144,16 +144,6 @@
   }
 }
 
-@-webkit-keyframes loadingCircle {
-  0% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: 50% 50%;
-    -webkit-transform: rotate(360deg);
-  }
-}
 @keyframes loadingCircle {
   0% {
     transform-origin: 50% 50%;