ToggleControl: Convert to TypeScript (#43717)

* ToggleControl: Convert to TypeScript

* Mark `label` as required

* Convert tests

* Fixup `help` control

* Add changelog

* Export without contextConnect

* Add main JSDoc

* Fix override breakage in editor preferences modal ☹️

* Update snapshots

packages/components/CHANGELOG.md

@@ -9,13 +9,15 @@
 
 ### Enhancements
 
+-   `ToggleControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43717](https://github.com/WordPress/gutenberg/pull/43717)). 
 -   `CheckboxControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43720](https://github.com/WordPress/gutenberg/pull/43720)).
 
 ### Internal
 
 -   Remove unused `normalizeArrowKey` utility function ([#43640](https://github.com/WordPress/gutenberg/pull/43640/)).
 -   Refactor `FocalPointPicker` to function component ([#39168](https://github.com/WordPress/gutenberg/pull/39168)).
 -   `Guide`: use `code` instead of `keyCode` for keyboard events ([#43604](https://github.com/WordPress/gutenberg/pull/43604/)).
+-   `ToggleControl`: Convert to TypeScript and streamline CSS ([#43717](https://github.com/WordPress/gutenberg/pull/43717)). 
 -   `Navigation`: use `code` instead of `keyCode` for keyboard events ([#43644](https://github.com/WordPress/gutenberg/pull/43644/)).
 -   `ComboboxControl`: Add unit tests ([#42403](https://github.com/WordPress/gutenberg/pull/42403)).
 -   `NavigableContainer`: use `code` instead of `keyCode` for keyboard events, rewrite tests using RTL and `user-event` ([#43606](https://github.com/WordPress/gutenberg/pull/43606/)).

packages/components/src/style.scss

@@ -41,7 +41,6 @@
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
-@import "./toggle-control/style.scss";
 @import "./toolbar/style.scss";
 @import "./toolbar-button/style.scss";
 @import "./toolbar-group/style.scss";

packages/components/src/toggle-control/index.tsx

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+import { css } from '@emotion/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import FormToggle from '../form-toggle';
+import BaseControl from '../base-control';
+import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { ToggleControlProps } from './types';
+import { HStack } from '../h-stack';
+import { useCx } from '../utils';
+import { space } from '../ui/utils/space';
+
+/**
+ * ToggleControl is used to generate a toggle user interface.
+ *
+ * ```jsx
+ * import { ToggleControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyToggleControl = () => {
+ *   const [ value, setValue ] = useState( false );
+ *
+ *   return (
+ *     <ToggleControl
+ *       label="Fixed Background"
+ *       checked={ value }
+ *       onChange={ () => setValue( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function ToggleControl( {
+	__nextHasNoMarginBottom,
+	label,
+	checked,
+	help,
+	className,
+	onChange,
+	disabled,
+}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {
+	function onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {
+		onChange( event.target.checked );
+	}
+	const instanceId = useInstanceId( ToggleControl );
+	const id = `inspector-toggle-control-${ instanceId }`;
+
+	const cx = useCx();
+	const classes = cx(
+		'components-toggle-control',
+		className,
+		! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )
+	);
+
+	let describedBy, helpLabel;
+	if ( help ) {
+		describedBy = id + '__help';
+		helpLabel = typeof help === 'function' ? help( checked ) : help;
+	}
+
+	return (
+		<BaseControl
+			id={ id }
+			help={ helpLabel }
+			className={ classes }
+			__nextHasNoMarginBottom
+		>
+			<HStack justify="flex-start" spacing={ 3 }>
+				<FormToggle
+					id={ id }
+					checked={ checked }
+					onChange={ onChangeToggle }
+					aria-describedby={ describedBy }
+					disabled={ disabled }
+				/>
+				<label
+					htmlFor={ id }
+					className="components-toggle-control__label"
+				>
+					{ label }
+				</label>
+			</HStack>
+		</BaseControl>
+	);
+}
+
+export default ToggleControl;

packages/components/src/toggle-control/stories/index.tsx

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ToggleControl from '..';
+
+const meta: ComponentMeta< typeof ToggleControl > = {
+	title: 'Components/ToggleControl',
+	component: ToggleControl,
+	argTypes: {
+		checked: { control: { type: null } },
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ToggleControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ checked, setChecked ] = useState( true );
+	return (
+		<ToggleControl
+			{ ...props }
+			checked={ checked }
+			onChange={ ( ...changeArgs ) => {
+				setChecked( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Enable something',
+};
+
+export const WithHelpText = Template.bind( {} );
+WithHelpText.args = {
+	...Default.args,
+	help: 'This is some help text.',
+};