From fe506190674989b2e350aac79faaf8991e47dd95 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 2 Dec 2024 11:11:23 +0530 Subject: [PATCH 1/3] Update FormTokenField Component to use default 40px size and added 36px deprecation warning --- packages/components/src/form-token-field/README.md | 1 + packages/components/src/form-token-field/index.tsx | 7 +++++++ .../src/form-token-field/stories/index.story.tsx | 1 + packages/components/src/form-token-field/test/index.tsx | 6 +++++- 4 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md index 70e9bd09a61a36..a04ba5ec7b9d29 100644 --- a/packages/components/src/form-token-field/README.md +++ b/packages/components/src/form-token-field/README.md @@ -85,6 +85,7 @@ const MyFormTokenField = () => { return ( setSelectedContinents( tokens ) } diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 4f2f325e409a76..987c75d769b727 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -30,6 +30,7 @@ import { import { Spacer } from '../spacer'; import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'; import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events'; +import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size'; const identity = ( value: string ) => value; @@ -86,6 +87,12 @@ export function FormTokenField( props: FormTokenFieldProps ) { } ); } + maybeWarnDeprecated36pxSize( { + componentName: 'FormTokenField', + size: undefined, + __next40pxDefaultSize, + } ); + const instanceId = useInstanceId( FormTokenField ); // We reset to these initial values again in the onBlur diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx index 729120ad456553..96107025b902f5 100644 --- a/packages/components/src/form-token-field/stories/index.story.tsx +++ b/packages/components/src/form-token-field/stories/index.story.tsx @@ -64,6 +64,7 @@ Default.args = { label: 'Type a continent', suggestions: continents, __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, }; export const Async: StoryFn< typeof FormTokenField > = ( { diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx index 961214a574c90d..60c17112717bd1 100644 --- a/packages/components/src/form-token-field/test/index.tsx +++ b/packages/components/src/form-token-field/test/index.tsx @@ -21,7 +21,11 @@ import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import FormTokenField from '../'; +import _FormTokenField from '../'; + +const FormTokenField = ( props: ComponentProps< typeof _FormTokenField > ) => ( + <_FormTokenField __next40pxDefaultSize { ...props } /> +); const FormTokenFieldWithState = ( { onChange, From c7ec6607abb39162a523e139746402faf46df306 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Mon, 2 Dec 2024 11:16:37 +0530 Subject: [PATCH 2/3] Update the changelog to add deprecation PR for the FormTokenField --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c9295e7ef861e0..16c14e274c8e43 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,6 +7,7 @@ - `BoxControl`: Passive deprecate `onMouseOver`/`onMouseOut`. Pass to the `inputProps` prop instead ([#67332](https://github.com/WordPress/gutenberg/pull/67332)). - `BoxControl`: Deprecate 36px default size ([#66704](https://github.com/WordPress/gutenberg/pull/66704)). - `UnitControl`: Deprecate 36px default size ([#66791](https://github.com/WordPress/gutenberg/pull/66791)). +- `FormTokenField`: Deprecate 36px default size ([#67454](https://github.com/WordPress/gutenberg/pull/67454)). ### Enhancements From fd2f767707185137c50ab9cb5bcaa1209e40f6b7 Mon Sep 17 00:00:00 2001 From: hbhalodia Date: Tue, 3 Dec 2024 15:13:29 +0530 Subject: [PATCH 3/3] Add __next40pxDefaultSize to async story for FormTokenField --- packages/components/src/form-token-field/stories/index.story.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx index 96107025b902f5..c43d155c809bb7 100644 --- a/packages/components/src/form-token-field/stories/index.story.tsx +++ b/packages/components/src/form-token-field/stories/index.story.tsx @@ -103,6 +103,7 @@ Async.args = { label: 'Type a continent', suggestions: continents, __nextHasNoMarginBottom: true, + __next40pxDefaultSize: true, }; export const DropdownSelector: StoryFn< typeof FormTokenField > =