feat: deprecated dropdown center placement

Author: tangjinzhou

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

@@ -76,7 +76,7 @@ exports[`renders ./components/dropdown/demo/placement.vue correctly 1`] = `
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">
-    <!----><span>bottomCenter</span>
+    <!----><span>bottom</span>
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">
@@ -87,7 +87,7 @@ exports[`renders ./components/dropdown/demo/placement.vue correctly 1`] = `
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">
-    <!----><span>topCenter</span>
+    <!----><span>top</span>
   </button>
   <!--v-if-->
   <!----><button class="ant-btn ant-dropdown-trigger" type="button">

components/dropdown/demo/placement.vue

@@ -53,10 +53,10 @@ export default defineComponent({
     return {
       placements: [
         'bottomLeft',
-        'bottomCenter',
+        'bottom',
         'bottomRight',
         'topLeft',
-        'topCenter',
+        'top',
         'topRight',
       ] as DropdownProps['placement'][],
     };

components/dropdown/dropdown.tsx

@@ -83,10 +83,21 @@ const Dropdown = defineComponent({
     };
 
     const placement = computed(() => {
-      if (props.placement !== undefined) {
-        return props.placement;
+      const placement = props.placement;
+      if (!placement) {
+        return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
       }
-      return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
+
+      if (placement.includes('Center')) {
+        const newPlacement = placement.slice(0, placement.indexOf('Center'));
+        devWarning(
+          !placement.includes('Center'),
+          'Dropdown',
+          `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
+        );
+        return newPlacement;
+      }
+      return placement;
     });
 
     const handleVisibleChange = (val: boolean) => {

components/dropdown/props.ts

@@ -39,7 +39,16 @@ const dropdownProps = () => ({
   prefixCls: PropTypes.string,
   transitionName: PropTypes.string,
   placement: PropTypes.oneOf(
-    tuple('topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight'),
+    tuple(
+      'topLeft',
+      'topCenter',
+      'top',
+      'topRight',
+      'bottomLeft',
+      'bottomCenter',
+      'bottom',
+      'bottomRight',
+    ),
   ),
   overlayClassName: PropTypes.string,
   overlayStyle: PropTypes.style,

components/tooltip/placements.ts

@@ -41,6 +41,7 @@ export default function getPlacements(config: PlacementsConfig) {
     horizontalArrowShift = 16,
     verticalArrowShift = 8,
     autoAdjustOverflow,
+    arrowPointAtCenter,
   } = config;
   const placementMap = {
     left: {
@@ -93,7 +94,7 @@ export default function getPlacements(config: PlacementsConfig) {
     },
   };
   Object.keys(placementMap).forEach(key => {
-    placementMap[key] = config.arrowPointAtCenter
+    placementMap[key] = arrowPointAtCenter
       ? {
           ...placementMap[key],
           overflow: getOverflowOptions(autoAdjustOverflow),

site/src/layouts/index.vue

@@ -54,7 +54,7 @@
           </a-affix>
         </section>
         <div class="fixed-widgets" :style="isZhCN ? { bottom: '175px' } : {}">
-          <a-dropdown placement="topCenter">
+          <a-dropdown placement="top">
             <template #overlay>
               <a-menu
                 :selected-keys="[themeMode.theme.value]"