From 5632e40fceabdbcdfef7e536158aaf404898c867 Mon Sep 17 00:00:00 2001 From: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> Date: Wed, 12 Nov 2025 17:42:49 +0800 Subject: [PATCH] feat[InputNumber]: deprecated addon* attribute (#55505) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat[InputNumber]: deprecated addon* attribute * test: update snap * Update components/form/demo/register.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * test: update form snap * update * update * feat: change Search addon* * test: demo add annotation * update Search * feat: add Space.Addon * test: use addon in demos * feat: Space.Addon -> Space.CompactCell * test: update compactCell snap * feat: fix style lint * test: update compact-middle class snap * chore: update logic * test: delete if (!button) return input * chore: fix logic * update test snap * update test snap * update test snap * update test snap * test: update test * test: update snap * chore: fix search * revert test * test: update * test: update * feat: add description for CompactCell * feat: change description * docs: add api Version * test: change search style * test: update snap * test: update snap * feat: searchButton text color * fix: border is null whenhover search Button * Update components/space/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * Update components/space/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * Update components/space/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * Update components/space/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * docs: change Compact description * Update components/space/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * feat: compactCell -> compactAddon * feat: compactAddon -> Addon * docs: Remove component name quotation marks from the document * refactor: Refactoring Space.Addon style and class name * chore: add css var * feat[InputNumber]: deprecated addon* attribute * test: update snap * Update components/form/demo/register.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * test: update form snap * update * update * feat: change Search addon* * test: demo add annotation * update Search * feat: add Space.Addon * test: use addon in demos * feat: Space.Addon -> Space.CompactCell * test: update compactCell snap * feat: fix style lint * test: update compact-middle class snap * chore: update logic * test: delete if (!button) return input * chore: fix logic * update test snap * update test snap * update test snap * update test snap * test: update test * test: update snap * chore: fix search * revert test * test: update * test: update * feat: add description for CompactCell * feat: change description * docs: add api Version * test: change search style * test: update snap * test: update snap * feat: searchButton text color * fix: border is null whenhover search Button * Update components/space/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * Update components/space/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * Update components/space/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * Update components/space/index.en-US.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> * docs: change Compact description * Update components/space/index.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> * feat: compactCell -> compactAddon * feat: compactAddon -> Addon * docs: Remove component name quotation marks from the document * refactor: Refactoring Space.Addon style and class name * chore: add css var * chore: adjust style * docs: back * docs: update demo * test: update snapshot * refactor: Restore Search using Compact * refactor: Remove unused wrapCSSVar * test: update snap * test:update snap * refactor: Remove non addon modifications --------- Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com> Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: 刘欢 Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: 二货机器人 --- components/config-provider/demo/direction.tsx | 6 +- .../__snapshots__/demo-extend.test.tsx.snap | 53 +- components/drawer/demo/form-in-drawer.tsx | 18 +- .../__snapshots__/demo-extend.test.ts.snap | 669 +++++++++--------- .../__snapshots__/demo.test.tsx.snap | 408 +++++------ components/form/demo/register.tsx | 13 +- .../__snapshots__/demo-extend.test.ts.snap | 220 +++--- .../__snapshots__/demo.test.tsx.snap | 206 +++--- components/input-number/demo/presuffix.tsx | 22 +- components/input-number/index.en-US.md | 6 +- components/input-number/index.tsx | 34 +- components/input-number/index.zh-CN.md | 6 +- components/input/Input.tsx | 28 + components/input/__tests__/Search.test.tsx | 5 +- .../__snapshots__/demo-extend.test.ts.snap | 209 +++--- .../__snapshots__/demo.test.tsx.snap | 207 +++--- components/input/demo/compact-style.md | 4 +- components/input/demo/compact-style.tsx | 8 +- components/input/demo/search-input.tsx | 12 +- components/input/index.en-US.md | 4 +- components/input/index.zh-CN.md | 4 +- components/space/Addon.tsx | 39 + components/space/Compact.tsx | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 324 ++++----- .../__snapshots__/demo.test.tsx.snap | 322 ++++----- components/space/demo/compact-nested.md | 2 +- components/space/demo/compact.tsx | 9 +- components/space/index.en-US.md | 10 + components/space/index.tsx | 3 + components/space/index.zh-CN.md | 14 +- components/space/style/addon.ts | 74 ++ components/space/style/compact.ts | 18 +- components/space/style/index.ts | 7 +- components/style/compact-item.ts | 11 +- scripts/__snapshots__/check-site.ts.snap | 4 +- 35 files changed, 1557 insertions(+), 1424 deletions(-) create mode 100644 components/space/Addon.tsx create mode 100644 components/space/style/addon.ts diff --git a/components/config-provider/demo/direction.tsx b/components/config-provider/demo/direction.tsx index 6e113f88e6..4b890ff3f5 100644 --- a/components/config-provider/demo/direction.tsx +++ b/components/config-provider/demo/direction.tsx @@ -302,7 +302,11 @@ const Page: React.FC<{ placement: Placement }> = ({ placement }) => {

- + + {selectBefore} + + {selectAfter} +

diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap index 680ac940dd..accac43c21 100644 --- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap +++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap @@ -1028,33 +1028,29 @@ Array [
- - - - http:// - - - - .com - - - + http:// +
+ +
+ .com +
+ @@ -2913,12 +2909,7 @@ Array [ ] `; -exports[`renders components/drawer/demo/form-in-drawer.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", - "Warning: [antd: Input] \`addonBefore\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; +exports[`renders components/drawer/demo/form-in-drawer.tsx extend context correctly 2`] = `[]`; exports[`renders components/drawer/demo/loading.tsx extend context correctly 1`] = ` Array [ diff --git a/components/drawer/demo/form-in-drawer.tsx b/components/drawer/demo/form-in-drawer.tsx index c593452565..ae2c1abff0 100644 --- a/components/drawer/demo/form-in-drawer.tsx +++ b/components/drawer/demo/form-in-drawer.tsx @@ -1,6 +1,17 @@ import React, { useState } from 'react'; import { PlusOutlined } from '@ant-design/icons'; import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'antd'; +import type { InputProps } from 'antd'; + +const UrlInput: React.FC = (props) => { + return ( + + http:// + + .com + + ); +}; const App: React.FC = () => { const [open, setOpen] = useState(false); @@ -54,12 +65,7 @@ const App: React.FC = () => { label="Url" rules={[{ required: true, message: 'Please enter url' }]} > - + diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index f979ce46a5..e5ffe997c2 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -11916,171 +11916,163 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
- - - -
-
- + + +86 + + +
+
+
+
+
- - - - - +86 - - + 86 +
+
+ 87 +
-
-
+
+
- 86 -
-
- 87 -
-
-
-
-
+
-
-
- +86 -
-
-
-
- +87 -
-
+ +86
+
+
+
+ +87 +
+
-
+
+ - - - +
+ +
@@ -12113,236 +12105,228 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`] class="ant-form-item-control-input-content" >
-
- + + - - - - - -
-
+ - -
+ + + +
-
+
+
+
+
+ -
- + + $ + + +
+
+
+
+
- - - - - $ - - + USD +
+
+ CNY +
-
-
+
+
- USD -
-
- CNY -
-
-
-
-
+
-
-
- $ -
-
-
-
- ¥ -
-
+ $
+
+
+
+ ¥ +
+
-
+
@@ -12823,7 +12807,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`] exports[`renders components/form/demo/register.tsx extend context correctly 2`] = ` [ "Warning: [antd: Form.Item] \`defaultValue\` will not work on controlled Field. You should use \`initialValues\` of Form instead.", - "Warning: [antd: Input] \`addonBefore\` is deprecated. Please use \`Space.Compact\` instead.", ] `; diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index c42033ac6d..7fecb4995a 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -7991,91 +7991,83 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
- - - -
-
- - - - - - +86 - - -
-
+ + +86 + + +
+ - - - +
+ +
@@ -8108,157 +8100,149 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = ` class="ant-form-item-control-input-content" >
-
- + + - - - - - -
-
+ - -
+ + + +
-
-
- - - - - - $ - - -
- -
+
+
+
+ + + + + + $ + + +
+ +
diff --git a/components/form/demo/register.tsx b/components/form/demo/register.tsx index 4420168fb0..4bc1607ab8 100644 --- a/components/form/demo/register.tsx +++ b/components/form/demo/register.tsx @@ -11,6 +11,7 @@ import { InputNumber, Row, Select, + Space, } from 'antd'; import type { DefaultOptionType } from 'antd/es/select'; @@ -213,7 +214,11 @@ const App: React.FC = () => { label="Phone Number" rules={[{ required: true, message: 'Please input your phone number!' }]} > - + {/* Demo only, real usage should wrap as custom component */} + + {prefixSelector} + + { label="Donation" rules={[{ required: true, message: 'Please input donation amount!' }]} > - + {/* Demo only, real usage should wrap as custom component */} + + + {suffixSelector} + `; -exports[`renders components/input-number/demo/addon.tsx extend context correctly 2`] = `[]`; +exports[`renders components/input-number/demo/addon.tsx extend context correctly 2`] = ` +[ + "Warning: [antd: InputNumber] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", + "Warning: [antd: InputNumber] \`addonBefore\` is deprecated. Please use \`Space.Compact\` instead.", +] +`; exports[`renders components/input-number/demo/basic.tsx extend context correctly 1`] = `
`; -exports[`renders components/input-number/demo/filled-debug.tsx extend context correctly 2`] = `[]`; +exports[`renders components/input-number/demo/filled-debug.tsx extend context correctly 2`] = ` +[ + "Warning: [antd: InputNumber] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", + "Warning: [antd: InputNumber] \`addonBefore\` is deprecated. Please use \`Space.Compact\` instead.", +] +`; exports[`renders components/input-number/demo/focus.tsx extend context correctly 1`] = `
-
, -
, -
, +
- -
+ + +
+
+ + ￥ + +
- - ￥ -
-
- + + - - - - - -
-
+ - -
+ + + + +
+
+
-
, -
, -
, +
- , -
, -
, +
RMB -
, -] + + `; exports[`renders components/input-number/demo/presuffix.tsx extend context correctly 2`] = `[]`; diff --git a/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap b/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap index b6617101c7..8d3a60c743 100644 --- a/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/input-number/__tests__/__snapshots__/demo.test.tsx.snap @@ -3070,7 +3070,9 @@ exports[`renders components/input-number/demo/out-of-range.tsx correctly 1`] = ` `; exports[`renders components/input-number/demo/presuffix.tsx correctly 1`] = ` -Array [ +
- , -
, -
, +
- -
+ + +
+
+ + ￥ + +
- - ￥ -
-
- + + - - - - - -
-
+ - -
+ + + + +
+
+
-
, -
, -
, +
- , -
, -
, +
RMB -
, -] + + `; exports[`renders components/input-number/demo/render-panel.tsx correctly 1`] = ` diff --git a/components/input-number/demo/presuffix.tsx b/components/input-number/demo/presuffix.tsx index 921da7eb12..88139816ac 100644 --- a/components/input-number/demo/presuffix.tsx +++ b/components/input-number/demo/presuffix.tsx @@ -1,20 +1,22 @@ import React from 'react'; import { UserOutlined } from '@ant-design/icons'; -import { InputNumber } from 'antd'; +import { Flex, InputNumber, Space } from 'antd'; const App: React.FC = () => ( - <> + -
-
- } prefix="￥" style={{ width: '100%' }} /> -
-
+ + + + + + + + -
-
+ - + ); export default App; diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index e5edfc1bc9..5a2bf9d1e1 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -18,7 +18,7 @@ When a numeric value needs to be provided. Basic Sizes -Pre / Post tab +Pre / Post tab Disabled High precision decimals Formatter @@ -40,8 +40,8 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | | -| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | +| ~~addonAfter~~ | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | ReactNode | - | | +| ~~addonBefore~~ | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | ReactNode | - | | | autoFocus | If the component gets focus when mounted | boolean | false | - | | changeOnBlur | Trigger `onChange` when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 | | changeOnWheel | Allows control with mouse wheel | boolean | - | 5.14.0 | diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index c4f9ccff51..4e12ca4536 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -28,7 +28,33 @@ export interface InputNumberProps extends Omit, 'prefix' | 'size' | 'controls'> { prefixCls?: string; rootClassName?: string; + /** + * @deprecated Use `Space.Compact` instead. + * + * @example + * ```tsx + * import { Space, InputNumber } from 'antd'; + * + * + * {addon} + * + * + * ``` + */ addonBefore?: React.ReactNode; + /** + * @deprecated Use `Space.Compact` instead. + * + * @example + * ```tsx + * import { Space, InputNumber } from 'antd'; + * + * + * + * {addon} + * + * ``` + */ addonAfter?: React.ReactNode; prefix?: React.ReactNode; suffix?: React.ReactNode; @@ -48,7 +74,13 @@ export interface InputNumberProps const InputNumber = React.forwardRef((props, ref) => { if (process.env.NODE_ENV !== 'production') { const typeWarning = devUseWarning('InputNumber'); - typeWarning.deprecated(!('bordered' in props), 'bordered', 'variant'); + [ + ['bordered', 'variant'], + ['addonAfter', 'Space.Compact'], + ['addonBefore', 'Space.Compact'], + ].forEach(([prop, newProp]) => { + typeWarning.deprecated(!(prop in props), prop, newProp); + }); typeWarning( !(props.type === 'number' && props.changeOnWheel), 'usage', diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 932d74e683..b0ddb97b90 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -19,7 +19,7 @@ demo: 基本 三种大小 -前置/后置标签 +前置/后置标签 不可用 高精度小数 格式化展示 @@ -41,8 +41,8 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 | -| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 | +| ~~addonAfter~~ | 带标签的 input，设置后置标签，请使用 Space.Compact 替换 | ReactNode | - | 4.17.0 | +| ~~addonBefore~~ | 带标签的 input，设置前置标签，请使用 Space.Compact 替换 | ReactNode | - | 4.17.0 | | autoFocus | 自动获取焦点 | boolean | false | - | | changeOnBlur | 是否在失去焦点时，触发 `onChange` 事件（例如值超出范围时，重新限制回范围并触发事件） | boolean | true | 5.11.0 | | changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 | diff --git a/components/input/Input.tsx b/components/input/Input.tsx index c8f0343bfe..5ffc78ccf6 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -39,6 +39,34 @@ export interface InputProps size?: SizeType; disabled?: boolean; status?: InputStatus; + /** + * @deprecated Use `Space.Compact` instead. + * + * @example + * ```tsx + * import { Space, Input } from 'antd'; + * + * + * {addon} + * + * + * ``` + */ + addonBefore?: React.ReactNode; + /** + * @deprecated Use `Space.Compact` instead. + * + * @example + * ```tsx + * import { Space, Input } from 'antd'; + * + * + * + * {addon} + * + * ``` + */ + addonAfter?: React.ReactNode; /** @deprecated Use `variant="borderless"` instead. */ bordered?: boolean; /** diff --git a/components/input/__tests__/Search.test.tsx b/components/input/__tests__/Search.test.tsx index 6e8a2156de..751bde0006 100644 --- a/components/input/__tests__/Search.test.tsx +++ b/components/input/__tests__/Search.test.tsx @@ -211,9 +211,8 @@ describe('Input.Search', () => { // https://github.com/ant-design/ant-design/issues/27258 it('Search with allowClear should have one className only', () => { - const { container } = render(); - expect(container.querySelector('.ant-input-group-wrapper')).toHaveClass('test-className'); - expect(container.querySelector('.ant-input-affix-wrapper')).not.toHaveClass('test-className'); + const { container } = render(); + expect(container.querySelectorAll('.bamboo')).toHaveLength(1); }); // https://github.com/ant-design/ant-design/issues/53897 diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index 9c3586218e..9b6422e23e 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5802,17 +5802,17 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
+
+ https:// +
- - https:// - @@ -6074,43 +6074,35 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
- - - + + - +
+ - +
+ https:// +
- https:// - - - + + + + + + - - - - +
+
+ https:// +
- - https:// - @@ -1864,43 +1864,35 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
- - - + + - +
+ - +
+ https:// +
- https:// - - - + + + + + + - - - - +
( - + https:// + @@ -36,7 +37,10 @@ const App: React.FC = () => ( - } placeholder="large size" /> + + + + diff --git a/components/input/demo/search-input.tsx b/components/input/demo/search-input.tsx index 928493a7d1..3b1abec4fe 100644 --- a/components/input/demo/search-input.tsx +++ b/components/input/demo/search-input.tsx @@ -15,13 +15,11 @@ const App: React.FC = () => ( - + + https:// + + + | - | 5.4.0 | diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 042f4fc343..bcd0dbbd8d 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -52,8 +52,8 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| ~~addonAfter~~ | 带标签的 input，设置后置标签，请使用 `Space.Compact` 替换 | ReactNode | - | | -| ~~addonBefore~~ | 带标签的 input，设置前置标签，请使用 `Space.Compact` 替换 | ReactNode | - | | +| ~~addonAfter~~ | 带标签的 input，设置后置标签，请使用 Space.Compact 替换 | ReactNode | - | | +| ~~addonBefore~~ | 带标签的 input，设置前置标签，请使用 Space.Compact 替换 | ReactNode | - | | | allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | | | ~~bordered~~ | 是否有边框，请使用 `variant` 替换 | boolean | true | 4.5.0 | | classNames | 语义化结构 class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 | diff --git a/components/space/Addon.tsx b/components/space/Addon.tsx new file mode 100644 index 0000000000..8967044c90 --- /dev/null +++ b/components/space/Addon.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import classNames from 'classnames'; + +import { ConfigContext } from '../config-provider'; +import { useCompactItemContext } from './Compact'; +import useStyle from './style/addon'; + +export interface SpaceCompactCellProps extends React.HTMLAttributes { + children: React.ReactNode; + prefixCls?: string; +} + +const SpaceAddon = React.forwardRef((props, ref) => { + const { className, children, style, prefixCls: customizePrefixCls, ...restProps } = props; + const { getPrefixCls, direction: directionConfig } = React.useContext(ConfigContext); + + const prefixCls = getPrefixCls('space-addon', customizePrefixCls); + const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls); + const { compactItemClassnames, compactSize } = useCompactItemContext(prefixCls, directionConfig); + + const classes = classNames( + prefixCls, + hashId, + compactItemClassnames, + cssVarCls, + { + [`${prefixCls}-${compactSize}`]: compactSize, + }, + className, + ); + + return wrapCSSVar( +
+ {children} +
, + ); +}); + +export default SpaceAddon; diff --git a/components/space/Compact.tsx b/components/space/Compact.tsx index 9594668e5f..9941fe3b70 100644 --- a/components/space/Compact.tsx +++ b/components/space/Compact.tsx @@ -6,7 +6,7 @@ import type { DirectionType } from '../config-provider'; import { ConfigContext } from '../config-provider'; import useSize from '../config-provider/hooks/useSize'; import type { SizeType } from '../config-provider/SizeContext'; -import useStyle from './style'; +import useStyle from './style/compact'; export interface SpaceCompactItemContextType { compactSize?: SizeType; diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 0c61245674..7ce8ffc577 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -8814,178 +8814,164 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`] value="" />
+ $ +
+
-
- $ -
- + + + + +
+
+
-
- -
- -
-
-
+ + + + - $ -
+ + + +
+
+ +
+
+
+ $
@@ -9400,25 +9386,17 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`] Button - +
- - - - $ - - - + $ +
@@ -14323,6 +14301,8 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl exports[`renders components/space/demo/compact-debug.tsx extend context correctly 2`] = ` [ + "Warning: [antd: InputNumber] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", + "Warning: [antd: InputNumber] \`addonBefore\` is deprecated. Please use \`Space.Compact\` instead.", "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", "Warning: [antd: Input] \`addonBefore\` is deprecated. Please use \`Space.Compact\` instead.", ] diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap index fb90e08f36..8191c91558 100644 --- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap @@ -1844,178 +1844,164 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = ` value="" />
+ $ +
+
-
- $ -
- + + + + +
+
+
-
- -
- -
-
-
+ + + + - $ -
+ + + +
+
+ +
+
+
+ $
@@ -2055,25 +2041,17 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = ` Button - +
- - - - $ - - - + $ +
diff --git a/components/space/demo/compact-nested.md b/components/space/demo/compact-nested.md index 266307fb31..8f68f99559 100644 --- a/components/space/demo/compact-nested.md +++ b/components/space/demo/compact-nested.md @@ -4,4 +4,4 @@ ## en-US -Nested `Space.Compact`. +Nested Space.Compact. diff --git a/components/space/demo/compact.tsx b/components/space/demo/compact.tsx index 9615aa8ac0..97fafd613a 100644 --- a/components/space/demo/compact.tsx +++ b/components/space/demo/compact.tsx @@ -222,8 +222,10 @@ const App: React.FC = () => ( - - + $ + + + $ @@ -231,7 +233,8 @@ const App: React.FC = () => ( - + + $ ); diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md index c60273d590..9793d8d385 100644 --- a/components/space/index.en-US.md +++ b/components/space/index.en-US.md @@ -72,6 +72,16 @@ Use Space.Compact when child form components are compactly connected and the bor | direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.24.0 | | size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 | +### Space.Addon + +> This component is available since `antd@5.29.0`. + +Used to create custom cells in compact layouts. + +| Property | Description | Type | Default | Version | +| -------- | -------------- | --------- | ------- | ------- | +| children | Custom content | ReactNode | - | 5.29.0 | + ## Semantic DOM diff --git a/components/space/index.tsx b/components/space/index.tsx index 616685f62a..04a165541d 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -6,6 +6,7 @@ import { isPresetSize, isValidGapNumber } from '../_util/gapSize'; import { useComponentConfig } from '../config-provider/context'; import type { SizeType } from '../config-provider/SizeContext'; import Compact from './Compact'; +import Addon from './Addon'; import { SpaceContextProvider } from './context'; import type { SpaceContextType } from './context'; import Item from './Item'; @@ -150,11 +151,13 @@ const InternalSpace = React.forwardRef((props, ref) type CompoundedComponent = typeof InternalSpace & { Compact: typeof Compact; + Addon: typeof Addon; }; const Space = InternalSpace as CompoundedComponent; Space.Compact = Compact; +Space.Addon = Addon; if (process.env.NODE_ENV !== 'production') { Space.displayName = 'Space'; diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index 73270417f7..eb904dba2b 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -60,9 +60,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA ### Space.Compact -> 自 antd@4.24.0 版本开始提供该组件。 - -需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有： +需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact，支持的组件有： - Button - AutoComplete @@ -80,6 +78,16 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA | direction | 指定排列方向 | `vertical` \| `horizontal` | `horizontal` | 4.24.0 | | size | 子组件大小 | `large` \| `middle` \| `small` | `middle` | 4.24.0 | +### Space.Addon + +> 自 antd@5.29.0 版本开始提供该组件。 + +用于在紧凑布局中创建自定义单元格。 + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| -------- | ---------- | --------- | ------ | ------ | +| children | 自定义内容 | ReactNode | - | 5.29.0 | + ## Semantic DOM diff --git a/components/space/style/addon.ts b/components/space/style/addon.ts new file mode 100644 index 0000000000..9d81460a19 --- /dev/null +++ b/components/space/style/addon.ts @@ -0,0 +1,74 @@ +import { genCompactItemStyle } from '../../style/compact-item'; +import { genStyleHooks } from '../../theme/internal'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; + +/** Component only token. Which will handle additional calculation of alias token */ +// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default +export interface ComponentToken {} + +interface SpaceToken extends FullToken<'Space'> { + // Custom token here +} + +const genSpaceAddonStyle: GenerateStyle = (token) => { + const { + componentCls, + borderRadius, + paddingSM, + colorBorder, + paddingXS, + fontSizeLG, + fontSizeSM, + borderRadiusLG, + borderRadiusSM, + colorBgContainerDisabled, + lineWidth, + } = token; + + return { + [componentCls]: [ + { + display: 'inline-flex', + alignItems: 'center', + gap: 0, + paddingInline: paddingSM, + margin: 0, + background: colorBgContainerDisabled, + borderWidth: lineWidth, + borderStyle: 'solid', + borderColor: colorBorder, + borderRadius, + + '&-large': { + fontSize: fontSizeLG, + borderRadius: borderRadiusLG, + }, + '&-small': { + paddingInline: paddingXS, + borderRadius: borderRadiusSM, + fontSize: fontSizeSM, + }, + '&-compact-last-item': { + borderEndStartRadius: 0, + borderStartStartRadius: 0, + }, + '&-compact-first-item': { + borderEndEndRadius: 0, + borderStartEndRadius: 0, + }, + '&-compact-item:not(:first-child):not(:last-child)': { + borderRadius: 0, + }, + '&-compact-item:not(:last-child)': { + borderInlineEndWidth: 0, + }, + }, + genCompactItemStyle(token, { + focus: false, + }), + ], + }; +}; + +// ============================== Export ============================== +export default genStyleHooks(['Space', 'Addon'], (token) => [genSpaceAddonStyle(token)]); diff --git a/components/space/style/compact.ts b/components/space/style/compact.ts index 17b9dbb972..2f512770da 100644 --- a/components/space/style/compact.ts +++ b/components/space/style/compact.ts @@ -1,3 +1,4 @@ +import { genStyleHooks } from '../../theme/internal'; import type { FullToken, GenerateStyle } from '../../theme/internal'; /** Component only token. Which will handle additional calculation of alias token */ @@ -13,6 +14,8 @@ const genSpaceCompactStyle: GenerateStyle = (token) => { return { [componentCls]: { + display: 'inline-flex', + '&-block': { display: 'flex', width: '100%', @@ -20,9 +23,22 @@ const genSpaceCompactStyle: GenerateStyle = (token) => { '&-vertical': { flexDirection: 'column', }, + + '&-rtl': { + direction: 'rtl', + }, }, }; }; // ============================== Export ============================== -export default genSpaceCompactStyle; +export default genStyleHooks( + ['Space', 'Compact'], + (token) => [genSpaceCompactStyle(token)], + () => ({}), + { + // Space component don't apply extra font style + // https://github.com/ant-design/ant-design/issues/40315 + resetStyle: false, + }, +); diff --git a/components/space/style/index.ts b/components/space/style/index.ts index 33f184500d..8192d31412 100644 --- a/components/space/style/index.ts +++ b/components/space/style/index.ts @@ -1,6 +1,5 @@ import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; -import genSpaceCompactStyle from './compact'; /** Component only token. Which will handle additional calculation of alias token */ // biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default @@ -87,11 +86,7 @@ export default genStyleHooks( spaceGapMiddleSize: token.padding, spaceGapLargeSize: token.paddingLG, }); - return [ - genSpaceStyle(spaceToken), - genSpaceGapStyle(spaceToken), - genSpaceCompactStyle(spaceToken), - ]; + return [genSpaceStyle(spaceToken), genSpaceGapStyle(spaceToken)]; }, () => ({}), { diff --git a/components/style/compact-item.ts b/components/style/compact-item.ts index b7d5c5e032..52e0a5437a 100644 --- a/components/style/compact-item.ts +++ b/components/style/compact-item.ts @@ -3,6 +3,8 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import type { AliasToken, CSSUtil, FullToken, OverrideComponent } from '../theme/internal'; interface CompactItemOptions { + componentCls?: string; + focus?: boolean; /** * Some component borders are implemented on child elements @@ -96,13 +98,16 @@ export function genCompactItemStyle( options: CompactItemOptions = { focus: true }, ): CSSInterpolation { const { componentCls } = token; + const { componentCls: customizePrefixCls } = options; - const compactCls = `${componentCls}-compact`; + const mergedComponentCls = customizePrefixCls || componentCls; + + const compactCls = `${mergedComponentCls}-compact`; return { [compactCls]: { - ...compactItemBorder(token, compactCls, options, componentCls), - ...compactItemBorderRadius(componentCls, compactCls, options), + ...compactItemBorder(token, compactCls, options, mergedComponentCls), + ...compactItemBorderRadius(mergedComponentCls, compactCls, options), }, }; } diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap index 6c1bba4905..84d95bb33b 100644 --- a/scripts/__snapshots__/check-site.ts.snap +++ b/scripts/__snapshots__/check-site.ts.snap @@ -200,9 +200,9 @@ exports[`site test Component components/slider en Page 1`] = `4`; exports[`site test Component components/slider zh Page 1`] = `4`; -exports[`site test Component components/space en Page 1`] = `2`; +exports[`site test Component components/space en Page 1`] = `3`; -exports[`site test Component components/space zh Page 1`] = `2`; +exports[`site test Component components/space zh Page 1`] = `3`; exports[`site test Component components/spin en Page 1`] = `1`;