diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap index 0375753978..3d3c1010a4 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -675,60 +675,52 @@ Array [ class="ant-select-placeholder" style="visibility: visible;" /> - - - - + + ,
-
- +
@@ -1585,11 +1573,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
-
- +
@@ -1793,11 +1781,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
-
- - - - + +
- + @@ -2014,11 +1994,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor
-
- - - - + +
- +
@@ -2247,7 +2219,6 @@ exports[`renders components/auto-complete/demo/form-debug.tsx extend context cor exports[`renders components/auto-complete/demo/form-debug.tsx extend context correctly 2`] = ` [ "Warning: [antd: Input.Group] \`Input.Group\` is deprecated. Please use \`Space.Compact\` instead.", - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", ] `; @@ -2998,60 +2969,52 @@ Array [ class="ant-select-placeholder" style="visibility: visible;" /> - - - - + + ,
- - - - + +
`; @@ -653,11 +645,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
-
- +
@@ -844,11 +836,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
-
- +
@@ -980,11 +972,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
-
- - - - + +
- +
@@ -1129,11 +1113,11 @@ exports[`renders components/auto-complete/demo/form-debug.tsx correctly 1`] = `
-
- - - - + +
- +
@@ -1552,60 +1528,52 @@ exports[`renders components/auto-complete/demo/uncertain-category.tsx correctly class="ant-select-placeholder" style="visibility:visible" /> - - - - + + `; diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index d8a1866c7e..ae101ff3bb 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1659,52 +1659,44 @@ Array [ without icon - - + + + + - - + +
- - + + + + - - + +
- - - + + + + - - - + +
+ @@ -15913,63 +15905,55 @@ exports[`ConfigProvider components Input configProvider 1`] = ` exports[`ConfigProvider components Input configProvider componentDisabled 1`] = `
- - - + + + + - - - + +
+ @@ -16016,60 +16000,52 @@ exports[`ConfigProvider components Input configProvider componentDisabled 1`] = exports[`ConfigProvider components Input configProvider componentSize large 1`] = `
- - - + + + + - - - + +
+ @@ -16114,60 +16090,52 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`] exports[`ConfigProvider components Input configProvider componentSize middle 1`] = `
- - - + + + + - - - + +
+ @@ -16212,60 +16180,52 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`] exports[`ConfigProvider components Input configProvider componentSize small 1`] = `
- - - + + + + - - - + +
+ @@ -16310,60 +16270,52 @@ exports[`ConfigProvider components Input configProvider componentSize small 1`] exports[`ConfigProvider components Input normal 1`] = `
- - - + + + + - - - + +
+ @@ -16408,60 +16360,52 @@ exports[`ConfigProvider components Input normal 1`] = ` exports[`ConfigProvider components Input prefixCls 1`] = `
- - - + + + + - - - + +
+ diff --git a/components/input/Group.tsx b/components/input/Group.tsx index 2f057b2675..af37a19290 100644 --- a/components/input/Group.tsx +++ b/components/input/Group.tsx @@ -6,6 +6,7 @@ import { devUseWarning } from '../_util/warning'; import { ConfigContext } from '../config-provider'; import type { FormItemStatusContextProps } from '../form/context'; import { FormItemInputContext } from '../form/context'; +import Space from '../space'; import useStyle from './style'; export interface GroupProps { @@ -58,18 +59,18 @@ const Group: React.FC = (props) => { } return ( - - + + {props.children} - - + + ); }; diff --git a/components/input/Search.tsx b/components/input/Search.tsx index b3ba339e27..798f9636d4 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; import SearchOutlined from '@ant-design/icons/SearchOutlined'; import { composeRef } from '@rc-component/util/lib/ref'; import { clsx } from 'clsx'; +import omit from 'rc-util/lib/omit'; +import pickAttrs from 'rc-util/lib/pickAttrs'; import { useMergeSemantic } from '../_util/hooks'; import type { @@ -15,9 +17,11 @@ import Button from '../button'; import type { ButtonSemanticName } from '../button/button'; import { useComponentConfig } from '../config-provider/context'; import useSize from '../config-provider/hooks/useSize'; +import Space from '../space'; import { useCompactItemContext } from '../space/Compact'; import type { InputProps, InputRef } from './Input'; import Input from './Input'; +import useStyle from './style/search'; type SemanticName = 'root' | 'input' | 'prefix' | 'suffix' | 'count'; @@ -54,7 +58,7 @@ const Search = React.forwardRef((props, ref) => { inputPrefixCls: customizeInputPrefixCls, className, size: customizeSize, - suffix, + style, enterButton = false, addonAfter, loading, @@ -67,6 +71,7 @@ const Search = React.forwardRef((props, ref) => { onPressEnter: customOnPressEnter, classNames, styles, + hidden, ...restProps } = props; @@ -101,6 +106,7 @@ const Search = React.forwardRef((props, ref) => { const prefixCls = getPrefixCls('input-search', customizePrefixCls); const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); + const [hashId, cssVarCls] = useStyle(prefixCls); const { compactSize } = useCompactItemContext(prefixCls, direction); const size = useSize((ctx) => customizeSize ?? compactSize ?? ctx); @@ -139,7 +145,10 @@ const Search = React.forwardRef((props, ref) => { }; const searchIcon = typeof enterButton === 'boolean' ? : null; - const btnClassName = clsx(`${prefixCls}-button`, mergedClassNames.button?.root); + const btnPrefixCls = `${prefixCls}-btn`; + const btnClassName = clsx(btnPrefixCls, { + [`${btnPrefixCls}-${variant}`]: variant, + }); let button: React.ReactNode; const enterButtonAsElement = (enterButton || {}) as React.ReactElement; @@ -157,12 +166,7 @@ const Search = React.forwardRef((props, ref) => { onSearch(e); }, key: 'enterButton', - ...(isAntdButton - ? { - className: btnClassName, - size, - } - : {}), + ...(isAntdButton ? { className: btnClassName, size } : {}), }); } else { button = ( @@ -197,12 +201,14 @@ const Search = React.forwardRef((props, ref) => { const mergedClassName = clsx( prefixCls, + cssVarCls, { [`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-${size}`]: !!size, [`${prefixCls}-with-button`]: !!enterButton, }, className, + hashId, mergedClassNames.root, ); @@ -216,25 +222,41 @@ const Search = React.forwardRef((props, ref) => { onCompositionEnd?.(e); }; - const inputProps: InputProps = { - ...restProps, - className: mergedClassName, - classNames: mergedClassNames, - styles: mergedStyles, - prefixCls: inputPrefixCls, - type: 'search', - size, - variant, - onPressEnter, - onCompositionStart: handleOnCompositionStart, - onCompositionEnd: handleOnCompositionEnd, - addonAfter: button, - suffix, - onChange, - disabled, - }; + // ========================== Render ========================== + // >>> Root Props + const rootProps = pickAttrs(restProps, { + data: true, + }); - return (inputRef, ref)} {...inputProps} />; + const inputProps: InputProps = omit( + { + ...restProps, + classNames: omit(mergedClassNames, ['button', 'root']), + styles: omit(mergedStyles, ['button', 'root']), + prefixCls: inputPrefixCls, + type: 'search', + size, + variant, + onPressEnter, + onCompositionStart: handleOnCompositionStart, + onCompositionEnd: handleOnCompositionEnd, + onChange, + disabled, + }, + Object.keys(rootProps) as any[], + ); + + return ( + + ); }); if (process.env.NODE_ENV !== 'production') { diff --git a/components/input/__tests__/Search.test.tsx b/components/input/__tests__/Search.test.tsx index bd459a68ad..a4489745f7 100644 --- a/components/input/__tests__/Search.test.tsx +++ b/components/input/__tests__/Search.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { EditOutlined, UserOutlined } from '@ant-design/icons'; import { fireEvent, render } from '@testing-library/react'; import focusTest from '../../../tests/shared/focusTest'; @@ -8,7 +9,6 @@ import Button from '../../button'; import type { InputRef } from '../Input'; import Search from '../Search'; import type { SearchProps } from '../Search'; -import { EditOutlined, UserOutlined } from '@ant-design/icons'; describe('Input.Search', () => { focusTest(Search, { refFocus: true }); @@ -215,6 +215,8 @@ describe('Input.Search', () => { it('Search with allowClear should have one className only', () => { const { container } = render(); expect(container.querySelectorAll('.bamboo')).toHaveLength(1); + expect(container.querySelector('.ant-input-search')).toHaveClass('bamboo'); + expect(container.querySelector('.ant-input-affix-wrapper')).not.toHaveClass('bamboo'); }); // https://github.com/ant-design/ant-design/issues/53897 diff --git a/components/input/__tests__/__snapshots__/Search.test.tsx.snap b/components/input/__tests__/__snapshots__/Search.test.tsx.snap index 89c2d3bbf3..a67b752138 100644 --- a/components/input/__tests__/__snapshots__/Search.test.tsx.snap +++ b/components/input/__tests__/__snapshots__/Search.test.tsx.snap @@ -1,578 +1,482 @@ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing exports[`Input.Search rtl render component should be rendered correctly in RTL direction 1`] = ` - - + + + + - - + + `; exports[`Input.Search should support ReactNode suffix without error 1`] = ` - + - - -
- ok -
- - - - +
+ ok +
- + + `; exports[`Input.Search should support addonAfter 1`] = ` - - + - - Addon After + + + + + Addon After - + `; exports[`Input.Search should support addonAfter 2`] = ` - - + - - Addon After + + + + + Addon After - + `; exports[`Input.Search should support addonAfter and suffix for loading 1`] = ` - + - - - suffix - - - - - addonAfter + suffix - + + addonAfter + `; exports[`Input.Search should support addonAfter and suffix for loading 2`] = ` - + - - - suffix - - - - - addonAfter + suffix - + + addonAfter + `; exports[`Input.Search should support custom Button 1`] = ` - - + + + ok - - + + `; exports[`Input.Search should support custom button 1`] = ` - - + - - - + ok + + `; exports[`Input.Search should support invalid addonAfter 1`] = ` - - + + + + - - + + `; exports[`Input.Search should support invalid suffix 1`] = ` - + + + + + + + - - + + `; exports[`Input.Search should support loading 1`] = ` - - + + + + - - + + `; exports[`Input.Search should support loading 2`] = ` - - + + + + - - + + `; diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap index 9a83ff3171..c15ee4e10b 100644 --- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5689,86 +5689,78 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl > https:// - + - - - - - - - + +
`; -exports[`renders components/input/demo/compact-style.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; +exports[`renders components/input/demo/compact-style.tsx extend context correctly 2`] = `[]`; exports[`renders components/input/demo/debug-addon.tsx extend context correctly 1`] = `
-
@@ -6640,62 +6628,62 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] = style="padding-inline: 4px;" >
- +

- - +
- - +
- - - - - - - - - - - - - - - - - - - - - - -
-
+ + + + + + + +
+
+ + + + + + + +
+ +
+
+
- +

-
- +
-
- +
-
- +

-
- +

-
- +

-
- +
`; exports[`renders components/input/demo/group.tsx extend context correctly 2`] = ` [ "Warning: [antd: Input.Group] \`Input.Group\` is deprecated. Please use \`Space.Compact\` instead.", - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", ] `; @@ -11151,66 +11122,139 @@ exports[`renders components/input/demo/search-input.tsx extend context correctly
- + + +
+ +
+
- + +
- - + https:// +
+
- - - - - -
-
-
-
- https:// -
- - - - - - - - - - - - -
-
-
- - - - - - - - -
-
- - - - - - - - - - - - - -
-
- - - - - - - - - - - - + +
+ - -`; - -exports[`renders components/input/demo/search-input.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; - -exports[`renders components/input/demo/search-input-loading.tsx extend context correctly 1`] = ` -Array [ - - - - - - - , -
, -
, - - - - - - - - , -
, -
, - - - - - + + +
+
+ + + + + + - - , + +
+
+
+
+ + + + + + + + + +
+
+ +`; + +exports[`renders components/input/demo/search-input.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/input/demo/search-input-loading.tsx extend context correctly 1`] = ` +Array [ +
+ + +
, +
, +
, +
+ + +
, +
, +
, +
+ + +
, ] `; -exports[`renders components/input/demo/search-input-loading.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; +exports[`renders components/input/demo/search-input-loading.tsx extend context correctly 2`] = `[]`; exports[`renders components/input/demo/show-count.tsx extend context correctly 1`] = `
- - + + + + - - + + `; -exports[`renders components/input/demo/style-class.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; +exports[`renders components/input/demo/style-class.tsx extend context correctly 2`] = `[]`; exports[`renders components/input/demo/textarea.tsx extend context correctly 1`] = ` Array [ @@ -12413,57 +12292,45 @@ exports[`renders components/input/demo/variant.tsx extend context correctly 1`] type="text" value="" /> - - + + + + - - + + `; -exports[`renders components/input/demo/variant.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; +exports[`renders components/input/demo/variant.tsx extend context correctly 2`] = `[]`; diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap index 43e9d2d986..5d3b0ad1f2 100644 --- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap @@ -1581,86 +1581,78 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = ` > https:// - + - - - - - - - + +
-
@@ -2433,62 +2425,62 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = ` style="padding-inline:4px" >
- +
- - +
- - +
- - +
-
- +

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
+ + + + + + + +
+
+ + + + + + + +
+ +
+
+
- +

-
- +
-
- +

-
- +

-
- +

-
- +

-
- +
`; @@ -4480,66 +4456,139 @@ exports[`renders components/input/demo/search-input.tsx correctly 1`] = `
- + + +
+ +
+
- + +
- - + https:// +
+
- - - - - -
-
-
-
- https:// -
- - - - - - - - - - - - -
-
-
- - - - - - - - -
-
- - - - - - - - - - - - - -
-
- - - - - - - + +
+ + +
+
+ + +
+
+
+
+ + + - + +
+
+
+
+ + + + + + + + + +
`; exports[`renders components/input/demo/search-input-loading.tsx correctly 1`] = ` Array [ - - + + + + - - , + + ,
,
, - - + + + + - - , + + ,
,
, - - + + + + - - , + + Search + + + , ] `; @@ -5500,57 +5404,49 @@ exports[`renders components/input/demo/style-class.tsx correctly 1`] = ` /> - - + + + + - - + + `; @@ -5690,51 +5586,43 @@ exports[`renders components/input/demo/variant.tsx correctly 1`] = ` type="text" value="" /> - - + + + + - - + + `; diff --git a/components/input/__tests__/__snapshots__/index.test.tsx.snap b/components/input/__tests__/__snapshots__/index.test.tsx.snap index f5186aa670..62fe6f33a5 100644 --- a/components/input/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/input/__tests__/__snapshots__/index.test.tsx.snap @@ -446,11 +446,7 @@ exports[`Input rtl render component should be rendered correctly in RTL directio /> `; -exports[`Input rtl render component should be rendered correctly in RTL direction 2`] = ` - -`; +exports[`Input rtl render component should be rendered correctly in RTL direction 2`] = `null`; exports[`Input should support maxLength 1`] = ` { '&:hover': { zIndex: 1, borderInlineEndWidth: 1, - - [`${componentCls}-search-with-button &`]: { - zIndex: 0, - }, }, }, @@ -250,13 +246,9 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { '&:not(:last-child)': { borderStartEndRadius: 0, borderEndEndRadius: 0, - [`${componentCls}-search &`]: { - borderStartStartRadius: token.borderRadius, - borderEndStartRadius: token.borderRadius, - }, }, - [`&:not(:first-child), ${componentCls}-search &:not(:first-child)`]: { + [`&:not(:first-child)`]: { borderStartStartRadius: 0, borderEndStartRadius: 0, }, @@ -348,22 +340,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { [`${componentCls}-group-wrapper + ${componentCls}-group-wrapper`]: { marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(), [`${componentCls}-affix-wrapper`]: { - borderRadius: 0, - }, - }, - - [`${componentCls}-group-wrapper:not(:last-child)`]: { - [`&${componentCls}-search > ${componentCls}-group`]: { - [`& > ${componentCls}-group-addon > ${componentCls}-search-button`]: { - borderRadius: 0, - }, - - [`& > ${componentCls}`]: { - borderStartStartRadius: token.borderRadius, - borderStartEndRadius: 0, - borderEndEndRadius: 0, - borderEndStartRadius: token.borderRadius, - }, + // borderRadius: 0, }, }, }, @@ -468,13 +445,6 @@ export const genAffixStyle: GenerateStyle = (token: InputToken) => { ...genBasicInputStyle(token), display: 'inline-flex', - [`&:not(${componentCls}-disabled):hover`]: { - zIndex: 1, - [`${componentCls}-search-with-button &`]: { - zIndex: 0, - }, - }, - '&-focused, &:focus': { zIndex: 1, }, @@ -659,120 +629,6 @@ const genGroupStyle: GenerateStyle = (token: InputToken) => { }; }; -const genSearchInputStyle: GenerateStyle = (token: InputToken) => { - const { componentCls, antCls } = token; - const searchPrefixCls = `${componentCls}-search`; - return { - [searchPrefixCls]: { - [componentCls]: { - '&:not([disabled]):hover, &:not([disabled]):focus': { - [`+ ${componentCls}-group-addon ${searchPrefixCls}-button:not(${antCls}-btn-color-primary):not(${antCls}-btn-variant-text)`]: - { - borderInlineStartColor: token.colorPrimaryHover, - }, - }, - }, - - [`${componentCls}-affix-wrapper`]: { - height: token.controlHeight, - borderRadius: 0, - }, - - // fix slight height diff in Firefox: - // https://ant.design/components/auto-complete-cn/#auto-complete-demo-certain-category - [`${componentCls}-lg`]: { - lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(), - }, - - [`> ${componentCls}-group`]: { - [`> ${componentCls}-group-addon:last-child`]: { - insetInlineStart: -1, - padding: 0, - border: 0, - - [`${searchPrefixCls}-button`]: { - // Fix https://github.com/ant-design/ant-design/issues/47150 - marginInlineEnd: -1, - borderStartStartRadius: 0, - borderEndStartRadius: 0, - boxShadow: 'none', - }, - - [`${searchPrefixCls}-button:not(${antCls}-btn-color-primary)`]: { - color: token.colorTextDescription, - - '&:not([disabled]):hover': { - color: token.colorPrimaryHover, - }, - - '&:active': { - color: token.colorPrimaryActive, - }, - - [`&${antCls}-btn-loading::before`]: { - inset: 0, - }, - }, - }, - }, - - [`${searchPrefixCls}-button`]: { - height: token.controlHeight, - - '&:hover, &:focus': { - zIndex: 1, - }, - }, - - '&-large': { - [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: { - height: token.controlHeightLG, - }, - }, - - '&-small': { - [`${componentCls}-affix-wrapper, ${searchPrefixCls}-button`]: { - height: token.controlHeightSM, - }, - }, - - '&-rtl': { - direction: 'rtl', - }, - - // ===================== Compact Item Customized Styles ===================== - [`&${componentCls}-compact-item`]: { - [`&:not(${componentCls}-compact-last-item)`]: { - [`${componentCls}-group-addon`]: { - [`${componentCls}-search-button`]: { - marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(), - borderRadius: 0, - }, - }, - }, - - [`&:not(${componentCls}-compact-first-item)`]: { - [`${componentCls},${componentCls}-affix-wrapper`]: { - borderRadius: 0, - }, - }, - - [`> ${componentCls}-group-addon ${componentCls}-search-button, - > ${componentCls}, - ${componentCls}-affix-wrapper`]: { - '&:hover, &:focus, &:active': { - zIndex: 2, - }, - }, - - [`> ${componentCls}-affix-wrapper-focused`]: { - zIndex: 2, - }, - }, - }, - }; -}; - // ============================== Range =============================== const genRangeStyle: GenerateStyle = (token) => { const { componentCls } = token; @@ -807,7 +663,6 @@ export default genStyleHooks( return [ genGroupStyle(inputToken), - genSearchInputStyle(inputToken), genRangeStyle(inputToken), // ===================================================== // == Space Compact == diff --git a/components/input/style/search.ts b/components/input/style/search.ts new file mode 100644 index 0000000000..190866521c --- /dev/null +++ b/components/input/style/search.ts @@ -0,0 +1,35 @@ +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genStyleHooks } from '../../theme/internal'; + +const genSearchStyle: GenerateStyle> = (token) => { + const { componentCls } = token; + + const btnCls = `${componentCls}-btn`; + + return { + [componentCls]: { + width: '100%', + + // =========================== Button =========================== + [btnCls]: { + '&-filled': { + background: token.colorFillTertiary, + + '&:not(:disabled)': { + '&:hover': { + background: token.colorFillSecondary, + }, + + '&:active': { + background: token.colorFill, + }, + }, + }, + }, + }, + }; +}; + +export default genStyleHooks(['Input', 'Search'], (token) => { + return [genSearchStyle(token)]; +}); diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 9b76cad9e8..542f299de2 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -851,178 +851,154 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
- - + + + + - - - +
+
- - - - - - - - - - - - - - + +
+
+ + +
`; -exports[`renders components/space/demo/compact.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; +exports[`renders components/space/demo/compact.tsx extend context correctly 2`] = `[]`; exports[`renders components/space/demo/compact-button-vertical.tsx extend context correctly 1`] = `
- - + + + + - - - +
+
- + + + + - - + +
+ + + - - + +
+ + + - - - + +
- - - - - - - - - - - - - - + +
+
+ + +
- - + + + + - - - +
+
- + + + + - - + +
+ + + - - + + + + + , ); - expect(container.querySelector('.ant-input')).toHaveClass('ant-input-compact-item'); - expect(container.querySelector('.ant-input-search')).toHaveClass('ant-input-compact-item'); - expect(container.querySelector('.ant-input')).toHaveClass('ant-input-compact-first-item'); - expect(container.querySelector('.ant-btn-compact-item')).toHaveClass( - 'ant-btn-compact-last-item', + expect(container.querySelector('.test-input')).toHaveClass('ant-input-compact-first-item'); + expect(container.querySelector('.test-input-search')).toHaveClass('ant-space-compact'); + expect(container.querySelector('.test-input-search input')).toHaveClass( + 'ant-input-compact-item', ); + expect(container.querySelector('.test-button')).toHaveClass('ant-btn-compact-last-item'); }); [ @@ -97,12 +97,6 @@ describe('Space.Compact', () => { targetCls: 'ant-input', expectClsPrefix: 'ant-input', }, - { - name: 'Input.Search', - component: Input.Search, - targetCls: 'ant-input-search', - expectClsPrefix: 'ant-input', - }, { name: 'Select', component: Select, @@ -135,6 +129,16 @@ describe('Space.Compact', () => { }); }); + it('compact-item for Input.Search', () => { + const { container } = render( + + + , + ); + expect(container.querySelector('.ant-input-search')).toBeTruthy(); + expect(container.querySelector(`.ant-input-search`)).toHaveClass('ant-space-compact'); + }); + it('size', () => { const { container } = render( diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap index ef2579d4d7..8b3cc14b8e 100644 --- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -4484,53 +4484,45 @@ exports[`renders components/tree/demo/multiple-line.tsx extend context correctly exports[`renders components/tree/demo/search.tsx extend context correctly 1`] = `
- - + + + + - - + +
@@ -4703,11 +4695,7 @@ exports[`renders components/tree/demo/search.tsx extend context correctly 1`] =
`; -exports[`renders components/tree/demo/search.tsx extend context correctly 2`] = ` -[ - "Warning: [antd: Input] \`addonAfter\` is deprecated. Please use \`Space.Compact\` instead.", -] -`; +exports[`renders components/tree/demo/search.tsx extend context correctly 2`] = `[]`; exports[`renders components/tree/demo/style-class.tsx extend context correctly 1`] = `
- - + + + + - - + +