feat(Divider): add the divider component (#1378)

* feat(stylesheet): add the typography mixin and global z-index variables

* fix(stylesheet): fix

* docs(divider): add the stories of divider component

* feat(Divider): add divider component

style(divider): fix style

* feat(divider): add data-testid='divider' prop for divider

* docs(global): add the stories of typography and z-index

src/divider/Divider.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import React from 'react';
+import usePrefixCls from '../utils/hooks/use-prefix-cls';
+import WithRef from '../utils/withRef';
+import DividerProps from './interface';
+
+const Divider = WithRef<HTMLHRElement, DividerProps>((props, ref) => {
+  const { orientation = 'horizontal', flexItem = false, className, ...otherProps } = props;
+
+  const prefixCls = usePrefixCls('divider');
+  const classes = classNames([prefixCls, className], {
+    [`${prefixCls}_${orientation}`]: ['horizontal', 'vertical'].includes(orientation),
+    [`${prefixCls}_flex_item`]: flexItem,
+  });
+
+  return <hr ref={ref} className={classes} data-testid="divider" {...otherProps} />;
+});
+
+Divider.displayName = 'Divider';
+
+Divider.defaultProps = {
+  orientation: 'horizontal',
+  flexItem: false,
+};
+
+export default Divider;

src/divider/demos/Divider.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import Divider, { DividerProps } from '..';
+import Button from "../../button";
+import '../style';
+import './divider.style.less';
+
+export default {
+  title: 'Upgraded/Divider',
+  component: Divider,
+} as Meta;
+
+const HorizontalTemplate: Story<DividerProps> = (args) => (
+    <>
+      <h3 className="demo-divider-title">列表分割线</h3>
+      <ul className="demo-divider-ul">
+        <li>Apple</li>
+        <Divider {...args} />
+        <li>Orange</li>
+        <Divider {...args} />
+        <li>Pumpkin</li>
+        <Divider {...args} />
+        <li>Pineapple</li>
+      </ul>
+    </>
+  );
+
+export const Horizontal = HorizontalTemplate.bind({});
+Horizontal.args = {
+  orientation: 'horizontal',
+  flexItem: false,
+} as DividerProps;
+
+const VerticalTemplate: Story<DividerProps> = (args) => (
+    <>
+      <h3 className="demo-divider-title">行内元素的垂直分割线</h3>
+      <div className="demo-vertical">
+        <span>Apple</span>
+        <Divider {...args} />
+        <span>Orange</span>
+        <Divider {...args} />
+        <span>Pumpkin</span>
+        <Divider {...args} />
+        <span>Pineapple</span>
+      </div>
+    </>
+  );
+
+export const Vertical = VerticalTemplate.bind({});
+Vertical.args = {
+  orientation: 'vertical',
+  flexItem: false,
+} as DividerProps;
+
+const FlexItemTemplate: Story<DividerProps> = (args) => (
+    <>
+      <h3 className="demo-divider-title">适应 Flex 容器的垂直分割线</h3>
+      <div className="demo-flex">
+        <Button type="text">Apple</Button>
+        <Divider {...args} />
+        <Button type="text">Orange</Button>
+        <Divider {...args} />
+        <Button type="text">Pumpkin</Button>
+        <Divider {...args} />
+        <Button type="text">Pineapple</Button>
+      </div>
+    </>
+  );
+
+export const FlexItem = FlexItemTemplate.bind({});
+FlexItem.args = {
+  orientation: 'vertical',
+  flexItem: true,
+} as DividerProps;

src/divider/demos/divider.style.less

@@ -0,0 +1,22 @@
+.demo-divider-ul {
+  width: 400px;
+  padding: 0;
+  list-style: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.demo-divider-ul > li {
+  width: 100%;
+  height: 30px;
+  padding: 10px;
+  line-height: 30px;
+}
+
+.demo-flex {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}

src/divider/index.ts

@@ -0,0 +1,5 @@
+import Divider from './Divider';
+
+export type { default as DividerProps } from './interface';
+
+export default Divider;

src/divider/interface.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  /**
+   * 分割线的方向
+   * @default `horizontal`
+   */
+  orientation?: 'horizontal' | 'vertical';
+
+  /**
+   * 是否处于 flex 容器中。设置为 true，则能正确计算分割线的高度，否则高度为零。
+   * @default false
+   */
+  flexItem?: boolean;
+}
+
+export default DividerProps;

src/divider/style/divider.less

@@ -0,0 +1,22 @@
+@import '../../stylesheet/variables/index.less';
+
+@divider-prefix-cls: ~'@{component-prefix}-divider';
+
+.@{divider-prefix-cls} {
+  margin: 0;
+  border: 0 solid @gray-2;
+  border-top-width: thin;
+
+  &_vertical {
+    display: inline;
+    padding: 0 8px;
+    border-top-width: 0;
+    border-left-width: thin;
+  }
+
+  &_flex_item {
+    align-self: stretch;
+    height: auto;
+    margin: 0;
+  }
+}

src/divider/style/index.ts

@@ -0,0 +1 @@
+import './divider.less';

src/docs/2.Global.stories.mdx

@@ -34,6 +34,16 @@ import { TabsState } from '@storybook/components';
 @red-3: var(--red-3, #ec134b);
 ```
 
+### 组件层级
+
+```css
+@z-index-toast: 500;
+@z-index-popover: 400;
+@z-index-modal: 300;
+@z-index-drawer: 200;
+@z-index-table-fixed: 100;
+```
+
 ## Less Mixins
 
 ### 边框和阴影采用函数式
@@ -54,11 +64,57 @@ import { TabsState } from '@storybook/components';
 }
 ```
 
+### Typography 文字排版
+
+```css
+.text-h1() {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 32px;
+}
+
+.text-h2() {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+.text-h3() {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.text-h4() {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.text-h5() {
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.text-body1() {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.text-body2() {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
+}
+```
+
 ## Utils
 
 ### 大小更改为两种：small 和 normal
 
-```jsx
+```typescript
 type SizeType = 'small' | 'normal';
 
 useSize: () => SizeType;

src/index.ts

@@ -15,7 +15,7 @@ export { default as List, ListProps } from './components/list';
 export { default as ListPicker, ListPickerProps } from './list-picker';
 export { default as ListSelector, ListSelectorProps } from './list-selector';
 export { default as Loading, LoadingProps } from './loading';
-export { default as Menu, MenuProps, SubMenuProps, MenuItemProps, MenuMode, Divider, DividerProps } from './menu';
+export { default as Menu, MenuProps, SubMenuProps, MenuItemProps, MenuMode } from './menu';
 export {
   default as Modal,
   StepModal,
@@ -87,6 +87,7 @@ export {
 export { default as Space, SpaceProps, ItemProps } from './space';
 export { default as TreeSelect, TreeNode, LabeledValue, SelectValue, TreeSelectProps } from './tree-select';
 export { default as Steps } from './components/steps';
+export { default as Divider, DividerProps } from './divider';
 
 // provide config context
 export { ConfigContext, ConfigConsumer, withConfigConsumer } from './components/config-provider';