From 7453b489408918106f597c0c4aca945cb271e8d1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 18 May 2022 10:22:46 +0100
Subject: [PATCH 1/2] Remove Flyout leftovers

---
 .../src/item-group/stories/index.js           | 40 ++++++++++---------
 packages/components/tsconfig.json             |  1 -
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
index 724a0c0f2c0bc..e057688ad69e5 100644
--- a/packages/components/src/item-group/stories/index.js
+++ b/packages/components/src/item-group/stories/index.js
@@ -21,7 +21,7 @@ import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
-import { Flyout } from '../../flyout';
+import Dropdown from '../../dropdown';
 import { HStack } from '../../h-stack';
 import Icon from '../../icon';
 import { Text } from '../../text';
@@ -90,23 +90,27 @@ export const _default = () => {
 };
 
 export const dropdown = () => (
-	<Flyout
-		style={ { width: '350px' } }
-		trigger={ <Button>Open Popover</Button> }
-	>
-		<ItemGroup style={ { padding: 4 } }>
-			<Item>Code is Poetry (no click handlers)</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-		</ItemGroup>
-	</Flyout>
+	<Dropdown
+		renderToggle={ ( { isOpen, onToggle } ) => (
+			<Button onClick={ onToggle } aria-expanded={ isOpen }>
+				Open Popover
+			</Button>
+		) }
+		renderContent={ () => (
+			<ItemGroup style={ { minWidth: 350, padding: 4 } }>
+				<Item>Code is Poetry (no click handlers)</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+			</ItemGroup>
+		) }
+	/>
 );
 
 const SimpleColorSwatch = ( { color, style } ) => (
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index eea391d1200dc..bd14c727181d4 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -54,7 +54,6 @@
 		"src/dropdown-menu/**/*",
 		"src/elevation/**/*",
 		"src/flex/**/*",
-		"src/flyout/**/*",
 		"src/form-group/**/*",
 		"src/grid/**/*",
 		"src/h-stack/**/*",

From 301f310ba3d1684b89150204d56378f2fe2a54d8 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 18 May 2022 10:43:13 +0100
Subject: [PATCH 2/2] Fix navigator story

---
 .../components/src/navigator/stories/index.js | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
index e8078ba74b32e..cbc710a28a599 100644
--- a/packages/components/src/navigator/stories/index.js
+++ b/packages/components/src/navigator/stories/index.js
@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import Button from '../../button';
 import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { HStack } from '../../h-stack';
-import { Popover } from '../../popover';
+import Dropdown from '../../dropdown';
 import { useCx } from '../../utils/hooks/use-cx';
 import {
 	NavigatorProvider,
@@ -54,13 +54,23 @@ const MyNavigation = () => {
 								Navigate to screen with sticky content.
 							</NavigatorButton>
 
-							<Button variant="primary">
-								Open test dialog
-								<Popover>
-									<CardHeader>Go</CardHeader>
-									<CardBody>Stuff</CardBody>
-								</Popover>
-							</Button>
+							<Dropdown
+								renderToggle={ ( { isOpen, onToggle } ) => (
+									<Button
+										onClick={ onToggle }
+										aria-expanded={ isOpen }
+										variant="primary"
+									>
+										Open test dialog
+									</Button>
+								) }
+								renderContent={ () => (
+									<Card>
+										<CardHeader>Go</CardHeader>
+										<CardBody>Stuff</CardBody>
+									</Card>
+								) }
+							/>
 						</HStack>
 					</CardBody>
 				</Card>