Remove hardcoded motion provider from fill component, update slot fil…

…l storybook example
WordPress · Jun 8, 2023 · 94c1b97 · 94c1b97
1 parent 829e4e0
commit 94c1b97
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.js b/packages/components/src/slot-fill/bubbles-virtually/fill.js
@@ -1,11 +1,4 @@
 // @ts-nocheck
-
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { MotionContext } from 'framer-motion';
-
 /**
  * WordPress dependencies
  */
@@ -63,13 +56,9 @@ export default function Fill( { name, children } ) {
 	// to make sure we're referencing the right document/iframe (instead of the
 	// context of the `Fill`'s parent).
 	const wrappedChildren = (
-		// Resetting framer-motion's context as a way to fix an issue with portals
-		// (see https://github.com/framer/motion/issues/1524)
-		<MotionContext.Provider value={ {} }>
-			<StyleProvider document={ slot.ref.current.ownerDocument }>
-				{ children }
-			</StyleProvider>
-		</MotionContext.Provider>
+		<StyleProvider document={ slot.ref.current.ownerDocument }>
+			{ children }
+		</StyleProvider>
 	);
 
 	return createPortal( wrappedChildren, slot.ref.current );

diff --git a/packages/components/src/toggle-group-control/stories/index.tsx b/packages/components/src/toggle-group-control/stories/index.tsx
@@ -3,12 +3,12 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 // eslint-disable-next-line no-restricted-imports
-import { motion } from 'framer-motion';
+import { motion, MotionContext } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useContext, useMemo } from '@wordpress/element';
 import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 /**
@@ -198,9 +198,47 @@ export const DoubleToggles: ComponentStory<
 };
 
 // TODO: Remove before merging as well.
-const { Fill: InspectorControls, Slot } = createSlotFill( 'InspectorControls' );
-// @ts-expect-error
-InspectorControls.Slot = Slot;
+const ExampleSlotFill = createSlotFill( 'Example' );
+
+const Slot = () => {
+	const motionContextValue = useContext( MotionContext );
+
+	// Forwarding the content of the slot so that it can be used by the fill
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ MotionContext.Provider, { value: motionContextValue } ],
+			],
+		} ),
+		[ motionContextValue ]
+	);
+
+	return <ExampleSlotFill.Slot bubblesVirtually fillProps={ fillProps } />;
+};
+
+const Fill = ( { children }: { children: React.ReactNode } ) => {
+	const innerMarkup = <>{ children }</>;
+
+	return (
+		<ExampleSlotFill.Fill>
+			{ ( fillProps: {
+				forwardedContext?: [
+					React.Context< any >[ 'Provider' ],
+					{ value: any; [ key: string ]: any }
+				][];
+			} ) => {
+				const { forwardedContext = [] } = fillProps;
+
+				return forwardedContext.reduce(
+					( inner: JSX.Element, [ Provider, props ] ) => (
+						<Provider { ...props }>{ inner }</Provider>
+					),
+					innerMarkup
+				);
+			} }
+		</ExampleSlotFill.Fill>
+	);
+};
 
 export const RenderViaSlot: ComponentStory<
 	typeof ToggleGroupControl
@@ -216,7 +254,7 @@ export const RenderViaSlot: ComponentStory<
 			 * tree via Slot/Fill)
 			 */ }
 			<motion.div>
-				<InspectorControls>
+				<Fill>
 					<ToggleGroupControl
 						onChange={ ( value ) =>
 							setAlignState( value as string )
@@ -232,17 +270,10 @@ export const RenderViaSlot: ComponentStory<
 							/>
 						) ) }
 					</ToggleGroupControl>
-				</InspectorControls>
+				</Fill>
 			</motion.div>
 			<div>
-				{ /* @ts-expect-error */ }
-				<InspectorControls.Slot bubblesVirtually />
-				<Button
-					onClick={ () => setAlignState( undefined ) }
-					variant="tertiary"
-				>
-					Reset
-				</Button>
+				<Slot />
 			</div>
 		</SlotFillProvider>
 	);