DialogHeader now supports detail as alternative to default close UI (#1152)

Also adds in support for fontSize, fontWeight properties
Validates functionality with InlineEdit as well

Author: Luke Bowerman

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED]
 
+### Added
+
+- `DialogHeader`
+  - Supports `detail` prop as alternative to default `close` icon
+  - Supports `fontWeight` & `fontSize` for backwards compatibility
+
 ### Changed
 
 - `Fieldset` accordion mode auto-indents elements in the inner `AccordionContent`

packages/components/src/Dialog/Layout/DialogHeader.test.tsx

@@ -26,40 +26,40 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import {
-  assertSnapshot,
-  mountWithTheme,
-  renderWithTheme,
-} from '@looker/components-test-utils'
-import { IconButton } from '../../Button'
+import { assertSnapshot, renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 import { DialogHeader } from './DialogHeader'
 
-test('DialogHeader', () => {
-  assertSnapshot(
-    <DialogHeader id="test-DialogHeader">The Heading for a Dialog</DialogHeader>
-  )
-})
+describe('DialogHeader', () => {
+  test('Snapshot', () => {
+    assertSnapshot(
+      <DialogHeader id="test-DialogHeader">
+        The Heading for a Dialog
+      </DialogHeader>
+    )
+  })
 
-test('DialogHeader passes through DOM props', () => {
-  const { findByLabelText } = renderWithTheme(
-    <DialogHeader aria-label="This is the ARIA label">
-      The Heading for a Dialog
-    </DialogHeader>
-  )
+  test('Passes through DOM props', () => {
+    renderWithTheme(
+      <DialogHeader aria-label="ARIA label">Heading</DialogHeader>
+    )
 
-  expect(findByLabelText('This is the ARIA label')).toBeTruthy()
-})
+    expect(screen.findByLabelText('ARIA label')).toBeTruthy()
+  })
+
+  test('Close visible by default', () => {
+    renderWithTheme(<DialogHeader>Heading</DialogHeader>)
+    expect(screen.findByText('Close')).toBeTruthy()
+  })
 
-test('DialogHeader with hideClose', () => {
-  const withClose = mountWithTheme(
-    <DialogHeader id="test-DialogHeader">The Heading for a Dialog</DialogHeader>
-  )
-  expect(withClose.find(IconButton).exists()).toBeTruthy()
+  test(`detail`, () => {
+    renderWithTheme(<DialogHeader detail="Hello world">Header</DialogHeader>)
+    expect(screen.findByText('Hello world')).toBeTruthy()
+    expect(screen.queryByLabelText('Close')).toBeNull()
+  })
 
-  const withoutClose = mountWithTheme(
-    <DialogHeader id="test-DialogHeader" hideClose>
-      The Heading for a Dialog
-    </DialogHeader>
-  )
-  expect(withoutClose.find(IconButton).exists()).toBeFalsy()
+  test('hideClose', () => {
+    renderWithTheme(<DialogHeader hideClose>Heading</DialogHeader>)
+    expect(screen.queryByLabelText('Close')).toBeNull()
+  })
 })

packages/components/src/Dialog/Layout/DialogHeader.tsx

@@ -24,7 +24,7 @@
 
  */
 
-import React, { FC, useContext } from 'react'
+import React, { FC, ReactNode, useContext } from 'react'
 import { IconNames } from '@looker/icons'
 import styled from 'styled-components'
 import {
@@ -33,15 +33,19 @@ import {
   SpaceProps,
   space,
   reset,
+  FontSizeProps,
+  FontWeightProps,
 } from '@looker/design-tokens'
 import { IconButton } from '../../Button'
 import { Heading } from '../../Text'
 import { DialogContext } from '../DialogContext'
 
 export interface DialogHeaderProps
   extends SpaceProps,
-    CompatibleHTMLProps<HTMLElement> {
-  children: string | string[]
+    CompatibleHTMLProps<HTMLElement>,
+    FontSizeProps,
+    FontWeightProps {
+  children: ReactNode
   /**
    * Don't include the "Close" option
    * @default false
@@ -51,12 +55,20 @@ export interface DialogHeaderProps
    * Specify an icon to be used for close. Defaults to `Close`
    */
   closeIcon?: IconNames
+
+  /**
+   * Replaces the built-in `IconButton` (generally used for close) with an arbitrary ReactNode
+   */
+  detail?: ReactNode
 }
 
 const DialogHeaderLayout: FC<DialogHeaderProps> = ({
   children,
   closeIcon = 'Close',
   hideClose,
+  detail,
+  fontSize,
+  fontWeight,
   ...props
 }) => {
   const { closeModal } = useContext(DialogContext)
@@ -67,28 +79,38 @@ const DialogHeaderLayout: FC<DialogHeaderProps> = ({
       <Heading
         as="h3"
         mr="xlarge"
-        fontWeight="semiBold"
+        fontSize={fontSize || undefined}
+        fontWeight={fontWeight || 'semiBold'}
         style={{ gridArea: 'text' }}
         truncate
       >
         {children}
       </Heading>
-      {!hideClose && (
-        <IconButton
-          id={id ? `${id}-iconButton` : undefined}
-          tabIndex={-1}
-          color="neutral"
-          size="small"
-          onClick={closeModal}
-          label="Close"
-          icon={closeIcon}
-          style={{ gridArea: 'close' }}
-        />
+      {detail ? (
+        <Detail>{detail}</Detail>
+      ) : (
+        !hideClose && (
+          <Detail>
+            <IconButton
+              id={id ? `${id}-iconButton` : undefined}
+              tabIndex={-1}
+              color="neutral"
+              size="small"
+              onClick={closeModal}
+              label="Close"
+              icon={closeIcon}
+            />
+          </Detail>
+        )
       )}
     </header>
   )
 }
 
+const Detail = styled.div`
+  grid-area: close;
+`
+
 export const DialogHeader = styled(DialogHeaderLayout)`
   ${reset}
   ${space}