Divider orientation feature (#9275)

User can align the text to the left or right with "orientation" prop, if not set it will be centered.
ant-design · Feb 11, 2018 · 0e591ef · 0e591ef
1 parent e8fa1f1
commit 0e591ef
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 3 deletions.
diff --git a/components/divider/__tests__/__snapshots__/demo.test.js.snap b/components/divider/__tests__/__snapshots__/demo.test.js.snap
@@ -29,6 +29,30 @@ exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
   <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-left"
+  >
+    <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-with-text-right"
+  >
+    <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>
 `;
 

diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md
@@ -25,6 +25,10 @@ ReactDOM.render(
     <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 dashed />
     <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">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>
+    <Divider orientation="right">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);
 ````
diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md
@@ -20,3 +20,4 @@ A divider line separates different content.
 | -------- | ----------- | ---- | ------- |
 | dashed | whether line is dasded | Boolean | false |
 | type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
+| orientation | this is optional, if not set it will have the text in the center | enum: `left` `right` | `center` |
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 export interface DividerProps {
   prefixCls?: string;
   type?: 'horizontal' | 'vertical';
+  orientation?: 'left' | 'right';
   className?: string;
   children?: React.ReactNode;
   dashed?: boolean;
@@ -13,14 +14,16 @@ export interface DividerProps {
 export default function Divider({
   prefixCls = 'ant',
   type = 'horizontal',
+  orientation = '',
   className,
   children,
   dashed,
   ...restProps,
 }: DividerProps) {
+  const orientationPrefix = (orientation.length > 0) ? '-' + orientation : orientation;
   const classString = classNames(
     className, `${prefixCls}-divider`, `${prefixCls}-divider-${type}`, {
-    [`${prefixCls}-divider-with-text`]: children,
+    [`${prefixCls}-divider-with-text${orientationPrefix}`]: children,
     [`${prefixCls}-divider-dashed`]: !!dashed,
   });
   return (

diff --git a/components/divider/style/index.less b/components/divider/style/index.less
@@ -44,17 +44,81 @@
       transform: translateY(50%);
     }
   }
-
   &-inner-text {
     display: inline-block;
     padding: 0 24px;
   }
+  &-horizontal&-with-text-left {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-base;
+    margin: 16px 0;
+
+    &:before {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 5%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 95%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &-inner-text {
+      display: inline-block;
+      padding: 0 10px;
+    }
+  }
 
+  &-horizontal&-with-text-right {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: @heading-color;
+    font-size: @font-size-base;
+    margin: 16px 0;
+
+    &:before {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 95%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 5%;
+      border-top: 1px solid @border-color-split;
+      transform: translateY(50%);
+    }
+    &-inner-text {
+      display: inline-block;
+      padding: 0 10px;
+    }
+  }
   &-dashed {
     background: none;
     border-top: 1px dashed @border-color-split;
   }
-
   &-horizontal&-with-text&-dashed {
     border-top: 0;
     &:before,