MenuItem supports Artwork (#1242)

* MenuItem supports Artwork

* updated after revew - remove snapshots of tests

* ready for final review

Author: laraharrow

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- update MenuItem to support Artwork
 - `MenuDisclosure` - tooltip placement now defaults to `bottom`
 - `Select` and `SelectMulti` with `isFilterable` or `freeInput` no longer cancel the first click outside when the list is open
 - update `Tab` to scroll left to right when overflow

packages/components/src/Menu/MenuItem.test.tsx

@@ -26,24 +26,39 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { assertSnapshot } from '@looker/components-test-utils'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
 
 import { MenuItem } from './MenuItem'
 
-test('MenuItem', () => {
-  assertSnapshot(<MenuItem>who!</MenuItem>)
-})
-test('MenuItem - icon', () => {
-  assertSnapshot(<MenuItem icon="Beaker">who!</MenuItem>)
-})
-test('MenuItem - detail', () => {
-  assertSnapshot(<MenuItem detail="Is an excellent question">who!</MenuItem>)
-})
+describe('MenuItem', () => {
+  test('MenuItem renders', () => {
+    renderWithTheme(<MenuItem>who!</MenuItem>)
+    expect(screen.getByText('who!')).toBeVisible()
+  })
+
+  test('MenuItem - detail', () => {
+    renderWithTheme(<MenuItem detail="Is an excellent question">who!</MenuItem>)
+    expect(screen.getByText('Is an excellent question')).toBeVisible()
+  })
+
+  test('MenuItem - icon', () => {
+    renderWithTheme(<MenuItem icon="Beaker">Icon</MenuItem>)
+    expect(screen.getByText('Icon')).toBeVisible()
+  })
 
-test('MenuItem - current', () => {
-  assertSnapshot(
-    <MenuItem current icon="Home">
-      who!
-    </MenuItem>
-  )
+  test('MenuItem - artwork', () => {
+    renderWithTheme(
+      <MenuItem
+        iconArtwork={
+          <svg xmlns="http://www.w3.org/2000/svg">
+            <title>SVG Title Here</title>
+          </svg>
+        }
+      >
+        Artwork
+      </MenuItem>
+    )
+    expect(screen.getByTitle('SVG Title Here')).toBeInTheDocument()
+  })
 })

packages/components/src/Menu/MenuItem.tsx

@@ -34,10 +34,8 @@ import { MenuContext, MenuItemContext } from './MenuContext'
 import { MenuItemLayout, MenuItemLayoutGrid } from './MenuItemLayout'
 
 export interface MenuItemProps extends CompatibleHTMLProps<HTMLElement> {
+  iconArtwork?: ReactNode
   compact?: boolean
-
-  detail?: ReactNode
-  icon?: IconNames
   /**
    * Indicates the MenuItem is checked
    */
@@ -49,6 +47,8 @@ export interface MenuItemProps extends CompatibleHTMLProps<HTMLElement> {
    * @default 'button'
    *
    */
+  detail?: ReactNode
+  icon?: IconNames
   itemRole?: 'link' | 'button'
 }
 
@@ -62,6 +62,7 @@ const MenuItemInternal: FC<MenuItemProps> = (props) => {
     disabled,
     href,
     icon,
+    iconArtwork,
     itemRole,
     onBlur,
     onClick,
@@ -103,18 +104,20 @@ const MenuItemInternal: FC<MenuItemProps> = (props) => {
 
   const renderedIconID = useID(props.id)
 
-  const renderedIcon = icon ? (
-    <Icon
-      name={icon}
-      mr="xsmall"
-      size={24 / (compact ? 1.25 : 1)}
-      color="text1"
-    />
-  ) : (
-    renderIconPlaceholder && (
-      <div data-testid={`menu-item-${renderedIconID}-icon-placeholder`} />
+  const renderedIcon =
+    icon || iconArtwork ? (
+      <Icon
+        artwork={iconArtwork}
+        color="text1"
+        name={icon}
+        size={24 / (compact ? 1.25 : 1)}
+        mr="xsmall"
+      />
+    ) : (
+      renderIconPlaceholder && (
+        <div data-testid={`menu-item-${renderedIconID}-icon-placeholder`} />
+      )
     )
-  )
 
   const Component = itemRole === 'link' ? 'a' : 'button'