Skip to content

Commit

Permalink
TextControl: Deprecate 36px default size (#66745)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
Co-authored-by: mirka <[email protected]>
  • Loading branch information
3 people authored Nov 18, 2024
1 parent 2027fdb commit 1490795
Show file tree
Hide file tree
Showing 23 changed files with 97 additions and 14 deletions.
2 changes: 2 additions & 0 deletions docs/getting-started/fundamentals/block-in-the-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,8 @@ export default function Edit( { attributes, setAttributes } ) {
</div>
</InspectorControls>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
value={ attributes.message }
onChange={ ( val ) => setAttributes( { message: val } ) }
style={ {
Expand Down
4 changes: 4 additions & 0 deletions docs/getting-started/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,8 @@ export default function Edit( { attributes, setAttributes } ) {
<InspectorControls>
<PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __(
'Starting year',
'copyright-date-block'
Expand Down Expand Up @@ -540,6 +542,8 @@ export default function Edit( { attributes, setAttributes } ) {
/>
{ showStartingYear && (
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __(
'Starting year',
'copyright-date-block'
Expand Down
10 changes: 10 additions & 0 deletions docs/how-to-guides/data-basics/3-building-an-edit-form.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
return (
<div className="my-gutenberg-form">
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
value=''
label='Page title:'
/>
Expand Down Expand Up @@ -139,6 +141,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
return (
<div className="my-gutenberg-form">
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label='Page title:'
value={ page.title.rendered }
/>
Expand All @@ -164,6 +168,8 @@ function VanillaReactForm({ initialTitle }) {
const [title, setTitle] = useState( initialTitle );
return (
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
value={ title }
onChange={ setTitle }
/>
Expand Down Expand Up @@ -233,6 +239,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
return (
<div className="my-gutenberg-form">
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Page title:"
value={ page.title }
onChange={ handleChange }
Expand Down Expand Up @@ -501,6 +509,8 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
return (
<div className="my-gutenberg-form">
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Page title:"
value={ page.title }
onChange={ handleChange }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
return (
<div className="my-gutenberg-form">
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Page title:"
value={ title }
onChange={ onChangeTitle }
Expand Down Expand Up @@ -346,6 +348,8 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
return (
<div className="my-gutenberg-form">
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Page title:"
value={ title }
onChange={ onChangeTitle }
Expand Down
2 changes: 2 additions & 0 deletions docs/how-to-guides/metabox.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,8 @@ registerBlockType( 'myguten/meta-block', {
return (
<div { ...blockProps }>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Meta Block Field"
value={ metaFieldValue }
onChange={ updateMetaValue }
Expand Down
2 changes: 2 additions & 0 deletions docs/reference-guides/block-api/block-context.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,8 @@ export default function Edit( props ) {
return (
<div>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Record ID' ) }
value={ recordId }
onChange={ ( val ) =>
Expand Down
4 changes: 4 additions & 0 deletions docs/reference-guides/block-api/block-edit-save.md
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,8 @@ edit: ( { attributes, setAttributes } ) => {
return (
<div { ...blockProps }>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label='My Text Field'
value={ attributes.content }
onChange={ updateFieldValue }
Expand Down Expand Up @@ -246,6 +248,8 @@ edit: ( { attributes, setAttributes } ) => {
return (
<div { ...blockProps }>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label='Number Posts to Show'
value={ attributes.postsToShow }
onChange={ ( val ) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ const PluginSidebarMoreMenuItemTest = () => {
) }
</p>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Text Control' ) }
value={ text }
onChange={ ( newText ) => setText( newText ) }
Expand Down
2 changes: 2 additions & 0 deletions docs/reference-guides/slotfills/plugin-sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ const PluginSidebarExample = () => {
) }
</p>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Text Control' ) }
value={ text }
onChange={ ( newText ) => setText( newText ) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {

<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Text Field"
help="Additional help text"
value={ textField }
Expand Down Expand Up @@ -208,6 +209,7 @@ function MyBlockEdit( { attributes, setAttributes } ) {
<InspectorAdvancedControls>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="HTML anchor"
value={ attributes.anchor }
onChange={ ( nextValue ) => {
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 9 additions & 7 deletions packages/components/src/disabled/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,14 @@ import { Button, Disabled, TextControl } from '@wordpress/components';
const MyDisabled = () => {
const [ isDisabled, setIsDisabled ] = useState( true );

let input = <TextControl label="Input" onChange={ () => {} } />;
let input = (
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label="Input"
onChange={ () => {} }
/>
);
if ( isDisabled ) {
input = <Disabled>{ input }</Disabled>;
}
Expand All @@ -38,12 +45,7 @@ A component can detect if it has been wrapped in a `<Disabled />` by accessing i
```jsx
function CustomButton( props ) {
const isDisabled = useContext( Disabled.Context );
return (
<button
{ ...props }
style={ { opacity: isDisabled ? 0.5 : 1 } }
/>
);
return <button { ...props } style={ { opacity: isDisabled ? 0.5 : 1 } } />;
}
```

Expand Down
9 changes: 8 additions & 1 deletion packages/components/src/disabled/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,14 @@ const { Consumer, Provider } = Context;
* const MyDisabled = () => {
* const [ isDisabled, setIsDisabled ] = useState( true );
*
* let input = <TextControl label="Input" onChange={ () => {} } />;
* let input = (
* <TextControl
* __next40pxDefaultSize
* __nextHasNoMarginBottom
* label="Input"
* onChange={ () => {} }
* />
* );
* if ( isDisabled ) {
* input = <Disabled>{ input }</Disabled>;
* }
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/disabled/stories/index.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const Form = () => {
<VStack>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Text Control"
value={ textControlValue }
onChange={ setTextControlValue }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,18 @@ const MyComponentWithConstrainedTabbing = () => {
const [ isConstrainedTabbing, setIsConstrainedTabbing ] = useState( false );
let form = (
<form>
<TextControl label="Input 1" onChange={ () => {} } />
<TextControl label="Input 2" onChange={ () => {} } />
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label="Input 1"
onChange={ () => {} }
/>
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label="Input 2"
onChange={ () => {} }
/>
</form>
);
if ( isConstrainedTabbing ) {
Expand All @@ -43,5 +53,5 @@ const MyComponentWithConstrainedTabbing = () => {
</Button>
</div>
);
}
};
```
11 changes: 9 additions & 2 deletions packages/components/src/higher-order/with-focus-return/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@ import { withFocusReturn, TextControl, Button } from '@wordpress/components';
const EnhancedComponent = withFocusReturn( () => (
<div>
Focus will return to the previous input when this component is unmounted
<TextControl autoFocus={ true } onChange={ () => {} } />
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
autoFocus={ true }
onChange={ () => {} }
/>
</div>
) );

Expand All @@ -27,6 +32,8 @@ const MyComponentWithFocusReturn = () => {
return (
<div>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
placeholder="Type something"
value={ text }
onChange={ ( value ) => setText( value ) }
Expand All @@ -39,7 +46,7 @@ const MyComponentWithFocusReturn = () => {
) }
</div>
);
}
};
```

`withFocusReturn` can optionally be called as a higher-order function creator. Provided an options object, a new higher-order function is returned.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const Template: StoryFn< typeof Placeholder > = ( args ) => {
<div>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Sample Field"
placeholder="Enter something here"
value={ value }
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/text-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ const MyTextControl = () => {
return (
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label="Additional CSS Class"
value={ className }
onChange={ ( value ) => setClassName( value ) }
Expand Down
8 changes: 8 additions & 0 deletions packages/components/src/text-control/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 >,
Expand All @@ -38,6 +39,12 @@ function UnforwardedTextControl(
const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
onChange( event.target.value );

maybeWarnDeprecated36pxSize( {
componentName: 'TextControl',
size: undefined,
__next40pxDefaultSize,
} );

return (
<BaseControl
__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
Expand Down Expand Up @@ -77,6 +84,7 @@ function UnforwardedTextControl(
* return (
* <TextControl
* __nextHasNoMarginBottom
* __next40pxDefaultSize
* label="Additional CSS Class"
* value={ className }
* onChange={ ( value ) => setClassName( value ) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
);
Default.args = {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
};

export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
Expand Down
8 changes: 7 additions & 1 deletion packages/components/src/text-control/test/text-control.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {};
Expand Down
2 changes: 2 additions & 0 deletions packages/core-data/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1083,6 +1083,8 @@ function PageRenameForm( { id } ) {
return (
<form onSubmit={ onRename }>
<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Name' ) }
value={ page.editedRecord.title }
onChange={ setTitle }
Expand Down
2 changes: 2 additions & 0 deletions packages/core-data/src/hooks/use-entity-record.ts
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,8 @@ const EMPTY_OBJECT = {};
* return (
* <form onSubmit={ onRename }>
* <TextControl
* __nextHasNoMarginBottom
* __next40pxDefaultSize
* label={ __( 'Name' ) }
* value={ page.editedRecord.title }
* onChange={ setTitle }
Expand Down

1 comment on commit 1490795

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 1490795.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11901675232
📝 Reported issues:

Please sign in to comment.