microsoft · bsunderhus · Oct 5, 2022 · Oct 4, 2022 · Oct 4, 2022 · Oct 5, 2022
diff --git a/change/@fluentui-react-dialog-bbb01d69-5227-40c3-aaf3-053f1af35f0d.json b/change/@fluentui-react-dialog-bbb01d69-5227-40c3-aaf3-053f1af35f0d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: updates dialog stories",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -150,7 +150,7 @@ export const DialogTitle: ForwardRefComponent<DialogTitleProps>;
 export const dialogTitleClassNames: SlotClassNames<DialogTitleSlots>;
 
 // @public
-export type DialogTitleProps = ComponentProps<DialogTitleSlots> & {};
+export type DialogTitleProps = ComponentProps<DialogTitleSlots>;
 
 // @public (undocumented)
 export type DialogTitleSlots = {

@@ -38,7 +38,8 @@ export type DialogModalType = 'modal' | 'non-modal' | 'alert';
  * Callback fired when the component changes value from open state.
  *
  * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`
- * @param data - A data object with relevant information, such as open value and type
+ * @param data - A data object with relevant information,
+ * such as open value and type of interaction that created the event
  */
 export type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;
 
@@ -81,6 +82,13 @@ export type DialogProps = ComponentProps<Partial<DialogSlots>> & {
    * @default false
    */
   defaultOpen?: boolean;
+  /**
+   * Callback fired when the component changes value from open state.
+   *
+   * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`
+   * @param data - A data object with relevant information,
+   * such as open value and type of interaction that created the event
+   */
   onOpenChange?: DialogOpenChangeEventHandler;
   /**
    * Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.

@@ -14,7 +14,7 @@ export type DialogTitleSlots = {
 /**
  * DialogTitle Props
  */
-export type DialogTitleProps = ComponentProps<DialogTitleSlots> & {};
+export type DialogTitleProps = ComponentProps<DialogTitleSlots>;
 
 /**
  * State used in rendering DialogTitle

@@ -7,8 +7,10 @@ export type DialogTriggerProps = {
   /**
    * Explicitly declare if the trigger is responsible for opening or
    * closing a Dialog visibility state.
-   * @default 'open' // if it's outside DialogSurface
-   * @default 'close' // if it's inside DialogSurface
+   *
+   * If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default
+   *
+   * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default
    */
   action?: DialogTriggerAction;
   /**

@@ -1,3 +1,5 @@
 A `Dialog` **should** always have at least one focusable element.
+Some accessibility issues might happen if no focusable element is provided, like this one caught in [Talkback](https://issuetracker.google.com/issues/243456562?pli=1).
+
 In the case no focusable element is present inside a `Dialog` the only method
 that would close the `Dialog` would be clicking on the `backdrop`
@@ -16,7 +16,7 @@ export const NoFocusableElement = () => {
             <DialogTitle>Dialog Title</DialogTitle>
             <DialogContent>
               <p>⛔️ A Dialog without focusable elements is not recommended!</p>
-              <p>⚠️ Escape key only works with native dialog</p>
+              <p>⛔️ Escape key doesn't work</p>
               <p>✅ Backdrop click still works to ensure this modal can be closed</p>
             </DialogContent>
           </DialogBody>

@@ -4,7 +4,7 @@ import { Button } from '@fluentui/react-components';
 import story from './DialogTitleCustomAction.md';
 import { Dismiss24Regular } from '@fluentui/react-icons';
 
-export const CustomAction = () => {
+export const TitleCustomAction = () => {
   return (
     <Dialog>
       <DialogTrigger>
@@ -32,7 +32,7 @@ export const CustomAction = () => {
   );
 };
 
-CustomAction.parameters = {
+TitleCustomAction.parameters = {
   docs: {
     description: {
       story,

@@ -11,7 +11,7 @@ import {
 import { Button } from '@fluentui/react-components';
 import story from './DialogTitleNoAction.md';
 
-export const NoAction = () => {
+export const TitleNoAction = () => {
   return (
     <Dialog modalType="non-modal">
       <DialogTrigger>
@@ -36,7 +36,7 @@ export const NoAction = () => {
   );
 };
 
-NoAction.parameters = {
+TitleNoAction.parameters = {
   docs: {
     description: {
       story,

@@ -1,7 +1,8 @@
-import { Dialog } from '@fluentui/react-dialog';
+import { Dialog, DialogSurface, DialogTitle, DialogActions, DialogTrigger } from '@fluentui/react-dialog';
 
 import descriptionMd from './DialogDescription.md';
 import bestPracticesMd from './DialogBestPractices.md';
+import { ComponentMeta } from '@storybook/react';
 
 export { Default } from './DialogDefault.stories';
 export { NonModal } from './DialogNonModal.stories';
@@ -14,15 +15,23 @@ export { ChangeFocus } from './DialogChangeFocus.stories';
 export { TriggerOutsideDialog } from './DialogTriggerOutsideDialog.stories';
 export { CustomTrigger } from './DialogCustomTrigger.stories';
 export { WithForm } from './DialogWithForm.stories';
+export { TitleCustomAction } from './DialogTitleCustomAction.stories';
+export { TitleNoAction } from './DialogTitleNoAction.stories';
 
 export default {
-  title: 'Preview Components/Dialog/Dialog',
+  title: 'Preview Components/Dialog',
   component: Dialog,
+  subcomponents: {
+    DialogTrigger,
+    DialogSurface,
+    DialogTitle,
+    DialogActions,
+  },
   parameters: {
     docs: {
       description: {
         component: [descriptionMd, bestPracticesMd].join('\n'),
       },
     },
   },
-};
+} as ComponentMeta<typeof Dialog>;