Components: promote Scrollable

docs/manifest.json

@@ -1103,6 +1103,12 @@
 		"markdown_source": "../packages/components/src/scroll-lock/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Scrollable",
+		"slug": "scrollable",
+		"markdown_source": "../packages/components/src/scrollable/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "SelectControl",
 		"slug": "select-control",

packages/components/src/index.js

@@ -109,6 +109,7 @@ export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
 export { Spacer as __experimentalSpacer } from './spacer';
+export { Scrollable as __experimentalScrollable } from './scrollable';
 export { default as Spinner } from './spinner';
 export { default as TabPanel } from './tab-panel';
 export { Text as __experimentalText } from './text';

packages/components/src/ui/scrollable/README.md → packages/components/src/scrollable/README.md

@@ -9,27 +9,30 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { Scrollable, View } from '@wordpress/components/ui';
+import {__experimentalScrollable as Scrollable } from '@wordpress/components/ui';
 
 function Example() {
 	return (
 		<Scrollable style={ { maxHeight: 200 } }>
-			<View style={ { height: 500 } }>...</View>
+			<div style={ { height: 500 } }>...</div>
 		</Scrollable>
 	);
 }
 ```
 
 ## Props
 
-##### scrollDirection
+### `scrollDirection`: `string`
 
-**Type**: `x` | `y` | `auto`
+- Required: No
+- Default: `y`
+- Allowed values: `x`, `y`, `auto`
 
 Renders a scrollbar for a specific axis when content overflows.
 
-##### smoothScroll
+### `smoothScroll`: `boolean`
 
-**Type**: `boolean`
+- Required: No
+- Default: `false`
 
 Enables (CSS) smooth scrolling.

packages/components/src/ui/scrollable/component.js → packages/components/src/scrollable/component.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
 import { useScrollable } from './hook';
 
 /**
  * `Scrollable` is a layout component that content in a scrollable container.
  *
  * @example
  * ```jsx
- * import { Scrollable } from `@wordpress/components/ui`;
+ * import { __experimentalScrollable as Scrollable } from `@wordpress/components/ui`;
 
  * function Example() {
  * 	return (

packages/components/src/ui/scrollable/hook.js → packages/components/src/scrollable/hook.js

@@ -11,12 +11,12 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../context';
+import { useContextSystem } from '../ui/context';
 import * as styles from './styles';
 
 /* eslint-disable jsdoc/valid-types */
 /**
- * @param {import('../context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').PolymorphicComponentProps<import('./types').Props, 'div'>} props
  */
 /* eslint-enable jsdoc/valid-types */
 export function useScrollable( props ) {

packages/components/src/scrollable/stories/index.js

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { boolean, select } from '@storybook/addon-knobs';
+/* eslint-disable-next-line no-restricted-imports */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Scrollable } from '../';
+
+export default {
+	component: Scrollable,
+	title: 'Components (Experimental)/Scrollable',
+};
+
+export const _default = () => {
+	const targetRef = React.useRef( null );
+
+	const onButtonClick = () => {
+		targetRef.current?.focus();
+	};
+
+	const otherProps = {
+		smoothScroll: boolean(
+			'Scrollable: smoothScroll (hint: move focus in the scrollable container)',
+			false
+		),
+		scrollDirection: select(
+			'Scrollable: scrollDirection',
+			{
+				x: 'x',
+				y: 'y',
+				auto: 'auto',
+			},
+			'y'
+		),
+	};
+
+	const containerWidth = 300;
+	const containerHeight = 400;
+
+	return (
+		<Scrollable
+			style={ { height: containerHeight, width: containerWidth } }
+			{ ...otherProps }
+		>
+			<View
+				style={ {
+					backgroundColor: '#eee',
+					height:
+						otherProps.scrollDirection === 'x'
+							? containerHeight
+							: 1000,
+					width:
+						otherProps.scrollDirection === 'y'
+							? containerWidth
+							: 1000,
+					position: 'relative',
+				} }
+			>
+				<button onClick={ onButtonClick }>
+					Move focus to an element out of view
+				</button>
+				<input
+					ref={ targetRef }
+					style={ {
+						position: 'absolute',
+						bottom:
+							otherProps.scrollDirection === 'x' ? 'initial' : 0,
+						right:
+							otherProps.scrollDirection === 'y' ? 'initial' : 0,
+					} }
+					type="text"
+					value="Focus me"
+				/>
+			</View>
+		</Scrollable>
+	);
+};

packages/components/src/ui/scrollable/styles.js → packages/components/src/scrollable/styles.js

@@ -5,7 +5,7 @@ import { css } from 'emotion';
 /**
  * Internal dependencies
  */
-import CONFIG from '../../utils/config-values';
+import { CONFIG } from '../utils';
 
 export const scrollableScrollbar = css`
 	@media only screen and ( min-device-width: 40em ) {

packages/components/src/ui/card/body.js

@@ -12,7 +12,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { contextConnect, useContextSystem } from '../context';
-import { Scrollable } from '../scrollable';
+import { Scrollable } from '../../scrollable';
 import { View } from '../../view';
 import * as styles from './styles';
 

packages/components/tsconfig.json

@@ -44,7 +44,8 @@
 		"src/h-stack/**/*",
 		"src/v-stack/**/*",
 		"src/z-stack/**/*",
-		"src/view/**/*"
+		"src/view/**/*",
+		"src/scrollable/**/*"
 	],
 	"exclude": [
 		"src/**/*.android.js",