Update Dropdown stories to use controlled mode

WordPress · Sep 8, 2023 · d8379d9 · d8379d9
1 parent 2fc6530
commit d8379d9
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
@@ -3,6 +3,11 @@
  */
 import type { Meta, StoryFn } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -25,8 +30,13 @@ const meta: Meta< typeof Dropdown > = {
 		position: { control: { type: null } },
 		renderContent: { control: { type: null } },
 		renderToggle: { control: { type: null } },
+		open: { control: { type: null } },
+		defaultOpen: { control: { type: null } },
+		onToggle: { control: { type: null } },
+		onClose: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: {
 			expanded: true,
 		},
@@ -35,9 +45,23 @@ const meta: Meta< typeof Dropdown > = {
 export default meta;
 
 const Template: StoryFn< typeof Dropdown > = ( args ) => {
+	const [ open, setOpen ] = useState( false );
 	return (
 		<div style={ { height: 150 } }>
-			<Dropdown { ...args } />
+			<Dropdown
+				{ ...args }
+				open={ open }
+				onToggle={ ( willOpen ) => {
+					setOpen( willOpen );
+					args.onToggle?.( willOpen );
+				} }
+				// Only used if uncontrolled (ie. no `open` prop passed)
+				// defaultOpen={ false }
+			/>
+
+			<button onClick={ () => setOpen( ! open ) }>
+				Toggle (controlled update)
+			</button>
 		</div>
 	);
 };