@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.0

package/src/v-stack/test/__snapshots__/index.tsx.snap

@@ -13,16 +13,13 @@ exports[`props should render alignment 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 2);
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-top: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-height: 0;
 }
@@ -54,15 +51,12 @@ exports[`props should render correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 2);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-top: calc(4px * 2);
-}
-
 .emotion-0>* {
   min-height: 0;
 }
@@ -94,15 +88,12 @@ exports[`props should render spacing 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  gap: calc(4px * 5);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
 }
 
-.emotion-0>*+*:not( marquee ) {
-  margin-top: calc(4px * 5);
-}
-
 .emotion-0>* {
   min-height: 0;
 }

package/src/view/{component.js → component.tsx}

@@ -2,6 +2,13 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
+import type { RefAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponent } from '../ui/context/wordpress-component';
+import type { ViewProps } from './types';
 
 /**
  * `View` is a core component that renders everything in the library.
@@ -19,11 +26,13 @@ import styled from '@emotion/styled';
  * 	);
  * }
  * ```
- *
- * @type {import('../ui/context').WordPressComponent<'div', { children?: import('react').ReactNode }, true>}
  */
-// @ts-ignore
-const View = styled.div``;
+// @ts-expect-error
+export const View: WordPressComponent<
+	'div',
+	ViewProps & RefAttributes< any >
+> = styled.div``;
+
 View.selector = '.components-view';
 View.displayName = 'View';
 

package/src/view/stories/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '..';
+
+const meta: ComponentMeta< typeof View > = {
+	component: View,
+	title: 'Components (Experimental)/View',
+	argTypes: {
+		as: { control: { type: null } },
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof View > = ( args ) => {
+	return <View { ...args } />;
+};
+
+export const Default: ComponentStory< typeof View > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};

package/src/view/types.ts

@@ -0,0 +1,6 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ViewProps = { children?: ReactNode };

package/tsconfig.json

@@ -48,11 +48,8 @@
 		"src/custom-gradient-picker",
 		"src/custom-select-control",
 		"src/dimension-control",
-		"src/drop-zone",
 		"src/duotone-picker",
-		"src/focal-point-picker",
 		"src/font-size-picker",
-		"src/form-file-upload",
 		"src/gradient-picker",
 		"src/guide",
 		"src/higher-order/navigate-regions",
@@ -71,10 +68,7 @@
 		"src/radio-group",
 		"src/responsive-wrapper",
 		"src/sandbox",
-		"src/search-control",
 		"src/snackbar",
-		"src/tab-panel",
-		"src/toggle-control",
 		"src/toolbar",
 		"src/toolbar-button",
 		"src/toolbar-context",