FormToggle, ToggleControl: Fix docgen in Storybook (#64065)

* ToggleControl: Fix docgen in Storybook * FormToggle: Fix docgen in Storybook Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Jul 29, 2024 · f50e045 · f50e045
1 parent ef1ee6b
commit f50e045
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 43 deletions.
diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx
@@ -17,26 +17,7 @@ import type { WordPressComponentProps } from '../context';
 
 export const noop = () => {};
 
-/**
- * FormToggle switches a single setting on or off.
- *
- * ```jsx
- * import { FormToggle } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyFormToggle = () => {
- *   const [ isChecked, setChecked ] = useState( true );
- *
- *   return (
- *     <FormToggle
- *       checked={ isChecked }
- *       onChange={ () => setChecked( ( state ) => ! state ) }
- *     />
- *   );
- * };
- * ```
- */
-export function FormToggle(
+function UnforwardedFormToggle(
 	props: WordPressComponentProps< FormToggleProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
@@ -71,4 +52,25 @@ export function FormToggle(
 	);
 }
 
-export default forwardRef( FormToggle );
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export const FormToggle = forwardRef( UnforwardedFormToggle );
+
+export default FormToggle;
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
@@ -23,27 +23,7 @@ import { HStack } from '../h-stack';
 import { useCx } from '../utils';
 import { space } from '../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(
+function UnforwardedToggleControl(
 	{
 		__nextHasNoMarginBottom,
 		label,
@@ -121,4 +101,26 @@ export function ToggleControl(
 	);
 }
 
-export default forwardRef( ToggleControl );
+/**
+ * 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 const ToggleControl = forwardRef( UnforwardedToggleControl );
+
+export default ToggleControl;