feat: update dropdown

Author: wangxueliang

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

@@ -262,7 +262,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
         <div class="ant-card-extra"><a href="#">More</a></div>
       </div>
       <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs no-flex">
-        <div role="tablist" tabindex="0" class="ant-tabs-bar">
+        <div role="tablist" tabindex="0" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar">
           <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><i class="ant-tabs-tab-prev-icon-target anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><i class="ant-tabs-tab-next-icon-target anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></span>
             <div class="ant-tabs-nav-wrap">
               <div class="ant-tabs-nav-scroll">
@@ -278,10 +278,15 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left: 0%;">
-          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+        <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: 0%;">
+          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+          </div>
           <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
         </div>
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
       </div>
     </div>
     <div class="ant-card-body">
@@ -292,7 +297,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
     <div class="ant-card-head">
       <div class="ant-card-head-wrapper"></div>
       <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs no-flex">
-        <div role="tablist" tabindex="0" class="ant-tabs-bar">
+        <div role="tablist" tabindex="0" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar">
           <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><i class="ant-tabs-tab-prev-icon-target anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><i class="ant-tabs-tab-next-icon-target anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></span>
             <div class="ant-tabs-nav-wrap">
               <div class="ant-tabs-nav-scroll">
@@ -308,11 +313,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left: -100%;">
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+        <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: -100%;">
           <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
-          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
+          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+          </div>
           <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
         </div>
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
       </div>
     </div>
     <div class="ant-card-body">

components/dropdown/demo/context-menu.md

@@ -1,11 +1,11 @@
 <cn>
 #### 右键菜单
-默认是移入触发菜单，可以鼠标右键触发。
+默认是移入触发菜单，可以点击鼠标右键触发。
 </cn>
 
 <us>
 #### Context Menu
-The default trigger mode is `hover`, you can change it to `right click`.
+The default trigger mode is `hover`, you can change it to `contextMenu`.
 </us>
 
 ```html

components/dropdown/dropdown-button.jsx

@@ -1,16 +1,19 @@
 
 import Button from '../button'
+import buttonTypes from '../button/buttonTypes'
 import { ButtonGroupProps } from '../button/button-group'
 import Dropdown from './dropdown'
 import PropTypes from '../_util/vue-types'
 import { hasProp, getComponentFromProp } from '../_util/props-util'
 import getDropdownProps from './getDropdownProps'
+const ButtonTypesProps = buttonTypes()
 const DropdownProps = getDropdownProps()
 const ButtonGroup = Button.Group
 const DropdownButtonProps = {
   ...ButtonGroupProps,
   ...DropdownProps,
   type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'danger', 'default']).def('default'),
+  htmlType: ButtonTypesProps.htmlType,
   disabled: PropTypes.bool,
   prefixCls: PropTypes.string.def('ant-dropdown-button'),
   placement: DropdownProps.placement.def('bottomRight'),
@@ -33,7 +36,7 @@ export default {
   },
   render () {
     const {
-      type, disabled,
+      type, disabled, htmlType,
       prefixCls, trigger, align,
       visible, placement, getPopupContainer,
       ...restProps
@@ -64,6 +67,7 @@ export default {
           type={type}
           disabled={disabled}
           onClick={this.onClick}
+          htmlType={htmlType}
         >
           {this.$slots.default}
         </Button>

components/dropdown/dropdown.jsx

@@ -5,6 +5,8 @@ import PropTypes from '../_util/vue-types'
 import { cloneElement } from '../_util/vnode'
 import { getOptionProps, getPropsData } from '../_util/props-util'
 import getDropdownProps from './getDropdownProps'
+import Icon from '../icon'
+
 const DropdownProps = getDropdownProps()
 const Dropdown = {
   name: 'ADropdown',
@@ -43,11 +45,19 @@ const Dropdown = {
     // menu should be focusable in dropdown defaultly
     const overlayProps = overlay && getPropsData(overlay)
     const { selectable = false, focusable = true } = overlayProps || {}
+
+    const expandIcon = (
+      <span class={`${prefixCls}-menu-submenu-arrow`}>
+        <Icon type='right' class={`${prefixCls}-menu-submenu-arrow-icon`} />
+      </span>
+    )
+
     const fixedModeOverlay = overlay && overlay.componentOptions ? cloneElement(overlay, {
       props: {
         mode: 'vertical',
         selectable,
         focusable,
+        expandIcon,
       },
     }) : overlay
     const triggerActions = disabled ? [] : trigger