feat(Divider): unify orientation attribute usage (#53645)

* 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>
2025-06-07 17:44:35 +08:00 · 2025-06-03 14:09:56 +08:00 · 2025-06-03 14:09:56 +08:00 · b1467d6ec8
commit b1467d6ec8
parent df98f70dac
37 changed files with 220 additions and 151 deletions
--- 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>
--- 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)" />
--- 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}>
--- 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>
--- 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>
--- 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> }]}
--- 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>
--- 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>
--- 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>
--- 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"
--- 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"
--- 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');
+      }
+    });
+  });
 });
--- 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>
--- 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
--- 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>
--- 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>
--- 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.
--- 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>
  </>
 );
--- 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.
--- 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
--- 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

--- 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 interface DividerProps {
-  prefixCls?: string;
-  type?: 'horizontal' | 'vertical';
-  /**
-   * @default center
-   */
-  orientation?:
+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;
+  /**  @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>
--- 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

--- 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
--- 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>
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
 );
--- 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>}
--- 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 />
--- 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} />
--- 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>
--- 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}>
--- 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}>
--- 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}>