@wordpress/components 25.2.0 → 25.3.0

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

@@ -8,7 +8,6 @@ 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 '..';
 
@@ -55,18 +54,12 @@ const Avatar = ( {
 
 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>
+		<ZStack { ...args }>
+			<Avatar backgroundColor="#444" />
+			<Avatar backgroundColor="#777" />
+			<Avatar backgroundColor="#aaa" />
+			<Avatar backgroundColor="#fff" />
+		</ZStack>
 	);
 };
 

package/src/z-stack/styles.ts

@@ -4,36 +4,35 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { rtl } from '../utils';
-
-export const ZStackView = styled.div`
-	display: flex;
-	position: relative;
-`;
-
 export const ZStackChildView = styled.div< {
-	isLayered: boolean;
 	offsetAmount: number;
 	zIndex: number;
 } >`
-	${ ( { isLayered, offsetAmount } ) =>
-		isLayered
-			? css( rtl( { marginLeft: offsetAmount } )() )
-			: css( rtl( { right: offsetAmount * -1 } )() ) }
+	&:not( :first-of-type ) {
+		${ ( { offsetAmount } ) =>
+			css( {
+				marginInlineStart: offsetAmount,
+			} ) };
+	}
 
-	${ ( { isLayered } ) =>
-		isLayered ? positionAbsolute : positionRelative }
-
-	${ ( { zIndex } ) => css( { zIndex } ) }
-`;
-
-const positionAbsolute = css`
-	position: absolute;
+	${ ( { zIndex } ) => css( { zIndex } ) };
 `;
 
-const positionRelative = css`
+export const ZStackView = styled.div< {
+	isLayered: boolean;
+} >`
+	display: inline-grid;
+	grid-auto-flow: column;
 	position: relative;
+
+	& > ${ ZStackChildView } {
+		position: relative;
+		justify-self: start;
+
+		${ ( { isLayered } ) =>
+			isLayered
+				? // When `isLayered` is true, all items overlap in the same grid cell
+				  css( { gridRowStart: 1, gridColumnStart: 1 } )
+				: undefined };
+	}
 `;