From facfa7fe3df2fb143fcc11e6a23f3949f14d8d1c Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Thu, 20 May 2021 12:51:25 -0700
Subject: [PATCH] Rename offset to overlap

---
 packages/components/src/z-stack/component.tsx    | 10 +++++-----
 packages/components/src/z-stack/stories/index.js |  6 +++---
 packages/components/tsconfig.json                |  1 +
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
index 58108d9e682fc..fd9b90ec529fe 100644
--- a/packages/components/src/z-stack/component.tsx
+++ b/packages/components/src/z-stack/component.tsx
@@ -35,11 +35,11 @@ export interface ZStackProps {
 	 */
 	isReversed?: boolean;
 	/**
-	 * The amount of space between each child element.
+	 * The amount of overlap between each child element.
 	 *
 	 * @default 0
 	 */
-	offset?: number;
+	overlap?: number;
 	/**
 	 * Child elements.
 	 */
@@ -55,7 +55,7 @@ function ZStack(
 		className,
 		isLayered = true,
 		isReversed = false,
-		offset = 0,
+		overlap = 0,
 		...otherProps
 	} = useContextSystem( props, 'ZStack' );
 
@@ -68,7 +68,7 @@ function ZStack(
 		const classes = cx(
 			isLayered ? styles.positionAbsolute : styles.positionRelative,
 			css( {
-				marginLeft: ! isLayered && offset * -1,
+				marginLeft: ( ! isLayered && overlap * -1 ) || undefined,
 			} )
 		);
 
@@ -89,7 +89,7 @@ function ZStack(
 
 	const classes = cx(
 		css( {
-			paddingLeft: ! isLayered ? offset : null,
+			paddingLeft: ! isLayered ? overlap : undefined,
 		} ),
 		className
 	);
diff --git a/packages/components/src/z-stack/stories/index.js b/packages/components/src/z-stack/stories/index.js
index 933c3499fdf5e..31d707d5db677 100644
--- a/packages/components/src/z-stack/stories/index.js
+++ b/packages/components/src/z-stack/stories/index.js
@@ -17,7 +17,7 @@ import { ZStack } from '..';
 
 export default {
 	component: ZStack,
-	title: 'Components/ZStack',
+	title: 'Components (Experimental)/ZStack',
 };
 
 const Avatar = ( { backgroundColor } ) => {
@@ -43,9 +43,9 @@ const Avatar = ( { backgroundColor } ) => {
 
 const AnimatedAvatars = () => {
 	const [ isHover, setIsHover ] = useState( false );
-	const hoveredOffset = number( 'offset', 20 );
+	const overlap = number( 'overlap', 20 );
 	const props = {
-		offset: isHover ? 0 : hoveredOffset,
+		overlap: isHover ? 0 : overlap,
 		isLayered: boolean( 'isLayered', false ),
 		isReversed: boolean( 'isReversed', false ),
 	};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index ad80a95934e81..df78104420ca6 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -36,6 +36,7 @@
 		"src/__next/**/*",
 		"src/h-stack/**/*",
 		"src/v-stack/**/*",
+		"src/z-stack/**/*",
 		"src/view/**/*"
 	],
 	"exclude": [