Scrollable: refactor away from the createComponent function (#34922)

WordPress · Sep 20, 2021 · 0915035 · 0915035
1 parent b858660
commit 0915035
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/components/src/scrollable/README.md b/packages/components/src/scrollable/README.md
@@ -9,7 +9,7 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import {__experimentalScrollable as Scrollable } from '@wordpress/components/ui';
+import {__experimentalScrollable as Scrollable } from '@wordpress/components';
 
 function Example() {
 	return (

diff --git a/packages/components/src/scrollable/component.js b/packages/components/src/scrollable/component.js
@@ -1,15 +1,26 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
+import { contextConnect } from '../ui/context';
+import { View } from '../view';
 import { useScrollable } from './hook';
 
+/**
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('react').Ref<any>}                                                        forwardedRef
+ */
+function Scrollable( props, forwardedRef ) {
+	const scrollableProps = useScrollable( props );
+
+	return <View { ...scrollableProps } ref={ forwardedRef } />;
+}
+
 /**
  * `Scrollable` is a layout component that content in a scrollable container.
  *
  * @example
  * ```jsx
- * import { __experimentalScrollable as Scrollable } from `@wordpress/components/ui`;
+ * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
@@ -21,10 +32,6 @@ import { useScrollable } from './hook';
  * ```
  */
 
-const Scrollable = createComponent( {
-	as: 'div',
-	useHook: useScrollable,
-	name: 'Scrollable',
-} );
+const ConnectedScrollable = contextConnect( Scrollable, 'Scrollable' );
 
-export default Scrollable;
+export default ConnectedScrollable;