Menu group shadow fix (#33)

Author: dbchristopher

CHANGELOG.md

@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## UNRELEASED
 
 ### Changed
+
+- Fix bug where menu group headers render a drop shadow by default
+- Refactor z-index out of menu styles
 - Improvements to documentation layout and scrolling behavior
 - SVG for `ApplicationSelect`,`ArrowChange`,`Beaker`,`BrowseTable`,`ChangeHistory`,`DimensionFill`,`Explore`,`LogoRings`,`NoteOutline`,`Notes`,`Reports`,`SqlRunner`,`User`,`UserAttributes`,`Users`,`ViewGrid`,`VisArea`,`VisBar`,`VisColumn`,`VisLine`,`VisMap`,`VisPie`,`VisScatter`,`VisSingleValue`,`VisTable` icons resized redrawn to fit on the correct icon grid.
 - Implement a vertical layout for the Code Sandbox toolbar to prevent unintentional obfuscation of code samples

packages/components/src/Menu/MenuGroup.hooks.test.tsx

@@ -3,17 +3,17 @@
  MIT License
 
  Copyright (c) 2019 Looker Data Sciences, Inc.
- 
+
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:
- 
+
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
- 
+
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -52,10 +52,10 @@ describe('MenuGroup Hooks', () => {
   }
   /* eslint-enable react-hooks/rules-of-hooks */
 
-  it('it returns false as the default visibility state', () => {
+  it('it returns true as the default visibility state', () => {
     act(() => {
       mount(<TestHook callback={cb} testRef={testRef} />)
     })
-    expect(isVisible).toEqual(false)
+    expect(isVisible).toEqual(true)
   })
 })

packages/components/src/Menu/MenuGroup.hooks.ts

@@ -27,7 +27,7 @@
 import { RefObject, useEffect, useState } from 'react'
 
 export const useElementVisibility = (ref: RefObject<HTMLElement>): boolean => {
-  const [isVisible, setIsVisible] = useState(false)
+  const [isVisible, setIsVisible] = useState(true)
 
   const observer =
     typeof IntersectionObserver === 'undefined'
@@ -40,6 +40,7 @@ export const useElementVisibility = (ref: RefObject<HTMLElement>): boolean => {
             threshold: [0, 1],
           }
         )
+
   useEffect(() => {
     const refCurrent = ref.current
     if (refCurrent) {

packages/components/src/Menu/MenuGroup.tsx

@@ -24,22 +24,20 @@
 
  */
 
-import React, { CSSProperties, FC, ReactNode, RefObject, useRef } from 'react'
+import React, { CSSProperties, FC, ReactNode } from 'react'
 import styled from 'styled-components'
 import {
   color,
-  palette,
   CompatibleHTMLProps,
   reset,
   SpaceProps,
   space,
 } from '@looker/design-tokens'
 import { BackgroundColorProps } from 'styled-system'
-import { Heading, HeadingProps } from '../Text/Heading'
+import { HeadingProps } from '../Text/Heading'
 import { List } from '../List'
 
 import { MenuGroupLabel } from './MenuGroupLabel'
-import { useElementVisibility } from './MenuGroup.hooks'
 import { MenuItemCustomization } from './MenuItem'
 import { cloneMenuListChildren } from './MenuList'
 
@@ -67,55 +65,31 @@ const MenuGroupInternal: FC<MenuGroupWithChildrenProps> = ({
 }) => {
   const { customizationProps, compact, ...boxProps } = props
 
-  const labelShimRef: RefObject<any> = useRef()
-  const labelVisible = useElementVisibility(labelShimRef)
-
-  const labelComponent = label && (
-    <MenuGroupLabel
-      backgroundColor={customizationProps && customizationProps.bg}
-      boxShadow={
-        labelVisible ? 'none' : `0 4px 8px -2px ${palette.charcoal200}`
-      }
-    >
-      {/*
-        NOTE: This div is required for box-shadow to appear when the heading
-        is sticky to the top of the container. Using IntersectionObserver,
-        we detect when this 0-height element disappears from the page and then
-        render the shadow.
-      */}
-      <div ref={labelShimRef} style={{ height: '0' }} />
-      <Heading
-        fontSize="small"
-        as="h2"
-        px="medium"
-        py="xsmall"
-        fontWeight="semiBold"
-        {...labelProps}
-        style={{ zIndex: 2, ...labelStyles }}
-      >
-        {label}
-      </Heading>
-    </MenuGroupLabel>
-  )
-
   const clonedChildren = cloneMenuListChildren(children as JSX.Element[], {
     compact,
     customizationProps,
   })
 
   return (
-    <Style
+    <MenuGroupWrapper
       {...boxProps}
       backgroundColor={customizationProps && customizationProps.bg}
       py="small"
     >
-      {labelComponent}
+      {label && (
+        <MenuGroupLabel
+          backgroundColor={customizationProps && customizationProps.bg}
+          labelStyles={labelStyles}
+          labelContent={label}
+          {...labelProps}
+        />
+      )}
       <List nomarker>{clonedChildren}</List>
-    </Style>
+    </MenuGroupWrapper>
   )
 }
 
-const Style = styled.li<MenuGroupProps>`
+const MenuGroupWrapper = styled.li<MenuGroupProps>`
   ${reset}
   ${space}
   ${color}

packages/components/src/Menu/MenuGroupLabel.tsx

@@ -24,14 +24,62 @@
 
  */
 
+import React, { FC, useRef, RefObject, CSSProperties, ReactNode } from 'react'
 import styled from 'styled-components'
-import { color, BackgroundColorProps, BoxShadowProps } from 'styled-system'
+import { color, BackgroundColorProps, BorderRadiusProps } from 'styled-system'
+import { Heading, HeadingProps } from '../Text/Heading'
+import { useElementVisibility } from './MenuGroup.hooks'
 
-interface MenuGroupLabelProps extends BackgroundColorProps, BoxShadowProps {}
+interface MenuGroupLabelProps
+  extends BackgroundColorProps,
+    HeadingProps,
+    BorderRadiusProps {
+  labelContent: ReactNode
+  labelStyles?: CSSProperties
+}
+
+export const MenuGroupLabel: FC<MenuGroupLabelProps> = ({
+  labelContent,
+  labelStyles,
+  ...props
+}) => {
+  const labelShimRef: RefObject<any> = useRef()
+  const isLabelShimVisible = useElementVisibility(labelShimRef)
+
+  return (
+    <MenuGroupLabelWrapper renderBoxShadow={!isLabelShimVisible}>
+      {/*
+        NOTE: The labelShimRef div is required for box-shadow to appear when the heading
+        is sticky to the top of the container. Using IntersectionObserver,
+        we detect when this 0-height element disappears from the page and then
+        render the shadow.
+      */}
+      <div ref={labelShimRef} style={{ height: '0' }} />
+      <Heading
+        fontSize="small"
+        as="h2"
+        px="medium"
+        py="xsmall"
+        fontWeight="semiBold"
+        style={labelStyles}
+        {...props}
+      >
+        {labelContent}
+      </Heading>
+    </MenuGroupLabelWrapper>
+  )
+}
+
+interface MenuGroupLabelWrapperProps {
+  renderBoxShadow: boolean
+}
 
-export const MenuGroupLabel = styled.div<MenuGroupLabelProps>`
+const MenuGroupLabelWrapper = styled.div<MenuGroupLabelWrapperProps>`
   ${color}
-  box-shadow: ${props => props.boxShadow};
+  box-shadow: ${({ renderBoxShadow, theme }) =>
+    renderBoxShadow
+      ? `0 4px 8px -2px ${theme.colors.palette.charcoal200}`
+      : 'none'};
   position: sticky;
   top: -1px;
   margin-bottom: ${({ theme }) => theme.space.xxsmall};