Styled Components 5 prep Test fix-ups (#1544)

Refactored DialogContent to make remove class component, removed problematic test and replaced with Storybook image-snapshot
Remove `FieldText.stories` storybook - it wasn't useful
Replaced instances of `toHaveStyle` with `toHaveStyleRule` (former doesn't work well with SC5)
Fix recursive interface

Author: Luke Bowerman

packages/components-theme-editor/src/ThemeEditor.tsx

@@ -26,13 +26,10 @@
 
 import { IconButton, Dialog } from '@looker/components'
 import React, { FC } from 'react'
-import {
-  ThemeEditorContent,
-  ThemeEditorContentProps,
-} from './ThemeEditorContent'
+import { ThemeEditorContent } from './ThemeEditorContent'
 import { ThemeEditableProps } from './types'
 
-export interface ThemeEditorProps extends ThemeEditorContentProps {
+export interface ThemeEditorProps {
   hasCustomTheme: boolean
   updateTheme: (customTheme?: ThemeEditableProps) => void
 }

packages/components/snapshots/DialogContent/Basic-snap.png

@@ -107,8 +107,8 @@ describe('IconButton', () => {
     )
 
     const image = getByTestId('icon-layout')
-    expect(image).toHaveStyle('width: 44')
-    expect(image).toHaveStyle('height: 44')
+    expect(image).toHaveStyleRule('width: 44')
+    expect(image).toHaveStyleRule('height: 44')
   })
 
   xtest('renders focus ring on tab input but not on click', () => {

packages/components/snapshots/DialogContent/Overflow-snap.png

@@ -38,7 +38,7 @@ test('Chip renders disabled', () => {
 
 test('Chip accepts a prefix and renders it with correct style', () => {
   const { getByText } = renderWithTheme(<Chip prefix="role">admin</Chip>)
-  expect(getByText(/\brole\b/)).toHaveStyle('font-weight: 400')
+  expect(getByText(/\brole\b/)).toHaveStyleRule('font-weight: 400')
 })
 
 test('Chip onDelete renders correctly', () => {

packages/components/src/Button/IconButton.test.tsx

@@ -65,7 +65,7 @@ test('<Confirm/> with defaults', async () => {
 
   expect(getByText(requiredProps.title)).toBeVisible()
   expect(getByText(requiredProps.message)).toBeVisible()
-  expect(button).toHaveStyle(`background: ${theme.colors.key}`)
+  expect(button).toHaveStyleRule(`background: ${theme.colors.key}`)
 
   fireEvent.click(button)
   expect(requiredProps.onConfirm).toHaveBeenCalledTimes(1)
@@ -86,7 +86,7 @@ test('<Confirm/> with custom props', () => {
   fireEvent.click(opener)
 
   const button = getByText(optionalProps.confirmLabel || '')
-  expect(button).toHaveStyle(`background: ${theme.colors.critical}`)
+  expect(button).toHaveStyleRule(`background: ${theme.colors.critical}`)
 
   fireEvent.click(getByText(optionalProps.cancelLabel || ''))
   fireEvent.click(button)

packages/components/src/Chip/Chip.test.tsx

@@ -25,17 +25,29 @@
  */
 
 import React from 'react'
-import { FieldText, FieldTextProps } from '@looker/components'
 import { Story } from '@storybook/react/types-6-0'
+import { Box, Paragraph } from '../..'
+import { DialogContent, DialogContentProps } from './DialogContent'
 
-const Template: Story<FieldTextProps> = (args) => <FieldText {...args} />
+const Template: Story<DialogContentProps> = (args) => (
+  <DialogContent {...args} />
+)
 
-export const Primary = Template.bind({})
-Primary.args = {
-  children: 'Filed Text',
+export const Basic = Template.bind({})
+Basic.args = {
+  children: <Box height="2rem" bg="rebeccapurple" />,
 }
 
+export const Overflow = () => (
+  <Box height="10rem" display="flex" bg="white" p="large">
+    <DialogContent>
+      <Paragraph>Scroll down here...</Paragraph>
+      <Box height="6rem" bg="rebeccapurple" />
+    </DialogContent>
+  </Box>
+)
+
 export default {
-  component: FieldText,
-  title: 'FieldText',
+  component: DialogContent,
+  title: 'DialogContent',
 }

packages/components/src/Dialog/Confirm/Confirm.test.tsx

@@ -26,8 +26,7 @@
 
 import 'jest-styled-components'
 import React from 'react'
-import { theme } from '@looker/design-tokens'
-import { assertSnapshot, renderWithTheme } from '@looker/components-test-utils'
+import { assertSnapshot } from '@looker/components-test-utils'
 import { DialogContent } from './DialogContent'
 
 describe('DialogContent', () => {
@@ -42,21 +41,4 @@ describe('DialogContent', () => {
       </DialogContent>
     )
   })
-
-  test('borderBottom', () => {
-    const { getByText } = renderWithTheme(
-      <>
-        <DialogContent>No border</DialogContent>
-        <DialogContent borderBottom>Has border</DialogContent>
-      </>
-    )
-
-    const noBorder = getByText('No border')
-    expect(noBorder.parentNode).toHaveStyle('border-bottom: none')
-
-    const hasBorder = getByText('Has border')
-    expect(hasBorder.parentNode).toHaveStyle(
-      `border-bottom: 1px solid ${theme.colors.ui2};`
-    )
-  })
 })

storybook/src/FieldText.stories.tsx …rc/Dialog/Layout/DialogContent.story.tsxstorybook/src/FieldText.stories.tsx renamed to packages/components/src/Dialog/Layout/DialogContent.story.tsx storybook/src/FieldText.stories.tsx renamed to packages/components/src/Dialog/Layout/DialogContent.story.tsx

@@ -32,7 +32,7 @@ import {
   LayoutProps,
   layout,
 } from '@looker/design-tokens'
-import React, { Component, createRef, RefObject } from 'react'
+import React, { FC, useRef, useState, useEffect } from 'react'
 import ReactResizeDetector from 'react-resize-detector'
 import styled from 'styled-components'
 import omit from 'lodash/omit'
@@ -46,79 +46,49 @@ export interface DialogContentProps
    * touch the container edges.
    */
   innerProps?: SpaceProps
-
-  borderBottom?: boolean
-}
-
-interface ContentState {
-  overflow: boolean
 }
 
-interface InternalContentProps extends DialogContentProps {
+interface DialogContentLayoutProps extends DialogContentProps {
   renderedHeight: string
 }
 
-class Internal extends Component<InternalContentProps, ContentState> {
-  private ref: RefObject<HTMLDivElement>
-
-  constructor(props: InternalContentProps) {
-    super(props)
-    this.state = { overflow: false }
-    this.ref = createRef()
-  }
-
-  public hasOverflow(e: HTMLDivElement) {
-    return e.offsetHeight < e.scrollHeight
-  }
-
-  public componentDidUpdate(prevProps: InternalContentProps) {
-    if (prevProps.renderedHeight !== this.props.renderedHeight) {
-      this.ref.current &&
-        this.setState({ overflow: this.hasOverflow(this.ref.current) })
-    }
-  }
-
-  public render() {
-    const {
-      borderBottom,
-      children,
-      className,
-      innerProps,
-      ...props
-    } = this.props
-
-    if (innerProps && innerProps.p && !innerProps.px) {
-      innerProps.px = innerProps.p
+const DialogContentLayout: FC<DialogContentLayoutProps> = ({
+  children,
+  className,
+  innerProps,
+  renderedHeight,
+  ...props
+}) => {
+  const internalRef = useRef<HTMLDivElement>(null)
+  const [overflow, setOverflow] = useState(false)
+
+  useEffect(() => {
+    const container = internalRef.current
+
+    if (container) {
+      setOverflow(container.offsetHeight < container.scrollHeight)
     }
+  }, [renderedHeight])
 
-    return (
-      <Outer
-        borderBottom={borderBottom}
-        className={`${className} ${this.state.overflow && 'overflow'}`}
-        ref={this.ref}
-        {...omit(props, ['renderedHeight'])}
-      >
-        <Inner {...innerProps}>{children}</Inner>
-      </Outer>
-    )
+  if (innerProps && innerProps.p && !innerProps.px) {
+    innerProps.px = innerProps.p
   }
-}
 
-export const DialogContent = (props: DialogContentProps) => {
   return (
-    <ReactResizeDetector handleHeight>
-      {(height: string) => <Internal renderedHeight={height} {...props} />}
-    </ReactResizeDetector>
+    <div
+      className={`${className} ${overflow ? 'overflow' : ''}`}
+      ref={internalRef}
+      {...omit(props, ['renderedHeight'])}
+    >
+      <Inner {...innerProps}>{children}</Inner>
+    </div>
   )
 }
 
-const Outer = styled.div<{ borderBottom?: boolean }>`
+const DialogContentStyled = styled(DialogContentLayout)`
   ${reset}
   ${layout}
 
-  ${({ borderBottom, theme: { colors } }) =>
-    borderBottom && `border-bottom: 1px solid ${colors.ui2};`}
-
   flex: 1 1 auto;
   overflow: auto;
 
@@ -129,6 +99,16 @@ const Outer = styled.div<{ borderBottom?: boolean }>`
   }
 `
 
+export const DialogContent = (props: DialogContentProps) => {
+  return (
+    <ReactResizeDetector handleHeight>
+      {(height: string) => (
+        <DialogContentStyled renderedHeight={height} {...props} />
+      )}
+    </ReactResizeDetector>
+  )
+}
+
 const Inner = styled.div<SpaceProps>`
   ${reset}
   ${space}

packages/components/src/Dialog/Layout/DialogContent.test.tsx

@@ -24,7 +24,7 @@ exports[`DialogContent Snapshot - No overflow 1`] = `
 }
 
 <div
-  className="c0 undefined false"
+  className="c0 "
 >
   <div
     className="c1"
@@ -66,7 +66,7 @@ exports[`DialogContent Snapshot 1`] = `
 }
 
 <div
-  className="c0 undefined false"
+  className="c0 "
 >
   <div
     className="c1"