feat: update dropdown

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'drawer', // dev components
+    componentName: 'dropdown', // dev components
   },
 };

components/dropdown/__tests__/__snapshots__/demo.test.js.snap

@@ -6,14 +6,21 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
     </svg></i></a>
 `;
 
-exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `<span class="ant-dropdown-trigger" style="user-select: none;">Right Click on Me</span>`;
+exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
+<div class="ant-dropdown-trigger" style="text-align: center; background: rgb(247, 247, 247); height: 200px; line-height: 200px; color: rgb(119, 119, 119);">
+  Right Click on here
+</div>
+`;
 
 exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
 <div>
-  <div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+  <div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div>
-  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+  <div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i slot="icon" aria-label="icon: user" class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+          <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path>
+        </svg></i></button></div>
+  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div> <button type="button" class="ant-btn ant-dropdown-trigger" style="margin-left: 8px;"><span>Button</span><i aria-label="icon: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>

components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownButton should support href like Button 1`] = `
-<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
       </svg></i></button></div>
 `;

components/dropdown/demo/context-menu.md

@@ -11,7 +11,17 @@ The default trigger mode is `hover`, you can change it to `contextMenu`.
 ```tpl
 <template>
   <a-dropdown :trigger="['contextmenu']">
-    <span style="user-select: none">Right Click on Me</span>
+    <div
+      :style="{
+        textAlign: 'center',
+        background: '#f7f7f7',
+        height: '200px',
+        lineHeight: '200px',
+        color: '#777',
+      }"
+    >
+      Right Click on here
+    </div>
     <a-menu slot="overlay">
       <a-menu-item key="1">1st menu item</a-menu-item>
       <a-menu-item key="2">2nd menu item</a-menu-item>

components/dropdown/demo/dropdown-button.md

@@ -1,11 +1,11 @@
 <cn>
 #### 带下拉框的按钮
-左边是按钮，右边是额外的相关功能菜单。
+左边是按钮，右边是额外的相关功能菜单。可设置 `icon` 属性来修改右边的图标。
 </cn>
 
 <us>
 #### Button with dropdown menu
-A button is on the left, and a related functional menu is on the right.
+A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
 </us>
 
 ```tpl
@@ -19,6 +19,15 @@ A button is on the left, and a related functional menu is on the right.
         <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item>
       </a-menu>
     </a-dropdown-button>
+    <a-dropdown-button>
+      Dropdown
+      <a-menu slot="overlay" @click="handleMenuClick">
+        <a-menu-item key="1"><a-icon type="user" />1st menu item</a-menu-item>
+        <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item>
+        <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item>
+      </a-menu>
+      <a-icon slot="icon" type="user"/>
+    </a-dropdown-button>
     <a-dropdown-button @click="handleButtonClick" disabled style="margin-left: 8px">
       Dropdown
       <a-menu slot="overlay" @click="handleMenuClick">

components/dropdown/demo/index.vue

@@ -19,7 +19,7 @@ const md = {
   us: `# Dropdown
         A dropdown list.
         ## When To Use
-        If there are too many operations to display, you can wrap them in a \`Dropdown\`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.
+        When there are more than a few options to choose from, you can wrap them in a \`Dropdown\`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
         ## Examples 
         `,
 };

components/dropdown/dropdown-button.jsx

@@ -6,6 +6,8 @@ import PropTypes from '../_util/vue-types';
 import { hasProp, getComponentFromProp } from '../_util/props-util';
 import getDropdownProps from './getDropdownProps';
 import { ConfigConsumerProps } from '../config-provider';
+import Icon from '../icon';
+
 const ButtonTypesProps = buttonTypes();
 const DropdownProps = getDropdownProps();
 const ButtonGroup = Button.Group;
@@ -19,6 +21,8 @@ const DropdownButtonProps = {
   disabled: PropTypes.bool,
   prefixCls: PropTypes.string,
   placement: DropdownProps.placement.def('bottomRight'),
+  icon: PropTypes.any,
+  title: PropTypes.string,
 };
 export { DropdownButtonProps };
 export default {
@@ -59,8 +63,10 @@ export default {
       placement,
       getPopupContainer,
       href,
+      title,
       ...restProps
     } = this.$props;
+    const icon = getComponentFromProp(this, 'icon') || <Icon type="ellipsis" />;
     const { getPopupContainer: getContextPopupContainer } = this.configProvider;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('dropdown-button', customizePrefixCls);
@@ -95,12 +101,13 @@ export default {
           onClick={this.onClick}
           htmlType={htmlType}
           href={href}
+          title={title}
         >
           {this.$slots.default}
         </Button>
         <Dropdown {...dropdownProps}>
           <template slot="overlay">{getComponentFromProp(this, 'overlay')}</template>
-          <Button type={type} disabled={disabled} icon="ellipsis" />
+          <Button type={type}>{icon}</Button>
         </Dropdown>
       </ButtonGroup>
     );

components/dropdown/index.en-US.md

@@ -27,15 +27,16 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 
 ### Dropdown.Button
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| disabled | whether the dropdown menu is disabled | boolean | - |
-| overlay(slot-scope) | the dropdown menu | [Menu](/components/menu) | - |
-| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
-| size | size of the button, the same as [Button](/components/button) | string | `default` |
-| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
-| type | type of the button, the same as [Button](/components/button) | string | `default` |
-| visible | whether the dropdown menu is visible | boolean | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| disabled | whether the dropdown menu is disabled | boolean | - |  |
+| icon | Icon (appears on the right) | vNode \| slot | - | 1.5.0 |
+| overlay(slot-scope) | the dropdown menu | [Menu](/components/menu) | - |  |
+| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |  |
+| size | size of the button, the same as [Button](/components/button) | string | `default` |  |
+| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |  |
+| type | type of the button, the same as [Button](/components/button) | string | `default` |  |
+| visible | whether the dropdown menu is visible | boolean | - |  |
 
 ### Dropdown.Button events
 

components/dropdown/index.zh-CN.md

@@ -27,15 +27,16 @@
 
 ### Dropdown.Button
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| disabled | 菜单是否禁用 | boolean | - |
-| overlay(slot-scope) | 菜单 | [Menu](/components/menu-cn/) | - |
-| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
-| size | 按钮大小，和 [Button](/components/button-cn/) 一致 | string | 'default' |
-| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
-| type | 按钮类型，和 [Button](/components/button-cn/) 一致 | string | 'default' |
-| visible(v-model) | 菜单是否显示 | boolean | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| disabled | 菜单是否禁用 | boolean | - |  |
+| icon | 右侧的 icon | VNode \| slot | - | 1.5.0 |
+| overlay(slot-scope) | 菜单 | [Menu](/components/menu-cn/) | - |  |
+| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |  |
+| size | 按钮大小，和 [Button](/components/button-cn/) 一致 | string | 'default' |  |
+| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |  |
+| type | 按钮类型，和 [Button](/components/button-cn/) 一致 | string | 'default' |  |
+| visible(v-model) | 菜单是否显示 | boolean | - |  |
 
 ### Dropdown.Button 事件
 

types/dropdown/dropdown-button.d.ts

@@ -51,4 +51,6 @@ export declare class DropdownButton extends AntdComponent {
    * @type boolean
    */
   visible: boolean;
+  icon: any;
+  title: string;
 }