From 36a68fa15d8b213b7a92689c65fe992f09c2f8e9 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 30 Jun 2021 06:18:14 -0700
Subject: [PATCH 1/6] components: Remove `@emotion/css` from Elevation

---
 .../elevation/{component.js => component.tsx} |  23 ++--
 packages/components/src/elevation/hook.js     | 120 ------------------
 .../src/elevation/{index.js => index.ts}      |   1 -
 packages/components/src/elevation/styles.js   |  16 ---
 packages/components/src/elevation/styles.ts   |  88 +++++++++++++
 5 files changed, 103 insertions(+), 145 deletions(-)
 rename packages/components/src/elevation/{component.js => component.tsx} (51%)
 delete mode 100644 packages/components/src/elevation/hook.js
 rename packages/components/src/elevation/{index.js => index.ts} (68%)
 delete mode 100644 packages/components/src/elevation/styles.js
 create mode 100644 packages/components/src/elevation/styles.ts

diff --git a/packages/components/src/elevation/component.js b/packages/components/src/elevation/component.tsx
similarity index 51%
rename from packages/components/src/elevation/component.js
rename to packages/components/src/elevation/component.tsx
index a225e665a9ff67..a03174848be339 100644
--- a/packages/components/src/elevation/component.js
+++ b/packages/components/src/elevation/component.tsx
@@ -1,8 +1,19 @@
 /**
  * Internal dependencies
  */
-import { useElevation } from './hook';
-import { createComponent } from '../ui/utils';
+import {
+	useContextSystem,
+	contextConnect,
+	PolymorphicComponentProps,
+} from '../ui/context';
+import type { Props } from './types';
+import { ElevationWrapper } from './styles';
+
+function Elevation( props: PolymorphicComponentProps< Props, 'div', false > ) {
+	const contextProps = useContextSystem( props, 'Elevation' );
+
+	return <ElevationWrapper { ...contextProps } aria-hidden="true" />;
+}
 
 /**
  * `Elevation` is a core component that renders shadow, using the library's shadow system.
@@ -27,10 +38,6 @@ import { createComponent } from '../ui/utils';
  * }
  * ```
  */
-const Elevation = createComponent( {
-	as: 'div',
-	useHook: useElevation,
-	name: 'Elevation',
-} );
+const ConnectedElevation = contextConnect( Elevation, 'Elevation' );
 
-export default Elevation;
+export default ConnectedElevation;
diff --git a/packages/components/src/elevation/hook.js b/packages/components/src/elevation/hook.js
deleted file mode 100644
index 3f4d6c88dbedee..00000000000000
--- a/packages/components/src/elevation/hook.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { css, cx } from '@emotion/css';
-import { isNil } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useContextSystem } from '../ui/context';
-import * as styles from './styles';
-import CONFIG from '../utils/config-values';
-
-/**
- * @param {number} value
- * @return {string} The box shadow value.
- */
-export function getBoxShadow( value ) {
-	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
-	const boxShadow = `0 ${ value }px ${ value * 2 }px 0
-	${ boxShadowColor }`;
-
-	return boxShadow;
-}
-
-/**
- * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
- */
-export function useElevation( props ) {
-	const {
-		active,
-		borderRadius = 'inherit',
-		className,
-		focus,
-		hover,
-		isInteractive = false,
-		offset = 0,
-		value = 0,
-		...otherProps
-	} = useContextSystem( props, 'Elevation' );
-
-	const classes = useMemo( () => {
-		/** @type {number | undefined} */
-		let hoverValue = ! isNil( hover ) ? hover : value * 2;
-		/** @type {number | undefined} */
-		let activeValue = ! isNil( active ) ? active : value / 2;
-
-		if ( ! isInteractive ) {
-			hoverValue = ! isNil( hover ) ? hover : undefined;
-			activeValue = ! isNil( active ) ? active : undefined;
-		}
-
-		const transition = `box-shadow ${ CONFIG.transitionDuration } ${ CONFIG.transitionTimingFunction }`;
-
-		const sx = {};
-
-		sx.Base = css( {
-			borderRadius,
-			bottom: offset,
-			boxShadow: getBoxShadow( value ),
-			opacity: CONFIG.elevationIntensity,
-			left: offset,
-			right: offset,
-			top: offset,
-			transition,
-		} );
-
-		if ( ! isNil( hoverValue ) ) {
-			sx.hover = css`
-				*:hover > & {
-					box-shadow: ${ getBoxShadow( hoverValue ) };
-				}
-			`;
-		}
-
-		if ( ! isNil( activeValue ) ) {
-			sx.active = css`
-				*:active > & {
-					box-shadow: ${ getBoxShadow( activeValue ) };
-				}
-			`;
-		}
-
-		if ( ! isNil( focus ) ) {
-			sx.focus = css`
-				*:focus > & {
-					box-shadow: ${ getBoxShadow( focus ) };
-				}
-			`;
-		}
-
-		return cx(
-			styles.Elevation,
-			sx.Base,
-			sx.hover && sx.hover,
-			sx.focus && sx.focus,
-			sx.active && sx.active,
-			className
-		);
-	}, [
-		active,
-		borderRadius,
-		className,
-		focus,
-		hover,
-		isInteractive,
-		offset,
-		value,
-	] );
-
-	return { ...otherProps, className: classes, 'aria-hidden': true };
-}
diff --git a/packages/components/src/elevation/index.js b/packages/components/src/elevation/index.ts
similarity index 68%
rename from packages/components/src/elevation/index.js
rename to packages/components/src/elevation/index.ts
index dcf1b5cbf71e2b..9108e8aa1e9b17 100644
--- a/packages/components/src/elevation/index.js
+++ b/packages/components/src/elevation/index.ts
@@ -1,2 +1 @@
 export { default as Elevation } from './component';
-export * from './hook';
diff --git a/packages/components/src/elevation/styles.js b/packages/components/src/elevation/styles.js
deleted file mode 100644
index 8199f1264023d2..00000000000000
--- a/packages/components/src/elevation/styles.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { css } from '@emotion/css';
-
-export const Elevation = css`
-	background: transparent;
-	display: block;
-	margin: 0 !important;
-	pointer-events: none;
-	position: absolute;
-	will-change: box-shadow;
-`;
diff --git a/packages/components/src/elevation/styles.ts b/packages/components/src/elevation/styles.ts
new file mode 100644
index 00000000000000..a15b8992c88cd8
--- /dev/null
+++ b/packages/components/src/elevation/styles.ts
@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css, CSSObject } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import type { Props } from './types';
+import { CONFIG, reduceMotion } from '../utils';
+
+const getBoxShadow = ( value: number ) => {
+	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
+	return `0 ${ value }px ${ value * 2 }px 0
+	${ boxShadowColor }`;
+};
+
+const renderBoxShadow = ( { value = 0 }: Props ) =>
+	css( { boxShadow: getBoxShadow( value ) } );
+
+const renderTransition = () =>
+	css( {
+		transition: `box-shadow ${ CONFIG.transitionDuration }
+${ CONFIG.transitionTimingFunction }`,
+	} );
+
+const renderBorderRadius = ( { borderRadius }: Props ) =>
+	css( { borderRadius } );
+
+const renderOffset = ( { offset = 0 }: Props ) =>
+	css( { bottom: offset, left: offset, right: offset, top: offset } );
+
+const renderHoverActiveFocus = ( {
+	isInteractive,
+	active,
+	hover,
+	focus,
+	value = 0,
+}: Props ) => {
+	let hoverValue: number | undefined =
+		typeof hover !== 'undefined' ? hover : value * 2;
+	let activeValue: number | undefined =
+		typeof active !== 'undefined' ? active : value / 2;
+
+	if ( ! isInteractive ) {
+		hoverValue = typeof hover !== 'undefined' ? hover : undefined;
+		activeValue = typeof active !== 'undefined' ? active : undefined;
+	}
+
+	const cssObj: CSSObject = {};
+
+	if ( typeof hoverValue !== 'undefined' ) {
+		cssObj[ '*:hover > &' ] = {
+			boxShadow: getBoxShadow( hoverValue ),
+		};
+	}
+
+	if ( typeof activeValue !== 'undefined' ) {
+		cssObj[ '*:active > &' ] = {
+			boxShadow: getBoxShadow( activeValue ),
+		};
+	}
+
+	if ( typeof focus !== 'undefined' ) {
+		cssObj[ '*focus > &' ] = {
+			boxShadow: getBoxShadow( focus ),
+		};
+	}
+
+	return css( cssObj );
+};
+
+export const ElevationWrapper = styled.div< Props >`
+	background: transparent;
+	display: block;
+	margin: 0 !important;
+	pointer-events: none;
+	position: absolute;
+	will-change: box-shadow;
+	opacity: ${ CONFIG.elevationIntensity };
+	${ renderTransition }
+	${ reduceMotion( 'transition' ) }
+	${ renderBoxShadow }
+	${ renderBorderRadius }
+	${ renderOffset }
+	${ renderHoverActiveFocus }
+`;

From d95224374a4ac520f186231c64e4a1c00b934247 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 30 Jun 2021 06:48:09 -0700
Subject: [PATCH 2/6] Handle default props

---
 .../components/src/elevation/component.tsx    | 20 ++++++++++--
 packages/components/src/elevation/styles.ts   | 31 ++++++++++---------
 packages/components/src/elevation/types.ts    |  6 ++--
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/elevation/component.tsx b/packages/components/src/elevation/component.tsx
index a03174848be339..5855c992c45ac5 100644
--- a/packages/components/src/elevation/component.tsx
+++ b/packages/components/src/elevation/component.tsx
@@ -7,12 +7,28 @@ import {
 	PolymorphicComponentProps,
 } from '../ui/context';
 import type { Props } from './types';
-import { ElevationWrapper } from './styles';
+import { ElevationWrapper, StyleProps } from './styles';
+
+const DEFAULT_PROPS: StyleProps = {
+	isInteractive: false,
+	offset: 0,
+	value: 0,
+	active: null,
+	focus: null,
+	hover: null,
+	borderRadius: 'inherit',
+};
 
 function Elevation( props: PolymorphicComponentProps< Props, 'div', false > ) {
 	const contextProps = useContextSystem( props, 'Elevation' );
 
-	return <ElevationWrapper { ...contextProps } aria-hidden="true" />;
+	return (
+		<ElevationWrapper
+			{ ...DEFAULT_PROPS }
+			{ ...contextProps }
+			aria-hidden="true"
+		/>
+	);
 }
 
 /**
diff --git a/packages/components/src/elevation/styles.ts b/packages/components/src/elevation/styles.ts
index a15b8992c88cd8..2b14474549ef0c 100644
--- a/packages/components/src/elevation/styles.ts
+++ b/packages/components/src/elevation/styles.ts
@@ -3,6 +3,7 @@
  */
 import styled from '@emotion/styled';
 import { css, CSSObject } from '@emotion/react';
+import type { Required } from 'utility-types';
 
 /**
  * Internal dependencies
@@ -10,13 +11,15 @@ import { css, CSSObject } from '@emotion/react';
 import type { Props } from './types';
 import { CONFIG, reduceMotion } from '../utils';
 
+export type StyleProps = Required< Props >;
+
 const getBoxShadow = ( value: number ) => {
 	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
 	return `0 ${ value }px ${ value * 2 }px 0
 	${ boxShadowColor }`;
 };
 
-const renderBoxShadow = ( { value = 0 }: Props ) =>
+const renderBoxShadow = ( { value }: StyleProps ) =>
 	css( { boxShadow: getBoxShadow( value ) } );
 
 const renderTransition = () =>
@@ -25,10 +28,10 @@ const renderTransition = () =>
 ${ CONFIG.transitionTimingFunction }`,
 	} );
 
-const renderBorderRadius = ( { borderRadius }: Props ) =>
+const renderBorderRadius = ( { borderRadius }: StyleProps ) =>
 	css( { borderRadius } );
 
-const renderOffset = ( { offset = 0 }: Props ) =>
+const renderOffset = ( { offset }: StyleProps ) =>
 	css( { bottom: offset, left: offset, right: offset, top: offset } );
 
 const renderHoverActiveFocus = ( {
@@ -36,33 +39,31 @@ const renderHoverActiveFocus = ( {
 	active,
 	hover,
 	focus,
-	value = 0,
-}: Props ) => {
-	let hoverValue: number | undefined =
-		typeof hover !== 'undefined' ? hover : value * 2;
-	let activeValue: number | undefined =
-		typeof active !== 'undefined' ? active : value / 2;
+	value,
+}: StyleProps ) => {
+	let hoverValue: number | null = hover !== null ? hover : value * 2;
+	let activeValue: number | null = active !== null ? active : value / 2;
 
 	if ( ! isInteractive ) {
-		hoverValue = typeof hover !== 'undefined' ? hover : undefined;
-		activeValue = typeof active !== 'undefined' ? active : undefined;
+		hoverValue = hover;
+		activeValue = active;
 	}
 
 	const cssObj: CSSObject = {};
 
-	if ( typeof hoverValue !== 'undefined' ) {
+	if ( hoverValue !== null ) {
 		cssObj[ '*:hover > &' ] = {
 			boxShadow: getBoxShadow( hoverValue ),
 		};
 	}
 
-	if ( typeof activeValue !== 'undefined' ) {
+	if ( activeValue !== null ) {
 		cssObj[ '*:active > &' ] = {
 			boxShadow: getBoxShadow( activeValue ),
 		};
 	}
 
-	if ( typeof focus !== 'undefined' ) {
+	if ( focus !== null ) {
 		cssObj[ '*focus > &' ] = {
 			boxShadow: getBoxShadow( focus ),
 		};
@@ -71,7 +72,7 @@ const renderHoverActiveFocus = ( {
 	return css( cssObj );
 };
 
-export const ElevationWrapper = styled.div< Props >`
+export const ElevationWrapper = styled.div< StyleProps >`
 	background: transparent;
 	display: block;
 	margin: 0 !important;
diff --git a/packages/components/src/elevation/types.ts b/packages/components/src/elevation/types.ts
index dee387b07aa368..14586d2cc44a54 100644
--- a/packages/components/src/elevation/types.ts
+++ b/packages/components/src/elevation/types.ts
@@ -8,7 +8,7 @@ export type Props = {
 	/**
 	 * Renders the active (interaction) shadow value.
 	 */
-	active?: number;
+	active?: number | null;
 	/**
 	 * Renders the border-radius of the shadow.
 	 */
@@ -16,11 +16,11 @@ export type Props = {
 	/**
 	 * Renders the focus (interaction) shadow value.
 	 */
-	focus?: number;
+	focus?: number | null;
 	/**
 	 * Renders the hover (interaction) shadow value.
 	 */
-	hover?: number;
+	hover?: number | null;
 	/**
 	 * Determines if hover, active, and focus shadow values should be automatically calculated and rendered.
 	 */

From 1491235b532b0bbdedb86403bc48bd687473b402 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 30 Jun 2021 06:52:05 -0700
Subject: [PATCH 3/6] Use a more descriptive name

---
 packages/components/src/elevation/component.tsx |  4 ++--
 packages/components/src/elevation/styles.ts     | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/elevation/component.tsx b/packages/components/src/elevation/component.tsx
index 5855c992c45ac5..6c7e5eb61ba670 100644
--- a/packages/components/src/elevation/component.tsx
+++ b/packages/components/src/elevation/component.tsx
@@ -7,9 +7,9 @@ import {
 	PolymorphicComponentProps,
 } from '../ui/context';
 import type { Props } from './types';
-import { ElevationWrapper, StyleProps } from './styles';
+import { ElevationWrapper, ElevationWrapperProps } from './styles';
 
-const DEFAULT_PROPS: StyleProps = {
+const DEFAULT_PROPS: ElevationWrapperProps = {
 	isInteractive: false,
 	offset: 0,
 	value: 0,
diff --git a/packages/components/src/elevation/styles.ts b/packages/components/src/elevation/styles.ts
index 2b14474549ef0c..7dad687a6cd760 100644
--- a/packages/components/src/elevation/styles.ts
+++ b/packages/components/src/elevation/styles.ts
@@ -11,7 +11,7 @@ import type { Required } from 'utility-types';
 import type { Props } from './types';
 import { CONFIG, reduceMotion } from '../utils';
 
-export type StyleProps = Required< Props >;
+export type ElevationWrapperProps = Required< Props >;
 
 const getBoxShadow = ( value: number ) => {
 	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
@@ -19,7 +19,7 @@ const getBoxShadow = ( value: number ) => {
 	${ boxShadowColor }`;
 };
 
-const renderBoxShadow = ( { value }: StyleProps ) =>
+const renderBoxShadow = ( { value }: ElevationWrapperProps ) =>
 	css( { boxShadow: getBoxShadow( value ) } );
 
 const renderTransition = () =>
@@ -28,10 +28,10 @@ const renderTransition = () =>
 ${ CONFIG.transitionTimingFunction }`,
 	} );
 
-const renderBorderRadius = ( { borderRadius }: StyleProps ) =>
+const renderBorderRadius = ( { borderRadius }: ElevationWrapperProps ) =>
 	css( { borderRadius } );
 
-const renderOffset = ( { offset }: StyleProps ) =>
+const renderOffset = ( { offset }: ElevationWrapperProps ) =>
 	css( { bottom: offset, left: offset, right: offset, top: offset } );
 
 const renderHoverActiveFocus = ( {
@@ -40,7 +40,7 @@ const renderHoverActiveFocus = ( {
 	hover,
 	focus,
 	value,
-}: StyleProps ) => {
+}: ElevationWrapperProps ) => {
 	let hoverValue: number | null = hover !== null ? hover : value * 2;
 	let activeValue: number | null = active !== null ? active : value / 2;
 
@@ -72,7 +72,7 @@ const renderHoverActiveFocus = ( {
 	return css( cssObj );
 };
 
-export const ElevationWrapper = styled.div< StyleProps >`
+export const ElevationWrapper = styled.div< ElevationWrapperProps >`
 	background: transparent;
 	display: block;
 	margin: 0 !important;

From 832ba5d3f30c85ded66c9a161bf0e1e2b4324c6f Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 30 Jun 2021 07:04:42 -0700
Subject: [PATCH 4/6] Use View instead of Wrapper

---
 packages/components/src/elevation/component.tsx |  6 +++---
 packages/components/src/elevation/styles.ts     | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/elevation/component.tsx b/packages/components/src/elevation/component.tsx
index 6c7e5eb61ba670..410ac989a13cc8 100644
--- a/packages/components/src/elevation/component.tsx
+++ b/packages/components/src/elevation/component.tsx
@@ -7,9 +7,9 @@ import {
 	PolymorphicComponentProps,
 } from '../ui/context';
 import type { Props } from './types';
-import { ElevationWrapper, ElevationWrapperProps } from './styles';
+import { ElevationView, ElevationViewProps } from './styles';
 
-const DEFAULT_PROPS: ElevationWrapperProps = {
+const DEFAULT_PROPS: ElevationViewProps = {
 	isInteractive: false,
 	offset: 0,
 	value: 0,
@@ -23,7 +23,7 @@ function Elevation( props: PolymorphicComponentProps< Props, 'div', false > ) {
 	const contextProps = useContextSystem( props, 'Elevation' );
 
 	return (
-		<ElevationWrapper
+		<ElevationView
 			{ ...DEFAULT_PROPS }
 			{ ...contextProps }
 			aria-hidden="true"
diff --git a/packages/components/src/elevation/styles.ts b/packages/components/src/elevation/styles.ts
index 7dad687a6cd760..cc73146ee15278 100644
--- a/packages/components/src/elevation/styles.ts
+++ b/packages/components/src/elevation/styles.ts
@@ -11,7 +11,7 @@ import type { Required } from 'utility-types';
 import type { Props } from './types';
 import { CONFIG, reduceMotion } from '../utils';
 
-export type ElevationWrapperProps = Required< Props >;
+export type ElevationViewProps = Required< Props >;
 
 const getBoxShadow = ( value: number ) => {
 	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
@@ -19,7 +19,7 @@ const getBoxShadow = ( value: number ) => {
 	${ boxShadowColor }`;
 };
 
-const renderBoxShadow = ( { value }: ElevationWrapperProps ) =>
+const renderBoxShadow = ( { value }: ElevationViewProps ) =>
 	css( { boxShadow: getBoxShadow( value ) } );
 
 const renderTransition = () =>
@@ -28,10 +28,10 @@ const renderTransition = () =>
 ${ CONFIG.transitionTimingFunction }`,
 	} );
 
-const renderBorderRadius = ( { borderRadius }: ElevationWrapperProps ) =>
+const renderBorderRadius = ( { borderRadius }: ElevationViewProps ) =>
 	css( { borderRadius } );
 
-const renderOffset = ( { offset }: ElevationWrapperProps ) =>
+const renderOffset = ( { offset }: ElevationViewProps ) =>
 	css( { bottom: offset, left: offset, right: offset, top: offset } );
 
 const renderHoverActiveFocus = ( {
@@ -40,7 +40,7 @@ const renderHoverActiveFocus = ( {
 	hover,
 	focus,
 	value,
-}: ElevationWrapperProps ) => {
+}: ElevationViewProps ) => {
 	let hoverValue: number | null = hover !== null ? hover : value * 2;
 	let activeValue: number | null = active !== null ? active : value / 2;
 
@@ -72,7 +72,7 @@ const renderHoverActiveFocus = ( {
 	return css( cssObj );
 };
 
-export const ElevationWrapper = styled.div< ElevationWrapperProps >`
+export const ElevationView = styled.div< ElevationViewProps >`
 	background: transparent;
 	display: block;
 	margin: 0 !important;

From 9666395d012cb74ead56be28089ba74f7e9512a7 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 1 Jul 2021 07:04:38 -0700
Subject: [PATCH 5/6] Do not forward props

---
 packages/components/src/elevation/styles.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/elevation/styles.ts b/packages/components/src/elevation/styles.ts
index cc73146ee15278..f15c7dec74ce92 100644
--- a/packages/components/src/elevation/styles.ts
+++ b/packages/components/src/elevation/styles.ts
@@ -72,7 +72,19 @@ const renderHoverActiveFocus = ( {
 	return css( cssObj );
 };
 
-export const ElevationView = styled.div< ElevationViewProps >`
+const DO_NOT_FORWARD = [
+	'value',
+	'offset',
+	'hover',
+	'active',
+	'focus',
+	'borderRadius',
+];
+
+export const ElevationView = styled( 'div', {
+	shouldForwardProp: ( propName ) =>
+		! DO_NOT_FORWARD.includes( propName as string ),
+} )< ElevationViewProps >`
 	background: transparent;
 	display: block;
 	margin: 0 !important;

From 14e36013ae765fa903570a20b970ac340d753dac Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 1 Jul 2021 07:07:07 -0700
Subject: [PATCH 6/6] Forward the ref, add one more prop not to forward, update
 snapshot classnames

---
 .../components/src/elevation/component.tsx    | 12 ++-
 packages/components/src/elevation/styles.ts   |  1 +
 .../test/__snapshots__/index.js.snap          | 96 +++++++++++++------
 3 files changed, 78 insertions(+), 31 deletions(-)

diff --git a/packages/components/src/elevation/component.tsx b/packages/components/src/elevation/component.tsx
index 410ac989a13cc8..21b8864ae5ba1a 100644
--- a/packages/components/src/elevation/component.tsx
+++ b/packages/components/src/elevation/component.tsx
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
 /**
  * Internal dependencies
  */
@@ -19,11 +25,15 @@ const DEFAULT_PROPS: ElevationViewProps = {
 	borderRadius: 'inherit',
 };
 
-function Elevation( props: PolymorphicComponentProps< Props, 'div', false > ) {
+function Elevation(
+	props: PolymorphicComponentProps< Props, 'div', false >,
+	forwardedRef: Ref< any >
+) {
 	const contextProps = useContextSystem( props, 'Elevation' );
 
 	return (
 		<ElevationView
+			ref={ forwardedRef }
 			{ ...DEFAULT_PROPS }
 			{ ...contextProps }
 			aria-hidden="true"
diff --git a/packages/components/src/elevation/styles.ts b/packages/components/src/elevation/styles.ts
index f15c7dec74ce92..1f0a28252db4bc 100644
--- a/packages/components/src/elevation/styles.ts
+++ b/packages/components/src/elevation/styles.ts
@@ -79,6 +79,7 @@ const DO_NOT_FORWARD = [
 	'active',
 	'focus',
 	'borderRadius',
+	'isInteractive',
 ];
 
 export const ElevationView = styled( 'div', {
diff --git a/packages/components/src/elevation/test/__snapshots__/index.js.snap b/packages/components/src/elevation/test/__snapshots__/index.js.snap
index d00b77d5b52d68..bf08a6254e3443 100644
--- a/packages/components/src/elevation/test/__snapshots__/index.js.snap
+++ b/packages/components/src/elevation/test/__snapshots__/index.js.snap
@@ -8,15 +8,21 @@ exports[`props should render active 1`] = `
   pointer-events: none;
   position: absolute;
   will-change: box-shadow;
+  opacity: 1;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
-  opacity: 1;
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-0 {
+    transition-duration: 0ms;
+  }
 }
 
 *:hover>.emotion-0 {
@@ -29,7 +35,7 @@ exports[`props should render active 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1 emotion-2"
+  class="components-elevation emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -43,20 +49,26 @@ exports[`props should render correctly 1`] = `
   pointer-events: none;
   position: absolute;
   will-change: box-shadow;
+  opacity: 1;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
-  opacity: 1;
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-0 {
+    transition-duration: 0ms;
+  }
 }
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1 emotion-2"
+  class="components-elevation emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -70,15 +82,21 @@ exports[`props should render hover 1`] = `
   pointer-events: none;
   position: absolute;
   will-change: box-shadow;
+  opacity: 1;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
-  opacity: 1;
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-0 {
+    transition-duration: 0ms;
+  }
 }
 
 *:hover>.emotion-0 {
@@ -87,7 +105,7 @@ exports[`props should render hover 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1 emotion-2"
+  class="components-elevation emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -101,15 +119,21 @@ exports[`props should render isInteractive 1`] = `
   pointer-events: none;
   position: absolute;
   will-change: box-shadow;
+  opacity: 1;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
-  opacity: 1;
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-0 {
+    transition-duration: 0ms;
+  }
 }
 
 *:hover>.emotion-0 {
@@ -122,7 +146,7 @@ exports[`props should render isInteractive 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1 emotion-2"
+  class="components-elevation emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -136,15 +160,21 @@ exports[`props should render offset 1`] = `
   pointer-events: none;
   position: absolute;
   will-change: box-shadow;
+  opacity: 1;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
   border-radius: inherit;
   bottom: -2px;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
-  opacity: 1;
   left: -2px;
   right: -2px;
   top: -2px;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-0 {
+    transition-duration: 0ms;
+  }
 }
 
 *:hover>.emotion-0 {
@@ -157,7 +187,7 @@ exports[`props should render offset 1`] = `
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1 emotion-2"
+  class="components-elevation emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -171,20 +201,26 @@ exports[`props should render value 1`] = `
   pointer-events: none;
   position: absolute;
   will-change: box-shadow;
+  opacity: 1;
+  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
-  opacity: 1;
   left: 0;
   right: 0;
   top: 0;
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-  transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-0 {
+    transition-duration: 0ms;
+  }
 }
 
 <div
   aria-hidden="true"
-  class="components-elevation emotion-0 emotion-1 emotion-2"
+  class="components-elevation emotion-0 emotion-1"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />