fix(IconButton): Remove useLayoutEffect to avoid SSR warning (#2831)

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

@@ -26,6 +26,8 @@
 
 import 'jest-styled-components'
 import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+import { ComponentsProvider } from '@looker/components-providers'
 import { renderWithTheme } from '@looker/components-test-utils'
 import { Favorite } from '@styled-icons/material/Favorite'
 import {
@@ -314,13 +316,22 @@ describe('IconButton', () => {
       const button = screen.getByRole('button')
       expect(button).toHaveStyle({
         '--ripple-color': '#71767a',
-        '--ripple-scale-end': '12.041594578792294',
-        '--ripple-scale-start': '12.041594578792294',
-        '--ripple-size': '30px',
-        '--ripple-translate': '165px, 0',
+        '--ripple-scale-end': '1.414',
+        '--ripple-scale-start': '1.414',
+        '--ripple-size': '100%',
+        '--ripple-translate': '0, 0',
       })
       /* eslint-disable-next-line @typescript-eslint/unbound-method */
       Element.prototype.getBoundingClientRect = globalGetBoundingClientRect
     })
   })
+
+  test('No useLayoutEffect warning', () => {
+    // A React warning would cause the test to fail
+    ReactDOMServer.renderToString(
+      <ComponentsProvider>
+        <IconButton icon={<Favorite />} label="Test" />
+      </ComponentsProvider>
+    )
+  })
 })

packages/components/src/Button/IconButton.tsx

@@ -35,6 +35,7 @@ import { Icon } from '../Icon'
 import {
   rippleHandlerKeys,
   rippleStyle,
+  SQUARE_RIPPLE,
   useRipple,
   useRippleHandlers,
 } from '../Ripple'
@@ -84,6 +85,7 @@ export const IconButton = styled(
     } = useRipple({
       bounded: shape === 'square',
       color: toggle ? toggleColor : undefined,
+      size: shape === 'square' ? SQUARE_RIPPLE : 1,
     })
 
     const ref = useForkedRef(forwardedRef, rippleRef)

packages/components/src/Ripple/Ripple.stories.tsx

@@ -35,14 +35,16 @@ import { useRipple, useRippleHandlers, rippleStyle } from './'
 type RippleProps = SimpleLayoutProps & UseRippleProps & { className?: string }
 
 const Ripple = styled(
-  ({ className, bounded, color, ...props }: RippleProps) => {
+  ({ className, bounded, color, height, width, ...props }: RippleProps) => {
     const {
       callbacks,
       className: rippleClassName,
       ...rippleProps
     } = useRipple({
       bounded,
       color,
+      height,
+      width,
     })
 
     const rippleHandlers = useRippleHandlers(callbacks, {})

packages/components/src/Ripple/constants.ts

@@ -31,3 +31,7 @@
  * for measurement or calculation.
  */
 export const RIPPLE_RATIO = 1.167
+/**
+ * The diagonal of a square, to make the ripple extend to the corners
+ */
+export const SQUARE_RIPPLE = 1.414

packages/components/src/Ripple/index.ts

@@ -28,5 +28,6 @@ export * from './constants'
 export * from './inputRippleColor'
 export * from './rippleStyle'
 export * from './types'
+export * from './useBoundedRipple'
 export * from './useRipple'
 export * from './useRippleHandlers'

packages/components/src/Ripple/types.ts

@@ -24,9 +24,65 @@
 
  */
 
+import type { ExtendedStatefulColor } from '@looker/design-tokens'
+import type { CSSProperties } from 'react'
+
 export type RippleCallbacks = {
   endBG: () => void
   endFG: () => void
   startBG: () => void
   startFG: () => void
 }
+
+export type UseBoundedRippleProps = {
+  /**
+   * Change the color of the ripple background and foreground
+   * @default neutral
+   */
+  color?: ExtendedStatefulColor
+  /**
+   * Decimal multiplier, e.g. 1.5.
+   * Use for unbounded ripple that needs to extend past element dimensions,
+   * don't use with overflow: hidden
+   * @default 1
+   */
+  size?: number
+}
+
+export type UseRippleProps = UseBoundedRippleProps & {
+  /**
+   * Use for elements where the ripple disappears at the edges of
+   * a visible rectangle, e.g. a default Button
+   * @default false
+   */
+  bounded?: boolean
+  /**
+   * Internal use only
+   * @private
+   */
+  width?: number
+  /**
+   * Internal use only
+   * @private
+   */
+  height?: number
+}
+
+export type UseRippleResponse = {
+  /**
+   * The start and end functions for the background and foreground
+   */
+  callbacks: RippleCallbacks
+  /**
+   * The class names used in rippleStyle to trigger the animations
+   */
+  className: string
+  /**
+   * ref is only used for bounded ripple, to detect element dimensions
+   */
+  ref?: (node: HTMLElement | null) => void
+  /**
+   * style contains CSS variables to control the animation
+   */
+  style: CSSProperties
+}

packages/components/src/Ripple/useBoundedRipple.spec.tsx

@@ -0,0 +1,103 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import { renderWithTheme } from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+import React from 'react'
+import type { UseBoundedRippleProps } from './types'
+import { useBoundedRipple } from './useBoundedRipple'
+
+const RippleInner = (props: UseBoundedRippleProps) => {
+  const {
+    callbacks: { startBG, endBG, startFG, endFG },
+    className,
+    ref,
+    style,
+  } = useBoundedRipple(props)
+  return (
+    <div ref={ref}>
+      <div data-testid="startBG" onClick={startBG} />
+      <div data-testid="endBG" onClick={endBG} />
+      <div data-testid="startFG" onClick={startFG} />
+      <div data-testid="endFG" onClick={endFG} />
+      <div data-testid="className">{className}</div>
+      <div style={style}>style</div>
+    </div>
+  )
+}
+
+// TODO: Remove this when we change brandAnimation default to true
+// (then just change the value below to use this for the brandAnimation: false scenario)
+const RippleComponent = (props: UseBoundedRippleProps) => (
+  <ThemeProvider
+    theme={(theme) => ({
+      ...theme,
+      defaults: { ...theme.defaults, brandAnimation: true },
+    })}
+  >
+    <RippleInner {...props} />
+  </ThemeProvider>
+)
+
+/* eslint-disable-next-line @typescript-eslint/unbound-method */
+const globalGetBoundingClientRect = Element.prototype.getBoundingClientRect
+
+beforeEach(() => {
+  /* eslint-disable-next-line @typescript-eslint/unbound-method */
+  Element.prototype.getBoundingClientRect = jest.fn(() => {
+    return {
+      bottom: 0,
+      height: 30,
+      left: 0,
+      right: 0,
+      toJSON: jest.fn(),
+      top: 0,
+      width: 360,
+      x: 0,
+      y: 0,
+    }
+  })
+})
+
+afterEach(() => {
+  /* eslint-disable-next-line @typescript-eslint/unbound-method */
+  Element.prototype.getBoundingClientRect = globalGetBoundingClientRect
+})
+
+describe('useRipple', () => {
+  test('bounded animation values', () => {
+    renderWithTheme(<RippleComponent />)
+    expect(screen.getByText('style')).toHaveStyle({
+      '--ripple-color': '#71767a',
+      '--ripple-overflow': 'hidden',
+      '--ripple-scale-end': '12.041594578792294',
+      '--ripple-scale-start': '1',
+      '--ripple-size': '30px',
+      '--ripple-translate': '165px, 0',
+    })
+  })
+})

packages/components/src/Ripple/useBoundedRipple.ts

@@ -0,0 +1,35 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { useMeasuredElement, useCallbackRef } from '../utils'
+import { useRipple } from './useRipple'
+import type { UseBoundedRippleProps } from './types'
+
+export const useBoundedRipple = (props: UseBoundedRippleProps) => {
+  const [element, ref] = useCallbackRef()
+  const [{ height, width }] = useMeasuredElement(element)
+  const result = useRipple({ ...props, bounded: true, height, width })
+  return { ...result, ref }
+}

packages/components/src/Ripple/useRipple.spec.tsx

@@ -28,7 +28,7 @@ import { renderWithTheme } from '@looker/components-test-utils'
 import { act, fireEvent, screen } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
 import React from 'react'
-import type { UseRippleProps } from './useRipple'
+import type { UseRippleProps } from './types'
 import { useRipple } from './useRipple'
 
 const RippleInner = (props: UseRippleProps) => {
@@ -63,34 +63,15 @@ const RippleComponent = (props: UseRippleProps) => (
   </ThemeProvider>
 )
 
-/* eslint-disable-next-line @typescript-eslint/unbound-method */
-const globalGetBoundingClientRect = Element.prototype.getBoundingClientRect
-
 beforeEach(() => {
   jest.useFakeTimers()
-  /* eslint-disable-next-line @typescript-eslint/unbound-method */
-  Element.prototype.getBoundingClientRect = jest.fn(() => {
-    return {
-      bottom: 0,
-      height: 30,
-      left: 0,
-      right: 0,
-      toJSON: jest.fn(),
-      top: 0,
-      width: 360,
-      x: 0,
-      y: 0,
-    }
-  })
 })
 
 afterEach(() => {
   act(() => {
     jest.runOnlyPendingTimers()
   })
   jest.useRealTimers()
-  /* eslint-disable-next-line @typescript-eslint/unbound-method */
-  Element.prototype.getBoundingClientRect = globalGetBoundingClientRect
 })
 const runTimers = () =>
   act(() => {
@@ -102,6 +83,7 @@ describe('useRipple', () => {
     renderWithTheme(<RippleComponent />)
     expect(screen.getByText('style')).toHaveStyle({
       '--ripple-color': '#71767a',
+      '--ripple-overflow': 'visible',
       '--ripple-scale-end': '1',
       '--ripple-scale-start': '0.1',
       '--ripple-size': '100%',
@@ -110,9 +92,10 @@ describe('useRipple', () => {
   })
 
   test('bounded animation values', () => {
-    renderWithTheme(<RippleComponent bounded />)
+    renderWithTheme(<RippleComponent bounded height={30} width={360} />)
     expect(screen.getByText('style')).toHaveStyle({
       '--ripple-color': '#71767a',
+      '--ripple-overflow': 'hidden',
       '--ripple-scale-end': '12.041594578792294',
       '--ripple-scale-start': '1',
       '--ripple-size': '30px',