From 9bb1574869df574973f3b54524174be146572818 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 23 Jun 2023 10:14:46 +0200 Subject: [PATCH 1/7] ZStack: rewrite using CSS grid --- packages/components/src/z-stack/component.tsx | 4 ++- packages/components/src/z-stack/styles.ts | 29 +++++++++---------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx index 1cbcac56e4fb70..ed5ce48bba0fc8 100644 --- 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 index d0bf20d38b1f4c..40e80f3c2907d9 100644 --- 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 } ) }; `; From 27f62923d1ac07e07f3544100a28835f40e417ef Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 23 Jun 2023 12:04:34 +0200 Subject: [PATCH 2/7] Use first-of-type instead of fist-child --- packages/components/src/z-stack/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts index 40e80f3c2907d9..318b46b9d6a29e 100644 --- a/packages/components/src/z-stack/styles.ts +++ b/packages/components/src/z-stack/styles.ts @@ -27,7 +27,7 @@ export const ZStackChildView = styled.div< { css( { gridRowStart: 1, gridColumnStart: 1 } ) : undefined }; - &:not( :first-child ) { + &:not( :first-of-type ) { ${ ( { offsetAmount } ) => css( { marginInlineStart: offsetAmount, From 69e103fd0f07f7101875c61a3b11dcee53095fb8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 23 Jun 2023 16:03:20 +0200 Subject: [PATCH 3/7] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2322d6f48ae73b..394cc919bd3621 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ - `Button`: Remove unnecessary margin from dashicon ([#51395](https://github.com/WordPress/gutenberg/pull/51395)). - `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)). - `ConfirmDialog`: Ensure onConfirm isn't called an extra time when submitting one of the buttons using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)). +- `ZStack`: ZStack: fix component bounding box to match children ([#51836](https://github.com/WordPress/gutenberg/pull/51836)). ### Internal From b52d47e527ad7d6faf0472cd3fba4ba8f35b9c23 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Jun 2023 09:11:04 +0200 Subject: [PATCH 4/7] Improve comment --- packages/components/src/z-stack/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx index ed5ce48bba0fc8..9df99edf695006 100644 --- a/packages/components/src/z-stack/component.tsx +++ b/packages/components/src/z-stack/component.tsx @@ -35,7 +35,7 @@ function UnconnectedZStack( const clonedChildren = validChildren.map( ( child, index ) => { const zIndex = isReversed ? childrenLastIndex - index : index; - // Only when the component is layered, the offset needs to be multiplied + // Only when the component is layered, the offset needs to be multiplied by // the item's index, so that items can correctly stack at the right distance const offsetAmount = isLayered ? offset * index : offset; From e790374767b93f272b0398e5cc648d8a3bbb7c23 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Jun 2023 09:22:36 +0200 Subject: [PATCH 5/7] Apply styles once in the parent wrapper --- packages/components/src/z-stack/component.tsx | 2 +- packages/components/src/z-stack/styles.ts | 37 +++++++++---------- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx index 9df99edf695006..e087f8536e3401 100644 --- a/packages/components/src/z-stack/component.tsx +++ b/packages/components/src/z-stack/component.tsx @@ -43,7 +43,6 @@ function UnconnectedZStack( return ( { clonedChildren } diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts index 318b46b9d6a29e..d388e3b8b0a9dc 100644 --- a/packages/components/src/z-stack/styles.ts +++ b/packages/components/src/z-stack/styles.ts @@ -4,29 +4,10 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; -/** - * Internal dependencies - */ - -export const ZStackView = styled.div` - display: inline-grid; - grid-auto-flow: column; - position: relative; -`; - export const ZStackChildView = styled.div< { - isLayered: boolean; offsetAmount: number; zIndex: number; } >` - position: relative; - - ${ ( { isLayered } ) => - isLayered - ? // When `isLayered` is true, all items overlap in the same grid cell - css( { gridRowStart: 1, gridColumnStart: 1 } ) - : undefined }; - &:not( :first-of-type ) { ${ ( { offsetAmount } ) => css( { @@ -36,3 +17,21 @@ export const ZStackChildView = styled.div< { ${ ( { zIndex } ) => css( { zIndex } ) }; `; + +export const ZStackView = styled.div< { + isLayered: boolean; +} >` + display: inline-grid; + grid-auto-flow: column; + position: relative; + + & > ${ ZStackChildView } { + position: relative; + + ${ ( { isLayered } ) => + isLayered + ? // When `isLayered` is true, all items overlap in the same grid cell + css( { gridRowStart: 1, gridColumnStart: 1 } ) + : undefined }; + } +`; From 2eb999a27c72cc289bd47f81b7a12fa162eb05ee Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Jun 2023 09:23:37 +0200 Subject: [PATCH 6/7] Avoid each child view from expanding to all available space --- packages/components/src/z-stack/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts index d388e3b8b0a9dc..186f268e643663 100644 --- a/packages/components/src/z-stack/styles.ts +++ b/packages/components/src/z-stack/styles.ts @@ -27,6 +27,7 @@ export const ZStackView = styled.div< { & > ${ ZStackChildView } { position: relative; + justify-self: start; ${ ( { isLayered } ) => isLayered From d8b367f9e395ed0577f388339ce2e486dc79759a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 26 Jun 2023 09:28:21 +0200 Subject: [PATCH 7/7] Remove unnecessary wrapeprs in storybook exmaple --- .../components/src/z-stack/stories/index.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/components/src/z-stack/stories/index.tsx b/packages/components/src/z-stack/stories/index.tsx index b04e19962aed15..9b0b0803780339 100644 --- a/packages/components/src/z-stack/stories/index.tsx +++ b/packages/components/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 ( - - - - - - - - - - - - + + + + + + ); };