From 68a42ae4fa220ecd47283673eaa666ce8ef76ed9 Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Mon, 18 Sep 2023 10:52:54 -0400
Subject: [PATCH 1/9] reorganize files into respective folders

---
 .../ConfirmationDialog.features.stories.tsx}  | 19 +--------------
 .../ConfirmationDialog.stories.tsx            | 23 +++++++++++++++++++
 .../ConfirmationDialog.test.tsx               |  4 ++--
 .../ConfirmationDialog.tsx                    |  0
 .../ConfirmationDialog.test.tsx.snap          |  0
 src/DataTable/ErrorDialog.tsx                 |  2 +-
 src/{stories => Dialog}/Dialog.stories.tsx    |  4 +++-
 src/{__tests__ => Dialog}/Dialog.test.tsx     |  2 ++
 src/Dialog/Dialog.tsx                         |  2 ++
 .../Dialog2.types.test.tsx                    |  2 +-
 .../__snapshots__/Dialog.test.tsx.snap        |  0
 src/TreeView/TreeView.tsx                     |  2 +-
 src/index.ts                                  |  6 ++---
 13 files changed, 39 insertions(+), 27 deletions(-)
 rename src/{stories/ConfirmationDialog.stories.tsx => ConfirmationDialog/ConfirmationDialog.features.stories.tsx} (84%)
 create mode 100644 src/ConfirmationDialog/ConfirmationDialog.stories.tsx
 rename src/{__tests__ => ConfirmationDialog}/ConfirmationDialog.test.tsx (97%)
 rename src/{Dialog => ConfirmationDialog}/ConfirmationDialog.tsx (100%)
 rename src/{__tests__ => ConfirmationDialog}/__snapshots__/ConfirmationDialog.test.tsx.snap (100%)
 rename src/{stories => Dialog}/Dialog.stories.tsx (99%)
 rename src/{__tests__ => Dialog}/Dialog.test.tsx (99%)
 rename src/{__tests__ => Dialog}/Dialog2.types.test.tsx (87%)
 rename src/{__tests__ => Dialog}/__snapshots__/Dialog.test.tsx.snap (100%)

diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
similarity index 84%
rename from src/stories/ConfirmationDialog.stories.tsx
rename to src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
index 6f5668a4b32..db85ef1b4d2 100644
--- a/src/stories/ConfirmationDialog.stories.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
@@ -4,25 +4,8 @@ import {BaseStyles, Box, ThemeProvider, useTheme} from '..'
 import {Button} from '../Button'
 import {ActionMenu} from '../ActionMenu'
 import {ActionList} from '../ActionList'
-import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
+import {ConfirmationDialog, useConfirm} from './ConfirmationDialog'
 
-export default {
-  title: 'Components/ConfirmationDialog',
-  component: ConfirmationDialog,
-  decorators: [
-    Story => {
-      // Since portal roots are registered globally, we need this line so that each storybook
-      // story works in isolation.
-      return (
-        <ThemeProvider>
-          <BaseStyles>
-            <Story />
-          </BaseStyles>
-        </ThemeProvider>
-      )
-    },
-  ],
-} as Meta
 
 export const BasicConfirmationDialog = () => {
   const [isOpen, setIsOpen] = useState(false)
diff --git a/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
new file mode 100644
index 00000000000..51a261f2167
--- /dev/null
+++ b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {BaseStyles,  ThemeProvider} from '..'
+import {ConfirmationDialog} from './ConfirmationDialog'
+
+export default {
+  title: 'Components/ConfirmationDialog',
+  component: ConfirmationDialog,
+  decorators: [
+    Story => {
+      // Since portal roots are registered globally, we need this line so that each storybook
+      // story works in isolation.
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+} as Meta
+
diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/ConfirmationDialog/ConfirmationDialog.test.tsx
similarity index 97%
rename from src/__tests__/ConfirmationDialog.test.tsx
rename to src/ConfirmationDialog/ConfirmationDialog.test.tsx
index 32e604d21a6..057d109576c 100644
--- a/src/__tests__/ConfirmationDialog.test.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.test.tsx
@@ -6,7 +6,7 @@ import {ActionMenu} from '../deprecated/ActionMenu'
 import BaseStyles from '../BaseStyles'
 import Box from '../Box'
 import Button from '../deprecated/Button/Button'
-import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
+import {ConfirmationDialog, useConfirm} from './ConfirmationDialog'
 import theme from '../theme'
 import {ThemeProvider} from '../ThemeProvider'
 import {SSRProvider} from '../utils/ssr'
@@ -80,7 +80,7 @@ describe('ConfirmationDialog', () => {
     options: {skipAs: true, skipSx: true},
   })
 
-  checkExports('Dialog/ConfirmationDialog', {
+  checkExports('ConfirmationDialog/ConfirmationDialog', {
     default: undefined,
     useConfirm,
     ConfirmationDialog,
diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/ConfirmationDialog/ConfirmationDialog.tsx
similarity index 100%
rename from src/Dialog/ConfirmationDialog.tsx
rename to src/ConfirmationDialog/ConfirmationDialog.tsx
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
rename to src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap
diff --git a/src/DataTable/ErrorDialog.tsx b/src/DataTable/ErrorDialog.tsx
index 2ff534249b4..5a379fea87f 100644
--- a/src/DataTable/ErrorDialog.tsx
+++ b/src/DataTable/ErrorDialog.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {ConfirmationDialog} from '../Dialog/ConfirmationDialog'
+import {ConfirmationDialog} from '../ConfirmationDialog/ConfirmationDialog'
 
 export type TableErrorDialogProps = React.PropsWithChildren<{
   /**
diff --git a/src/stories/Dialog.stories.tsx b/src/Dialog/Dialog.stories.tsx
similarity index 99%
rename from src/stories/Dialog.stories.tsx
rename to src/Dialog/Dialog.stories.tsx
index 95cabc04649..6080bd18b07 100644
--- a/src/stories/Dialog.stories.tsx
+++ b/src/Dialog/Dialog.stories.tsx
@@ -3,7 +3,9 @@ import {Meta} from '@storybook/react'
 
 import {BaseStyles, ThemeProvider, Box, TextInput} from '..'
 import {Button} from '../Button'
-import {Dialog, DialogProps, DialogWidth, DialogHeight} from '../Dialog/Dialog'
+import {Dialog, DialogProps, DialogWidth, DialogHeight} from './Dialog'
+
+/* Dialog Version 2 */
 
 export default {
   title: 'Components/Dialog',
diff --git a/src/__tests__/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
similarity index 99%
rename from src/__tests__/Dialog.test.tsx
rename to src/Dialog/Dialog.test.tsx
index 3dcfd6d0d57..1d636d591cf 100644
--- a/src/__tests__/Dialog.test.tsx
+++ b/src/Dialog/Dialog.test.tsx
@@ -6,6 +6,8 @@ import {axe, toHaveNoViolations} from 'jest-axe'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 expect.extend(toHaveNoViolations)
 
+/* Dialog Version 2 */
+
 const comp = (
   <Dialog isOpen onDismiss={() => null} aria-labelledby="header">
     <Dialog.Header id="header">Title</Dialog.Header>
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 10a34974cab..9352ade0402 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -14,6 +14,8 @@ import Portal from '../Portal'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {useId} from '../hooks/useId'
 
+/* Dialog Version 2 */
+
 const ANIMATION_DURATION = '200ms'
 
 /**
diff --git a/src/__tests__/Dialog2.types.test.tsx b/src/Dialog/Dialog2.types.test.tsx
similarity index 87%
rename from src/__tests__/Dialog2.types.test.tsx
rename to src/Dialog/Dialog2.types.test.tsx
index a5774427458..452c211b9ca 100644
--- a/src/__tests__/Dialog2.types.test.tsx
+++ b/src/Dialog/Dialog2.types.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Dialog} from '../Dialog/Dialog'
+import {Dialog} from './Dialog'
 
 export function shouldAcceptCallWithNoProps() {
   return <Dialog onClose={() => null} />
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap
similarity index 100%
rename from src/__tests__/__snapshots__/Dialog.test.tsx.snap
rename to src/Dialog/__snapshots__/Dialog.test.tsx.snap
diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index 49cd7295166..d7c19b819a7 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -7,7 +7,7 @@ import {
 import clsx from 'clsx'
 import React, {useCallback, useEffect} from 'react'
 import styled, {keyframes} from 'styled-components'
-import {ConfirmationDialog} from '../Dialog/ConfirmationDialog'
+import {ConfirmationDialog} from '../ConfirmationDialog/ConfirmationDialog'
 import Spinner from '../Spinner'
 import Text from '../Text'
 import VisuallyHidden from '../_VisuallyHidden'
diff --git a/src/index.ts b/src/index.ts
index b3249bcded1..4f722d0486f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,7 +34,7 @@ export type {TouchOrMouseEvent} from './hooks/useOnOutsideClick'
 export {useOpenAndCloseFocus} from './hooks/useOpenAndCloseFocus'
 export {useOnEscapePress} from './hooks/useOnEscapePress'
 export {useOverlay} from './hooks/useOverlay'
-export {useConfirm} from './Dialog/ConfirmationDialog'
+export {useConfirm} from './ConfirmationDialog/ConfirmationDialog'
 export {useFocusTrap} from './hooks/useFocusTrap'
 export type {FocusTrapHookSettings} from './hooks/useFocusTrap'
 export {useFocusZone} from './hooks/useFocusZone'
@@ -88,8 +88,8 @@ export {default as Details} from './Details'
 export type {DetailsProps} from './Details'
 export {default as Dialog} from './Dialog'
 export type {DialogProps, DialogHeaderProps} from './Dialog'
-export type {ConfirmationDialogProps} from './Dialog/ConfirmationDialog'
-export {ConfirmationDialog} from './Dialog/ConfirmationDialog'
+export type {ConfirmationDialogProps} from './ConfirmationDialog/ConfirmationDialog'
+export {ConfirmationDialog} from './ConfirmationDialog/ConfirmationDialog'
 export {default as FilteredSearch} from './FilteredSearch'
 export type {FilteredSearchProps} from './FilteredSearch'
 export {default as FilterList} from './FilterList'

From ae807eb4eaafa5e8445dda6c3109a151133bfca8 Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Mon, 18 Sep 2023 11:02:31 -0400
Subject: [PATCH 2/9] revise stories to be default and features

---
 .../ConfirmationDialog.features.stories.tsx   |  31 +--
 .../ConfirmationDialog.stories.tsx            |  27 +-
 src/Dialog/Dialog.features.stories.tsx        | 262 ++++++++++++++++++
 src/Dialog/Dialog.stories.tsx                 | 159 +----------
 4 files changed, 298 insertions(+), 181 deletions(-)
 create mode 100644 src/Dialog/Dialog.features.stories.tsx

diff --git a/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
index db85ef1b4d2..03b452b3320 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useRef, useCallback} from 'react'
-import {Meta} from '@storybook/react'
+import {ComponentMeta, Meta} from '@storybook/react'
 import {BaseStyles, Box, ThemeProvider, useTheme} from '..'
 import {Button} from '../Button'
 import {ActionMenu} from '../ActionMenu'
@@ -7,29 +7,12 @@ import {ActionList} from '../ActionList'
 import {ConfirmationDialog, useConfirm} from './ConfirmationDialog'
 
 
-export const BasicConfirmationDialog = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        Show dialog
-      </Button>
-      {isOpen && (
-        <ConfirmationDialog
-          title="Delete universe?"
-          onClose={onDialogClose}
-          confirmButtonContent="Delete it!"
-          confirmButtonType="danger"
-        >
-          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
-          Earth.
-        </ConfirmationDialog>
-      )}
-    </>
-  )
-}
+export default {
+  title: 'Components/ConfirmationDialog/Features',
+  component: ConfirmationDialog,
+} as ComponentMeta<typeof ConfirmationDialog>
+
+
 
 export const ShorthandHook = () => {
   const confirm = useConfirm()
diff --git a/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 51a261f2167..96fb8a58821 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import {Meta} from '@storybook/react'
-import {BaseStyles,  ThemeProvider} from '..'
+import {BaseStyles,  Button,  ThemeProvider} from '..'
 import {ConfirmationDialog} from './ConfirmationDialog'
 
 export default {
@@ -21,3 +21,26 @@ export default {
   ],
 } as Meta
 
+export const Default = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {isOpen && (
+        <ConfirmationDialog
+          title="Delete universe?"
+          onClose={onDialogClose}
+          confirmButtonContent="Delete it!"
+          confirmButtonType="danger"
+        >
+          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
+          Earth.
+        </ConfirmationDialog>
+      )}
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/Dialog/Dialog.features.stories.tsx b/src/Dialog/Dialog.features.stories.tsx
new file mode 100644
index 00000000000..9abef9cab8c
--- /dev/null
+++ b/src/Dialog/Dialog.features.stories.tsx
@@ -0,0 +1,262 @@
+import React, {useState, useRef, useCallback} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, ThemeProvider, Box, TextInput} from '..'
+import {Button} from '../Button'
+import {Dialog, DialogProps, DialogWidth, DialogHeight} from './Dialog'
+
+/* Dialog Version 2 */
+
+export default {
+  title: 'Components/Dialog/Features',
+  component: Dialog,
+  decorators: [
+    Story => {
+      // Since portal roots are registered globally, we need this line so that each storybook
+      // story works in isolation.
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+  args: {
+    width: 'xlarge',
+    height: 'auto',
+    subtitle: true,
+  },
+  argTypes: {
+    width: {
+      control: {
+        type: 'radio',
+      },
+      options: ['small', 'medium', 'large', 'xlarge'],
+    },
+    height: {
+      control: {
+        type: 'radio',
+      },
+      options: ['small', 'large', 'auto'],
+    },
+    subtitle: {
+      name: 'show subtitle',
+      control: {
+        type: 'boolean',
+      },
+    },
+    title: {table: {disable: true}},
+
+    renderHeader: {table: {disable: true}},
+    renderBody: {table: {disable: true}},
+    renderFooter: {table: {disable: true}},
+    onClose: {table: {disable: true}},
+    role: {table: {disable: true}},
+    ref: {table: {disable: true}},
+    key: {table: {disable: true}},
+    footerButtons: {table: {disable: true}},
+  },
+} as Meta
+
+const lipsum = (
+  <div style={{fontSize: '14px'}}>
+    <p style={{marginBlockStart: 0}}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
+      lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
+      nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
+      Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit
+      amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris
+      fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus
+      luctus tempus posuere.
+    </p>
+
+    <p>
+      Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
+      lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
+      sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
+      sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
+      sem. Mauris a est tellus.
+    </p>
+
+    <p>
+      Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
+      molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
+      condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
+      dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
+      pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
+    </p>
+
+    <p>
+      Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
+      nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
+      lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
+    </p>
+
+    <p>
+      Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
+      consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
+      pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
+      Maecenas semper mi egestas, dignissim nisi et, elementum neque.
+    </p>
+  </div>
+)
+interface DialogStoryProps {
+  width: DialogWidth
+  height: DialogHeight
+  subtitle: boolean
+}
+
+
+function CustomHeader({
+  title,
+  subtitle,
+  dialogLabelId,
+  dialogDescriptionId,
+  onClose,
+}: React.PropsWithChildren<DialogProps & {dialogLabelId: string; dialogDescriptionId: string}>) {
+  const onCloseClick = useCallback(() => {
+    onClose('close-button')
+  }, [onClose])
+  if (typeof title === 'string' && typeof subtitle === 'string') {
+    return (
+      <Box bg="accent.subtle">
+        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
+        <h2 id={dialogDescriptionId}>{subtitle.toLowerCase()}</h2>
+        <Dialog.CloseButton onClose={onCloseClick} />
+      </Box>
+    )
+  }
+  return null
+}
+function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
+  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
+}
+function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
+  return (
+    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
+      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
+    </Dialog.Footer>
+  )
+}
+export const WithCustomRenderers = ({width, height, subtitle}: DialogStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  return (
+    <>
+      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
+      {isOpen && (
+        <Dialog
+          title="My Dialog"
+          subtitle={subtitle ? 'This is a subtitle!' : undefined}
+          width={width}
+          height={height}
+          renderHeader={CustomHeader}
+          renderBody={CustomBody}
+          renderFooter={CustomFooter}
+          onClose={onDialogClose}
+          footerButtons={[
+            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
+            {buttonType: 'primary', content: 'Proceed'},
+          ]}
+        >
+          {lipsum}
+        </Dialog>
+      )}
+    </>
+  )
+}
+
+export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [secondOpen, setSecondOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])
+  const openSecondDialog = useCallback(() => setSecondOpen(true), [])
+  const manyButtons = new Array(10).fill(undefined).map((_, i) => ({content: `Button ${i}`}))
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {isOpen && (
+        <Dialog
+          title="This dialog has a really long title. So long, in fact, that it should cause wrapping, going to multiple lines!."
+          subtitle={
+            subtitle
+              ? "It's not a common scenario, sure, but what if the subtitle is generated from a really long value? Do we just break the dialog? Or do we handle it because we are pros?"
+              : undefined
+          }
+          onClose={onDialogClose}
+          width={width}
+          height={height}
+          footerButtons={[
+            ...manyButtons,
+            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
+            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
+          ]}
+        >
+          {lipsum}
+          {secondOpen && (
+            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
+              Hello world
+            </Dialog>
+          )}
+        </Dialog>
+      )}
+    </>
+  )
+}
+
+// repro for https://github.com/github/primer/issues/2480
+export const ReproMultistepDialogWithConditionalFooter = ({width, height}: DialogStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  const [step, setStep] = React.useState(1)
+
+  const renderFooterConditionally = () => {
+    if (step === 1) return null
+
+    return (
+      <Dialog.Footer>
+        <Button variant="primary">Submit</Button>
+      </Dialog.Footer>
+    )
+  }
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
+      {isOpen && (
+        <Dialog
+          title={`Step ${step}`}
+          width={width}
+          height={height}
+          renderFooter={renderFooterConditionally}
+          onClose={onDialogClose}
+          footerButtons={[{buttonType: 'primary', content: 'Proceed'}]}
+        >
+          {step === 1 ? (
+            <Box sx={{display: 'flex', flexDirection: 'column', gap: 4}}>
+              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>
+              </Box>
+              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
+                Feature request <Button onClick={() => setStep(2)}>Choose</Button>
+              </Box>
+            </Box>
+          ) : (
+            <p>
+              <Box sx={{display: 'flex', flexDirection: 'column', gap: 1}}>
+                <label htmlFor="description">Description</label>
+                <TextInput id="description" placeholder="Write the description here" />
+              </Box>
+            </p>
+          )}
+        </Dialog>
+      )}
+    </>
+  )
+}
diff --git a/src/Dialog/Dialog.stories.tsx b/src/Dialog/Dialog.stories.tsx
index 6080bd18b07..8506bf2e19c 100644
--- a/src/Dialog/Dialog.stories.tsx
+++ b/src/Dialog/Dialog.stories.tsx
@@ -1,9 +1,9 @@
 import React, {useState, useRef, useCallback} from 'react'
 import {Meta} from '@storybook/react'
 
-import {BaseStyles, ThemeProvider, Box, TextInput} from '..'
+import {BaseStyles, ThemeProvider} from '..'
 import {Button} from '../Button'
-import {Dialog, DialogProps, DialogWidth, DialogHeight} from './Dialog'
+import {Dialog, DialogWidth, DialogHeight} from './Dialog'
 
 /* Dialog Version 2 */
 
@@ -107,7 +107,7 @@ interface DialogStoryProps {
   height: DialogHeight
   subtitle: boolean
 }
-export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => {
+export const Default = ({width, height, subtitle}: DialogStoryProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [secondOpen, setSecondOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -127,6 +127,7 @@ export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => {
           width={width}
           height={height}
           footerButtons={[
+            {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog,},
             {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
             {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
           ]}
@@ -142,155 +143,3 @@ export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => {
     </>
   )
 }
-
-function CustomHeader({
-  title,
-  subtitle,
-  dialogLabelId,
-  dialogDescriptionId,
-  onClose,
-}: React.PropsWithChildren<DialogProps & {dialogLabelId: string; dialogDescriptionId: string}>) {
-  const onCloseClick = useCallback(() => {
-    onClose('close-button')
-  }, [onClose])
-  if (typeof title === 'string' && typeof subtitle === 'string') {
-    return (
-      <Box bg="accent.subtle">
-        <h1 id={dialogLabelId}>{title.toUpperCase()}</h1>
-        <h2 id={dialogDescriptionId}>{subtitle.toLowerCase()}</h2>
-        <Dialog.CloseButton onClose={onCloseClick} />
-      </Box>
-    )
-  }
-  return null
-}
-function CustomBody({children}: React.PropsWithChildren<DialogProps>) {
-  return <Dialog.Body sx={{bg: 'danger.subtle'}}>{children}</Dialog.Body>
-}
-function CustomFooter({footerButtons}: React.PropsWithChildren<DialogProps>) {
-  return (
-    <Dialog.Footer sx={{bg: 'attention.subtle'}}>
-      {footerButtons ? <Dialog.Buttons buttons={footerButtons} /> : null}
-    </Dialog.Footer>
-  )
-}
-export const WithCustomRenderers = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
-      {isOpen && (
-        <Dialog
-          title="My Dialog"
-          subtitle={subtitle ? 'This is a subtitle!' : undefined}
-          width={width}
-          height={height}
-          renderHeader={CustomHeader}
-          renderBody={CustomBody}
-          renderFooter={CustomFooter}
-          onClose={onDialogClose}
-          footerButtons={[
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed'},
-          ]}
-        >
-          {lipsum}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
-export const StressTest = ({width, height, subtitle}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [secondOpen, setSecondOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])
-  const openSecondDialog = useCallback(() => setSecondOpen(true), [])
-  const manyButtons = new Array(10).fill(undefined).map((_, i) => ({content: `Button ${i}`}))
-  return (
-    <>
-      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-        Show dialog
-      </Button>
-      {isOpen && (
-        <Dialog
-          title="This dialog has a really long title. So long, in fact, that it should cause wrapping, going to multiple lines!."
-          subtitle={
-            subtitle
-              ? "It's not a common scenario, sure, but what if the subtitle is generated from a really long value? Do we just break the dialog? Or do we handle it because we are pros?"
-              : undefined
-          }
-          onClose={onDialogClose}
-          width={width}
-          height={height}
-          footerButtons={[
-            ...manyButtons,
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
-          ]}
-        >
-          {lipsum}
-          {secondOpen && (
-            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
-              Hello world
-            </Dialog>
-          )}
-        </Dialog>
-      )}
-    </>
-  )
-}
-
-// repro for https://github.com/github/primer/issues/2480
-export const ReproMultistepDialogWithConditionalFooter = ({width, height}: DialogStoryProps) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  const [step, setStep] = React.useState(1)
-
-  const renderFooterConditionally = () => {
-    if (step === 1) return null
-
-    return (
-      <Dialog.Footer>
-        <Button variant="primary">Submit</Button>
-      </Dialog.Footer>
-    )
-  }
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(!isOpen)}>Show dialog</Button>
-      {isOpen && (
-        <Dialog
-          title={`Step ${step}`}
-          width={width}
-          height={height}
-          renderFooter={renderFooterConditionally}
-          onClose={onDialogClose}
-          footerButtons={[{buttonType: 'primary', content: 'Proceed'}]}
-        >
-          {step === 1 ? (
-            <Box sx={{display: 'flex', flexDirection: 'column', gap: 4}}>
-              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
-                Bug Report <Button onClick={() => setStep(2)}>Choose</Button>
-              </Box>
-              <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
-                Feature request <Button onClick={() => setStep(2)}>Choose</Button>
-              </Box>
-            </Box>
-          ) : (
-            <p>
-              <Box sx={{display: 'flex', flexDirection: 'column', gap: 1}}>
-                <label htmlFor="description">Description</label>
-                <TextInput id="description" placeholder="Write the description here" />
-              </Box>
-            </p>
-          )}
-        </Dialog>
-      )}
-    </>
-  )
-}

From 8457d76a68725e1cd43bfe9fdb2a6b142bdef8fa Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Mon, 18 Sep 2023 11:03:38 -0400
Subject: [PATCH 3/9] Opted the components into storybook tests

---
 src/__tests__/storybook.test.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx
index eb674d09f9b..3bb8f7903f8 100644
--- a/src/__tests__/storybook.test.tsx
+++ b/src/__tests__/storybook.test.tsx
@@ -19,9 +19,11 @@ const allowlist = [
   'Button',
   'Checkbox',
   'CheckboxGroup',
+  'ConfirmationDialog',
   'CounterLabel',
   'DataTable',
   'Details',
+  'Dialog',
   'Flash',
   'Header',
   'Heading',

From f1450af4cdaabfe53688ad92a8300c2f015fe7e6 Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Mon, 18 Sep 2023 11:30:56 -0400
Subject: [PATCH 4/9] checkpoint: updated tests

---
 src/Dialog/Dialog.test.tsx                                   | 2 +-
 src/Dialog/{Dialog2.types.test.tsx => Dialog.types.test.tsx} | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)
 rename src/Dialog/{Dialog2.types.test.tsx => Dialog.types.test.tsx} (92%)

diff --git a/src/Dialog/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
index 1d636d591cf..965d464a11a 100644
--- a/src/Dialog/Dialog.test.tsx
+++ b/src/Dialog/Dialog.test.tsx
@@ -80,7 +80,7 @@ describe('Dialog', () => {
     options: {skipAs: true, skipSx: true},
   })
 
-  checkExports('Dialog', {
+  checkExports('Dialog/Dialog', {
     default: Dialog,
   })
 
diff --git a/src/Dialog/Dialog2.types.test.tsx b/src/Dialog/Dialog.types.test.tsx
similarity index 92%
rename from src/Dialog/Dialog2.types.test.tsx
rename to src/Dialog/Dialog.types.test.tsx
index 452c211b9ca..43d7aa373b9 100644
--- a/src/Dialog/Dialog2.types.test.tsx
+++ b/src/Dialog/Dialog.types.test.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import {Dialog} from './Dialog'
 
+/* Dialog Version 2? */
+
+
 export function shouldAcceptCallWithNoProps() {
   return <Dialog onClose={() => null} />
 }

From 736feda40f555e52803ed7b63f3664fef3e617fa Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Tue, 10 Oct 2023 10:11:17 -0400
Subject: [PATCH 5/9] chore: clean up lint errors

---
 .../ConfirmationDialog.features.stories.tsx              | 9 +++------
 src/ConfirmationDialog/ConfirmationDialog.stories.tsx    | 6 +++---
 src/Dialog/Dialog.features.stories.tsx                   | 1 -
 src/Dialog/Dialog.stories.tsx                            | 2 +-
 src/Dialog/Dialog.types.test.tsx                         | 1 -
 5 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
index 03b452b3320..b8f4fe78d0f 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx
@@ -1,19 +1,16 @@
-import React, {useState, useRef, useCallback} from 'react'
-import {ComponentMeta, Meta} from '@storybook/react'
-import {BaseStyles, Box, ThemeProvider, useTheme} from '..'
+import React, {useState, useCallback} from 'react'
+import {ComponentMeta} from '@storybook/react'
+import {Box, useTheme} from '..'
 import {Button} from '../Button'
 import {ActionMenu} from '../ActionMenu'
 import {ActionList} from '../ActionList'
 import {ConfirmationDialog, useConfirm} from './ConfirmationDialog'
 
-
 export default {
   title: 'Components/ConfirmationDialog/Features',
   component: ConfirmationDialog,
 } as ComponentMeta<typeof ConfirmationDialog>
 
-
-
 export const ShorthandHook = () => {
   const confirm = useConfirm()
   const {theme} = useTheme()
diff --git a/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 96fb8a58821..bdc6580e4fa 100644
--- a/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
+++ b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback, useRef, useState } from 'react'
+import React, {useCallback, useRef, useState} from 'react'
 import {Meta} from '@storybook/react'
-import {BaseStyles,  Button,  ThemeProvider} from '..'
+import {BaseStyles, Button, ThemeProvider} from '..'
 import {ConfirmationDialog} from './ConfirmationDialog'
 
 export default {
@@ -43,4 +43,4 @@ export const Default = () => {
       )}
     </>
   )
-}
\ No newline at end of file
+}
diff --git a/src/Dialog/Dialog.features.stories.tsx b/src/Dialog/Dialog.features.stories.tsx
index 9abef9cab8c..33331260526 100644
--- a/src/Dialog/Dialog.features.stories.tsx
+++ b/src/Dialog/Dialog.features.stories.tsx
@@ -108,7 +108,6 @@ interface DialogStoryProps {
   subtitle: boolean
 }
 
-
 function CustomHeader({
   title,
   subtitle,
diff --git a/src/Dialog/Dialog.stories.tsx b/src/Dialog/Dialog.stories.tsx
index 8506bf2e19c..87d4cc7e60e 100644
--- a/src/Dialog/Dialog.stories.tsx
+++ b/src/Dialog/Dialog.stories.tsx
@@ -127,7 +127,7 @@ export const Default = ({width, height, subtitle}: DialogStoryProps) => {
           width={width}
           height={height}
           footerButtons={[
-            {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog,},
+            {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog},
             {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
             {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
           ]}
diff --git a/src/Dialog/Dialog.types.test.tsx b/src/Dialog/Dialog.types.test.tsx
index 43d7aa373b9..cae96936386 100644
--- a/src/Dialog/Dialog.types.test.tsx
+++ b/src/Dialog/Dialog.types.test.tsx
@@ -3,7 +3,6 @@ import {Dialog} from './Dialog'
 
 /* Dialog Version 2? */
 
-
 export function shouldAcceptCallWithNoProps() {
   return <Dialog onClose={() => null} />
 }

From 7fcaef914ea27730f776823c6a3dd03f394da02d Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Tue, 10 Oct 2023 10:54:09 -0400
Subject: [PATCH 6/9] chore: hopeful test and lint fix

---
 src/Dialog.stories.tsx     | 145 +++++++++++++++++++++++++++++++++++++
 src/Dialog/Dialog.test.tsx |   2 +-
 2 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 src/Dialog.stories.tsx

diff --git a/src/Dialog.stories.tsx b/src/Dialog.stories.tsx
new file mode 100644
index 00000000000..c51267626d5
--- /dev/null
+++ b/src/Dialog.stories.tsx
@@ -0,0 +1,145 @@
+import React, {useState, useRef, useCallback} from 'react'
+import {Meta} from '@storybook/react'
+
+import {BaseStyles, ThemeProvider} from '.'
+import {Button} from './Button'
+import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog'
+
+/* Dialog Version 1? */
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+  decorators: [
+    Story => {
+      // Since portal roots are registered globally, we need this line so that each storybook
+      // story works in isolation.
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+  args: {
+    width: 'xlarge',
+    height: 'auto',
+    subtitle: true,
+  },
+  argTypes: {
+    width: {
+      control: {
+        type: 'radio',
+      },
+      options: ['small', 'medium', 'large', 'xlarge'],
+    },
+    height: {
+      control: {
+        type: 'radio',
+      },
+      options: ['small', 'large', 'auto'],
+    },
+    subtitle: {
+      name: 'show subtitle',
+      control: {
+        type: 'boolean',
+      },
+    },
+    title: {table: {disable: true}},
+
+    renderHeader: {table: {disable: true}},
+    renderBody: {table: {disable: true}},
+    renderFooter: {table: {disable: true}},
+    onClose: {table: {disable: true}},
+    role: {table: {disable: true}},
+    ref: {table: {disable: true}},
+    key: {table: {disable: true}},
+    footerButtons: {table: {disable: true}},
+  },
+} as Meta
+
+const lipsum = (
+  <div style={{fontSize: '14px'}}>
+    <p style={{marginBlockStart: 0}}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
+      lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
+      nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
+      Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit
+      amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris
+      fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus
+      luctus tempus posuere.
+    </p>
+
+    <p>
+      Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis
+      lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis
+      sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim
+      sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus
+      sem. Mauris a est tellus.
+    </p>
+
+    <p>
+      Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales
+      molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo,
+      condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend
+      dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam
+      pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque.
+    </p>
+
+    <p>
+      Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in
+      nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend
+      lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo.
+    </p>
+
+    <p>
+      Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non
+      consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam
+      pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet.
+      Maecenas semper mi egestas, dignissim nisi et, elementum neque.
+    </p>
+  </div>
+)
+interface DialogStoryProps {
+  width: DialogWidth
+  height: DialogHeight
+  subtitle: boolean
+}
+export const Default = ({width, height, subtitle}: DialogStoryProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [secondOpen, setSecondOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+  const onSecondDialogClose = useCallback(() => setSecondOpen(false), [])
+  const openSecondDialog = useCallback(() => setSecondOpen(true), [])
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {isOpen && (
+        <Dialog
+          title="My Dialog"
+          subtitle={subtitle ? 'This is a subtitle!' : undefined}
+          onClose={onDialogClose}
+          width={width}
+          height={height}
+          footerButtons={[
+            {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog},
+            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
+            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
+          ]}
+        >
+          {lipsum}
+          {secondOpen && (
+            <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small">
+              Hello world
+            </Dialog>
+          )}
+        </Dialog>
+      )}
+    </>
+  )
+}
diff --git a/src/Dialog/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx
index 965d464a11a..1d636d591cf 100644
--- a/src/Dialog/Dialog.test.tsx
+++ b/src/Dialog/Dialog.test.tsx
@@ -80,7 +80,7 @@ describe('Dialog', () => {
     options: {skipAs: true, skipSx: true},
   })
 
-  checkExports('Dialog/Dialog', {
+  checkExports('Dialog', {
     default: Dialog,
   })
 

From a98deeb0bedde97a5c59651a4889c50131e1ea3f Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Tue, 10 Oct 2023 11:25:15 -0400
Subject: [PATCH 7/9] fix duplicate story label

---
 src/Dialog.stories.tsx | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/Dialog.stories.tsx b/src/Dialog.stories.tsx
index c51267626d5..dc51650777e 100644
--- a/src/Dialog.stories.tsx
+++ b/src/Dialog.stories.tsx
@@ -1,14 +1,14 @@
-import React, {useState, useRef, useCallback} from 'react'
-import {Meta} from '@storybook/react'
+import React, { useState, useRef, useCallback } from 'react'
+import { Meta } from '@storybook/react'
 
-import {BaseStyles, ThemeProvider} from '.'
-import {Button} from './Button'
-import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog'
+import { BaseStyles, ThemeProvider } from '.'
+import { Button } from './Button'
+import { Dialog, DialogWidth, DialogHeight } from './Dialog/Dialog'
 
 /* Dialog Version 1? */
 
 export default {
-  title: 'Components/Dialog',
+  title: 'Dialog',
   component: Dialog,
   decorators: [
     Story => {
@@ -47,22 +47,22 @@ export default {
         type: 'boolean',
       },
     },
-    title: {table: {disable: true}},
+    title: { table: { disable: true } },
 
-    renderHeader: {table: {disable: true}},
-    renderBody: {table: {disable: true}},
-    renderFooter: {table: {disable: true}},
-    onClose: {table: {disable: true}},
-    role: {table: {disable: true}},
-    ref: {table: {disable: true}},
-    key: {table: {disable: true}},
-    footerButtons: {table: {disable: true}},
+    renderHeader: { table: { disable: true } },
+    renderBody: { table: { disable: true } },
+    renderFooter: { table: { disable: true } },
+    onClose: { table: { disable: true } },
+    role: { table: { disable: true } },
+    ref: { table: { disable: true } },
+    key: { table: { disable: true } },
+    footerButtons: { table: { disable: true } },
   },
 } as Meta
 
 const lipsum = (
-  <div style={{fontSize: '14px'}}>
-    <p style={{marginBlockStart: 0}}>
+  <div style={{ fontSize: '14px' }}>
+    <p style={{ marginBlockStart: 0 }}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -107,7 +107,7 @@ interface DialogStoryProps {
   height: DialogHeight
   subtitle: boolean
 }
-export const Default = ({width, height, subtitle}: DialogStoryProps) => {
+export const Default = ({ width, height, subtitle }: DialogStoryProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [secondOpen, setSecondOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -127,9 +127,9 @@ export const Default = ({width, height, subtitle}: DialogStoryProps) => {
           width={width}
           height={height}
           footerButtons={[
-            {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog},
-            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
-            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
+            { buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog },
+            { buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose },
+            { buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true },
           ]}
         >
           {lipsum}

From cda653bee7a37e354714848d8f3e6d6d9e5acc60 Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Tue, 10 Oct 2023 11:32:56 -0400
Subject: [PATCH 8/9] chore: formatting

---
 src/Dialog.stories.tsx | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/Dialog.stories.tsx b/src/Dialog.stories.tsx
index dc51650777e..61c3cef8a74 100644
--- a/src/Dialog.stories.tsx
+++ b/src/Dialog.stories.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useRef, useCallback } from 'react'
-import { Meta } from '@storybook/react'
+import React, {useState, useRef, useCallback} from 'react'
+import {Meta} from '@storybook/react'
 
-import { BaseStyles, ThemeProvider } from '.'
-import { Button } from './Button'
-import { Dialog, DialogWidth, DialogHeight } from './Dialog/Dialog'
+import {BaseStyles, ThemeProvider} from '.'
+import {Button} from './Button'
+import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog'
 
 /* Dialog Version 1? */
 
@@ -47,22 +47,22 @@ export default {
         type: 'boolean',
       },
     },
-    title: { table: { disable: true } },
+    title: {table: {disable: true}},
 
-    renderHeader: { table: { disable: true } },
-    renderBody: { table: { disable: true } },
-    renderFooter: { table: { disable: true } },
-    onClose: { table: { disable: true } },
-    role: { table: { disable: true } },
-    ref: { table: { disable: true } },
-    key: { table: { disable: true } },
-    footerButtons: { table: { disable: true } },
+    renderHeader: {table: {disable: true}},
+    renderBody: {table: {disable: true}},
+    renderFooter: {table: {disable: true}},
+    onClose: {table: {disable: true}},
+    role: {table: {disable: true}},
+    ref: {table: {disable: true}},
+    key: {table: {disable: true}},
+    footerButtons: {table: {disable: true}},
   },
 } as Meta
 
 const lipsum = (
-  <div style={{ fontSize: '14px' }}>
-    <p style={{ marginBlockStart: 0 }}>
+  <div style={{fontSize: '14px'}}>
+    <p style={{marginBlockStart: 0}}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec
       lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis
       nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt.
@@ -107,7 +107,7 @@ interface DialogStoryProps {
   height: DialogHeight
   subtitle: boolean
 }
-export const Default = ({ width, height, subtitle }: DialogStoryProps) => {
+export const Default = ({width, height, subtitle}: DialogStoryProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [secondOpen, setSecondOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -127,9 +127,9 @@ export const Default = ({ width, height, subtitle }: DialogStoryProps) => {
           width={width}
           height={height}
           footerButtons={[
-            { buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog },
-            { buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose },
-            { buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true },
+            {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog},
+            {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
+            {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true},
           ]}
         >
           {lipsum}

From ad7d21ea50d903831ea3c51a75c36eb48c758fac Mon Sep 17 00:00:00 2001
From: Amanda Brown <green6erry@github.com>
Date: Tue, 10 Oct 2023 12:03:14 -0400
Subject: [PATCH 9/9] maybe fix duplicate dialog issue again

---
 src/Dialog.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Dialog.stories.tsx b/src/Dialog.stories.tsx
index 61c3cef8a74..d085e9271fb 100644
--- a/src/Dialog.stories.tsx
+++ b/src/Dialog.stories.tsx
@@ -8,7 +8,7 @@ import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog'
 /* Dialog Version 1? */
 
 export default {
-  title: 'Dialog',
+  title: 'Components/DialogV1',
   component: Dialog,
   decorators: [
     Story => {