ZStack: rewrite using CSS grid

WordPress · Jun 23, 2023 · 9bb1574 · 9bb1574
1 parent 7e0d080
commit 9bb1574
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
@@ -35,7 +35,9 @@ function UnconnectedZStack(
 
 	const clonedChildren = validChildren.map( ( child, index ) => {
 		const zIndex = isReversed ? childrenLastIndex - index : index;
-		const offsetAmount = offset * index;
+		// Only when the component is layered, the offset needs to be multiplied
+		// the item's index, so that items can correctly stack at the right distance
+		const offsetAmount = isLayered ? offset * index : offset;
 
 		const key = isValidElement( child ) ? child.key : index;
 

diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
@@ -7,10 +7,10 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { rtl } from '../utils';
 
 export const ZStackView = styled.div`
-	display: flex;
+	display: inline-grid;
+	grid-auto-flow: column;
 	position: relative;
 `;
 
@@ -19,21 +19,20 @@ export const ZStackChildView = styled.div< {
 	offsetAmount: number;
 	zIndex: number;
 } >`
-	${ ( { isLayered, offsetAmount } ) =>
-		isLayered
-			? css( rtl( { marginLeft: offsetAmount } )() )
-			: css( rtl( { right: offsetAmount * -1 } )() ) }
+	position: relative;
 
 	${ ( { isLayered } ) =>
-		isLayered ? positionAbsolute : positionRelative }
-
-	${ ( { zIndex } ) => css( { zIndex } ) }
-`;
+		isLayered
+			? // When `isLayered` is true, all items overlap in the same grid cell
+			  css( { gridRowStart: 1, gridColumnStart: 1 } )
+			: undefined };
 
-const positionAbsolute = css`
-	position: absolute;
-`;
+	&:not( :first-child ) {
+		${ ( { offsetAmount } ) =>
+			css( {
+				marginInlineStart: offsetAmount,
+			} ) };
+	}
 
-const positionRelative = css`
-	position: relative;
+	${ ( { zIndex } ) => css( { zIndex } ) };
 `;