Merge branch 'master' into fix/datePicker

components/divider/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { render } from '../../../tests/utils';
 import Divider from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import { render } from '../../../tests/utils';
 
 describe('Divider', () => {
   mountTest(Divider);
@@ -10,8 +10,19 @@ describe('Divider', () => {
     const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     const { container } = render(<Divider type="vertical">Bamboo</Divider>);
-    expect(container.querySelector('.ant-divider-inner-text')).toBeFalsy();
+    expect(container.querySelector<HTMLSpanElement>('.ant-divider-inner-text')).toBeFalsy();
 
     errSpy.mockRestore();
   });
+
+  it('support string orientationMargin', () => {
+    const { container } = render(
+      <Divider orientation="right" orientationMargin="10">
+        test test test
+      </Divider>,
+    );
+    expect(container?.querySelector<HTMLSpanElement>('.ant-divider-inner-text')).toHaveStyle({
+      marginRight: 10,
+    });
+  });
 });

components/divider/index.en-US.md

@@ -34,7 +34,7 @@ A divider line separates different content.
 | className | The className of container | string | - |  |
 | dashed | Whether line is dashed | boolean | false |  |
 | orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` |  |
-| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - |  |
+| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right`, 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 | - |  |
 | type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |

components/divider/index.tsx

@@ -57,9 +57,19 @@ const Divider: React.FC<DividerProps> = (props) => {
     rootClassName,
   );
 
+  const memoizedOrientationMargin = React.useMemo<string | number>(() => {
+    if (typeof orientationMargin === 'number') {
+      return orientationMargin;
+    }
+    if (/^\d+$/.test(orientationMargin!)) {
+      return Number(orientationMargin);
+    }
+    return orientationMargin!;
+  }, [orientationMargin]);
+
   const innerStyle: React.CSSProperties = {
-    ...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
-    ...(hasCustomMarginRight && { marginRight: orientationMargin }),
+    ...(hasCustomMarginLeft && { marginLeft: memoizedOrientationMargin }),
+    ...(hasCustomMarginRight && { marginRight: memoizedOrientationMargin }),
   };
 
   // Warning children not work in vertical mode

components/divider/index.zh-CN.md

@@ -35,7 +35,7 @@ group:
 | className | 分割线样式类 | string | - |  |
 | dashed | 是否虚线 | boolean | false |  |
 | orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` |  |
-| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number | - |  |
+| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right`。如果传入 `string` 类型的数字且不带单位，默认单位是 px | string \| number | - |  |
 | plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
 | style | 分割线样式对象 | CSSProperties | - |  |
 | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |

components/tabs/index.en-US.md

@@ -72,6 +72,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
+| closable | Whether the Tab can be closed, Only works while `type="editable-card"` | boolean | true |
 | disabled | Set TabPane disabled | boolean | false |
 | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
 | key | TabPane's key | string | - |

components/tabs/index.zh-CN.md

@@ -71,14 +71,15 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 ### TabItemType
 
-| 参数        | 说明                                            | 类型      | 默认值 |
-| ----------- | ----------------------------------------------- | --------- | ------ |
-| closeIcon   | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | -      |
-| disabled    | 禁用某一项                                      | boolean   | false  |
-| forceRender | 被隐藏时是否渲染 DOM 结构                       | boolean   | false  |
-| key         | 对应 activeKey                                  | string    | -      |
-| label       | 选项卡头显示文字                                | ReactNode | -      |
-| children    | 选项卡头显示内容                                | ReactNode | -      |
+| 参数        | 说明                                                    | 类型      | 默认值 |
+| ----------- | ------------------------------------------------------- | --------- | ------ |
+| closeIcon   | 自定义关闭图标，在 `type="editable-card"` 时有效         | ReactNode | -      |
+| closable    | 当前选项卡是否可被关闭，在 `type="editable-card"` 时有效 | boolean | true |
+| disabled    | 禁用某一项                                              | boolean   | false  |
+| forceRender | 被隐藏时是否渲染 DOM 结构                               | boolean   | false  |
+| key         | 对应 activeKey                                          | string    | -      |
+| label       | 选项卡头显示文字                                        | ReactNode | -      |
+| children    | 选项卡头显示内容                                        | ReactNode | -      |
 
 ## Design Token