feat(Dialog): add headerAction slot

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Split action handlers with "OR" condition in accessibility behaviors @sophieH29 ([#1622](https://github.com/stardust-ui/react/pull/1622))
+- Add `headerAction` slot to the `Dialog` component @mnajdova ([#1617](https://github.com/stardust-ui/react/pull/1617))
 
 <!--------------------------------[ v0.34.1 ]------------------------------- -->
 ## [v0.34.1](https://github.com/stardust-ui/react/tree/v0.34.1) (2019-07-11)

docs/src/examples/components/Dialog/Content/DialogExampleContent.shorthand.steps.ts

@@ -0,0 +1,8 @@
+import getScreenerSteps from '../commonScreenerSteps'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: getScreenerSteps(),
+}
+
+export default config

docs/src/examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand.steps.ts

@@ -0,0 +1,8 @@
+import getScreenerSteps from '../commonScreenerSteps'
+
+const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
+  steps: getScreenerSteps(),
+}
+
+export default config

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

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Button, Dialog } from '@stardust-ui/react'
+import { useBooleanKnob } from '@stardust-ui/docs-components'
+
+const DialogExampleHeaderAction: React.FC = () => {
+  const [open, setOpen] = useBooleanKnob({ name: 'open' })
+  return (
+    <Dialog
+      open={open}
+      onOpen={(e, { open }) => setOpen(open)}
+      cancelButton="Cancel"
+      confirmButton="Confirm"
+      content="Are you sure you want to confirm this action?"
+      header="Action confirmation"
+      headerAction={{ icon: 'close', title: 'Close', onClick: () => setOpen(false) }}
+      trigger={<Button content="Open a dialog" />}
+    />
+  )
+}
+
+export default DialogExampleHeaderAction

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

@@ -10,6 +10,11 @@ const DialogContentExamples = () => (
       description="A dialog can contain a content."
       examplePath="components/Dialog/Content/DialogExampleContent"
     />
+    <ComponentExample
+      title="Header action"
+      description="A dialog can contain an action in the header."
+      examplePath="components/Dialog/Content/DialogExampleHeaderAction"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/Dialog/commonScreenerSteps.ts

@@ -0,0 +1,9 @@
+import { Button } from '@stardust-ui/react'
+
+const button = `.${Button.className}`
+
+const getScreenerSteps = (): ScreenerSteps => [
+  builder => builder.click(button).snapshot('Clicks the trigger button'),
+]
+
+export default getScreenerSteps

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

@@ -20,12 +20,13 @@ import { Accessibility } from '../../lib/accessibility/types'
 import { ComponentEventHandler, WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
 import Button, { ButtonProps } from '../Button/Button'
 import Box, { BoxProps } from '../Box/Box'
-import Header from '../Header/Header'
+import Header, { HeaderProps } from '../Header/Header'
 import Portal from '../Portal/Portal'
 import Flex from '../Flex/Flex'
 
 export interface DialogSlotClassNames {
   header: string
+  headerAction: string
   content: string
 }
 
@@ -40,19 +41,22 @@ export interface DialogProps
   accessibility?: Accessibility
 
   /** A dialog can contain actions. */
-  actions?: ShorthandValue
+  actions?: ShorthandValue<BoxProps>
 
   /** A dialog can contain a cancel button. */
-  cancelButton?: ShorthandValue
+  cancelButton?: ShorthandValue<ButtonProps>
 
   /** A dialog can contain a confirm button. */
-  confirmButton?: ShorthandValue
+  confirmButton?: ShorthandValue<ButtonProps>
 
   /** Initial value for 'open'. */
   defaultOpen?: boolean
 
   /** A dialog can contain a header. */
-  header?: ShorthandValue
+  header?: ShorthandValue<HeaderProps>
+
+  /** A dialog can contain a button next to the header. */
+  headerAction?: ShorthandValue<ButtonProps>
 
   /**
    * Called after user's click a cancel button.
@@ -79,7 +83,7 @@ export interface DialogProps
   open?: boolean
 
   /** A dialog can contain a overlay. */
-  overlay?: ShorthandValue
+  overlay?: ShorthandValue<BoxProps>
 
   /** Controls whether or not focus trap should be applied, using boolean or FocusTrapZoneProps type value. */
   trapFocus?: true | FocusTrapZoneProps
@@ -110,6 +114,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
       color: true,
     }),
     actions: customPropTypes.itemShorthand,
+    headerAction: customPropTypes.itemShorthand,
     cancelButton: customPropTypes.itemShorthand,
     confirmButton: customPropTypes.itemShorthand,
     defaultOpen: PropTypes.bool,
@@ -207,6 +212,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
       cancelButton,
       content,
       header,
+      headerAction,
       overlay,
       trapFocus,
       trigger,
@@ -229,6 +235,15 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
               ...accessibility.attributes.header,
             },
           })}
+          {Button.create(headerAction, {
+            defaultProps: {
+              className: Dialog.slotClassNames.headerAction,
+              styles: styles.headerAction,
+              text: true,
+              iconOnly: true,
+              ...accessibility.attributes.headerAction,
+            },
+          })}
           {Box.create(content, {
             defaultProps: {
               styles: styles.content,
@@ -285,6 +300,7 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
 
 Dialog.slotClassNames = {
   header: `${Dialog.className}__header`,
+  headerAction: `${Dialog.className}__headerAction`,
   content: `${Dialog.className}__content`,
 }
 

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

@@ -12,15 +12,21 @@ export default {
     padding: v.rootPadding,
     position: 'relative',
     width: v.rootWidth,
+    display: 'flex',
+    flexWrap: 'wrap',
   }),
   actions: (): ICSSInJSStyle => ({
     textAlign: 'right',
+    flexBasis: '100%',
+    marginLeft: 'auto',
   }),
   content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({
     margin: v.contentMargin,
+    flexBasis: '100%',
   }),
   header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({
     margin: v.headerMargin,
+    flexGrow: 1,
   }),
   overlay: ({ props: p, variables: v }: DialogStyleParams): ICSSInJSStyle => ({
     alignItems: 'center',

packages/react/src/themes/teams/components/Button/buttonStyles.ts

@@ -148,6 +148,12 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, ButtonVa
             color: textPrimaryColorHover,
           },
         }),
+
+        ':focus': {
+          boxShadow: 'none',
+          outline: 'none',
+          ...(isFromKeyboard && borderFocusStyles),
+        },
       }),
 
       // Overrides for "primary" buttons

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

@@ -14,4 +14,9 @@ export default {
     fontSize: v.headerFontSize,
     fontWeight: v.headerFontWeight,
   }),
+
+  headerAction: ({ variables: v }: DialogStyleParams) => ({
+    color: v.foregroundColor,
+    margin: v.headerActionMargin,
+  }),
 }

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

@@ -7,6 +7,8 @@ export interface DialogVariables extends BaseDialogVariables {
 
   headerFontSize: string
   headerFontWeight: number
+
+  headerActionMargin: string
 }
 
 export default (siteVariables): DialogVariables => ({
@@ -26,4 +28,6 @@ export default (siteVariables): DialogVariables => ({
 
   overlayBackground: 'rgba(37, 36, 36, .75)', // todo: update to a palette value when daisy has mapped one
   overlayZIndex: 1000,
+
+  headerActionMargin: `${pxToRem(-3)} ${pxToRem(-8)} 0 0`,
 })