fix(MenuHeading): Fix MenuHeading style overrides (#2002)

* Added className prop to MenuHeading to allow for style overrides

* chore: image-snapshot updates (#2003)

Co-authored-by: ElliotTheHuman <ElliotTheHuman@users.noreply.github.com>

* use styled system for style overrides (#2004)

* Fixed lint error in MenuList.story

* Added ColorProps to MenuHeading interface

* chore: image-snapshot updates (#2005)

Co-authored-by: ElliotTheHuman <ElliotTheHuman@users.noreply.github.com>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Daniel Christopher <dbchristopher@gmail.com>

packages/components/src/Menu/MenuHeading.tsx

@@ -26,12 +26,25 @@
 
 import React, { FC, useContext, useRef, RefObject } from 'react'
 import styled from 'styled-components'
+import {
+  ColorProps,
+  TypographyProps,
+  SpaceProps,
+  pickStyledProps,
+} from '@looker/design-tokens'
 import { Heading } from '../Text/Heading'
 import { listItemDimensions } from '../List'
 import { ListItemContext } from '../List/ListItemContext'
 import { useElementVisibility } from './MenuHeading.hooks'
 
-export const MenuHeading: FC<{ children: string }> = ({ children }) => {
+interface MenuHeadingProps extends ColorProps, TypographyProps, SpaceProps {
+  children: string
+}
+
+export const MenuHeading: FC<MenuHeadingProps> = ({
+  children,
+  ...restProps
+}) => {
   const labelShimRef: RefObject<any> = useRef()
   const isLabelShimVisible = useElementVisibility(labelShimRef)
 
@@ -56,6 +69,7 @@ export const MenuHeading: FC<{ children: string }> = ({ children }) => {
         lineHeight="xsmall"
         px={px}
         pb="xsmall"
+        {...pickStyledProps(restProps)}
       >
         {children}
       </Heading>

packages/components/src/Menu/MenuList.story.tsx

@@ -123,6 +123,22 @@ export const Density = () => (
     <DensityExample density={-3} />
   </Grid>
 )
+
+export const MenuHeadingOverride = () => (
+  <MenuList>
+    <MenuHeading>Hello World</MenuHeading>
+    <MenuHeading
+      color="inform"
+      fontSize="small"
+      fontWeight="bold"
+      lineHeight="small"
+      py="xxsmall"
+    >
+      Custom Hello World
+    </MenuHeading>
+  </MenuList>
+)
+
 export default {
   component: MenuList,
   title: 'MenuList',