components: Promote View

docs/tool/manifest.js

@@ -8,7 +8,11 @@ const glob = require( 'glob' ).sync;
 const baseRepoUrl = '..';
 const componentPaths = glob( 'packages/components/src/*/**/README.md', {
 	// Don't expose documentation for mobile only and G2 components just yet.
-	ignore: [ '**/src/mobile/**/README.md', '**/src/ui/**/README.md' ],
+	ignore: [
+		'**/src/mobile/**/README.md',
+		'**/src/ui/**/README.md',
+		'packages/components/src/view/README.md',
+	],
 } );
 const packagePaths = glob( 'packages/*/package.json' ).map(
 	( fileName ) => fileName.split( '/' )[ 1 ]

packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><div class=\\"block-editor-link-control__search-input-wrapper\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><input required=\\"\\" class=\\"block-editor-url-input__input\\" type=\\"text\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-label=\\"URL\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2 -2 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z\\"></path></svg></button></div></form></div><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting css-wdf2ti-Wrapper e1puf3u0\\"><div class=\\"components-base-control__field css-11vcxb9-StyledField e1puf3u1\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;

packages/components/src/color-picker/test/__snapshots__/index.js.snap

@@ -39,7 +39,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-4"
 +           id="color-picker-saturation-3"
           >
@@ -86,7 +86,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-4"
 +                 id="components-color-picker__hue-description-3"
                 >
@@ -161,7 +161,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-8"
 +           id="color-picker-saturation-7"
           >
@@ -208,7 +208,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-8"
 +                 id="components-color-picker__hue-description-7"
                 >
@@ -283,7 +283,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-10"
 +           id="color-picker-saturation-9"
           >
@@ -330,7 +330,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-10"
 +                 id="components-color-picker__hue-description-9"
                 >
@@ -405,7 +405,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-6"
 +           id="color-picker-saturation-5"
           >
@@ -452,7 +452,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-6"
 +                 id="components-color-picker__hue-description-5"
                 >
@@ -511,7 +511,7 @@ Snapshot Diff:
             type="button"
           />
           <div
-            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+            className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -           id="color-picker-saturation-2"
 +           id="color-picker-saturation-1"
           >
@@ -537,7 +537,7 @@ Snapshot Diff:
                   tabIndex="0"
                 />
                 <p
-                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View egi4jkx0"
+                  className="components-visually-hidden css-1r162ic-VisuallyHidden css-1mm2cvy-View em57xhy0"
 -                 id="components-color-picker__hue-description-2"
 +                 id="components-color-picker__hue-description-1"
                 >

packages/components/src/flex/flex/component.js

@@ -4,7 +4,7 @@
 import { contextConnect } from '../../ui/context';
 import { useFlex } from './hook';
 import { FlexContext } from './../context';
-import { View } from '../../ui/view';
+import { View } from '../../view';
 
 /**
  * @param {import('../../ui/context').ViewOwnProps<import('../types').FlexProps, 'div'>} props

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

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { Flex, FlexItem } from '../';
-import { View } from '../../ui/view';
+import { View } from '../../view';
 
 export default {
 	component: Flex,
@@ -17,7 +17,7 @@ export const _default = () => {
 				<View>Item</View>
 			</Flex>
 			<Flex direction={ [ 'column', 'row' ] } gap={ 3 }>
-				<View css={ { width: '180px' } }>Item</View>
+				<View style={ { width: '180px' } }>Item</View>
 				<FlexItem isBlock>
 					<View>Item</View>
 				</FlexItem>

packages/components/src/flex/test/__snapshots__/index.js.snap

@@ -6,16 +6,16 @@ Snapshot Diff:
 + Second value
 
 @@ -7,14 +7,10 @@
-      class="components-flex-item css-1636tkh-Item css-1mm2cvy-View egi4jkx0"
+      class="components-flex-item css-1636tkh-Item css-1mm2cvy-View em57xhy0"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
     />
     <div
--     class="css-1mm2cvy-View egi4jkx0"
+-     class="css-1mm2cvy-View em57xhy0"
 -   />
 -   <div />
 -   <div
-      class="components-flex-item components-flex-block css-1fgvc79-Item-block css-1mm2cvy-View egi4jkx0"
+      class="components-flex-item components-flex-block css-1fgvc79-Item-block css-1mm2cvy-View em57xhy0"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
     />

packages/components/src/flex/test/index.js

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { View } from '../../ui/view';
+import { View } from '../../view';
 import { Flex, FlexBlock, FlexItem } from '../';
 
 describe( 'props', () => {

packages/components/src/grid/README.md

@@ -7,14 +7,17 @@
 ## Usage
 
 ```jsx
-import { __experimentalGrid as Grid, __experimentalView as View } from '@wordpress/components';
+import {
+	__experimentalGrid as Grid,
+	__experimentalText as Text
+} from '@wordpress/components';
 
 function Example() {
 	return (
 		<Grid columns={ 3 }>
-			<View>Code</View>
-			<View>is</View>
-			<View>Poetry</View>
+			<Text>Code</Text>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</Grid>
 	);
 }

packages/components/src/grid/component.js

@@ -9,14 +9,17 @@ import useGrid from './hook';
  *
  * @example
  * ```jsx
- * import { __experimentalGrid as Grid, __experimentalView as View } from `@wordpress/components`;
+ * import {
+ * 	__experimentalGrid as Grid,
+ * 	__experimentalText as Text
+ * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
  * 		<Grid columns={ 3 }>
- * 			<View>Code</View>
- * 			<View>is</View>
- * 			<View>Poetry</View>
+ * 			<Text>Code</Text>
+ * 			<Text>is</Text>
+ * 			<Text>Poetry</Text>
  * 		</Grid>
  * 	);
  * }

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

@@ -6,7 +6,7 @@ import { number } from '@storybook/addon-knobs';
 /**
  * Internal dependencies
  */
-import { View } from '../../ui/view';
+import { View } from '../../view';
 import { Grid } from '..';
 
 export default {

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

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { View } from '../../ui/view';
+import { View } from '../../view';
 import { Grid } from '..';
 import CONFIG from '../../utils/config-values';
 

packages/components/src/h-stack/README.md

@@ -12,21 +12,14 @@
 import {
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
-	__experimentalView as View,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<View>
-				<Text>Code</Text>
-			</View>
-			<View>
-				<Text>is</Text>
-			</View>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>Code</Text>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</HStack>
 	);
 }
@@ -93,21 +86,16 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
-	__experimentalView as View,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<View>
-				<Text>Code</Text>
-			</View>
+			<Text>Code</Text>
 			<Spacer>
-				<Text>is</Text>
+			<Text>is</Text>
 			</Spacer>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>Poetry</Text>
 		</HStack>
 	);
 }
@@ -120,22 +108,15 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
-	__experimentalView as View,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<View>
-				<Text>Code</Text>
-			</View>
+			<Text>Code</Text>
 			<Spacer />
-			<View>
-				<Text>is</Text>
-			</View>
-			<View>
-				<Text>Poetry</Text>
-			</View>
+			<Text>is</Text>
+			<Text>Poetry</Text>
 		</HStack>
 	);
 }

packages/components/src/h-stack/component.js

@@ -14,21 +14,14 @@ import { useHStack } from './hook';
  * import {
  * 	__experimentalHStack as HStack,
  * 	__experimentalText as Text,
- * 	__experimentalView as View,
  * } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
  * 		<HStack>
- * 			<View>
- * 				<Text>Code</Text>
- * 			</View>
- * 			<View>
- * 				<Text>is</Text>
- * 			</View>
- * 			<View>
- * 				<Text>Poetry</Text>
- * 			</View>
+ * 			<Text>Code</Text>
+ * 			<Text>is</Text>
+ * 			<Text>Poetry</Text>
  * 		</HStack>
  * 	);
  * }

packages/components/src/h-stack/stories/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { View } from '../../ui/view';
+import { View } from '../../view';
 import { HStack } from '..';
 
 export default {

packages/components/src/h-stack/test/index.js

@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { View } from '../../ui/view';
+import { View } from '../../view';
 import { HStack } from '..';
 
 describe( 'props', () => {

packages/components/src/heading/hook.ts

@@ -31,18 +31,18 @@ export interface HeadingProps extends Omit< TextProps, 'size' > {
 	 *
 	 * @example
 	 * ```jsx
-	 * import { Heading, View } from `@wordpress/components`
+	 * import { __experimentalHeading as Heading } from `@wordpress/components`
 	 *
 	 * function Example() {
 	 *   return (
-	 *     <View>
+	 *     <div>
 	 *       <Heading level="1">Code is Poetry</Heading>
 	 *       <Heading level="2">Code is Poetry</Heading>
 	 *       <Heading level="3">Code is Poetry</Heading>
 	 *       <Heading level="4">Code is Poetry</Heading>
 	 *       <Heading level="5">Code is Poetry</Heading>
 	 *       <Heading level="6">Code is Poetry</Heading>
-	 *     </View>
+	 *     </div>
 	 *   );
 	 * }
 	 * ```

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

@@ -4,7 +4,7 @@
 import { Grid } from '../../grid';
 import { Surface } from '../surface';
 import { Text } from '../../text';
-import { View } from '../view';
+import { View } from '../../view';
 import { VStack } from '../../v-stack';
 
 const Container = ( { children } ) => (

packages/components/src/ui/__storybook-utils/page.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { VStack } from '../../v-stack';
-import { View } from '../view';
+import { View } from '../../view';
 import { Heading } from '../../heading';
 import { Divider } from '../divider';
 

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

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