From 77bd0c25100d130958461612f4130195a4e52f4b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 27 Aug 2021 12:45:39 +0200
Subject: [PATCH] `VStack`: refactor away from the `createComponent` function

---
 packages/components/src/v-stack/component.js | 21 +++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/v-stack/component.js b/packages/components/src/v-stack/component.js
index a37186a04df17..aaf893a757fd6 100644
--- a/packages/components/src/v-stack/component.js
+++ b/packages/components/src/v-stack/component.js
@@ -1,9 +1,20 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
+import { contextConnect } from '../ui/context';
+import { View } from '../view';
 import { useVStack } from './hook';
 
+/**
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('react').Ref<any>}                                                        forwardedRef
+ */
+function VStack( props, forwardedRef ) {
+	const vStackProps = useVStack( props );
+
+	return <View { ...vStackProps } ref={ forwardedRef } />;
+}
+
 /**
  * `VStack` (or Vertical Stack) is a layout component that arranges child elements in a vertical line.
  *
@@ -27,10 +38,6 @@ import { useVStack } from './hook';
  * }
  * ```
  */
-const VStack = createComponent( {
-	as: 'div',
-	useHook: useVStack,
-	name: 'VStack',
-} );
+const ConnectedVStack = contextConnect( VStack, 'VStack' );
 
-export default VStack;
+export default ConnectedVStack;