Add dropdown button

components/dropdown/demo/basic.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';
 
 const menu = <Menu>
   <Menu.Item>
@@ -23,15 +23,9 @@ const menu = <Menu>
 
 ReactDOM.render(
   <Dropdown overlay={menu}>
-    <Button>
+    <a className="ant-dropdown-link" href="#">
-      某按钮 <Icon type="down" />
+      触发链接 <Icon type="down" />
-    </Button>
+    </a>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-basic'));
 ````
-
-<style>
-.code-box-demo .ant-btn {
-  margin-right: 6px;
-}
-</style>

components/dropdown/demo/dropdown-button.md

@@ -0,0 +1,30 @@
+# 带下拉框的按钮
+
+- order: 4
+
+左边是按钮，右边是额外的相关功能菜单。
+
+---
+
+````jsx
+import { Menu, Dropdown } from 'antd';
+const DropdownButton = Dropdown.Button;
+
+const menu = <Menu>
+  <Menu.Item>
+    <a target="_blank" href="http://www.alipay.com/">第一个菜单项</a>
+  </Menu.Item>
+  <Menu.Item>
+    <a target="_blank" href="http://www.taobao.com/">第二个菜单项</a>
+  </Menu.Item>
+  <Menu.Item>
+    <a target="_blank" href="http://www.tmall.com/">第三个菜单项</a>
+  </Menu.Item>
+</Menu>;
+
+ReactDOM.render(
+<DropdownButton overlay={menu} type="primary">
+  某功能按钮
+</DropdownButton>
+, document.getElementById('components-dropdown-demo-dropdown-button'));
+````

components/dropdown/demo/event.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';
 const onClick = function({key}) {
   console.log('点击了菜单' + key);
 };
@@ -20,9 +20,9 @@ const menu = <Menu onClick={onClick}>
 
 ReactDOM.render(
   <Dropdown overlay={menu}>
-    <Button>
+    <a className="ant-dropdown-link" href="#">
       鼠标移入，点击菜单 <Icon type="down" />
-    </Button>
+    </a>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-event'));
 ````

components/dropdown/demo/item.md

@@ -7,7 +7,7 @@
 ---
 
 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';
 
 const menu = <Menu>
   <Menu.Item key="0">
@@ -22,9 +22,9 @@ const menu = <Menu>
 
 ReactDOM.render(
   <Dropdown overlay={menu}>
-    <Button>
+    <a className="ant-dropdown-link" href="#">
       鼠标移入 <Icon type="down" />
-    </Button>
+    </a>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-item'));
 ````

components/dropdown/demo/trigger.md

@@ -2,12 +2,12 @@
 
 - order: 2
 
-点击或鼠标移入触发。
+默认是移入触发菜单，可以点击触发。
 
 ---
 
 ````jsx
-import { Menu, Dropdown, Button, Icon } from 'antd';
+import { Menu, Dropdown, Icon } from 'antd';
 
 const menu = <Menu>
   <Menu.Item key="0">
@@ -22,14 +22,9 @@ const menu = <Menu>
 
 ReactDOM.render(<div>
   <Dropdown overlay={menu} trigger={['click']}>
-    <Button type="primary">
+    <a className="ant-dropdown-link" href="#">
       点击触发 <Icon type="down" />
-    </Button>
+    </a>
-  </Dropdown>
-  <Dropdown overlay={menu}>
-    <Button>
-      鼠标移入 <Icon type="down" />
-    </Button>
   </Dropdown>
 </div>, document.getElementById('components-dropdown-demo-trigger'));
 ````

components/dropdown/dropdown-button.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Button from '../button';
+import Icon from '../icon';
+import Dropdown from './dropdown';
+const ButtonGroup = Button.Group;
+
+const align = {
+  points: ['tr', 'br'],
+  overlay: {
+    adjustX: 1,
+    adjustY: 1,
+  },
+  offset: [0, 3],
+  targetOffset: [0, 0],
+};
+
+export default React.createClass({
+  getDefaultProps() {
+    return {
+      align: align,
+      type: 'default',
+    };
+  },
+  render() {
+    return <ButtonGroup className="ant-dropdown-button">
+      <Button type={this.props.type}>
+        {this.props.children}
+      </Button>
+      <Dropdown {...this.props}>
+        <Button type={this.props.type}>
+          <Icon type="down" />
+        </Button>
+      </Dropdown>
+    </ButtonGroup>;
+  }
+});

components/dropdown/dropdown.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Dropdown from 'rc-dropdown';
+
+export default React.createClass({
+  getDefaultProps: function () {
+    return {
+      transitionName: 'slide-up',
+      prefixCls: 'ant-dropdown',
+    };
+  },
+  render: function () {
+    return (
+      <Dropdown {...this.props} />
+    );
+  }
+});

components/dropdown/index.jsx

@@ -1,16 +1,5 @@
-import React from 'react';
+import Dropdown from './dropdown';
-import Dropdown from 'rc-dropdown';
+import DropdownButton from './dropdown-button';
 
-export default React.createClass({
+Dropdown.Button = DropdownButton;
-  getDefaultProps: function () {
+export default Dropdown;
-    return {
-      transitionName: 'slide-up',
-      prefixCls: 'ant-dropdown',
-    };
-  },
-  render: function () {
-    return (
-      <Dropdown {...this.props} />
-    );
-  }
-});

components/dropdown/index.md

@@ -19,10 +19,18 @@
 | 成员        | 说明             | 类型               | 默认值       |
 |-------------|------------------|--------------------|--------------|
 | trigger     | 触发下拉的行为   | "click" or "hover" | hover        |
-| overlay     | 菜单节点         | React.Element      | 无           |
+| overlay     | 菜单节点         | [Menu](/components/menu) | 无     |
-| onClick     | 点击菜单后的回调 | function({key,keyPath,item,domEvent}) {}     | 无           |
 
 
 菜单可由 `antd.Menu` 取得，可设置 `onSelect` 回调，菜单还包括菜单项 `antd.Menu.Item`，分割线 `antd.Menu.Divider`。
 
 > 注意： Menu.Item 必须设置唯一的 key 属性。
+
+### DropdownButton
+
+| 成员        | 说明             | 类型               | 默认值       |
+|-------------|------------------|--------------------|--------------|
+| type        | 按钮类型，和 [Button](/components/button) 一致 | String | 'default'        |
+| onClick     | 点击左侧按钮的回调，和 [Button](/components/button) 一致 | Function   | 无           |
+| trigger     | 触发下拉的行为   | "click" or "hover" | hover        |
+| overlay     | 菜单节点         | [Menu](/components/menu) | 无     |

style/components/dropdown.less

@@ -125,8 +125,18 @@
 }
 
 .@{dropdown-prefix-cls}-link {
+  font-size: 12px;
   .anticon-down {
-    .iconfont-size-under-12px(7px);
+    .iconfont-size-under-12px(8px);
     font-weight: bold;
   }
 }
+
+.@{dropdown-prefix-cls}-button {
+  &.ant-btn-group > .ant-btn:last-child:not(:first-child) {
+    padding-right: 8px;
+  }
+  .anticon-down {
+    .iconfont-size-under-12px(10px);
+  }
+}