@wordpress/components 19.12.0 → 19.15.0

package/src/z-stack/README.md

@@ -26,16 +26,27 @@ function Example() {
 
 ### `isLayered`: `boolean`
 
-When `true`, the children are stacked on top of each other. When `false`, the children follow the normal flow of the layout. Defaults to `true`.
+Layers children elements on top of each other (first: highest z-index, last: lowest z-index).
+
+-   Required: No
+-   Default: `true`
 
 ### `isReversed`: `boolean`
 
-Reverse the layer ordering. When `true`, the first child has the lowest `z-index` and the last child has the highest `z-index`. When `false`, the first child has the highest `z-index` and the last child has the lowest `z-index`. Defaults to `false`.
+Reverse the layer ordering (first: lowest z-index, last: highest z-index).
+
+-   Required: No
+-   Default: `false`
 
 ### `offset`: `number`
 
-The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
+The amount of space between each child element. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
+
+-   Required: No
+-   Default: `0`
 
 ### `children`: `ReactNode`
 
 The children to stack.
+
+-   Required: Yes

package/src/z-stack/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ForwardedRef, ReactNode } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -13,35 +13,11 @@ import { isValidElement } from '@wordpress/element';
  */
 import { getValidChildren } from '../ui/utils/get-valid-children';
 import { contextConnect, useContextSystem } from '../ui/context';
-import type { WordPressComponentProps } from '../ui/context';
 import { ZStackView, ZStackChildView } from './styles';
+import type { ZStackProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-export interface ZStackProps {
-	/**
-	 * Layers children elements on top of each other (first: highest z-index, last: lowest z-index).
-	 *
-	 * @default true
-	 */
-	isLayered?: boolean;
-	/**
-	 * Reverse the layer ordering (first: lowest z-index, last: highest z-index).
-	 *
-	 * @default false
-	 */
-	isReversed?: boolean;
-	/**
-	 * The amount of offset between each child element. The amount of space between each child element. Defaults to `0`. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.
-	 *
-	 * @default 0
-	 */
-	offset?: number;
-	/**
-	 * Child elements.
-	 */
-	children: ReactNode;
-}
-
-function ZStack(
+function UnconnectedZStack(
 	props: WordPressComponentProps< ZStackProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -86,4 +62,23 @@ function ZStack(
 	);
 }
 
-export default contextConnect( ZStack, 'ZStack' );
+/**
+ * `ZStack` allows you to stack things along the Z-axis.
+ *
+ * ```jsx
+ * import { __experimentalZStack as ZStack } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ZStack offset={ 20 } isLayered>
+ *       <ExampleImage />
+ *       <ExampleImage />
+ *       <ExampleImage />
+ *     </ZStack>
+ *   );
+ * }
+ * ```
+ */
+export const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );
+
+export default ZStack;

package/src/z-stack/stories/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Elevation } from '../../elevation';
+import { HStack } from '../../h-stack';
+import { View } from '../../view';
+import { ZStack } from '..';
+
+const meta: ComponentMeta< typeof ZStack > = {
+	component: ZStack,
+	title: 'Components (Experimental)/ZStack',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		children: { control: { type: null } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Avatar = ( {
+	backgroundColor,
+}: {
+	backgroundColor: CSSProperties[ 'backgroundColor' ];
+} ) => {
+	return (
+		<View>
+			<View
+				style={ {
+					border: '3px solid black',
+					borderRadius: '9999px',
+					height: '48px',
+					width: '48px',
+					backgroundColor,
+				} }
+			/>
+			<Elevation
+				borderRadius={ 9999 }
+				isInteractive={ false }
+				value={ 3 }
+			/>
+		</View>
+	);
+};
+
+const Template: ComponentStory< typeof ZStack > = ( args ) => {
+	return (
+		<View>
+			<HStack>
+				<View>
+					<ZStack { ...args }>
+						<Avatar backgroundColor="#444" />
+						<Avatar backgroundColor="#777" />
+						<Avatar backgroundColor="#aaa" />
+						<Avatar backgroundColor="#fff" />
+					</ZStack>
+				</View>
+			</HStack>
+		</View>
+	);
+};
+
+export const Default: ComponentStory< typeof ZStack > = Template.bind( {} );
+Default.args = {
+	offset: 20,
+};

package/src/z-stack/types.ts

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type ZStackProps = {
+	/**
+	 * Layers children elements on top of each other (first: highest z-index,
+	 * last: lowest z-index).
+	 *
+	 * @default true
+	 */
+	isLayered?: boolean;
+	/**
+	 * Reverse the layer ordering (first: lowest z-index, last: highest
+	 * z-index).
+	 *
+	 * @default false
+	 */
+	isReversed?: boolean;
+	/**
+	 * The amount of space between each child element. Its value is
+	 * automatically inverted (i.e. from positive to negative, and viceversa)
+	 * when switching from LTR to RTL.
+	 *
+	 * @default 0
+	 */
+	offset?: number;
+	/**
+	 * The children to stack.
+	 */
+	children: ReactNode;
+};

package/tsconfig.json

@@ -6,6 +6,7 @@
 		"types": [
 			"gutenberg-env",
 			"gutenberg-test-env",
+			"dom-scroll-into-view",
 			"jest",
 			"@testing-library/jest-dom",
 			"snapshot-diff",
@@ -53,8 +54,11 @@
 		"src/dropdown/**/*",
 		"src/dropdown-menu/**/*",
 		"src/elevation/**/*",
+		"src/external-link/**/*",
 		"src/flex/**/*",
 		"src/form-group/**/*",
+		"src/form-toggle/**/*",
+		"src/form-token-field/**/*",
 		"src/grid/**/*",
 		"src/h-stack/**/*",
 		"src/heading/**/*",
@@ -69,6 +73,7 @@
 		"src/navigator/**/*",
 		"src/number-control/**/*",
 		"src/popover/**/*",
+		"src/radio-control/**/*",
 		"src/range-control/**/*",
 		"src/resizable-box/**/*",
 		"src/scroll-lock/**/*",
@@ -82,11 +87,13 @@
 		"src/surface/**/*",
 		"src/text/**/*",
 		"src/text-control/**/*",
+		"src/text-highlight/**/*",
 		"src/textarea-control/**/*",
 		"src/tip/**/*",
 		"src/toggle-group-control/**/*",
 		"src/tools-panel/**/*",
 		"src/tooltip/**/*",
+		"src/tree-select/**/*",
 		"src/truncate/**/*",
 		"src/ui/**/*",
 		"src/unit-control/**/*",