MessageBar should passthrough DOM properties (#1014)

Author: Luke Bowerman

CHANGELOG.md

@@ -5,10 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-##[0.8.1]
+## [0.8.1]
 
-## Fixed
+### Fixed
 
+- `MessageBar` needs to allow DOM properties to be passed through (aria support and the like)
 - Fix issue where InputDate did not render the correct month when setting a value prop
 
 ## [0.8.0]

packages/components/src/MessageBar/MessageBar.tsx

@@ -27,6 +27,7 @@
 import { CompatibleHTMLProps, TypographyProps } from '@looker/design-tokens'
 import React, { forwardRef, Ref } from 'react'
 import styled from 'styled-components'
+import { omitStyledProps } from '@looker/design-tokens'
 import { IconButton } from '../Button'
 import { SimpleLayoutProps, simpleLayoutCSS } from '../Layout/utils/simple'
 import { getIntentLabel, Status } from '../Status'
@@ -54,13 +55,13 @@ const MessageBarLayout = forwardRef(
       id,
       children,
       canDismiss,
-      className,
       intent = 'inform',
       onDismiss,
+      ...props
     }: MessageBarProps,
     ref: Ref<HTMLDivElement>
   ) => (
-    <div className={className} aria-live="polite" ref={ref} role="status">
+    <div aria-live="polite" ref={ref} role="status" {...omitStyledProps(props)}>
       <Status intent={intent} />
       <MessageBarContent>{children}</MessageBarContent>
       {canDismiss && (

packages/design-tokens/src/index.ts

@@ -36,4 +36,5 @@ export { prismTheme } from './prismTheme'
 // Useful external utilities
 export * from './customizeable_attributes'
 export * from './utils/animations'
+export * from './utils/omit'
 export { generateThemeFromCoreColors } from './utils/theme'