feat(react-dialog): [CAP] closeButton prop to DialogTitle

packages/react-components/react-dialog/library/etc/react-dialog.api.md

@@ -6,6 +6,7 @@
 
 import { ARIAButtonResultProps } from '@fluentui/react-aria';
 import { ARIAButtonType } from '@fluentui/react-aria';
+import type { ButtonProps } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
@@ -213,7 +214,9 @@ export const DialogTitle: ForwardRefComponent<DialogTitleProps>;
 export const dialogTitleClassNames: SlotClassNames<DialogTitleSlots>;
 
 // @public
-export type DialogTitleProps = ComponentProps<DialogTitleSlots>;
+export type DialogTitleProps = ComponentProps<DialogTitleSlots> & {
+    closeButton?: ButtonProps;
+};
 
 // @public (undocumented)
 export type DialogTitleSlots = {

packages/react-components/react-dialog/library/src/components/DialogTitle/DialogTitle.types.ts

@@ -1,4 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ButtonProps } from '@fluentui/react-button';
 
 export type DialogTitleSlots = {
   /**
@@ -15,7 +16,14 @@ export type DialogTitleSlots = {
 /**
  * DialogTitle Props
  */
-export type DialogTitleProps = ComponentProps<DialogTitleSlots>;
+export type DialogTitleProps = ComponentProps<DialogTitleSlots> & {
+  /**
+   * Props to customise the default close button rendered in the `action` slot
+   * for non-modal dialogs. Has no effect when `action` is explicitly provided.
+   * Use `action` to replace close button with other action element.
+   */
+  closeButton?: ButtonProps;
+};
 
 /**
  * State used in rendering DialogTitle

packages/react-components/react-dialog/library/src/components/DialogTitle/useDialogTitle.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { DialogTitleProps, DialogTitleState } from './DialogTitle.types';
 import { useDialogContext_unstable } from '../../contexts/dialogContext';
-import { Dismiss20Regular } from '@fluentui/react-icons';
+import { Dismiss16Regular } from '@fluentui/react-icons';
+import { Button } from '@fluentui/react-button';
 import { DialogTrigger } from '../DialogTrigger/DialogTrigger';
-import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
 
 /**
  * Create the state required to render DialogTitle.
@@ -18,9 +18,8 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
  * @param ref - reference to root HTMLElement of DialogTitle
  */
 export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {
-  const { action } = props;
+  const { action, closeButton: closeButtonProps, ...restProps } = props;
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
-  const internalStyles = useDialogTitleInternalStyles();
 
   return {
     components: {
@@ -31,7 +30,7 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<
       getIntrinsicElementProps('h2', {
         ref,
         id: useDialogContext_unstable(ctx => ctx.dialogTitleId),
-        ...props,
+        ...restProps,
       }),
       { elementType: 'h2' },
     ),
@@ -40,14 +39,13 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<
       defaultProps: {
         children: (
           <DialogTrigger disableButtonEnhancement action="close">
-            <button
-              type="button"
-              className={internalStyles}
-              // TODO: find a better way to add internal labels
+            <Button
+              appearance="transparent"
               aria-label="close"
-            >
-              <Dismiss20Regular />
-            </button>
+              icon={<Dismiss16Regular />}
+              size="small"
+              {...closeButtonProps}
+            />
           </DialogTrigger>
         ),
       },

packages/react-components/react-dialog/library/src/components/DialogTitle/useDialogTitleStyles.styles.ts

@@ -27,6 +27,12 @@ const useStyles = makeStyles({
   rootWithoutAction: {
     gridColumnEnd: 4,
   },
+  action: {
+    // Aligns the dismiss icon within the close button to the right edge of the body container.
+    // This only applies to the dismiss icon with close button in size small.
+    // Custom styling may be needed for other icons or sizes.
+    marginRight: '-8px',
+  },
 });
 
 /**
@@ -79,7 +85,12 @@ export const useDialogTitleStyles_unstable = (state: DialogTitleState): DialogTi
   );
 
   if (state.action) {
-    state.action.className = mergeClasses(dialogTitleClassNames.action, actionResetStyles, state.action.className);
+    state.action.className = mergeClasses(
+      dialogTitleClassNames.action,
+      actionResetStyles,
+      styles.action,
+      state.action.className,
+    );
   }
 
   return state;