New component divider (ant-design#7261)

* Add Divider

* use Divider in table demos

* update demo instruction

* upgrade snapshots

components/__tests__/__snapshots__/index.test.js.snap

@@ -19,6 +19,7 @@ Array [
   "Checkbox",
   "Col",
   "DatePicker",
+  "Divider",
   "Dropdown",
   "Form",
   "Icon",

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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"
+  />
+  <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>
+  <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/vertical.md correctly 1`] = `
+<div>
+  Text
+  <div
+    class="ant-divider ant-divider-vertical"
+  />
+  <a
+    href="#"
+  >
+    Link
+  </a>
+  <div
+    class="ant-divider ant-divider-vertical"
+  />
+  <a
+    href="#"
+  >
+    Link
+  </a>
+</div>
+`;

components/divider/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('divider');

components/divider/demo/horizontal.md

@@ -0,0 +1,28 @@
+---
+order: 0
+title:
+  zh-CN: 水平分割线
+  en-US: Horizontal
+---
+
+## zh-CN
+
+默认为水平分割线，可在中间加入文字。
+
+## en-US
+
+Divider default type is `horizontal`. Support inner text inside Divider.
+
+````jsx
+import { Divider } from 'antd';
+
+ReactDOM.render(
+  <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>
+    <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>With 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>
+  </div>
+, mountNode);
+````

components/divider/demo/vertical.md

@@ -0,0 +1,28 @@
+---
+order: 1
+title:
+  zh-CN: 垂直分割线
+  en-US: Vertical
+---
+
+## zh-CN
+
+使用 `type="vertical"` 设置为行内的垂直分割线。
+
+## en-US
+
+Use `type="vertical"` make it vertical.
+
+````jsx
+import { Divider } from 'antd';
+
+ReactDOM.render(
+  <div>
+    Text
+    <Divider type="vertical" />
+    <a href="#">Link</a>
+    <Divider type="vertical" />
+    <a href="#">Link</a>
+  </div>
+, mountNode);
+````

components/divider/index.en-US.md

@@ -0,0 +1,21 @@
+---
+category: Components
+type: Other
+title: Divider
+cols: 1
+---
+
+A divider line separates different content.
+
+## When To Use
+
+- Divide sections of article.
+- Divide inline text and links such as the operation column of table.
+
+## API
+
+### Divider
+
+Property | Description | Type | Default
+---------|-------------|------|--------
+type | direction type of divider | enum: `horizontal` `vertical` | `horizontal`

components/divider/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export default function Divider({
+  prefixCls = 'ant',
+  type = 'horizontal',
+  className,
+  children,
+  ...restProps,
+}) {
+  const classString = classNames(className, `${prefixCls}-divider`, {
+    [`${prefixCls}-divider-${type}`]: true,
+    [`${prefixCls}-divider-with-text`]: children,
+  });
+  return (
+    <div className={classString} {...restProps}>
+      {children && <span className={`${prefixCls}-divider-inner-text`}>{children}</span>}
+    </div>
+  );
+}

components/divider/index.zh-CN.md

@@ -0,0 +1,19 @@
+---
+category: Components
+type: Other
+title: Divider
+subtitle: 分割线
+---
+
+区隔内容的分割线。
+
+## 何时使用
+
+- 对不同章节的文本段落进行分割。
+- 对行内文字/链接进行分割，例如表格的操作列。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|-----|------|------
+type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal`

components/divider/style/index.less

@@ -0,0 +1,51 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@divider-prefix-cls: ~"@{ant-prefix}-divider";
+
+.@{divider-prefix-cls} {
+  background: @border-color-split;
+
+  &,  // for compatiable
+  &-vertical {
+    margin: 0 8px;
+    display: inline-block;
+    height: 0.9em;
+    width: 1px;
+    vertical-align: middle;
+    position: relative;
+    top: -0.06em;
+  }
+  &-horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+  }
+  &-horizontal&-with-text {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: 16px;
+    margin: 16px 0;
+
+    &:before,
+    &:after {
+    content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 50%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+  }
+
+  &-inner-text {
+    display: inline-block;
+    padding: 0 24px;
+  }
+}

components/divider/style/index.tsx

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/index.tsx

@@ -45,6 +45,8 @@ export { default as Col } from './col';
 
 export { default as DatePicker } from './date-picker';
 
+export { default as Divider } from './divider';
+
 export { default as Dropdown } from './dropdown';
 
 export { default as Form } from './form';

components/style/core/base.less

@@ -100,14 +100,6 @@ a {
   }
 }
 
-.@{ant-prefix}-divider {
-  margin: 0 6px;
-  display: inline-block;
-  height: 8px;
-  width: 1px;
-  background: #ccc;
-}
-
 code,
 kbd,
 pre,