diff --git a/components/input/Group.tsx b/components/input/Group.tsx index fbb142050e..fbb3063923 100644 --- a/components/input/Group.tsx +++ b/components/input/Group.tsx @@ -4,6 +4,7 @@ import { useContext, useMemo } from 'react'; import { ConfigContext } from '../config-provider'; import type { FormItemStatusContextProps } from '../form/context'; import { FormItemInputContext } from '../form/context'; +import warning from '../_util/warning'; import useStyle from './style'; export interface GroupProps { @@ -47,6 +48,14 @@ const Group: React.FC = (props) => { [formItemContext], ); + if (process.env.NODE_ENV !== 'production') { + warning( + false, + 'Input.Group', + `'Input.Group' is deprecated. Please use 'Space.Compact' instead.`, + ); + } + return wrapSSR( `; +exports[`renders ./components/input/demo/compact-style.tsx extend context correctly 1`] = ` +
+
+
+ +
+
+
+
+ + +
+
+
+
+ + + + https:// + + + + + + + + + + + + + + + + +
+
+
+
+ + +
+
+
+
+
+
+ + + + + Zhejiang + +
+
+
+
+
+ zhejiang +
+
+ jiangsu +
+
+
+
+
+
+
+
+ Zhejiang +
+
+
+
+ Jiangsu +
+
+
+
+
+
+
+
+ +
+ +
+
+
+`; + exports[`renders ./components/input/demo/debug-addon.tsx extend context correctly 1`] = `
`; +exports[`renders ./components/input/demo/compact-style.tsx correctly 1`] = ` +
+
+
+ +
+
+
+
+ + +
+
+
+
+ + + + https:// + + + + + + + + + + + + + + + + +
+
+
+
+ + +
+
+
+
+
+
+ + + + + Zhejiang + +
+ +
+ +
+
+
+`; + exports[`renders ./components/input/demo/debug-addon.tsx correctly 1`] = `
{ @@ -117,6 +118,15 @@ describe('Input', () => { expect(container.querySelector('input')?.selectionStart).toEqual(5); expect(container.querySelector('input')?.selectionEnd).toEqual(5); }); + + it('warning for Input.Group', () => { + resetWarned(); + render(); + + expect(errorSpy).toHaveBeenCalledWith( + "Warning: [antd: Input.Group] 'Input.Group' is deprecated. Please use 'Space.Compact' instead.", + ); + }); }); describe('prefix and suffix', () => { diff --git a/components/input/demo/compact-style.md b/components/input/demo/compact-style.md new file mode 100644 index 0000000000..71575c6ccc --- /dev/null +++ b/components/input/demo/compact-style.md @@ -0,0 +1,7 @@ +## zh-CN + +使用 `Space.Compact` 创建紧凑模式，更多请查看 [Space.Compact](/components/space#spacecompact) 文档。 + +## en-US + +Use `Space.Compact` create compact style, See the [Space.Compact](/components/space#spacecompact) documentation for more. diff --git a/components/input/demo/compact-style.tsx b/components/input/demo/compact-style.tsx new file mode 100644 index 0000000000..8d0f9136e4 --- /dev/null +++ b/components/input/demo/compact-style.tsx @@ -0,0 +1,40 @@ +import { Button, Input, Select, Space } from 'antd'; +import React from 'react'; + +const { Search } = Input; + +const options = [ + { + value: 'zhejiang', + label: 'Zhejiang', + }, + { + value: 'jiangsu', + label: 'Jiangsu', + }, +]; + +const App: React.FC = () => ( + + + + + + + + + + + + + + + + + + + +); + +export default App; diff --git a/components/input/demo/group.md b/components/input/demo/group.md index 4993e3e944..e982af8e94 100644 --- a/components/input/demo/group.md +++ b/components/input/demo/group.md @@ -1,14 +1,10 @@ ## zh-CN -输入框的组合展现。 - -注意：使用 `compact` 模式时，不需要通过 `Col` 来控制宽度。 +`Input.Group` 已废弃，可以使用 [Space.Compact](/components/space-cn#spacecompact) 替代 `Input.Group`。 ## en-US -Input.Group example. - -Note: You don't need `Col` to control the width in the `compact` mode. +`Input.Group` is deprecated. Can use [Space.Compact](/components/space#spacecompact) substitute for `Input.Group`. ```css .site-input-group-wrapper .site-input-split { diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index f4711e09df..e92738d255 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -21,7 +21,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca Basic usage Three sizes of Input Pre / Post tab -Input Group +Compact Style +Input Group Search box Search box with loading TextArea @@ -94,20 +95,6 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea Supports all props of `Input`. -#### Input.Group - -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| compact | Whether use compact style | boolean | false | -| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` | - -```jsx - - - - -``` - #### Input.Password | Property | Description | Type | Default | Version | diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index a1586cafcd..544b464d6c 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -22,7 +22,8 @@ demo: 基本使用 三种大小 前置/后置标签 -输入框组合 +紧凑模式 +输入框组合 搜索框 搜索框 loading 文本域 @@ -95,20 +96,6 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el 其余属性和 Input 一致。 -#### Input.Group - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| compact | 是否用紧凑模式 | boolean | false | -| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` | - -```jsx - - - - -``` - #### Input.Password | 参数 | 说明 | 类型 | 默认值 | 版本 |