Confirm no longer includes "Close" icon in header (#696)

ModalHeader - allow hiding of Dialog closing IconButton (hideClose)

Author: Luke Bowerman

CHANGELOG.md

@@ -12,12 +12,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `TextArea` component was created with documentation and tests
 - `FieldTextArea` component was created with documentation and tests
 - `ArrowLeft`, `EditOutline`, `ExploreOutline` Icons added
+- `ModalHeader` add support for `iconClose` option
 
 ### Change
 
 - move path for InlineInputText now under Form/Inputs
 - `ArrowDropDown` and `ArrowDropUp` Icons renamed to `ArrowUp` and `ArrowDown`
 - `CacheRefesh` Icon update
+- `Confirm` no longer displays a `Close` `IconButton` in the header
 
 ## [0.7.24] - 2020-03-12
 

packages/components/src/Modal/Dialog/ConfirmLayout.tsx

@@ -37,7 +37,9 @@ export const ConfirmLayout: FC<ConfirmLayoutProps> = ({
 }) => {
   return (
     <>
-      <ModalHeader headerIcon={titleIcon}>{title}</ModalHeader>
+      <ModalHeader hideClose headerIcon={titleIcon}>
+        {title}
+      </ModalHeader>
       <ModalContent innerProps={{ py: 'none' }}>
         {typeof message === 'string' ? (
           <Paragraph>{message}</Paragraph>

packages/components/src/Modal/Layout/ModalHeader.test.tsx

@@ -26,9 +26,22 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot } from '@looker/components-test-utils'
+import { assertSnapshot, mountWithTheme } from '@looker/components-test-utils'
+import { IconButton } from '../../Button'
 import { ModalHeader } from './ModalHeader'
 
 test('ModalHeader', () => {
   assertSnapshot(<ModalHeader>The Heading for a Dialog</ModalHeader>)
 })
+
+test('ModalHeader with hideClose', () => {
+  const withClose = mountWithTheme(
+    <ModalHeader>The Heading for a Dialog</ModalHeader>
+  )
+  expect(withClose.find(IconButton).exists()).toBeTruthy()
+
+  const withoutClose = mountWithTheme(
+    <ModalHeader hideClose>The Heading for a Dialog</ModalHeader>
+  )
+  expect(withoutClose.find(IconButton).exists()).toBeFalsy()
+})

packages/components/src/Modal/Layout/ModalHeader.tsx

@@ -43,6 +43,11 @@ export interface ModalHeaderProps
   extends SpaceProps,
     CompatibleHTMLProps<HTMLElement> {
   children: string | string[]
+  /**
+   * Don't include the "Close" option
+   * @default false
+   */
+  hideClose?: boolean
   /**
    * Specify an icon to be used for close. Defaults to `Close`
    */
@@ -56,6 +61,7 @@ export interface ModalHeaderProps
 export const ModalHeader: FC<ModalHeaderProps> = ({
   children,
   closeIcon = 'Close',
+  hideClose,
   headerIcon,
   ...props
 }) => {
@@ -72,15 +78,17 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
       >
         {children}
       </Heading>
-      <IconButton
-        tabIndex={-1}
-        color="neutral"
-        size="small"
-        onClick={closeModal}
-        label="Close"
-        icon={closeIcon}
-        style={{ gridArea: 'close' }}
-      />
+      {!hideClose && (
+        <IconButton
+          tabIndex={-1}
+          color="neutral"
+          size="small"
+          onClick={closeModal}
+          label="Close"
+          icon={closeIcon}
+          style={{ gridArea: 'close' }}
+        />
+      )}
     </Header>
   )
 }

packages/components/src/Modal/Layout/__snapshots__/ModalHeader.test.tsx.snap

@@ -86,6 +86,18 @@ exports[`ModalHeader 1`] = `
   color: #262D33;
 }
 
+.c0 {
+  padding: 1.25rem;
+  padding-right: 2rem;
+  padding-left: 2rem;
+  display: grid;
+  grid-template-columns: [icon] auto [text] 1fr [close] auto;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c5 {
   position: absolute;
   height: 1px;
@@ -99,18 +111,6 @@ exports[`ModalHeader 1`] = `
   pointer-events: none;
 }
 
-.c0 {
-  padding: 1.25rem;
-  padding-right: 2rem;
-  padding-left: 2rem;
-  display: grid;
-  grid-template-columns: [icon] auto [text] 1fr [close] auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
 <header
   className="c0"
 >