feat(Dialog): Add ability to set custom footer

docs/src/examples/components/Dialog/Content/DialogExampleFooter.shorthand.tsx

@@ -0,0 +1,33 @@
+import { Button, Dialog, Box } from '@stardust-ui/react'
+import * as React from 'react'
+
+const customStylesWithComponent = compStyles => {
+  const customStyles = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+  }
+  return { ...customStyles, ...compStyles }
+}
+
+const CustomFooter = ({ styles, actions }) => {
+  return (
+    <Box styles={customStylesWithComponent(styles())}>
+      <span>any custom text in footer</span>
+      {actions}
+    </Box>
+  )
+}
+
+const DialogExampleContent: React.FC = () => (
+  <Dialog
+    cancelButton="Cancel"
+    confirmButton="Confirm"
+    content="Are you sure you want to confirm this action?"
+    header="Action confirmation"
+    trigger={<Button content="Open a dialog" />}
+    footer={render => render({}, (C, p) => <CustomFooter {...p} />)}
+  />
+)
+
+export default DialogExampleContent

docs/src/examples/components/Dialog/Content/index.tsx

@@ -15,6 +15,11 @@ const DialogContentExamples = () => (
       description="A dialog can contain an action in the header."
       examplePath="components/Dialog/Content/DialogExampleHeaderAction"
     />
+    <ComponentExample
+      title="Footer"
+      description="A dialog can contain a custom footer."
+      examplePath="components/Dialog/Content/DialogExampleFooter"
+    />
   </ExampleSection>
 )
 

packages/react/src/components/Dialog/Dialog.tsx

@@ -25,6 +25,7 @@ import Box, { BoxProps } from '../Box/Box'
 import Header, { HeaderProps } from '../Header/Header'
 import Portal, { TriggerAccessibility } from '../Portal/Portal'
 import Flex from '../Flex/Flex'
+import DialogFooter from './DialogFooter'
 
 export interface DialogSlotClassNames {
   header: string
@@ -63,6 +64,9 @@ export interface DialogProps
   /** A dialog can contain a button next to the header. */
   headerAction?: ShorthandValue<ButtonProps>
 
+  /** A dialog can contain a footer. */
+  footer?: ShorthandValue<any>
+
   /**
    * Called after a user clicks the cancel button.
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
@@ -137,6 +141,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
     backdrop: true,
     closeOnOutsideClick: true,
     overlay: {},
+    footer: {},
     trapFocus: true,
   }
 
@@ -246,9 +251,31 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
       overlay,
       trapFocus,
       trigger,
+      footer,
     } = this.props
     const { open } = this.state
 
+    const dialogActions = ButtonGroup.create(actions, {
+      defaultProps: {
+        styles: styles.actions,
+      },
+      overrideProps: {
+        content: (
+          <Flex gap="gap.smaller">
+            {Button.create(cancelButton, {
+              overrideProps: this.handleCancelButtonOverrides,
+            })}
+            {Button.create(confirmButton, {
+              defaultProps: {
+                primary: true,
+              },
+              overrideProps: this.handleConfirmButtonOverrides,
+            })}
+          </Flex>
+        ),
+      },
+    })
+
     const dialogContent = (
       <Ref innerRef={this.contentRef}>
         <ElementType
@@ -285,7 +312,16 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
             },
           })}
 
-          {ButtonGroup.create(actions, {
+          {/* <div style={styles.footer}> */}
+          {DialogFooter.create(footer, {
+            overrideProps: {
+              actions: dialogActions,
+              styles: styles.footer,
+            },
+          })}
+          {/* </div> */}
+
+          {/* {ButtonGroup.create(actions, {
             defaultProps: {
               styles: styles.actions,
             },
@@ -304,7 +340,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
                 </Flex>
               ),
             },
-          })}
+          })} */}
         </ElementType>
       </Ref>
     )

packages/react/src/components/Dialog/DialogFooter.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import * as customPropTypes from '@stardust-ui/react-proptypes'
+
+import {
+  createShorthandFactory,
+  UIComponent,
+  UIComponentProps,
+  ChildrenComponentProps,
+  ContentComponentProps,
+  commonPropTypes,
+  ShorthandFactory,
+  childrenExist,
+} from '../../lib'
+
+import { ShorthandValue, WithAsProp, withSafeTypeForAs } from '../../types'
+import { BoxProps } from '../Box/Box'
+
+export interface DialogFooterProps
+  extends UIComponentProps,
+    ChildrenComponentProps,
+    ContentComponentProps {
+  /** Dialog actions */
+  actions: ShorthandValue<BoxProps>
+}
+
+class DialogFooter extends UIComponent<WithAsProp<DialogFooterProps>> {
+  static create: ShorthandFactory<DialogFooterProps>
+
+  static displayName = 'DialogFooter'
+  static className = 'ui-dialog__footer'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon(),
+    actions: customPropTypes.itemShorthand,
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps }): React.ReactNode {
+    const { children, actions, styles } = this.props
+
+    return (
+      <ElementType style={{ styles }} className={classes.root} {...unhandledProps}>
+        {childrenExist(children) ? children : actions}
+      </ElementType>
+    )
+  }
+}
+
+DialogFooter.create = createShorthandFactory({ Component: DialogFooter })
+
+/**
+ * A TooltipContent contains the content of a Tooltip component.
+ */
+export default withSafeTypeForAs<typeof DialogFooter, DialogFooterProps>(DialogFooter)

packages/react/src/themes/teams/componentStyles.ts

@@ -18,6 +18,7 @@ export { default as ChatMessage } from './components/Chat/chatMessageStyles'
 export { default as Checkbox } from './components/Checkbox/checkboxStyles'
 
 export { default as Dialog } from './components/Dialog/dialogStyles'
+export { default as DialogFooter } from './components/Dialog/dialogFooterStyles'
 
 export { default as Divider } from './components/Divider/dividerStyles'
 

packages/react/src/themes/teams/components/Dialog/dialogFooterStyles.ts

@@ -0,0 +1,7 @@
+import { ICSSInJSStyle } from '../../../types'
+
+export default {
+  root: (): ICSSInJSStyle => ({
+    textAlign: 'right',
+  }),
+}

packages/react/src/themes/teams/components/Dialog/dialogStyles.ts

@@ -18,11 +18,13 @@ export default {
     color: v.foregroundColor,
   }),
 
-  actions: (): ICSSInJSStyle => ({
+  footer: (): ICSSInJSStyle => ({
+    gridColumn: '1 / -1',
     gridRow: 3,
-    gridColumn: '1 / span 2',
-    '-ms-grid-column-align': 'end',
-    justifySelf: 'right',
+  }),
+
+  actions: (): ICSSInJSStyle => ({
+    display: 'inline-block',
   }),
 
   content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({