From 29cb2d48d04428aee72f7230ee856b419e13b7b9 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 28 Feb 2023 17:31:10 -0800 Subject: [PATCH 01/11] FormTokenField: remove margin bottom from help text --- .../components/src/form-token-field/README.md | 1 + .../components/src/form-token-field/index.tsx | 22 +++++++++++++++---- .../src/form-token-field/style.scss | 6 ----- .../components/src/form-token-field/types.ts | 6 +++++ 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md index 3b5bd7e46bf21e..2bec2c5bfe12f4 100644 --- a/packages/components/src/form-token-field/README.md +++ b/packages/components/src/form-token-field/README.md @@ -61,6 +61,7 @@ The `value` property is handled in a manner similar to controlled form component - `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden. - `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens. - `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true). +- `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.) ## Usage diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 980376e905e782..fa7c285d1dfb96 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -7,6 +7,7 @@ import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react'; /** * WordPress dependencies */ +import deprecated from '@wordpress/deprecated'; import { useEffect, useRef, useState } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose'; @@ -22,7 +23,10 @@ import { TokensAndInputWrapperFlex } from './styles'; import SuggestionsList from './suggestions-list'; import type { FormTokenFieldProps, TokenItem } from './types'; import { FlexItem } from '../flex'; -import { StyledLabel } from '../base-control/styles/base-control-styles'; +import { + StyledHelp, + StyledLabel, +} from '../base-control/styles/base-control-styles'; const identity = ( value: string ) => value; @@ -67,8 +71,17 @@ export function FormTokenField( props: FormTokenFieldProps ) { __experimentalShowHowTo = true, __next36pxDefaultSize = false, __experimentalAutoSelectFirstMatch = false, + __nextHasNoMarginBottom = false, } = props; + if ( ! __nextHasNoMarginBottom ) { + deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', { + since: '6.2', + version: '6.5', + hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', + } ); + } + const instanceId = useInstanceId( FormTokenField ); // We reset to these initial values again in the onBlur @@ -717,16 +730,17 @@ export function FormTokenField( props: FormTokenFieldProps ) { ) } { __experimentalShowHowTo && ( -

{ tokenizeOnSpace ? __( 'Separate with commas, spaces, or the Enter key.' ) : __( 'Separate with commas or the Enter key.' ) } -

+ ) } ); diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 52d118d5d99bdc..0bd356417ce860 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -48,12 +48,6 @@ } } -.components-form-token-field__help { - font-size: $helptext-font-size; - font-style: normal; - color: $gray-700; -} - // Tokens .components-form-token-field__token { font-size: $default-font-size; diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts index bdc67d725489b4..44c11d6461859c 100644 --- a/packages/components/src/form-token-field/types.ts +++ b/packages/components/src/form-token-field/types.ts @@ -169,6 +169,12 @@ export interface FormTokenFieldProps * Custom renderer for suggestions. */ __experimentalRenderItem?: ( args: { item: string } ) => ReactNode; + /** + * Start opting into the new margin-free styles that will become the default in a future version. + * + * @default false + */ + __nextHasNoMarginBottom?: boolean; } /** From 44fbac2fc282610e72bdb88aaa357b7d4c3e72c8 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 28 Feb 2023 19:13:20 -0800 Subject: [PATCH 02/11] Update Changelog --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1ac67cd6d62a4e..c7cc08de01447e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -70,6 +70,8 @@ - `Higher Order` -- `with-constrained-tabbing`: Convert to TypeScript ([#48162](https://github.com/WordPress/gutenberg/pull/48162)). - `Autocomplete`: Convert to TypeScript ([#47751](https://github.com/WordPress/gutenberg/pull/47751)). - `Autocomplete`: avoid calling setState on input ([#48565](https://github.com/WordPress/gutenberg/pull/48565)). +- `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom`([47515](https://github.com/WordPress/gutenberg/pull/47515)). +- `FormTokenField`: Remove margin bottom from help text with `__nextHasNoMarginBottom`([48609](https://github.com/WordPress/gutenberg/pull/48609)). ## 23.4.0 (2023-02-15) From ea52db68e5fa8911cf179b12c994a5d74a1fbe14 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 28 Feb 2023 22:34:12 -0800 Subject: [PATCH 03/11] Add new prop to test to fix failures --- packages/components/src/form-token-field/test/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx index a10677f3c10aa1..e62e851f1cf226 100644 --- a/packages/components/src/form-token-field/test/index.tsx +++ b/packages/components/src/form-token-field/test/index.tsx @@ -44,6 +44,7 @@ const FormTokenFieldWithState = ( { setSelectedValue( tokens ); onChange?.( tokens ); } } + __nextHasNoMarginBottom /> ); }; From ccd7cd6146871b784f69955da882a21a66df8bfc Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 1 Mar 2023 16:31:34 -0800 Subject: [PATCH 04/11] Fix mistakes found in review --- packages/components/src/form-token-field/README.md | 2 +- packages/components/src/form-token-field/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md index 2bec2c5bfe12f4..90fe84e56f2ee6 100644 --- a/packages/components/src/form-token-field/README.md +++ b/packages/components/src/form-token-field/README.md @@ -61,7 +61,7 @@ The `value` property is handled in a manner similar to controlled form component - `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden. - `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens. - `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true). -- `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.) +- `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.5. (The prop can be safely removed once this happens.) ## Usage diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index fa7c285d1dfb96..3540cb9c053c23 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -75,7 +75,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { } = props; if ( ! __nextHasNoMarginBottom ) { - deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', { + deprecated( 'Bottom margin styles for wp.components.FormTokenField', { since: '6.2', version: '6.5', hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', @@ -732,7 +732,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { { __experimentalShowHowTo && ( { tokenizeOnSpace From 2e21f00691106948fbfb2ad65bdaca66ce32f4ec Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 1 Mar 2023 16:44:40 -0800 Subject: [PATCH 05/11] Ensure bottom margin is removed when prop is true --- packages/components/src/form-token-field/index.tsx | 2 +- packages/components/src/form-token-field/style.scss | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 3540cb9c053c23..81cf95c12855a3 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -733,7 +733,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { { tokenizeOnSpace ? __( diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 0bd356417ce860..775999c1d01246 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -1,7 +1,6 @@ .components-form-token-field__input-container { @include input-control(); width: 100%; - margin: 0 0 $grid-unit-10 0; padding: 0; cursor: text; From e6debbc2b4bd0aa0aa9a684def555e65f7e3d2dd Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Mar 2023 17:03:16 -0700 Subject: [PATCH 06/11] Replace CSS margin with Spacer --- packages/components/src/form-token-field/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 81cf95c12855a3..8ab99376b23afb 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -27,6 +27,7 @@ import { StyledHelp, StyledLabel, } from '../base-control/styles/base-control-styles'; +import { Spacer } from '../spacer'; const identity = ( value: string ) => value; @@ -729,6 +730,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { /> ) } + { __experimentalShowHowTo && ( Date: Tue, 28 Mar 2023 08:54:45 -0700 Subject: [PATCH 07/11] Update changelog --- packages/components/CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c7cc08de01447e..f057dc84d69185 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ - `CustomGradientPicker`: Convert to TypeScript ([#48929](https://github.com/WordPress/gutenberg/pull/48929)). - `ColorPicker`: Convert to TypeScript ([#49214](https://github.com/WordPress/gutenberg/pull/49214)). - `GradientPicker`: Convert to TypeScript ([#48316](https://github.com/WordPress/gutenberg/pull/48316)). +- `FormTokenField`: Remove margin bottom from help text with `__nextHasNoMarginBottom`([48609](https://github.com/WordPress/gutenberg/pull/48609)). ### Enhancements @@ -70,8 +71,6 @@ - `Higher Order` -- `with-constrained-tabbing`: Convert to TypeScript ([#48162](https://github.com/WordPress/gutenberg/pull/48162)). - `Autocomplete`: Convert to TypeScript ([#47751](https://github.com/WordPress/gutenberg/pull/47751)). - `Autocomplete`: avoid calling setState on input ([#48565](https://github.com/WordPress/gutenberg/pull/48565)). -- `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom`([47515](https://github.com/WordPress/gutenberg/pull/47515)). -- `FormTokenField`: Remove margin bottom from help text with `__nextHasNoMarginBottom`([48609](https://github.com/WordPress/gutenberg/pull/48609)). ## 23.4.0 (2023-02-15) From c17d11160b81b5282223714ecd7ac6002e6704e1 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 28 Mar 2023 08:57:38 -0700 Subject: [PATCH 08/11] update version --- packages/components/src/form-token-field/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 8ab99376b23afb..24ad35f8c4d8f6 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -77,7 +77,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { if ( ! __nextHasNoMarginBottom ) { deprecated( 'Bottom margin styles for wp.components.FormTokenField', { - since: '6.2', + since: '6.3', version: '6.5', hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', } ); From 6dd790fd879aef4ce4849919808c780797591076 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 28 Mar 2023 09:22:02 -0700 Subject: [PATCH 09/11] Update spacer conditional to be more readable --- packages/components/src/form-token-field/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index 24ad35f8c4d8f6..a77662b9a83d4e 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -730,7 +730,7 @@ export function FormTokenField( props: FormTokenFieldProps ) { /> ) } - + { ! __nextHasNoMarginBottom && } { __experimentalShowHowTo && ( Date: Tue, 28 Mar 2023 09:29:55 -0700 Subject: [PATCH 10/11] Remove deprecation warning to be added later --- packages/components/src/form-token-field/index.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx index a77662b9a83d4e..5c87db86514b7e 100644 --- a/packages/components/src/form-token-field/index.tsx +++ b/packages/components/src/form-token-field/index.tsx @@ -7,7 +7,6 @@ import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react'; /** * WordPress dependencies */ -import deprecated from '@wordpress/deprecated'; import { useEffect, useRef, useState } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose'; @@ -75,14 +74,6 @@ export function FormTokenField( props: FormTokenFieldProps ) { __nextHasNoMarginBottom = false, } = props; - if ( ! __nextHasNoMarginBottom ) { - deprecated( 'Bottom margin styles for wp.components.FormTokenField', { - since: '6.3', - version: '6.5', - hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', - } ); - } - const instanceId = useInstanceId( FormTokenField ); // We reset to these initial values again in the onBlur From bcf1a9fccba95e1dbfe6bab9c29697dc41e2d035 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 28 Mar 2023 19:36:14 +0200 Subject: [PATCH 11/11] Tweak changelog --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f057dc84d69185..1c9fb763995e99 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,7 +8,7 @@ - `CustomGradientPicker`: Convert to TypeScript ([#48929](https://github.com/WordPress/gutenberg/pull/48929)). - `ColorPicker`: Convert to TypeScript ([#49214](https://github.com/WordPress/gutenberg/pull/49214)). - `GradientPicker`: Convert to TypeScript ([#48316](https://github.com/WordPress/gutenberg/pull/48316)). -- `FormTokenField`: Remove margin bottom from help text with `__nextHasNoMarginBottom`([48609](https://github.com/WordPress/gutenberg/pull/48609)). +- `FormTokenField`: Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles ([48609](https://github.com/WordPress/gutenberg/pull/48609)). ### Enhancements