diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a532fda22f972..87fd00dd8c826 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,10 @@ - `Tabs`: fix skipping indication animation glitch ([#65878](https://github.com/WordPress/gutenberg/pull/65878)). - `ToggleGroupControl`: Don't autoselect option on first group focus ([#65892](https://github.com/WordPress/gutenberg/pull/65892)). +### Deprecations + +- `SearchControl`: Soft deprecate `onClose` prop ([#65988](https://github.com/WordPress/gutenberg/pull/65988)). + ### Enhancements - `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)). diff --git a/packages/components/src/search-control/README.md b/packages/components/src/search-control/README.md index 52513ab47f582..3945f451d6dcf 100644 --- a/packages/components/src/search-control/README.md +++ b/packages/components/src/search-control/README.md @@ -76,6 +76,8 @@ A function that receives the value of the input. #### onClose +_Note: this prop is deprecated._ + When an `onClose` callback is provided, the search control will render a close button that will trigger the given callback. Use this if you want the button to trigger your own logic to close the search field entirely, rather than just clearing the input value. diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx index c41eda9b209b6..0a1b821a0a079 100644 --- a/packages/components/src/search-control/index.tsx +++ b/packages/components/src/search-control/index.tsx @@ -10,6 +10,7 @@ import { useInstanceId, useMergeRefs } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { Icon, search, closeSmall } from '@wordpress/icons'; import { forwardRef, useMemo, useRef } from '@wordpress/element'; +import deprecated from '@wordpress/deprecated'; /** * Internal dependencies @@ -31,6 +32,12 @@ function SuffixItem( { return ; } + if ( onClose ) { + deprecated( '`onClose` prop in wp.components.SearchControl', { + since: '6.8', + } ); + } + const onReset = () => { onChange( '' ); searchRef.current?.focus(); diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx index 215288bb67c9b..59618dd7e0913 100644 --- a/packages/components/src/search-control/stories/index.story.tsx +++ b/packages/components/src/search-control/stories/index.story.tsx @@ -50,18 +50,3 @@ Default.args = { help: 'Help text to explain the input.', __nextHasNoMarginBottom: true, }; - -/** - * When an `onClose` callback is provided, the search control will render a close button - * that will trigger the given callback. - * - * Use this if you want the button to trigger your own logic to close the search field entirely, - * rather than just clearing the input value. - */ -export const WithOnClose = Template.bind( {} ); -WithOnClose.args = { - ...Default.args, -}; -WithOnClose.argTypes = { - onClose: { action: 'onClose' }, -}; diff --git a/packages/components/src/search-control/test/index.tsx b/packages/components/src/search-control/test/index.tsx index c6637945adcf6..5250a531f58d0 100644 --- a/packages/components/src/search-control/test/index.tsx +++ b/packages/components/src/search-control/test/index.tsx @@ -72,13 +72,16 @@ describe( 'SearchControl', () => { expect( onChangeSpy ).toHaveBeenLastCalledWith( '' ); } ); - it( 'should should render a Close button (instead of Reset) when onClose function is provided', async () => { + it( 'should render a Close button (instead of Reset) when onClose function is provided', async () => { const onChangeSpy = jest.fn(); const onCloseSpy = jest.fn(); render( ); + expect( console ).toHaveWarnedWith( + '`onClose` prop in wp.components.SearchControl is deprecated since version 6.8.' + ); expect( screen.queryByRole( 'button', { name: 'Close search' } ) ).toBeVisible(); diff --git a/packages/components/src/search-control/types.ts b/packages/components/src/search-control/types.ts index 1bf38d1c25f6f..e4117e5ed57ff 100644 --- a/packages/components/src/search-control/types.ts +++ b/packages/components/src/search-control/types.ts @@ -40,6 +40,9 @@ export type SearchControlProps = Pick< InputControlProps, 'help' | 'value' > & { * * Use this if you want the button to trigger your own logic to close the search field entirely, * rather than just clearing the input value. + * + * @deprecated + * @ignore */ onClose?: () => void; /** @ignore */