From 2ee50b4066696cc1a5e7627fdbc65c287a1b5104 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Wed, 12 Feb 2020 19:44:45 +0800
Subject: [PATCH] feat: update divider

---
 build/config.js                               |  2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 58 ++++++++++++-------
 components/divider/__tests__/index.test.js    |  6 ++
 components/divider/demo/customize-style.md    | 20 +++++++
 components/divider/demo/horizontal.md         |  2 +-
 components/divider/demo/index.vue             |  4 +-
 components/divider/demo/orientation.md        | 26 ---------
 components/divider/demo/with-text.md          | 35 +++++++++++
 components/divider/index.jsx                  |  6 +-
 9 files changed, 106 insertions(+), 53 deletions(-)
 create mode 100644 components/divider/__tests__/index.test.js
 create mode 100644 components/divider/demo/customize-style.md
 delete mode 100644 components/divider/demo/orientation.md
 create mode 100644 components/divider/demo/with-text.md

diff --git a/build/config.js b/build/config.js
index 6e922620b..f404819ae 100644
--- a/build/config.js
+++ b/build/config.js
@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'date-picker', // dev components
+    componentName: 'divider', // dev components
   },
 };
diff --git a/components/divider/__tests__/__snapshots__/demo.test.js.snap b/components/divider/__tests__/__snapshots__/demo.test.js.snap
index e65fca04b..df6061b76 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.js.snap
@@ -1,37 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/divider/demo/customize-style.md correctly 1`] = `
+<div>
+  <div role="separator" class="ant-divider ant-divider-horizontal" style="height: 2px; background-color: rgb(124, 179, 5);"></div>
+  <div role="separator" class="ant-divider ant-divider-horizontal ant-divider-dashed" style="border-color: #7cb305;"></div>
+  <div role="separator" class="ant-divider ant-divider-vertical" style="height: 60px; background-color: rgb(124, 179, 5);"></div>
+  <div role="separator" class="ant-divider ant-divider-vertical ant-divider-dashed" style="height: 60px; border-color: #7cb305;"></div>
+</div>
+`;
+
 exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
 <div>
   <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>
-  <div class="ant-divider ant-divider-horizontal"></div>
+  <div role="separator" class="ant-divider ant-divider-horizontal"></div>
   <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>
-  <div class="ant-divider ant-divider-horizontal ant-divider-with-text"><span class="ant-divider-inner-text">With Text</span></div>
+  <div role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-center"><span class="ant-divider-inner-text">With Text</span></div>
   <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>
-  <div class="ant-divider ant-divider-horizontal ant-divider-dashed"></div>
-  <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>
-</div>
-`;
-
-exports[`renders ./components/divider/demo/orientation.md correctly 1`] = `
-<div>
-  <div class="ant-divider ant-divider-horizontal ant-divider-with-text-left"><span class="ant-divider-inner-text">Left Text</span></div>
-  <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>
-  <div class="ant-divider ant-divider-horizontal ant-divider-with-text-right"><span class="ant-divider-inner-text">Right Text</span></div>
+  <div role="separator" class="ant-divider ant-divider-horizontal ant-divider-dashed"></div>
   <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.
@@ -42,7 +36,31 @@ exports[`renders ./components/divider/demo/orientation.md correctly 1`] = `
 exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
 <div>
   Text
-  <div class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
-  <div class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
+  <div role="separator" class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
+  <div role="separator" class="ant-divider ant-divider-vertical"></div> <a href="#">Link</a>
+</div>
+`;
+
+exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
+<div>
+  <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>
+  <div role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-center"><span class="ant-divider-inner-text">Text</span></div>
+  <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>
+  <div role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-left"><span class="ant-divider-inner-text">Left Text</span></div>
+  <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>
+  <div role="separator" class="ant-divider ant-divider-horizontal ant-divider-with-text-right"><span class="ant-divider-inner-text">Right Text</span></div>
+  <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>
 </div>
 `;
diff --git a/components/divider/__tests__/index.test.js b/components/divider/__tests__/index.test.js
new file mode 100644
index 000000000..59763af9a
--- /dev/null
+++ b/components/divider/__tests__/index.test.js
@@ -0,0 +1,6 @@
+import Divider from '..';
+import mountTest from '../../../tests/shared/mountTest';
+
+describe('Divider', () => {
+  mountTest(Divider);
+});
diff --git a/components/divider/demo/customize-style.md b/components/divider/demo/customize-style.md
new file mode 100644
index 000000000..580c52b59
--- /dev/null
+++ b/components/divider/demo/customize-style.md
@@ -0,0 +1,20 @@
+<cn>
+#### 样式自定义
+测试一些 `style` 修改样式的行为。
+</cn>
+
+<us>
+#### Style Customization
+Use `style` to change default style.
+</us>
+
+```tpl
+<template>
+  <div>
+    <a-divider style="height: 2px; background-color: #7cb305" />
+    <a-divider style="border-color: #7cb305" dashed />
+    <a-divider type="vertical" style="height: 60px; background-color: #7cb305" />
+    <a-divider type="vertical" style="height: 60px; border-color: #7cb305" dashed />
+  </div>
+</template>
+```
diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md
index a605e7318..7c623d56f 100644
--- a/components/divider/demo/horizontal.md
+++ b/components/divider/demo/horizontal.md
@@ -5,7 +5,7 @@
 
 <us>
 #### Horizontal
-Divider default type is `horizontal`. Support inner text inside Divider.
+Divider is `horizontal` by default. You can add text within Divider.
 </us>
 
 ```tpl
diff --git a/components/divider/demo/index.vue b/components/divider/demo/index.vue
index c7ea21887..08016c020 100644
--- a/components/divider/demo/index.vue
+++ b/components/divider/demo/index.vue
@@ -1,7 +1,7 @@
 <script>
 import Horizontal from './horizontal';
 import Vertical from './vertical';
-import Orientation from './orientation';
+import WithText from './with-text';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 const md = {
@@ -32,7 +32,7 @@ export default {
         <md cn={md.cn} us={md.us} />
         <Vertical />
         <Horizontal />
-        <Orientation />
+        <WithText />
         <api>
           <CN slot="cn" />
           <US />
diff --git a/components/divider/demo/orientation.md b/components/divider/demo/orientation.md
deleted file mode 100644
index d5913f207..000000000
--- a/components/divider/demo/orientation.md
+++ /dev/null
@@ -1,26 +0,0 @@
-<cn>
-#### 标题位置
-修改分割线标题的位置。
-</cn>
-
-<us>
-#### Orientation of title
-Set orientation of divider to left or right.
-</us>
-
-```tpl
-<template>
-  <div>
-    <a-divider orientation="left">Left Text</a-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>
-    <a-divider orientation="right">Right Text</a-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>
-  </div>
-</template>
-```
diff --git a/components/divider/demo/with-text.md b/components/divider/demo/with-text.md
new file mode 100644
index 000000000..03419fc60
--- /dev/null
+++ b/components/divider/demo/with-text.md
@@ -0,0 +1,35 @@
+<cn>
+#### 带文字的分割线
+分割线中带有文字，可以用 `orientation` 指定文字位置。
+</cn>
+
+<us>
+#### Divider with title
+Divider with inner title, set `orientation="left/right"` to align it.
+</us>
+
+```tpl
+<template>
+  <div>
+    <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>
+    <a-divider>Text</a-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>
+    <a-divider orientation="left">Left Text</a-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>
+    <a-divider orientation="right">Right Text</a-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>
+  </div>
+</template>
+```
diff --git a/components/divider/index.jsx b/components/divider/index.jsx
index e83501e8a..2838bc66f 100644
--- a/components/divider/index.jsx
+++ b/components/divider/index.jsx
@@ -8,13 +8,13 @@ const Divider = {
     prefixCls: PropTypes.string,
     type: PropTypes.oneOf(['horizontal', 'vertical', '']).def('horizontal'),
     dashed: PropTypes.bool,
-    orientation: PropTypes.oneOf(['left', 'right']),
+    orientation: PropTypes.oneOf(['left', 'right', 'center']),
   },
   inject: {
     configProvider: { default: () => ConfigConsumerProps },
   },
   render() {
-    const { prefixCls: customizePrefixCls, type, $slots, dashed, orientation = '' } = this;
+    const { prefixCls: customizePrefixCls, type, $slots, dashed, orientation = 'center' } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('divider', customizePrefixCls);
     const orientationPrefix = orientation.length > 0 ? '-' + orientation : orientation;
@@ -27,7 +27,7 @@ const Divider = {
     };
 
     return (
-      <div class={classString}>
+      <div class={classString} role="separator">
         {$slots.default && <span class={`${prefixCls}-inner-text`}>{$slots.default}</span>}
       </div>
     );