refactor: tabs #6288

Author: tangjinzhou

components/tabs/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Tabs
-cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Tabs make it easy to switch between different views.
@@ -25,7 +25,7 @@ Ant Design has 3 types of Tabs for different situations.
 | animated | Whether to change tabs with animation. Only works while tabPosition=`"top"` \| `"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |  |
 | destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false |  |
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | } |
-| size | preset tab bar size | `large` \| `default` \| `small` | `default` |  |
+| size | preset tab bar size | `large` \| `middle` \| `small` | `middle` |  |
 | tabBarGutter | The gap between tabs | number | - |  |
 | tabBarStyle | Tab bar style object | CSSProperties | - |  |
 | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |  |

components/tabs/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 subtitle: 标签页
 type: 数据展示
 title: Tabs
-cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 选项卡切换组件。
@@ -29,7 +29,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | centered | 标签居中展示 | boolean | false | 3.0 |  |
 | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false |  |  |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |  |
-| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` |  |  |
+| size | 大小，提供 `large` `middle` 和 `small` 三种大小 | string | `middle` |  |  |
 | tabBarGutter | tabs 之间的间隙 | number | 无 |  |  |
 | tabBarStyle | tab bar 的样式对象 | CSSProperties | - |  |  |
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |  |

components/tabs/src/TabNavList/OperationNode.tsx

@@ -3,13 +3,15 @@ import Dropdown from '../../../vc-dropdown';
 import type { Tab, TabsLocale, EditableConfig } from '../interface';
 import AddButton from './AddButton';
 import type { Key } from '../../../_util/type';
+import { functionType } from '../../../_util/type';
 import KeyCode from '../../../_util/KeyCode';
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import classNames from '../../../_util/classNames';
 import { defineComponent, watch, computed, onMounted } from 'vue';
 import PropTypes from '../../../_util/vue-types';
 import useState from '../../../_util/hooks/useState';
 import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined';
+import { useProvideOverride } from '../../../menu/src/OverrideContext';
 
 export const operationNodeProps = {
   prefixCls: { type: String },
@@ -25,6 +27,10 @@ export const operationNodeProps = {
   locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
   removeAriaLabel: String,
   onTabClick: { type: Function as PropType<(key: Key, e: MouseEvent | KeyboardEvent) => void> },
+  popupClassName: String,
+  getPopupContainer: functionType<
+    ((triggerNode?: HTMLElement | undefined) => HTMLElement) | undefined
+  >(),
 };
 
 export type OperationNodeProps = Partial<ExtractPropTypes<typeof operationNodeProps>>;
@@ -117,7 +123,7 @@ export default defineComponent({
         setSelectedKey(null);
       }
     });
-
+    useProvideOverride({});
     return () => {
       const {
         prefixCls,
@@ -131,6 +137,7 @@ export default defineComponent({
         tabBarGutter,
         rtl,
         onTabClick,
+        popupClassName,
       } = props;
       const dropdownPrefix = `${prefixCls}-dropdown`;
 
@@ -147,17 +154,19 @@ export default defineComponent({
 
       const overlayClassName = classNames({
         [`${dropdownPrefix}-rtl`]: rtl,
+        [`${popupClassName}`]: true,
       });
       const moreNode = mobile ? null : (
         <Dropdown
           prefixCls={dropdownPrefix}
           trigger={['hover']}
-          visible={open.value}
+          open={open.value}
           transitionName={moreTransitionName}
-          onVisibleChange={setOpen}
+          onOpenChange={setOpen}
           overlayClassName={overlayClassName}
           mouseEnterDelay={0.1}
           mouseLeaveDelay={0.1}
+          getPopupContainer={props.getPopupContainer}
           v-slots={{
             overlay: () => (
               <Menu

components/tabs/src/TabNavList/index.tsx

@@ -17,6 +17,7 @@ import { useInjectTabs } from '../TabContext';
 import useTouchMove from '../hooks/useTouchMove';
 import AddButton from './AddButton';
 import type { Key } from '../../../_util/type';
+import { objectType, functionType } from '../../../_util/type';
 import type { ExtractPropTypes, PropType, CSSProperties } from 'vue';
 import { onBeforeUnmount, defineComponent, ref, watch, watchEffect, computed } from 'vue';
 import PropTypes from '../../../_util/vue-types';
@@ -36,14 +37,18 @@ export const tabNavListProps = () => {
     tabPosition: { type: String as PropType<TabPosition> },
     activeKey: { type: [String, Number] },
     rtl: { type: Boolean },
-    animated: { type: Object as PropType<AnimatedConfig>, default: undefined as AnimatedConfig },
-    editable: { type: Object as PropType<EditableConfig> },
+    animated: objectType<AnimatedConfig>(),
+    editable: objectType<EditableConfig>(),
     moreIcon: PropTypes.any,
     moreTransitionName: { type: String },
     mobile: { type: Boolean },
     tabBarGutter: { type: Number },
     renderTabBar: { type: Function as PropType<RenderTabBar> },
-    locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
+    locale: objectType<TabsLocale>(),
+    popupClassName: String,
+    getPopupContainer: functionType<
+      ((triggerNode?: HTMLElement | undefined) => HTMLElement) | undefined
+    >(),
     onTabClick: {
       type: Function as PropType<(activeKey: Key, e: MouseEvent | KeyboardEvent) => void>,
     },

components/tabs/src/Tabs.tsx

@@ -10,7 +10,7 @@ import type {
   OnTabScroll,
   Tab,
 } from './interface';
-import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import { defineComponent, computed, onMounted, watchEffect, camelize } from 'vue';
 import { flattenChildren, initDefaultProps, isValidElement } from '../../_util/props-util';
 import useConfigInject from '../../config-provider/hooks/useConfigInject';
@@ -24,6 +24,14 @@ import devWarning from '../../vc-util/devWarning';
 import type { SizeType } from '../../config-provider';
 import { useProvideTabs } from './TabContext';
 import type { Key } from '../../_util/type';
+import {
+  arrayType,
+  stringType,
+  someType,
+  functionType,
+  objectType,
+  booleanType,
+} from '../../_util/type';
 import pick from 'lodash-es/pick';
 import PropTypes from '../../_util/vue-types';
 import type { MouseEventHandler } from '../../_util/EventInterface';
@@ -39,36 +47,33 @@ export const tabsProps = () => {
   return {
     prefixCls: { type: String },
     id: { type: String },
-
+    popupClassName: String,
+    getPopupContainer: functionType<
+      ((triggerNode?: HTMLElement | undefined) => HTMLElement) | undefined
+    >(),
     activeKey: { type: [String, Number] },
     defaultActiveKey: { type: [String, Number] },
-    direction: { type: String as PropType<'ltr' | 'rtl'> },
-    animated: { type: [Boolean, Object] as PropType<boolean | AnimatedConfig> },
-    renderTabBar: { type: Function as PropType<RenderTabBar> },
+    direction: stringType<'ltr' | 'rtl'>(),
+    animated: someType<boolean | AnimatedConfig>([Boolean, Object]),
+    renderTabBar: functionType<RenderTabBar>(),
     tabBarGutter: { type: Number },
-    tabBarStyle: { type: Object as PropType<CSSProperties> },
-    tabPosition: { type: String as PropType<TabPosition> },
-    destroyInactiveTabPane: { type: Boolean },
+    tabBarStyle: objectType<CSSProperties>(),
+    tabPosition: stringType<TabPosition>(),
+    destroyInactiveTabPane: booleanType(),
 
     hideAdd: Boolean,
-    type: { type: String as PropType<TabsType> },
-    size: { type: String as PropType<SizeType> },
+    type: stringType<TabsType>(),
+    size: stringType<SizeType>(),
     centered: Boolean,
-    onEdit: {
-      type: Function as PropType<
-        (e: MouseEvent | KeyboardEvent | Key, action: 'add' | 'remove') => void
-      >,
-    },
-    onChange: { type: Function as PropType<(activeKey: Key) => void> },
-    onTabClick: {
-      type: Function as PropType<(activeKey: Key, e: KeyboardEvent | MouseEvent) => void>,
-    },
-    onTabScroll: { type: Function as PropType<OnTabScroll> },
-    'onUpdate:activeKey': { type: Function as PropType<(activeKey: Key) => void> },
+    onEdit: functionType<(e: MouseEvent | KeyboardEvent | Key, action: 'add' | 'remove') => void>(),
+    onChange: functionType<(activeKey: Key) => void>(),
+    onTabClick: functionType<(activeKey: Key, e: KeyboardEvent | MouseEvent) => void>(),
+    onTabScroll: functionType<OnTabScroll>(),
+    'onUpdate:activeKey': functionType<(activeKey: Key) => void>(),
     // Accessibility
-    locale: { type: Object as PropType<TabsLocale>, default: undefined as TabsLocale },
-    onPrevClick: Function as PropType<MouseEventHandler>,
-    onNextClick: Function as PropType<MouseEventHandler>,
+    locale: objectType<TabsLocale>(),
+    onPrevClick: functionType<MouseEventHandler>(),
+    onNextClick: functionType<MouseEventHandler>(),
     tabBarExtraContent: PropTypes.any,
   };
 };
@@ -126,7 +131,7 @@ const InternalTabs = defineComponent({
         tabPane: false,
       },
     }),
-    tabs: { type: Array as PropType<Tab[]> },
+    tabs: arrayType<Tab[]>(),
   },
   slots: [
     'tabBarExtraContent',
@@ -154,7 +159,10 @@ const InternalTabs = defineComponent({
       'Tabs',
       '`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.',
     );
-    const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props);
+    const { prefixCls, direction, size, rootPrefixCls, getPopupContainer } = useConfigInject(
+      'tabs',
+      props,
+    );
     const [wrapSSR, hashId] = useStyle(prefixCls);
     const rtl = computed(() => direction.value === 'rtl');
     const mergedAnimated = computed<AnimatedConfig>(() => {
@@ -284,6 +292,8 @@ const InternalTabs = defineComponent({
         onTabClick: onInternalTabClick,
         onTabScroll,
         style: tabBarStyle,
+        getPopupContainer: getPopupContainer.value,
+        popupClassName: classNames(props.popupClassName, hashId.value),
       };
 
       if (renderTabBar) {