diff --git a/components/divider/__tests__/index.test.tsx b/components/divider/__tests__/index.test.tsx
index 0e581f43b2..367b319105 100644
--- a/components/divider/__tests__/index.test.tsx
+++ b/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(Bamboo);
- expect(container.querySelector('.ant-divider-inner-text')).toBeFalsy();
+ expect(container.querySelector('.ant-divider-inner-text')).toBeFalsy();
errSpy.mockRestore();
});
+
+ it('support string orientationMargin', () => {
+ const { container } = render(
+
+ test test test
+ ,
+ );
+ expect(container?.querySelector('.ant-divider-inner-text')).toHaveStyle({
+ marginRight: 10,
+ });
+ });
});
diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md
index 786dc76188..e6f4d5faec 100644
--- a/components/divider/index.en-US.md
+++ b/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` | |
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index cab33801a0..7337ad7339 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -57,9 +57,19 @@ const Divider: React.FC = (props) => {
rootClassName,
);
+ const memoizedOrientationMargin = React.useMemo(() => {
+ 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
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index b818c1b96d..fb2207ddae 100644
--- a/components/divider/index.zh-CN.md
+++ b/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` | |
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index f73d7756fb..1ac9bbb2fd 100644
--- a/components/tabs/index.en-US.md
+++ b/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 | - |
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index 040edd41f5..82e67816b7 100644
--- a/components/tabs/index.zh-CN.md
+++ b/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