fix(ListItem): Prevent props from being spuriously emitted to DOM output (#2086)

Author: Luke Bowerman

packages/components/src/List/ListItem.test.tsx

@@ -27,7 +27,7 @@
 import 'jest-styled-components'
 import React from 'react'
 import { renderWithTheme } from '@looker/components-test-utils'
-import { fireEvent, configure } from '@testing-library/react'
+import { fireEvent, configure, screen } from '@testing-library/react'
 
 import { ListItem } from './ListItem'
 
@@ -38,17 +38,17 @@ describe('ListItem', () => {
   })
 
   test('renders description', () => {
-    const { getByText } = renderWithTheme(
-      <ListItem description="are you?">who!</ListItem>
-    )
-    expect(getByText('are you?')).toBeVisible()
+    renderWithTheme(<ListItem description="are you?">who!</ListItem>)
+    expect(screen.getByText('are you?')).toBeVisible()
+    expect(screen.getByRole('listitem')).not.toHaveAttribute('description')
   })
 
   test('renders detail', () => {
     const { getByText } = renderWithTheme(
       <ListItem detail="Is an excellent question">who!</ListItem>
     )
     expect(getByText('Is an excellent question')).toBeVisible()
+    expect(screen.getByRole('listitem')).not.toHaveAttribute('detail')
   })
 
   test('renders icon', () => {

packages/components/src/List/ListItemWrapper.tsx

@@ -24,7 +24,7 @@
 
  */
 
-import { CompatibleHTMLProps } from '@looker/design-tokens'
+import { CompatibleHTMLProps, shouldForwardProp } from '@looker/design-tokens'
 import omit from 'lodash/omit'
 import React, { forwardRef, ReactNode, Ref } from 'react'
 import styled from 'styled-components'
@@ -66,7 +66,11 @@ const ListItemWrapperInternal = forwardRef(
 
 ListItemWrapperInternal.displayName = 'ListItemWrapperInternal'
 
-export const ListItemWrapper = styled(ListItemWrapperInternal)`
+export const ListItemWrapper = styled(
+  ListItemWrapperInternal
+).withConfig<ListItemWrapperProps>({
+  shouldForwardProp,
+})`
   align-items: center;
   color: ${({ theme: { colors } }) => colors.text5};
   display: flex;