components: Promote Grid

docs/manifest.json

@@ -833,6 +833,12 @@
 		"markdown_source": "../packages/components/src/form-token-field/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Grid",
+		"slug": "grid",
+		"markdown_source": "../packages/components/src/grid/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Guide",
 		"slug": "guide",

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

@@ -1,11 +1,13 @@
-# Grid (Experimental)
+# Grid
+
+> **Experimental!**
 
 `Grid` is a primitive layout component that can arrange content in a grid configuration.
 
 ## Usage
 
 ```jsx
-import { Grid, View } from '@wordpress/components/ui';
+import { __experimentalGrid as Grid, __experimentalView as View } from '@wordpress/components';
 
 function Example() {
 	return (

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

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
 import useGrid from './hook';
 
 /**
  * `Grid` is a primitive layout component that can arrange content in a grid configuration.
  *
  * @example
  * ```jsx
- * import { Grid, View } from `@wordpress/components/ui`;
+ * import { __experimentalGrid as Grid, __experimentalView as View } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (

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

@@ -11,13 +11,13 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../context';
+import { useContextSystem } from '../ui/context';
 import { getAlignmentProps } from './utils';
-import { useResponsiveValue } from '../utils/use-responsive-value';
-import CONFIG from '../../utils/config-values';
+import { useResponsiveValue } from '../ui/utils/use-responsive-value';
+import CONFIG from '../utils/config-values';
 
 /**
- * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
+ * @param {import('../ui/context').ViewOwnProps<import('./types').Props, 'div'>} props
  */
 export default function useGrid( props ) {
 	const {

packages/components/src/ui/grid/stories/index.js → packages/components/src/grid/stories/index.js

@@ -6,17 +6,17 @@ import { number } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { View } from '../../view';
+import { View } from '../../ui/view';
 import { Grid } from '..';
 
 export default {
 	component: Grid,
-	title: 'G2 Components (Experimental)/Grid',
+	title: 'Components (Experimental)/Grid',
 };
 
 const Item = ( props ) => (
 	<View
-		css={ {
+		style={ {
 			borderRadius: 8,
 			background: '#eee',
 			padding: 8,

packages/components/src/ui/grid/test/grid.js → packages/components/src/grid/test/grid.js

@@ -6,9 +6,9 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { View } from '../../view';
+import { View } from '../../ui/view';
 import { Grid } from '..';
-import CONFIG from '../../../utils/config-values';
+import CONFIG from '../../utils/config-values';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {

packages/components/src/index.js

@@ -63,6 +63,7 @@ export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalCustomGradientPicker } from './custom-gradient-picker';
+export { Grid as __experimentalGrid } from './grid';
 export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
 export { Heading as __experimentalHeading } from './heading';

packages/components/src/ui/__storybook-utils/example-grid.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Grid } from '../grid';
+import { Grid } from '../../grid';
 import { Surface } from '../surface';
 import { Text } from '../../text';
 import { View } from '../view';

packages/components/src/ui/card/stories/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Grid } from '../../grid';
+import { Grid } from '../../../grid';
 import { Text } from '../../../text';
 import { VStack } from '../../../v-stack';
 import { Card, CardBody, CardFooter } from '../index';

packages/components/src/ui/control-group/component.js

@@ -6,7 +6,7 @@
  * Internal dependencies
  */
 import { Flex } from '../../flex';
-import { Grid } from '../grid';
+import { Grid } from '../../grid';
 import { useControlGroup } from './hook';
 import { contextConnect } from '../context';
 

packages/components/src/ui/elevation/stories/index.js

@@ -7,7 +7,7 @@ import { number } from '@storybook/addon-knobs';
  * Internal dependencies
  */
 import { Elevation } from '../index';
-import { Grid } from '../../grid';
+import { Grid } from '../../../grid';
 import { View } from '../../view';
 import { HStack } from '../../../h-stack';
 import { Divider } from '../../divider';

packages/components/src/ui/form-group/form-group.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { contextConnect } from '../context';
-import { Grid } from '../grid';
+import { Grid } from '../../grid';
 import { View } from '../view';
 import FormGroupContent from './form-group-content';
 import { useFormGroup } from './use-form-group';

packages/components/src/ui/form-group/types.ts

@@ -8,7 +8,7 @@ import type { CSSProperties, ReactNode, ReactText } from 'react';
  * Internal dependencies
  */
 import type { Props as ControlLabelProps } from '../control-label/types';
-import type { Props as GridProps } from '../grid/types';
+import type { Props as GridProps } from '../../grid/types';
 
 export type FormGroupLabelProps = ControlLabelProps & {
 	labelHidden?: boolean;

packages/components/src/ui/index.js

@@ -4,7 +4,6 @@ export * from './control-label';
 export * from './divider';
 export * from './elevation';
 export * from './form-group';
-export * from './grid';
 export * from './shortcut';
 export * from './spinner';
 export * from './view';