Documentation: Remove withState HOC references part 2 (#33222)

* Update Popover component docs * Update FormTokenField component docs * Update FormToggle component docs * Update Disabled component docs * Update TextControl component docs * Update MenuItem component docs * Update FontSizePicker component docs
WordPress · Jul 15, 2021 · 4e37d4c · 4e37d4c
1 parent 8692185
commit 4e37d4c
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 84 deletions.
diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md
@@ -8,18 +8,18 @@ Assuming you have a form component, you can disable all form inputs by wrapping
 
 ```jsx
 import { Button, Disabled, TextControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyDisabled = () => {
+	const [ isDisabled, setIsDisabled ] = useState( true );
 
-const MyDisabled = withState( {
-	isDisabled: true,
-} )( ( { isDisabled, setState } ) => {
 	let input = <TextControl label="Input" onChange={ () => {} } />;
 	if ( isDisabled ) {
 		input = <Disabled>{ input }</Disabled>;
 	}
 
 	const toggleDisabled = () => {
-		setState( ( state ) => ( { isDisabled: ! state.isDisabled } ) );
+		setIsDisabled( ( state ) => ! state );
 	};
 
 	return (
@@ -30,7 +30,7 @@ const MyDisabled = withState( {
 			</Button>
 		</div>
 	);
-} );
+};
 ```
 
 A component can detect if it has been wrapped in a `<Disabled>` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Consumer`.

diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
@@ -7,38 +7,37 @@ The component renders a user interface that allows the user to select predefined
 
 ```jsx
 import { FontSizePicker } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-...
-const MyFontSizePicker = withState( {
-	fontSize: 16,
-} )( ( { fontSize, setState } ) => {
-	const fontSizes = [
-		{
-			name: __( 'Small' ),
-			slug: 'small',
-			size: 12,
-		},
-		{
-			name: __( 'Big' ),
-			slug: 'big',
-			size: 26,
-		},
-	];
-	const fallbackFontSize = 16;
+const fontSizes = [
+	{
+		name: __( 'Small' ),
+		slug: 'small',
+		size: 12,
+	},
+	{
+		name: __( 'Big' ),
+		slug: 'big',
+		size: 26,
+	},
+];
+const fallbackFontSize = 16;
+
+const MyFontSizePicker = () => {
+	const [ fontSize, setFontSize ] = useState( 12 );
 
 	return (
 		<FontSizePicker
 			fontSizes={ fontSizes }
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
-				setState( { fontSize: newFontSize } );
+				setFontSize( newFontSize );
 			} }
 		/>
 	);
-} );
+};
 
 ...
 

diff --git a/packages/components/src/form-toggle/README.md b/packages/components/src/form-toggle/README.md
@@ -55,18 +55,16 @@ When a user switches a toggle, its corresponding action takes effect immediately
 
 ```jsx
 import { FormToggle } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const MyFormToggle = () => {
+	const [ isChecked, setChecked ] = useState( true );
 
-const MyFormToggle = withState( {
-	checked: true,
-} )( ( { checked, setState } ) => (
 	<FormToggle
 		checked={ checked }
-		onChange={ () =>
-			setState( ( state ) => ( { checked: ! state.checked } ) )
-		}
+		onChange={ () => setChecked( ( state ) => ! state ) }
 	/>
-) );
+};
 ```
 
 ### Props

diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
@@ -64,23 +64,26 @@ The `value` property is handled in a manner similar to controlled form component
 
 ```jsx
 import { FormTokenField } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyFormTokenField = withState( {
-	tokens: [],
-	suggestions: [
-		'Africa',
-		'America',
-		'Antarctica',
-		'Asia',
-		'Europe',
-		'Oceania',
-	],
-} )( ( { tokens, suggestions, setState } ) => (
-	<FormTokenField
-		value={ tokens }
-		suggestions={ suggestions }
-		onChange={ ( tokens ) => setState( { tokens } ) }
-	/>
-) );
+const continents = [
+	'Africa',
+	'America',
+	'Antarctica',
+	'Asia',
+	'Europe',
+	'Oceania',
+];
+
+const MyFormTokenField = () => {
+	const [ selectedContinents, setSelectedContinents ] = useState( [] );
+
+	return(
+		<FormTokenField
+			value={ selectedContinents }
+			suggestions={ continents }
+			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
+		/>
+	);
+};
 ```
diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md
@@ -6,21 +6,21 @@ MenuItem is a component which renders a button intended to be used in combinatio
 
 ```jsx
 import { MenuItem } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyMenuItem = withState( {
-	isActive: true,
-} )( ( { isActive, setState } ) => (
-	<MenuItem
-		icon={ isActive ? 'yes' : 'no' }
-		isSelected={ isActive }
-		onClick={ () =>
-			setState( ( state ) => ( { isActive: ! state.isActive } ) )
-		}
-	>
-		Toggle
-	</MenuItem>
-) );
+import { useState } from '@wordpress/element';
+
+const MyMenuItem = () => {
+	const [ isActive, setIsActive ] = useState( true );
+
+	return (
+		<MenuItem
+			icon={ isActive ? 'yes' : 'no' }
+			isSelected={ isActive }
+			onClick={ () => setIsActive( ( state ) => ! state ) }
+		>
+			Toggle
+		</MenuItem>
+	);
+};
 ```
 
 ## Props

diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
@@ -8,21 +8,21 @@ Render a Popover within the parent to which it should anchor:
 
 ```jsx
 import { Button, Popover } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
-const MyPopover = withState( {
-	isVisible: false,
-} )( ( { isVisible, setState } ) => {
+const MyPopover = () => {
+	const [ isVisible, setIsVisible ] = useState( false );
 	const toggleVisible = () => {
-		setState( ( state ) => ( { isVisible: ! state.isVisible } ) );
+		setIsVisible( ( state ) => ! state );
 	};
+
 	return (
 		<Button variant="secondary" onClick={ toggleVisible }>
 			Toggle Popover!
 			{ isVisible && <Popover>Popover is toggled!</Popover> }
 		</Button>
 	);
-} );
+};
 ```
 
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.

diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
@@ -61,17 +61,19 @@ Render a user interface to input the name of an additional css class.
 
 ```js
 import { TextControl } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyTextControl = withState( {
-	className: '',
-} )( ( { className, setState } ) => (
-	<TextControl
-		label="Additional CSS Class"
-		value={ className }
-		onChange={ ( className ) => setState( { className } ) }
-	/>
-) );
+import { useState } from '@wordpress/element';
+
+const MyTextControl = () => {
+	const [ className, setClassName ] = useState( '' );
+
+	return (
+		<TextControl
+			label="Additional CSS Class"
+			value={ className }
+			onChange={ ( value ) => setClassName( value ) }
+		/>
+	);
+};
 ```
 
 ### Props