ModalHeader now properly passes through DOM properties (id, aria-label)

Author: Luke Bowerman

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

@@ -26,7 +26,11 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot, mountWithTheme } from '@looker/components-test-utils'
+import {
+  assertSnapshot,
+  mountWithTheme,
+  renderWithTheme,
+} from '@looker/components-test-utils'
 import { IconButton } from '../../Button'
 import { ModalHeader } from './ModalHeader'
 
@@ -36,6 +40,16 @@ test('ModalHeader', () => {
   )
 })
 
+test('ModalHeader passes through DOM props', () => {
+  const { findByLabelText } = renderWithTheme(
+    <ModalHeader aria-label="This is the ARIA label">
+      The Heading for a Dialog
+    </ModalHeader>
+  )
+
+  expect(findByLabelText('This is the ARIA label')).toBeTruthy()
+})
+
 test('ModalHeader with hideClose', () => {
   const withClose = mountWithTheme(
     <ModalHeader id="test-modalHeader">The Heading for a Dialog</ModalHeader>

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

@@ -28,9 +28,10 @@ import React, { FC, useContext, ReactElement } from 'react'
 import { IconNames } from '@looker/icons'
 import styled from 'styled-components'
 import {
+  CompatibleHTMLProps,
+  omitStyledProps,
   SpaceProps,
   space,
-  CompatibleHTMLProps,
   reset,
 } from '@looker/design-tokens'
 
@@ -56,22 +57,20 @@ export interface ModalHeaderProps
    * Render an icon next to the title text
    */
   headerIcon?: ReactElement<IconProps>
-
-  className?: string
 }
 
 const ModalHeaderLayout: FC<ModalHeaderProps> = ({
-  className,
   children,
   closeIcon = 'Close',
   hideClose,
   headerIcon,
-  id,
+  ...props
 }) => {
   const { closeModal } = useContext(ModalContext)
+  const { id } = props
 
   return (
-    <header className={className}>
+    <header {...omitStyledProps(props)}>
       {headerIcon && <HeaderIconWrapper>{headerIcon}</HeaderIconWrapper>}
       <Heading
         as="h3"

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

@@ -128,6 +128,7 @@ exports[`ModalHeader 1`] = `
 
 <header
   className="c0"
+  id="test-modalHeader"
 >
   <h3
     className="c1"