From 149079529daf240443e2496fb5800ee5cfc1605f Mon Sep 17 00:00:00 2001 From: Vipul Gupta <55375170+vipul0425@users.noreply.github.com> Date: Tue, 19 Nov 2024 03:15:28 +0530 Subject: [PATCH] TextControl: Deprecate 36px default size (#66745) * feat: Adds deprecation notice for textControl. * docs: Adds deprecation changelog. * doc: removes redundant comment. * docs: Updates all instances where textControl was used without new prop. * Update CHANGELOG.md --------- Co-authored-by: vipul0425 Co-authored-by: mirka <0mirka00@git.wordpress.org> --- .../fundamentals/block-in-the-editor.md | 2 ++ docs/getting-started/tutorial.md | 4 ++++ .../data-basics/3-building-an-edit-form.md | 10 ++++++++++ .../data-basics/4-building-a-create-page-form.md | 4 ++++ docs/how-to-guides/metabox.md | 2 ++ docs/reference-guides/block-api/block-context.md | 2 ++ .../block-api/block-edit-save.md | 4 ++++ .../slotfills/plugin-sidebar-more-menu-item.md | 2 ++ .../reference-guides/slotfills/plugin-sidebar.md | 2 ++ .../src/components/inspector-controls/README.md | 2 ++ packages/components/CHANGELOG.md | 1 + packages/components/src/disabled/README.md | 16 +++++++++------- packages/components/src/disabled/index.tsx | 9 ++++++++- .../src/disabled/stories/index.story.tsx | 1 + .../with-constrained-tabbing/README.md | 16 +++++++++++++--- .../src/higher-order/with-focus-return/README.md | 11 +++++++++-- .../src/placeholder/stories/index.story.tsx | 1 + packages/components/src/text-control/README.md | 1 + packages/components/src/text-control/index.tsx | 8 ++++++++ .../src/text-control/stories/index.story.tsx | 1 + .../src/text-control/test/text-control.tsx | 8 +++++++- packages/core-data/README.md | 2 ++ .../core-data/src/hooks/use-entity-record.ts | 2 ++ 23 files changed, 97 insertions(+), 14 deletions(-) diff --git a/docs/getting-started/fundamentals/block-in-the-editor.md b/docs/getting-started/fundamentals/block-in-the-editor.md index d1f2a25063e6c6..1d51239907d8b5 100644 --- a/docs/getting-started/fundamentals/block-in-the-editor.md +++ b/docs/getting-started/fundamentals/block-in-the-editor.md @@ -139,6 +139,8 @@ export default function Edit( { attributes, setAttributes } ) { setAttributes( { message: val } ) } style={ { diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md index 4e43241f63fb16..2a5dd979d3a569 100644 --- a/docs/getting-started/tutorial.md +++ b/docs/getting-started/tutorial.md @@ -480,6 +480,8 @@ export default function Edit( { attributes, setAttributes } ) { { showStartingYear && ( @@ -139,6 +141,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) { return (
@@ -164,6 +168,8 @@ function VanillaReactForm({ initialTitle }) { const [title, setTitle] = useState( initialTitle ); return ( @@ -233,6 +239,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) { return (
diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md index 9e4dd3d1a916bd..86721c77e463c6 100644 --- a/docs/reference-guides/block-api/block-edit-save.md +++ b/docs/reference-guides/block-api/block-edit-save.md @@ -210,6 +210,8 @@ edit: ( { attributes, setAttributes } ) => { return (
{ return (
{ diff --git a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md index 4a4ff98697b5f3..1a1b2540b258b9 100644 --- a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md +++ b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md @@ -45,6 +45,8 @@ const PluginSidebarMoreMenuItemTest = () => { ) }

setText( newText ) } diff --git a/docs/reference-guides/slotfills/plugin-sidebar.md b/docs/reference-guides/slotfills/plugin-sidebar.md index 9bf911b3bb13f2..7191b80e54e2d6 100644 --- a/docs/reference-guides/slotfills/plugin-sidebar.md +++ b/docs/reference-guides/slotfills/plugin-sidebar.md @@ -38,6 +38,8 @@ const PluginSidebarExample = () => { ) }

setText( newText ) } diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md index fd4847f53472b2..916f53b5f42d8b 100644 --- a/packages/block-editor/src/components/inspector-controls/README.md +++ b/packages/block-editor/src/components/inspector-controls/README.md @@ -116,6 +116,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', { { diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8c217c90ba1b7d..d93eb30ac0ec50 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Deprecations - `DimensionControl`: Deprecate 36px default size ([#66705](https://github.com/WordPress/gutenberg/pull/66705)). +- `TextControl`: Deprecate 36px default size ([#66745](https://github.com/WordPress/gutenberg/pull/66745). ### Bug Fixes diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md index 9b257acd0f737b..e9eb6398554d9d 100644 --- a/packages/components/src/disabled/README.md +++ b/packages/components/src/disabled/README.md @@ -13,7 +13,14 @@ import { Button, Disabled, TextControl } from '@wordpress/components'; const MyDisabled = () => { const [ isDisabled, setIsDisabled ] = useState( true ); - let input = {} } />; + let input = ( + {} } + /> + ); if ( isDisabled ) { input = { input }; } @@ -38,12 +45,7 @@ A component can detect if it has been wrapped in a `` by accessing i ```jsx function CustomButton( props ) { const isDisabled = useContext( Disabled.Context ); - return ( -
); -} +}; ``` diff --git a/packages/components/src/higher-order/with-focus-return/README.md b/packages/components/src/higher-order/with-focus-return/README.md index b99d76bc6f1c9a..81cecad4310f11 100644 --- a/packages/components/src/higher-order/with-focus-return/README.md +++ b/packages/components/src/higher-order/with-focus-return/README.md @@ -13,7 +13,12 @@ import { withFocusReturn, TextControl, Button } from '@wordpress/components'; const EnhancedComponent = withFocusReturn( () => (
Focus will return to the previous input when this component is unmounted - {} } /> + {} } + />
) ); @@ -27,6 +32,8 @@ const MyComponentWithFocusReturn = () => { return (
setText( value ) } @@ -39,7 +46,7 @@ const MyComponentWithFocusReturn = () => { ) }
); -} +}; ``` `withFocusReturn` can optionally be called as a higher-order function creator. Provided an options object, a new higher-order function is returned. diff --git a/packages/components/src/placeholder/stories/index.story.tsx b/packages/components/src/placeholder/stories/index.story.tsx index 541eeceedc27d4..1a0db673320bca 100644 --- a/packages/components/src/placeholder/stories/index.story.tsx +++ b/packages/components/src/placeholder/stories/index.story.tsx @@ -45,6 +45,7 @@ const Template: StoryFn< typeof Placeholder > = ( args ) => {
{ return ( setClassName( value ) } diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx index ea2d2c17bb9cf6..83881542fe7b7b 100644 --- a/packages/components/src/text-control/index.tsx +++ b/packages/components/src/text-control/index.tsx @@ -16,6 +16,7 @@ import { forwardRef } from '@wordpress/element'; import BaseControl from '../base-control'; import type { WordPressComponentProps } from '../context'; import type { TextControlProps } from './types'; +import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; function UnforwardedTextControl( props: WordPressComponentProps< TextControlProps, 'input', false >, @@ -38,6 +39,12 @@ function UnforwardedTextControl( const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) => onChange( event.target.value ); + maybeWarnDeprecated36pxSize( { + componentName: 'TextControl', + size: undefined, + __next40pxDefaultSize, + } ); + return ( setClassName( value ) } diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx index bebdb2caf75f63..948eca84a634c7 100644 --- a/packages/components/src/text-control/stories/index.story.tsx +++ b/packages/components/src/text-control/stories/index.story.tsx @@ -54,6 +54,7 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind( ); Default.args = { __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, }; export const WithLabelAndHelpText: StoryFn< typeof TextControl > = diff --git a/packages/components/src/text-control/test/text-control.tsx b/packages/components/src/text-control/test/text-control.tsx index 19b17cae443614..7eb3a82d2fb5f5 100644 --- a/packages/components/src/text-control/test/text-control.tsx +++ b/packages/components/src/text-control/test/text-control.tsx @@ -9,7 +9,13 @@ import { render, screen } from '@testing-library/react'; import _TextControl from '..'; const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => { - return <_TextControl { ...props } __nextHasNoMarginBottom />; + return ( + <_TextControl + { ...props } + __nextHasNoMarginBottom + __next40pxDefaultSize + /> + ); }; const noop = () => {}; diff --git a/packages/core-data/README.md b/packages/core-data/README.md index 079f95ddbfc7a6..eb6980cdd4eea1 100644 --- a/packages/core-data/README.md +++ b/packages/core-data/README.md @@ -1083,6 +1083,8 @@ function PageRenameForm( { id } ) { return (
*