From b1467d6ec8c29f13ae894918ace83222b13d7783 Mon Sep 17 00:00:00 2001
From: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Date: Tue, 3 Jun 2025 14:09:56 +0800
Subject: [PATCH] feat(Divider): unify orientation attribute usage (#53645)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat[Divider]: Unified use of orientation attribute

* feat: Restore the size type missed in the merge

* feat: Delete unnecessary demo adjustments

* docs: change text

* feat: deprecated warning

* Update components/divider/index.zh-CN.md

Signed-off-by: thinkasany <480968828@qq.com>

* Update components/divider/index.en-US.md

Signed-off-by: thinkasany <480968828@qq.com>

* feat: use useOrientation and change test,doc

* feat: change demos orientation attribut

* docs: change token and demo (orientationMargin->titlePlacementMargin)

* feat: change demos  titlePlacement="left/right" -> "start/end"

* docs: titlePlacement align

* feat: Resolve merge conflicts

* fix: lint error

* fix: demo lint error

* feat: use mergedStyles.content

* test: update snapshot

* rerun ci

* test: update snapshot

* fix: delete titlePlacementMargin and udpate snapshots

* feat: change demos orientationMargin-> styles.content.margin

* Update components/divider/demo/vertical.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>

* feat: Call warning using list

* docs: `vertical` to make the divider vertical.

* docs: Modify punctuation usage

* docs: Add deprecated description

* docs: Clarify the possible values for titlePlacement in the example

* feat： replase  { margin: '0' } ->{ margin: 0 }

---------

Signed-off-by: thinkasany <480968828@qq.com>
Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: thinkasany <480968828@qq.com>
---
 .../theme/builtins/ResourceArticles/index.tsx |  2 +-
 components/badge/demo/colorful.tsx            |  4 +-
 components/button/demo/debug-icon.tsx         |  2 +-
 components/button/demo/icon-position.tsx      |  2 +-
 components/button/demo/size.tsx               |  2 +-
 components/collapse/demo/size.tsx             |  6 +-
 components/color-picker/demo/panel-render.tsx |  2 +-
 components/config-provider/demo/direction.tsx | 28 +++----
 components/config-provider/demo/locale.tsx    |  2 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 24 +++---
 .../__tests__/__snapshots__/demo.test.ts.snap | 24 +++---
 components/divider/__tests__/index.test.tsx   | 49 +++++++++++-
 components/divider/demo/_semantic.tsx         | 10 +--
 components/divider/demo/component-token.tsx   | 12 +--
 components/divider/demo/customize-style.tsx   |  6 +-
 components/divider/demo/plain.tsx             |  4 +-
 components/divider/demo/vertical.md           |  4 +-
 components/divider/demo/vertical.tsx          |  4 +-
 components/divider/demo/with-text.md          |  4 +-
 components/divider/demo/with-text.tsx         | 12 +--
 components/divider/index.en-US.md             | 10 ++-
 components/divider/index.tsx                  | 78 ++++++++++++-------
 components/divider/index.zh-CN.md             | 10 ++-
 components/divider/style/index.ts             |  2 +-
 components/grid/demo/flex-align.tsx           |  6 +-
 components/grid/demo/flex-order.tsx           |  4 +-
 components/grid/demo/flex-stretch.tsx         |  6 +-
 components/grid/demo/flex.tsx                 | 12 +--
 components/grid/demo/gutter.tsx               |  6 +-
 components/list/demo/component-token.tsx      | 12 +--
 components/list/demo/simple.tsx               |  6 +-
 components/menu/demo/switch-mode.tsx          |  2 +-
 .../skeleton/demo/_semantic_element.tsx       |  2 +-
 components/space/demo/split.tsx               |  2 +-
 components/tag/demo/colorful.tsx              |  4 +-
 components/tag/demo/status.tsx                |  2 +-
 components/tooltip/demo/colorful.tsx          |  4 +-
 37 files changed, 220 insertions(+), 151 deletions(-)

diff --git a/.dumi/theme/builtins/ResourceArticles/index.tsx b/.dumi/theme/builtins/ResourceArticles/index.tsx
index 22d25b169b..137dc5e5f8 100644
--- a/.dumi/theme/builtins/ResourceArticles/index.tsx
+++ b/.dumi/theme/builtins/ResourceArticles/index.tsx
@@ -79,7 +79,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
                 <a href={author?.href} target="_blank" rel="noreferrer">
                   <Avatar size="small" src={author?.avatar} />
                 </a>
-                <Divider type="vertical" />
+                <Divider vertical />
                 <a href={article.href} target="_blank" rel="noreferrer">
                   {article?.title}
                 </a>
diff --git a/components/badge/demo/colorful.tsx b/components/badge/demo/colorful.tsx
index 3dc569105c..9ef1d4b396 100644
--- a/components/badge/demo/colorful.tsx
+++ b/components/badge/demo/colorful.tsx
@@ -19,13 +19,13 @@ const colors = [
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Presets</Divider>
+    <Divider titlePlacement="start">Presets</Divider>
     <Space vertical>
       {colors.map((color) => (
         <Badge key={color} color={color} text={color} />
       ))}
     </Space>
-    <Divider orientation="left">Custom</Divider>
+    <Divider titlePlacement="start">Custom</Divider>
     <Space vertical>
       <Badge color="#f50" text="#f50" />
       <Badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" />
diff --git a/components/button/demo/debug-icon.tsx b/components/button/demo/debug-icon.tsx
index f9b312cd9e..77d37f3de9 100644
--- a/components/button/demo/debug-icon.tsx
+++ b/components/button/demo/debug-icon.tsx
@@ -22,7 +22,7 @@ const App: React.FC = () => {
         <Radio.Button value="default">Default</Radio.Button>
         <Radio.Button value="small">Small</Radio.Button>
       </Radio.Group>
-      <Divider orientation="left" plain>
+      <Divider titlePlacement="start" plain>
         Preview
       </Divider>
       <ConfigProvider componentSize={size}>
diff --git a/components/button/demo/icon-position.tsx b/components/button/demo/icon-position.tsx
index 48707d02bf..166e1daf0d 100644
--- a/components/button/demo/icon-position.tsx
+++ b/components/button/demo/icon-position.tsx
@@ -13,7 +13,7 @@ const App: React.FC = () => {
           <Radio.Button value="end">end</Radio.Button>
         </Radio.Group>
       </Space>
-      <Divider orientation="left" plain>
+      <Divider titlePlacement="start" plain>
         Preview
       </Divider>
       <Flex gap="small" vertical>
diff --git a/components/button/demo/size.tsx b/components/button/demo/size.tsx
index 7a874bfd66..3131627cc3 100644
--- a/components/button/demo/size.tsx
+++ b/components/button/demo/size.tsx
@@ -14,7 +14,7 @@ const App: React.FC = () => {
         <Radio.Button value="default">Default</Radio.Button>
         <Radio.Button value="small">Small</Radio.Button>
       </Radio.Group>
-      <Divider orientation="left" plain>
+      <Divider titlePlacement="start" plain>
         Preview
       </Divider>
       <Flex gap="small" align="flex-start" vertical>
diff --git a/components/collapse/demo/size.tsx b/components/collapse/demo/size.tsx
index 49803c7ce7..5641d543ed 100644
--- a/components/collapse/demo/size.tsx
+++ b/components/collapse/demo/size.tsx
@@ -9,16 +9,16 @@ const text = `
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Default Size</Divider>
+    <Divider titlePlacement="start">Default Size</Divider>
     <Collapse
       items={[{ key: '1', label: 'This is default size panel header', children: <p>{text}</p> }]}
     />
-    <Divider orientation="left">Small Size</Divider>
+    <Divider titlePlacement="start">Small Size</Divider>
     <Collapse
       size="small"
       items={[{ key: '1', label: 'This is small size panel header', children: <p>{text}</p> }]}
     />
-    <Divider orientation="left">Large Size</Divider>
+    <Divider titlePlacement="start">Large Size</Divider>
     <Collapse
       size="large"
       items={[{ key: '1', label: 'This is large size panel header', children: <p>{text}</p> }]}
diff --git a/components/color-picker/demo/panel-render.tsx b/components/color-picker/demo/panel-render.tsx
index 94288aa2a2..e4f0bb81bb 100644
--- a/components/color-picker/demo/panel-render.tsx
+++ b/components/color-picker/demo/panel-render.tsx
@@ -27,7 +27,7 @@ const HorizontalLayoutDemo = () => {
       <Col span={12}>
         <Presets />
       </Col>
-      <Divider type="vertical" style={{ height: 'auto' }} />
+      <Divider vertical style={{ height: 'auto' }} />
       <Col flex="auto">
         <Picker />
       </Col>
diff --git a/components/config-provider/demo/direction.tsx b/components/config-provider/demo/direction.tsx
index 740d006b2e..f3c273d1a1 100644
--- a/components/config-provider/demo/direction.tsx
+++ b/components/config-provider/demo/direction.tsx
@@ -163,7 +163,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
     <div className="direction-components">
       <Row>
         <Col span={24}>
-          <Divider orientation="left">Cascader example</Divider>
+          <Divider titlePlacement="start">Cascader example</Divider>
           <Cascader
             suffixIcon={<SearchIcon />}
             options={cascaderOptions}
@@ -185,7 +185,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
       <br />
       <Row>
         <Col span={12}>
-          <Divider orientation="left">Switch example</Divider>
+          <Divider titlePlacement="start">Switch example</Divider>
           &nbsp;&nbsp;
           <Switch defaultChecked />
           &nbsp;&nbsp;
@@ -194,7 +194,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
           <Switch size="small" loading />
         </Col>
         <Col span={12}>
-          <Divider orientation="left">Radio Group example</Divider>
+          <Divider titlePlacement="start">Radio Group example</Divider>
           <Radio.Group defaultValue="c" buttonStyle="solid">
             <Radio.Button value="a">تهران</Radio.Button>
             <Radio.Button value="b" disabled>
@@ -208,7 +208,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
       <br />
       <Row>
         <Col span={12}>
-          <Divider orientation="left">Button example</Divider>
+          <Divider titlePlacement="start">Button example</Divider>
           <div className="button-demo">
             <Button type="primary" icon={<DownloadOutlined />} />
             <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
@@ -239,7 +239,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
           </div>
         </Col>
         <Col span={12}>
-          <Divider orientation="left">Tree example</Divider>
+          <Divider titlePlacement="start">Tree example</Divider>
           <Tree
             showLine
             checkable
@@ -262,7 +262,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
       <br />
       <Row>
         <Col span={24}>
-          <Divider orientation="left">Input (Input Group) example</Divider>
+          <Divider titlePlacement="start">Input (Input Group) example</Divider>
           <InputGroup size="large">
             <Row gutter={8}>
               <Col span={5}>
@@ -297,7 +297,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
           <br />
           <Row>
             <Col span={12}>
-              <Divider orientation="left">Select example</Divider>
+              <Divider titlePlacement="start">Select example</Divider>
               <Space wrap>
                 <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
                   <Option value="jack">Jack</Option>
@@ -321,7 +321,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
               </Space>
             </Col>
             <Col span={12}>
-              <Divider orientation="left">TreeSelect example</Divider>
+              <Divider titlePlacement="start">TreeSelect example</Divider>
               <TreeSelect
                 showSearch
                 style={{ width: '100%' }}
@@ -349,7 +349,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
           <br />
           <Row>
             <Col span={24}>
-              <Divider orientation="left">Modal example</Divider>
+              <Divider titlePlacement="start">Modal example</Divider>
               <Button type="primary" onClick={showModal}>
                 Open Modal
               </Button>
@@ -363,7 +363,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
           <br />
           <Row>
             <Col span={24}>
-              <Divider orientation="left">Steps example</Divider>
+              <Divider titlePlacement="start">Steps example</Divider>
               <Steps
                 progressDot
                 current={currentStep}
@@ -406,7 +406,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
           <br />
           <Row>
             <Col span={12}>
-              <Divider orientation="left">Rate example</Divider>
+              <Divider titlePlacement="start">Rate example</Divider>
               <Rate defaultValue={2.5} />
               <br />
               <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
@@ -417,7 +417,7 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
               implement rtl support.
             </Col>
             <Col span={12}>
-              <Divider orientation="left">Badge example</Divider>
+              <Divider titlePlacement="start">Badge example</Divider>
               <Badge count={badgeCount}>
                 <a href="#" className="head-example" />
               </Badge>
@@ -443,14 +443,14 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {
       <br />
       <Row>
         <Col span={24}>
-          <Divider orientation="left">Pagination example</Divider>
+          <Divider titlePlacement="start">Pagination example</Divider>
           <Pagination showSizeChanger defaultCurrent={3} total={500} />
         </Col>
       </Row>
       <br />
       <Row>
         <Col span={24}>
-          <Divider orientation="left">Grid System example</Divider>
+          <Divider titlePlacement="start">Grid System example</Divider>
           <div className="grid-demo">
             <div className="code-box-demo">
               <p>
diff --git a/components/config-provider/demo/locale.tsx b/components/config-provider/demo/locale.tsx
index 12ebd6af5b..cc26da59ae 100644
--- a/components/config-provider/demo/locale.tsx
+++ b/components/config-provider/demo/locale.tsx
@@ -188,7 +188,7 @@ const Page: React.FC = () => {
         />
       </Space>
       <Upload listType="picture-card" fileList={fileList} />
-      <Divider orientation="left">Tour</Divider>
+      <Divider titlePlacement="start">Tour</Divider>
       <Button type="primary" onClick={() => setTourOpen(true)}>
         Begin Tour
       </Button>
diff --git a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
index 79504bfff3..822b57bc3f 100644
--- a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -63,7 +63,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
     role="separator"
   >
     <div
@@ -71,9 +71,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-start: 0;"
+      style="margin: 0px;"
     >
-      Left Text with 0 orientationMargin
+      Left Text margin with 0
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
@@ -83,7 +83,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
     role="separator"
   >
     <div
@@ -91,9 +91,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-end: 50px;"
+      style="margin: 0px 50px;"
     >
-      Right Text with 50px orientationMargin
+      Right Text margin with 50px
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
@@ -453,7 +453,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
     role="separator"
   >
     <div
@@ -461,9 +461,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-start: 0;"
+      style="margin: 0px;"
     >
-      Left Text with 0 orientationMargin
+      Left Text margin with 0
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
@@ -473,7 +473,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
     role="separator"
   >
     <div
@@ -481,9 +481,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-end: 50px;"
+      style="margin: 0px 50px;"
     >
-      Right Text with 50px orientationMargin
+      Right Text margin with 50px
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
diff --git a/components/divider/__tests__/__snapshots__/demo.test.ts.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
index 2ff2410a10..1b8bc6538e 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
@@ -63,7 +63,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
     role="separator"
   >
     <div
@@ -71,9 +71,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-start:0"
+      style="margin:0"
     >
-      Left Text with 0 orientationMargin
+      Left Text margin with 0
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
@@ -83,7 +83,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
     role="separator"
   >
     <div
@@ -91,9 +91,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-end:50px"
+      style="margin:0 50px"
     >
-      Right Text with 50px orientationMargin
+      Right Text margin with 50px
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
@@ -439,7 +439,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start ant-divider-no-default-orientation-margin-start"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-start"
     role="separator"
   >
     <div
@@ -447,9 +447,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-start:0"
+      style="margin:0"
     >
-      Left Text with 0 orientationMargin
+      Left Text margin with 0
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
@@ -459,7 +459,7 @@ Array [
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>,
   <div
-    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end ant-divider-no-default-orientation-margin-end"
+    class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-with-text ant-divider-with-text-end"
     role="separator"
   >
     <div
@@ -467,9 +467,9 @@ Array [
     />
     <span
       class="ant-divider-inner-text"
-      style="margin-inline-end:50px"
+      style="margin:0 50px"
     >
-      Right Text with 50px orientationMargin
+      Right Text margin with 50px
     </span>
     <div
       class="ant-divider-rail ant-divider-rail-end"
diff --git a/components/divider/__tests__/index.test.tsx b/components/divider/__tests__/index.test.tsx
index 268a0f6f65..bef1ce230f 100644
--- a/components/divider/__tests__/index.test.tsx
+++ b/components/divider/__tests__/index.test.tsx
@@ -2,8 +2,10 @@ import * as React from 'react';
 import { ConfigProvider } from 'antd';
 
 import Divider from '..';
+import type { Orientation } from '../../_util/hooks/useOrientation';
 import mountTest from '../../../tests/shared/mountTest';
 import { render } from '../../../tests/utils';
+import type { TitlePlacement } from '../index';
 
 describe('Divider', () => {
   mountTest(Divider);
@@ -19,7 +21,7 @@ describe('Divider', () => {
 
   it('support string orientationMargin', () => {
     const { container } = render(
-      <Divider orientation="right" orientationMargin="10">
+      <Divider titlePlacement="end" orientationMargin="10">
         test test test
       </Divider>,
     );
@@ -65,4 +67,49 @@ describe('Divider', () => {
     rerender(<Divider type="vertical" size="small" />);
     expect(container.querySelector<HTMLSpanElement>('.ant-divider-sm')).toBeTruthy();
   });
+
+  describe('orientation and placement attribute', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+    const testCases: Array<
+      [
+        params: [
+          orientation?: Orientation | TitlePlacement,
+          vertical?: boolean,
+          type?: Orientation,
+          titlePlacement?: TitlePlacement,
+          orientationMargin?: number,
+        ],
+        expected: string,
+      ]
+    > = [
+      [['right'], '.ant-divider-with-text-end'],
+      [['vertical', undefined, 'horizontal'], '.ant-divider-vertical'],
+      [[undefined, undefined, 'vertical'], '.ant-divider-vertical'],
+      [['center', undefined, undefined, 'left'], '.ant-divider-with-text-start'],
+      [['horizontal', true, undefined], '.ant-divider-horizontal'],
+      [[undefined, true, 'horizontal'], '.ant-divider-vertical'],
+      [['center', undefined, 'horizontal', 'left', 20], '.ant-divider-with-text-start'],
+    ];
+    it.each(testCases)('with args %j should have %s node', (params, expected) => {
+      const { container } = render(
+        <Divider
+          orientation={params[0] as Orientation}
+          vertical={params[1]}
+          type={params[2]}
+          titlePlacement={params[3]}
+          {...(params[4] && { orientationMargin: params[4] })}
+        >
+          Bamboo
+        </Divider>,
+      );
+      expect(container.querySelector<HTMLSpanElement>(expected)).not.toBeNull();
+      if (params[4]) {
+        expect(
+          container
+            .querySelector<HTMLSpanElement>('.ant-divider-inner-text')
+            ?.style.getPropertyValue('margin-inline-start'),
+        ).toBe('20px');
+      }
+    });
+  });
 });
diff --git a/components/divider/demo/_semantic.tsx b/components/divider/demo/_semantic.tsx
index abe1715da7..8dbe6f18f4 100644
--- a/components/divider/demo/_semantic.tsx
+++ b/components/divider/demo/_semantic.tsx
@@ -35,23 +35,23 @@ const Block: React.FC<DividerProps> = (props) => {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
         ista probare, quae sunt a te dicta? Refert tamen, quo modo.
       </p>
-      <Divider orientation="left" variant="dotted" {...props}>
+      <Divider titlePlacement="left" variant="dotted" {...props}>
         Dotted
       </Divider>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
         ista probare, quae sunt a te dicta? Refert tamen, quo modo.
       </p>
-      <Divider orientation="right" variant="dashed" {...props}>
+      <Divider titlePlacement="right" variant="dashed" {...props}>
         Dashed
       </Divider>
       <>
         These
-        <Divider type="vertical" {...props} />
+        <Divider orientation="vertical" {...props} />
         are
-        <Divider type="vertical" {...props} />
+        <Divider orientation="vertical" {...props} />
         vertical
-        <Divider type="vertical" {...props} />
+        <Divider orientation="vertical" {...props} />
         Dividers
       </>
     </div>
diff --git a/components/divider/demo/component-token.tsx b/components/divider/demo/component-token.tsx
index 49ce05cdde..8dc3486c82 100644
--- a/components/divider/demo/component-token.tsx
+++ b/components/divider/demo/component-token.tsx
@@ -28,25 +28,25 @@ const App: React.FC = () => (
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="left">Left Text</Divider>
+    <Divider titlePlacement="start">Left Text</Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="right">Right Text</Divider>
+    <Divider titlePlacement="end">Right Text</Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="left" orientationMargin="0">
-      Left Text with 0 orientationMargin
+    <Divider titlePlacement="start" styles={{ content: { margin: 0 } }}>
+      Left Text margin with 0
     </Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="right" orientationMargin={50}>
-      Right Text with 50px orientationMargin
+    <Divider titlePlacement="end" styles={{ content: { margin: '0 50px' } }}>
+      Right Text margin with 50px
     </Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
diff --git a/components/divider/demo/customize-style.tsx b/components/divider/demo/customize-style.tsx
index 29621bb498..f2b7d492d0 100644
--- a/components/divider/demo/customize-style.tsx
+++ b/components/divider/demo/customize-style.tsx
@@ -8,11 +8,11 @@ const App: React.FC = () => (
     <Divider style={{ borderColor: '#7cb305' }} dashed>
       Text
     </Divider>
-    <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
-    <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
+    <Divider vertical style={{ height: 60, borderColor: '#7cb305' }} />
+    <Divider vertical style={{ height: 60, borderColor: '#7cb305' }} dashed />
 
     <div style={{ display: 'flex', flexDirection: 'column', height: 50, boxShadow: '0 0 1px red' }}>
-      <Divider style={{ background: 'rgba(0,255,0,0.05)' }} orientation="left">
+      <Divider style={{ background: 'rgba(0,255,0,0.05)' }} titlePlacement="start">
         Text
       </Divider>
     </div>
diff --git a/components/divider/demo/plain.tsx b/components/divider/demo/plain.tsx
index efb51236bf..7bcfa6ebb8 100644
--- a/components/divider/demo/plain.tsx
+++ b/components/divider/demo/plain.tsx
@@ -12,14 +12,14 @@ const App: React.FC = () => (
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="left" plain>
+    <Divider titlePlacement="start" plain>
       Left Text
     </Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="right" plain>
+    <Divider titlePlacement="end" plain>
       Right Text
     </Divider>
     <p>
diff --git a/components/divider/demo/vertical.md b/components/divider/demo/vertical.md
index dfe2c4cc27..2b2e3d3286 100644
--- a/components/divider/demo/vertical.md
+++ b/components/divider/demo/vertical.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-使用 `type="vertical"` 设置为行内的垂直分割线。
+使用 `orientation="vertical"` 或者 `vertical` 设置为行内的垂直分割线。
 
 ## en-US
 
-Use `type="vertical"` to make the divider vertical.
+Use `orientation="vertical"` or `vertical` to make the divider vertical.
diff --git a/components/divider/demo/vertical.tsx b/components/divider/demo/vertical.tsx
index b919fd2f81..bf5fd9469c 100644
--- a/components/divider/demo/vertical.tsx
+++ b/components/divider/demo/vertical.tsx
@@ -4,9 +4,9 @@ import { Divider } from 'antd';
 const App: React.FC = () => (
   <>
     Text
-    <Divider type="vertical" />
+    <Divider orientation="vertical" />
     <a href="#">Link</a>
-    <Divider type="vertical" />
+    <Divider vertical />
     <a href="#">Link</a>
   </>
 );
diff --git a/components/divider/demo/with-text.md b/components/divider/demo/with-text.md
index 192e0f97b6..3f0b4e2d5c 100644
--- a/components/divider/demo/with-text.md
+++ b/components/divider/demo/with-text.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-分割线中带有文字，可以用 `orientation` 指定文字位置。
+分割线中带有文字，可以用 `titlePlacement` 指定文字位置。
 
 ## en-US
 
-Divider with inner title, set `orientation="left/right"` to align it.
+Divider with inner title, set `titlePlacement="start/end"` to align it.
diff --git a/components/divider/demo/with-text.tsx b/components/divider/demo/with-text.tsx
index 6ab8d841f7..02772d0c28 100644
--- a/components/divider/demo/with-text.tsx
+++ b/components/divider/demo/with-text.tsx
@@ -12,25 +12,25 @@ const App: React.FC = () => (
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="left">Left Text</Divider>
+    <Divider titlePlacement="start">Left Text</Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="right">Right Text</Divider>
+    <Divider titlePlacement="end">Right Text</Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="left" orientationMargin="0">
-      Left Text with 0 orientationMargin
+    <Divider titlePlacement="start" styles={{ content: { margin: 0 } }}>
+      Left Text margin with 0
     </Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-    <Divider orientation="right" orientationMargin={50}>
-      Right Text with 50px orientationMargin
+    <Divider titlePlacement="end" styles={{ content: { margin: '0 50px' } }}>
+      Right Text margin with 50px
     </Divider>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md
index e3fa2fce94..857e937629 100644
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@@ -37,13 +37,15 @@ Common props ref：[Common props](/docs/react/common-props)
 | children | The wrapped title | ReactNode | - |  |
 | className | The className of container | string | - |  |
 | dashed | Whether line is dashed | boolean | false |  |
-| variant | Whether line is dashed, dotted or solid | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 |
-| orientation | The position of title inside divider | `start` \| `end` \| `center` | `center` | `start` `end`: 5.24.0 |
-| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` should not be `center`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - |  |
+| orientation | Whether line is horizontal or vertical | `horizontal` \| `vertical` | `horizontal` | - |
+| ~~orientationMargin~~ | The margin-left/right between the title and its closest border, while the `titlePlacement` should not be `center`, If a numeric value of type `string` is provided without a unit, it is assumed to be in pixels (px) by default. | string \| number | - |  |
 | plain | Divider text show as plain style | boolean | true | 4.2.0 |
 | style | The style object of container | CSSProperties | - |  |
 | size | The size of divider. Only valid for horizontal layout | `small` \| `middle` \| `large` | - | 5.25.0 |
-| type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |
+| titlePlacement | The position of title inside divider | `start` \| `end` \| `center` | `center` | - |
+| ~~type~~ | The direction type of divider | `horizontal` \| `vertical` | `horizontal` | - |
+| variant | Whether line is dashed, dotted or solid | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 |
+| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | - |
 
 ## Semantic DOM
 
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index 66c12a29a4..dee06ebf68 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import cls from 'classnames';
 
 import useMergeSemantic from '../_util/hooks/useMergeSemantic';
+import useOrientation from '../_util/hooks/useOrientation';
+import type { Orientation } from '../_util/hooks/useOrientation';
 import { devUseWarning } from '../_util/warning';
 import { useComponentConfig } from '../config-provider/context';
 import useSize from '../config-provider/hooks/useSize';
@@ -10,18 +12,21 @@ import useStyle from './style';
 
 type SemanticName = 'root' | 'rail' | 'content';
 
+export type TitlePlacement =
+  | 'left'
+  | 'right'
+  | 'center'
+  | 'start' // 👈 5.24.0+
+  | 'end'; // 👈 5.24.0+
+const titlePlacementList = ['left', 'right', 'center', 'start', 'end'];
 export interface DividerProps {
   prefixCls?: string;
-  type?: 'horizontal' | 'vertical';
-  /**
-   * @default center
-   */
-  orientation?:
-    | 'left'
-    | 'right'
-    | 'center'
-    | 'start' // 👈 5.24.0+
-    | 'end'; // 👈 5.24.0+
+  /**  @deprecated please use `orientation`*/
+  type?: Orientation;
+  orientation?: Orientation;
+  vertical?: boolean;
+  titlePlacement?: TitlePlacement;
+  /** @deprecated please use `styles.content.margin` */
   orientationMargin?: string | number;
   className?: string;
   rootClassName?: string;
@@ -40,7 +45,6 @@ export interface DividerProps {
 }
 
 const sizeClassNameMap: Record<string, string> = { small: 'sm', middle: 'md' };
-
 const Divider: React.FC<DividerProps> = (props) => {
   const {
     getPrefixCls,
@@ -53,8 +57,10 @@ const Divider: React.FC<DividerProps> = (props) => {
 
   const {
     prefixCls: customizePrefixCls,
-    type = 'horizontal',
-    orientation = 'center',
+    type,
+    orientation,
+    vertical,
+    titlePlacement,
     orientationMargin,
     className,
     rootClassName,
@@ -68,6 +74,7 @@ const Divider: React.FC<DividerProps> = (props) => {
     styles,
     ...restProps
   } = props;
+
   const prefixCls = getPrefixCls('divider', customizePrefixCls);
   const railCls = `${prefixCls}-rail`;
   const [mergedClassNames, mergedStyles] = useMergeSemantic(
@@ -82,29 +89,34 @@ const Divider: React.FC<DividerProps> = (props) => {
 
   const hasChildren = !!children;
 
-  const mergedOrientation = React.useMemo<'start' | 'end' | 'center'>(() => {
-    if (orientation === 'left') {
+  const validTitlePlacement = titlePlacementList.includes(orientation || '');
+  const mergedTitlePlacement = React.useMemo<'start' | 'end' | 'center'>(() => {
+    const placement =
+      titlePlacement ?? (validTitlePlacement ? (orientation as TitlePlacement) : 'center');
+    if (placement === 'left') {
       return direction === 'rtl' ? 'end' : 'start';
     }
-    if (orientation === 'right') {
+    if (placement === 'right') {
       return direction === 'rtl' ? 'start' : 'end';
     }
-    return orientation;
+    return placement;
   }, [direction, orientation]);
 
-  const hasMarginStart = mergedOrientation === 'start' && orientationMargin != null;
+  const hasMarginStart = mergedTitlePlacement === 'start' && orientationMargin != null;
 
-  const hasMarginEnd = mergedOrientation === 'end' && orientationMargin != null;
+  const hasMarginEnd = mergedTitlePlacement === 'end' && orientationMargin != null;
+
+  const [mergedOrientation, mergedVertical] = useOrientation(orientation, vertical, type);
 
   const classString = cls(
     prefixCls,
     dividerClassName,
     hashId,
     cssVarCls,
-    `${prefixCls}-${type}`,
+    `${prefixCls}-${mergedOrientation}`,
     {
       [`${prefixCls}-with-text`]: hasChildren,
-      [`${prefixCls}-with-text-${mergedOrientation}`]: hasChildren,
+      [`${prefixCls}-with-text-${mergedTitlePlacement}`]: hasChildren,
       [`${prefixCls}-dashed`]: !!dashed,
       [`${prefixCls}-${variant}`]: variant !== 'solid',
       [`${prefixCls}-plain`]: !!plain,
@@ -120,7 +132,7 @@ const Divider: React.FC<DividerProps> = (props) => {
     mergedClassNames.root,
   );
 
-  const memoizedOrientationMargin = React.useMemo<string | number>(() => {
+  const memoizedPlacementMargin = React.useMemo<string | number>(() => {
     if (typeof orientationMargin === 'number') {
       return orientationMargin;
     }
@@ -131,20 +143,26 @@ const Divider: React.FC<DividerProps> = (props) => {
   }, [orientationMargin]);
 
   const innerStyle: React.CSSProperties = {
-    marginInlineStart: hasMarginStart ? memoizedOrientationMargin : undefined,
-    marginInlineEnd: hasMarginEnd ? memoizedOrientationMargin : undefined,
-    ...mergedStyles.content,
+    marginInlineStart: hasMarginStart ? memoizedPlacementMargin : undefined,
+    marginInlineEnd: hasMarginEnd ? memoizedPlacementMargin : undefined,
   };
 
-  // Warning children not work in vertical mode
+  // =================== Warning =====================
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Divider');
 
+    warning(!children || !mergedVertical, 'usage', '`children` not working in `vertical` mode.');
     warning(
-      !children || type !== 'vertical',
+      !validTitlePlacement,
       'usage',
-      '`children` not working in `vertical` mode.',
+      '`orientation` is used for direction, please use `titlePlacement` replace this',
     );
+    [
+      ['type', 'orientation'],
+      ['orientationMargin', 'styles.content.margin'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
   }
 
   return (
@@ -159,7 +177,7 @@ const Divider: React.FC<DividerProps> = (props) => {
       {...restProps}
       role="separator"
     >
-      {children && type !== 'vertical' && (
+      {children && !mergedVertical && (
         <>
           <div
             className={cls(railCls, `${railCls}-start`, mergedClassNames.rail)}
@@ -167,7 +185,7 @@ const Divider: React.FC<DividerProps> = (props) => {
           />
           <span
             className={cls(`${prefixCls}-inner-text`, mergedClassNames.content)}
-            style={innerStyle}
+            style={{ ...innerStyle, ...mergedStyles.content }}
           >
             {children}
           </span>
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index 6aa9dae7cd..ce6e54434d 100644
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@@ -38,13 +38,15 @@ group:
 | children | 嵌套的标题 | ReactNode | - |  |
 | className | 分割线样式类 | string | - |  |
 | dashed | 是否虚线 | boolean | false |  |
-| variant | 分割线是虚线、点线还是实线 | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 |
-| orientation | 分割线标题的位置 | `start` \| `end` \| `center` | `center` | `start` `end`: 5.24.0 |
-| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 不能为 `center`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - |  |
+| orientation | 水平或垂直类型 | `horizontal` \| `vertical` | `horizontal` | - |
+| ~~orientationMargin~~ | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `titlePlacement` 不能为 `center`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - |  |
 | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
 | style | 分割线样式对象 | CSSProperties | - |  |
 | size | 间距大小，仅对水平布局有效 | `small` \| `middle` \| `large` | - | 5.25.0 |
-| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |
+| titlePlacement | 分割线标题的位置 | `start` \| `end` \| `center` | `center` | - |
+| ~~type~~ | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | - |
+| variant | 分割线是虚线、点线还是实线 | `dashed` \| `dotted` \| `solid` | solid | 5.20.0 |
+| vertical | 是否垂直，和 orientation 同时配置以 orientation 优先 | boolean | false | - |
 
 ## Semantic DOM
 
diff --git a/components/divider/style/index.ts b/components/divider/style/index.ts
index b65cc8fc1e..3437985fe1 100644
--- a/components/divider/style/index.ts
+++ b/components/divider/style/index.ts
@@ -17,7 +17,7 @@ export interface ComponentToken {
    * @desc 文本与边缘距离，取值 0 ～ 1
    * @descEN Distance between text and edge, which should be a number between 0 and 1.
    */
-  orientationMargin: number;
+  orientationMargin?: number;
   /**
    * @desc 纵向分割线的横向外间距
    * @descEN Horizontal margin of vertical Divider
diff --git a/components/grid/demo/flex-align.tsx b/components/grid/demo/flex-align.tsx
index f69472d09b..fce2b572e8 100644
--- a/components/grid/demo/flex-align.tsx
+++ b/components/grid/demo/flex-align.tsx
@@ -7,7 +7,7 @@ const DemoBox: React.FC<React.PropsWithChildren<{ value: number }>> = (props) =>
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Align Top</Divider>
+    <Divider titlePlacement="start">Align Top</Divider>
     <Row justify="center" align="top">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
@@ -23,7 +23,7 @@ const App: React.FC = () => (
       </Col>
     </Row>
 
-    <Divider orientation="left">Align Middle</Divider>
+    <Divider titlePlacement="start">Align Middle</Divider>
     <Row justify="space-around" align="middle">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
@@ -39,7 +39,7 @@ const App: React.FC = () => (
       </Col>
     </Row>
 
-    <Divider orientation="left">Align Bottom</Divider>
+    <Divider titlePlacement="start">Align Bottom</Divider>
     <Row justify="space-between" align="bottom">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
diff --git a/components/grid/demo/flex-order.tsx b/components/grid/demo/flex-order.tsx
index aef7ca623a..5643990510 100644
--- a/components/grid/demo/flex-order.tsx
+++ b/components/grid/demo/flex-order.tsx
@@ -3,7 +3,7 @@ import { Col, Divider, Row } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Normal</Divider>
+    <Divider titlePlacement="start">Normal</Divider>
     <Row>
       <Col span={6} order={4}>
         1 col-order-4
@@ -18,7 +18,7 @@ const App: React.FC = () => (
         4 col-order-1
       </Col>
     </Row>
-    <Divider orientation="left">Responsive</Divider>
+    <Divider titlePlacement="start">Responsive</Divider>
     <Row>
       <Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>
         1 col-order-responsive
diff --git a/components/grid/demo/flex-stretch.tsx b/components/grid/demo/flex-stretch.tsx
index 2abfb2df50..37c7426ca4 100644
--- a/components/grid/demo/flex-stretch.tsx
+++ b/components/grid/demo/flex-stretch.tsx
@@ -3,17 +3,17 @@ import { Col, Divider, Row } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Percentage columns</Divider>
+    <Divider titlePlacement="start">Percentage columns</Divider>
     <Row>
       <Col flex={2}>2 / 5</Col>
       <Col flex={3}>3 / 5</Col>
     </Row>
-    <Divider orientation="left">Fill rest</Divider>
+    <Divider titlePlacement="start">Fill rest</Divider>
     <Row>
       <Col flex="100px">100px</Col>
       <Col flex="auto">Fill Rest</Col>
     </Row>
-    <Divider orientation="left">Raw flex style</Divider>
+    <Divider titlePlacement="start">Raw flex style</Divider>
     <Row>
       <Col flex="1 1 200px">1 1 200px</Col>
       <Col flex="0 1 300px">0 1 300px</Col>
diff --git a/components/grid/demo/flex.tsx b/components/grid/demo/flex.tsx
index 9f3f988713..2f0474066d 100644
--- a/components/grid/demo/flex.tsx
+++ b/components/grid/demo/flex.tsx
@@ -3,7 +3,7 @@ import { Col, Divider, Row } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">sub-element align left</Divider>
+    <Divider titlePlacement="start">sub-element align left</Divider>
     <Row justify="start">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -11,7 +11,7 @@ const App: React.FC = () => (
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left">sub-element align center</Divider>
+    <Divider titlePlacement="start">sub-element align center</Divider>
     <Row justify="center">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -19,7 +19,7 @@ const App: React.FC = () => (
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left">sub-element align right</Divider>
+    <Divider titlePlacement="start">sub-element align right</Divider>
     <Row justify="end">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -27,7 +27,7 @@ const App: React.FC = () => (
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left">sub-element monospaced arrangement</Divider>
+    <Divider titlePlacement="start">sub-element monospaced arrangement</Divider>
     <Row justify="space-between">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -35,7 +35,7 @@ const App: React.FC = () => (
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left">sub-element align full</Divider>
+    <Divider titlePlacement="start">sub-element align full</Divider>
     <Row justify="space-around">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -43,7 +43,7 @@ const App: React.FC = () => (
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left">sub-element align evenly</Divider>
+    <Divider titlePlacement="start">sub-element align evenly</Divider>
     <Row justify="space-evenly">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
diff --git a/components/grid/demo/gutter.tsx b/components/grid/demo/gutter.tsx
index faad96a1ab..cde766db51 100644
--- a/components/grid/demo/gutter.tsx
+++ b/components/grid/demo/gutter.tsx
@@ -5,7 +5,7 @@ const style: React.CSSProperties = { background: '#0092ff', padding: '8px 0' };
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Horizontal</Divider>
+    <Divider titlePlacement="start">Horizontal</Divider>
     <Row gutter={16}>
       <Col className="gutter-row" span={6}>
         <div style={style}>col-6</div>
@@ -20,7 +20,7 @@ const App: React.FC = () => (
         <div style={style}>col-6</div>
       </Col>
     </Row>
-    <Divider orientation="left">Responsive</Divider>
+    <Divider titlePlacement="start">Responsive</Divider>
     <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
       <Col className="gutter-row" span={6}>
         <div style={style}>col-6</div>
@@ -35,7 +35,7 @@ const App: React.FC = () => (
         <div style={style}>col-6</div>
       </Col>
     </Row>
-    <Divider orientation="left">Vertical</Divider>
+    <Divider titlePlacement="start">Vertical</Divider>
     <Row gutter={[16, 24]}>
       <Col className="gutter-row" span={6}>
         <div style={style}>col-6</div>
diff --git a/components/list/demo/component-token.tsx b/components/list/demo/component-token.tsx
index bae52bd033..09a5b1fb08 100644
--- a/components/list/demo/component-token.tsx
+++ b/components/list/demo/component-token.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => (
       },
     }}
   >
-    <Divider orientation="left">Default Size</Divider>
+    <Divider titlePlacement="start">Default Size</Divider>
     <List
       header={<div>Header</div>}
       footer={<div>Footer</div>}
@@ -55,7 +55,7 @@ const App: React.FC = () => (
         </List.Item>
       )}
     />
-    <Divider orientation="left">Small Size</Divider>
+    <Divider titlePlacement="start">Small Size</Divider>
     <List
       size="small"
       header={<div>Header</div>}
@@ -64,7 +64,7 @@ const App: React.FC = () => (
       dataSource={data}
       renderItem={(item) => <List.Item>{item}</List.Item>}
     />
-    <Divider orientation="left">Large Size</Divider>
+    <Divider titlePlacement="start">Large Size</Divider>
     <List
       size="large"
       header={<div>Header</div>}
@@ -73,7 +73,7 @@ const App: React.FC = () => (
       dataSource={data}
       renderItem={(item) => <List.Item>{item}</List.Item>}
     />
-    <Divider orientation="left">Meta</Divider>
+    <Divider titlePlacement="start">Meta</Divider>
     <List
       itemLayout="horizontal"
       dataSource={data1}
@@ -87,7 +87,7 @@ const App: React.FC = () => (
         </List.Item>
       )}
     />
-    <Divider orientation="left">Vertical</Divider>
+    <Divider titlePlacement="start">Vertical</Divider>
     <List
       itemLayout="vertical"
       dataSource={data1}
@@ -101,7 +101,7 @@ const App: React.FC = () => (
         </List.Item>
       )}
     />
-    <Divider orientation="left">Empty Text</Divider>
+    <Divider titlePlacement="start">Empty Text</Divider>
     <List />
   </ConfigProvider>
 );
diff --git a/components/list/demo/simple.tsx b/components/list/demo/simple.tsx
index 1724f6e3d9..0abeb716bf 100644
--- a/components/list/demo/simple.tsx
+++ b/components/list/demo/simple.tsx
@@ -11,7 +11,7 @@ const data = [
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Default Size</Divider>
+    <Divider titlePlacement="start">Default Size</Divider>
     <List
       header={<div>Header</div>}
       footer={<div>Footer</div>}
@@ -23,7 +23,7 @@ const App: React.FC = () => (
         </List.Item>
       )}
     />
-    <Divider orientation="left">Small Size</Divider>
+    <Divider titlePlacement="start">Small Size</Divider>
     <List
       size="small"
       header={<div>Header</div>}
@@ -32,7 +32,7 @@ const App: React.FC = () => (
       dataSource={data}
       renderItem={(item) => <List.Item>{item}</List.Item>}
     />
-    <Divider orientation="left">Large Size</Divider>
+    <Divider titlePlacement="start">Large Size</Divider>
     <List
       size="large"
       header={<div>Header</div>}
diff --git a/components/menu/demo/switch-mode.tsx b/components/menu/demo/switch-mode.tsx
index 762bf4f13b..85d70af512 100644
--- a/components/menu/demo/switch-mode.tsx
+++ b/components/menu/demo/switch-mode.tsx
@@ -78,7 +78,7 @@ const App: React.FC = () => {
   return (
     <>
       <Switch onChange={changeMode} /> Change Mode
-      <Divider type="vertical" />
+      <Divider vertical />
       <Switch onChange={changeTheme} /> Change Style
       <br />
       <br />
diff --git a/components/skeleton/demo/_semantic_element.tsx b/components/skeleton/demo/_semantic_element.tsx
index 3fa08d495e..0713452d5c 100644
--- a/components/skeleton/demo/_semantic_element.tsx
+++ b/components/skeleton/demo/_semantic_element.tsx
@@ -50,7 +50,7 @@ const PreviewContent: React.FC<PreviewContentProps> = ({ element, setElement, ..
         value={element}
         onChange={(value: string) => setElement(value)}
       />
-      <Divider orientation="left" plain>
+      <Divider titlePlacement="start" plain>
         Preview
       </Divider>
       <Element {...rest} />
diff --git a/components/space/demo/split.tsx b/components/space/demo/split.tsx
index 016289facc..e455f9542c 100644
--- a/components/space/demo/split.tsx
+++ b/components/space/demo/split.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Divider, Space, Typography } from 'antd';
 
 const App: React.FC = () => (
-  <Space split={<Divider type="vertical" />}>
+  <Space split={<Divider vertical />}>
     <Typography.Link>Link</Typography.Link>
     <Typography.Link>Link</Typography.Link>
     <Typography.Link>Link</Typography.Link>
diff --git a/components/tag/demo/colorful.tsx b/components/tag/demo/colorful.tsx
index d396a314a5..ce6777180d 100644
--- a/components/tag/demo/colorful.tsx
+++ b/components/tag/demo/colorful.tsx
@@ -21,7 +21,7 @@ const App: React.FC = () => (
   <>
     {variants.map((variant) => (
       <div key={variant}>
-        <Divider orientation="left">Presets ({variant})</Divider>
+        <Divider titlePlacement="start">Presets ({variant})</Divider>
         <Flex gap="small" align="center" wrap>
           {presets.map((color) => (
             <Tag key={color} color={color} variant={variant}>
@@ -33,7 +33,7 @@ const App: React.FC = () => (
     ))}
     {variants.map((variant) => (
       <div key={variant}>
-        <Divider orientation="left">Custom ({variant})</Divider>
+        <Divider titlePlacement="start">Custom ({variant})</Divider>
         <Flex gap="small" align="center" wrap>
           {customs.map((color) => (
             <Tag key={color} color={color} variant={variant}>
diff --git a/components/tag/demo/status.tsx b/components/tag/demo/status.tsx
index 83ca990f84..a7205114eb 100644
--- a/components/tag/demo/status.tsx
+++ b/components/tag/demo/status.tsx
@@ -21,7 +21,7 @@ const App: React.FC = () => (
   <>
     {variants.map((variant) => (
       <div key={variant}>
-        <Divider orientation="left">Status ({variant})</Divider>
+        <Divider titlePlacement="start">Status ({variant})</Divider>
         <Flex gap="small" align="center" wrap>
           {presets.map(({ status, icon }) => (
             <Tag key={status} color={status} icon={icon} variant={variant}>
diff --git a/components/tooltip/demo/colorful.tsx b/components/tooltip/demo/colorful.tsx
index d7b2676836..a1a4936b04 100644
--- a/components/tooltip/demo/colorful.tsx
+++ b/components/tooltip/demo/colorful.tsx
@@ -21,7 +21,7 @@ const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
 
 const App: React.FC = () => (
   <>
-    <Divider orientation="left">Presets</Divider>
+    <Divider titlePlacement="start">Presets</Divider>
     <Space wrap>
       {colors.map((color) => (
         <Tooltip title="prompt text" color={color} key={color}>
@@ -29,7 +29,7 @@ const App: React.FC = () => (
         </Tooltip>
       ))}
     </Space>
-    <Divider orientation="left">Custom</Divider>
+    <Divider titlePlacement="start">Custom</Divider>
     <Space wrap>
       {customColors.map((color) => (
         <Tooltip title="prompt text" color={color} key={color}>