From 754d5b70af79354e72b445eccfbb7c6f1634b42c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 9 Feb 2023 10:48:15 +0100 Subject: [PATCH 1/7] Fix HStack and VStack alignment prop --- packages/components/src/flex/flex/hook.ts | 2 +- packages/components/src/h-stack/utils.ts | 6 ++-- .../components/src/v-stack/stories/index.tsx | 35 +++++++++++++++---- 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/components/src/flex/flex/hook.ts b/packages/components/src/flex/flex/hook.ts index 2708043f28414..6c974296c676d 100644 --- a/packages/components/src/flex/flex/hook.ts +++ b/packages/components/src/flex/flex/hook.ts @@ -62,7 +62,7 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) { const classes = useMemo( () => { const base = css( { - alignItems: isColumn ? 'normal' : align, + alignItems: align, flexDirection: direction, flexWrap: wrap ? 'wrap' : undefined, gap: space( gap ), diff --git a/packages/components/src/h-stack/utils.ts b/packages/components/src/h-stack/utils.ts index 3abddd0309f51..b1413ee2dc8ef 100644 --- a/packages/components/src/h-stack/utils.ts +++ b/packages/components/src/h-stack/utils.ts @@ -11,7 +11,7 @@ import { isValueDefined } from '../utils/values'; const H_ALIGNMENTS: Alignments = { bottom: { align: 'flex-end', justify: 'center' }, - bottomLeft: { align: 'flex-start', justify: 'flex-end' }, + bottomLeft: { align: 'flex-end', justify: 'flex-start' }, bottomRight: { align: 'flex-end', justify: 'flex-end' }, center: { align: 'center', justify: 'center' }, edge: { align: 'center', justify: 'space-between' }, @@ -25,13 +25,13 @@ const H_ALIGNMENTS: Alignments = { const V_ALIGNMENTS: Alignments = { bottom: { justify: 'flex-end', align: 'center' }, - bottomLeft: { justify: 'flex-start', align: 'flex-end' }, + bottomLeft: { justify: 'flex-end', align: 'flex-start' }, bottomRight: { justify: 'flex-end', align: 'flex-end' }, center: { justify: 'center', align: 'center' }, edge: { justify: 'space-between', align: 'center' }, left: { justify: 'center', align: 'flex-start' }, right: { justify: 'center', align: 'flex-end' }, - stretch: { justify: 'stretch' }, + stretch: { align: 'stretch' }, top: { justify: 'flex-start', align: 'center' }, topLeft: { justify: 'flex-start', align: 'flex-start' }, topRight: { justify: 'flex-start', align: 'flex-end' }, diff --git a/packages/components/src/v-stack/stories/index.tsx b/packages/components/src/v-stack/stories/index.tsx index 46e3100778963..b0b0ece2d0f9b 100644 --- a/packages/components/src/v-stack/stories/index.tsx +++ b/packages/components/src/v-stack/stories/index.tsx @@ -9,11 +9,29 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { View } from '../../view'; import { VStack } from '..'; +const ALIGNMENTS = { + top: 'top', + topLeft: 'topLeft', + topRight: 'topRight', + left: 'left', + center: 'center', + right: 'right', + bottom: 'bottom', + bottomLeft: 'bottomLeft', + bottomRight: 'bottomRight', + edge: 'edge', + stretch: 'stretch', +}; + const meta: ComponentMeta< typeof VStack > = { component: VStack, title: 'Components (Experimental)/VStack', argTypes: { - alignment: { control: { type: 'text' } }, + alignment: { + control: { type: 'select' }, + options: Object.keys( ALIGNMENTS ), + mapping: ALIGNMENTS, + }, as: { control: { type: 'text' } }, direction: { control: { type: 'text' } }, justify: { control: { type: 'text' } }, @@ -28,12 +46,15 @@ export default meta; const Template: ComponentStory< typeof VStack > = ( props ) => { return ( - - One - Two - Three - Four - Five + + { [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => ( + + { text } + + ) ) } ); }; From aa32c1e8329814a5850181f0cbd9d0cf40faae44 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 9 Feb 2023 14:32:31 +0100 Subject: [PATCH 2/7] Better default values --- packages/components/src/flex/flex/hook.ts | 4 ++-- packages/components/src/v-stack/hook.ts | 10 ++++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/components/src/flex/flex/hook.ts b/packages/components/src/flex/flex/hook.ts index 6c974296c676d..552a4d99d295a 100644 --- a/packages/components/src/flex/flex/hook.ts +++ b/packages/components/src/flex/flex/hook.ts @@ -40,7 +40,7 @@ function useDeprecatedProps( export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) { const { - align = 'center', + align, className, direction: directionProp = 'row', expanded = true, @@ -62,7 +62,7 @@ export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) { const classes = useMemo( () => { const base = css( { - alignItems: align, + alignItems: align ?? ( isColumn ? 'normal' : 'center' ), flexDirection: direction, flexWrap: wrap ? 'wrap' : undefined, gap: space( gap ), diff --git a/packages/components/src/v-stack/hook.ts b/packages/components/src/v-stack/hook.ts index aeeb5d2546d74..9fda8064b67fb 100644 --- a/packages/components/src/v-stack/hook.ts +++ b/packages/components/src/v-stack/hook.ts @@ -8,14 +8,16 @@ import type { VStackProps } from './types'; export function useVStack( props: WordPressComponentProps< VStackProps, 'div' > ) { - const { expanded = false, ...otherProps } = useContextSystem( - props, - 'VStack' - ); + const { + expanded = false, + alignment = 'strech', + ...otherProps + } = useContextSystem( props, 'VStack' ); const hStackProps = useHStack( { direction: 'column', expanded, + alignment, ...otherProps, } ); From 172ee459d61b4904f3b037a97fc9071b82a6f14c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 9 Feb 2023 14:39:47 +0100 Subject: [PATCH 3/7] Fix unit tests --- .../test/__snapshots__/control.js.snap | 30 ++++++++------- .../test/__snapshots__/index.tsx.snap | 30 ++++++++------- .../v-stack/test/__snapshots__/index.tsx.snap | 38 ++++++++++--------- 3 files changed, 52 insertions(+), 46 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index d9a9a3f0fad03..c671725484706 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -22,17 +22,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; + -webkit-align-items: strech; + -webkit-box-align: strech; + -ms-flex-align: strech; + align-items: strech; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: calc(4px * 1); - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-4>* { @@ -54,17 +55,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; + -webkit-align-items: strech; + -webkit-box-align: strech; + -ms-flex-align: strech; + align-items: strech; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: calc(4px * 3); - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-8>* { diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap index f6ef41cc1be8d..4c47758f8afb6 100644 --- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap @@ -6,17 +6,18 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; + -webkit-align-items: strech; + -webkit-box-align: strech; + -ms-flex-align: strech; + align-items: strech; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: calc(4px * 3); - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-0>* { @@ -103,17 +104,18 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; + -webkit-align-items: strech; + -webkit-box-align: strech; + -ms-flex-align: strech; + align-items: strech; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: calc(4px * 3); - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-0>* { diff --git a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap index 9404cbb976b97..7502ff77d5f5d 100644 --- a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap @@ -6,10 +6,10 @@ exports[`props should render alignment 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -46,17 +46,18 @@ exports[`props should render correctly 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; + -webkit-align-items: strech; + -webkit-box-align: strech; + -ms-flex-align: strech; + align-items: strech; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: calc(4px * 2); - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-0>* { @@ -85,17 +86,18 @@ exports[`props should render spacing 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: normal; - -webkit-box-align: normal; - -ms-flex-align: normal; - align-items: normal; + -webkit-align-items: strech; + -webkit-box-align: strech; + -ms-flex-align: strech; + align-items: strech; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: calc(4px * 5); - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; } .emotion-0>* { From 08722d93ec7661b92fcff0cb584346d181f42ba6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 Feb 2023 12:03:26 +0100 Subject: [PATCH 4/7] Fix typo Co-authored-by: Marco Ciampini --- packages/components/src/v-stack/hook.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/v-stack/hook.ts b/packages/components/src/v-stack/hook.ts index 9fda8064b67fb..0196eef36130c 100644 --- a/packages/components/src/v-stack/hook.ts +++ b/packages/components/src/v-stack/hook.ts @@ -10,7 +10,7 @@ export function useVStack( ) { const { expanded = false, - alignment = 'strech', + alignment = 'stretch', ...otherProps } = useContextSystem( props, 'VStack' ); From 836e38dbba6e1042b33349362f4a1f6cb76e7c44 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Tue, 28 Feb 2023 19:43:30 +0900 Subject: [PATCH 5/7] VStack: Fix types --- packages/components/src/v-stack/types.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/v-stack/types.ts b/packages/components/src/v-stack/types.ts index 00daf1a4222af..c49285fe8e44a 100644 --- a/packages/components/src/v-stack/types.ts +++ b/packages/components/src/v-stack/types.ts @@ -8,7 +8,7 @@ import type { CSSProperties } from 'react'; */ import type { HStackAlignment, Props as HStackProps } from '../h-stack/types'; -export type VStackProps = HStackProps & { +export type VStackProps = Omit< HStackProps, 'alignment' | 'spacing' > & { /** * Determines how the child elements are aligned. * @@ -23,6 +23,8 @@ export type VStackProps = HStackProps & { * - `bottomRight`: Aligns content to the bottom/right. * - `edge`: Aligns content to the edges of the container. * - `stretch`: Stretches content to the edges of the container. + * + * @default 'stretch' */ alignment?: HStackAlignment | CSSProperties[ 'alignItems' ]; /** From 986f6c169fcfa2a3289dda31673342a5ff1190ce Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 Feb 2023 12:07:00 +0100 Subject: [PATCH 6/7] Fix documentation --- packages/components/src/h-stack/README.md | 4 ++-- packages/components/src/h-stack/types.ts | 4 ++-- packages/components/src/v-stack/README.md | 4 ++-- packages/components/src/v-stack/types.ts | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/src/h-stack/README.md b/packages/components/src/h-stack/README.md index a0b63c7521fcb..eb9db50aa5b41 100644 --- a/packages/components/src/h-stack/README.md +++ b/packages/components/src/h-stack/README.md @@ -44,8 +44,8 @@ Determines how the child elements are aligned. - `bottom`: Aligns content to the bottom. - `bottomLeft`: Aligns content to the bottom/left. - `bottomRight`: Aligns content to the bottom/right. -- `edge`: Aligns content to the edges of the container. -- `stretch`: Stretches content to the edges of the container. +- `edge`: Justifies content to be evenly spread out up to the main axis edges of the container. +- `stretch`: Stretches content to the cross axis edges of the container. ##### direction diff --git a/packages/components/src/h-stack/types.ts b/packages/components/src/h-stack/types.ts index e16a46746162e..d9fe717eb44ab 100644 --- a/packages/components/src/h-stack/types.ts +++ b/packages/components/src/h-stack/types.ts @@ -41,8 +41,8 @@ export type Props = Omit< FlexProps, 'align' | 'gap' > & { * * `bottom`: Aligns content to the bottom. * * `bottomLeft`: Aligns content to the bottom/left. * * `bottomRight`: Aligns content to the bottom/right. - * * `edge`: Aligns content to the edges of the container. - * * `stretch`: Stretches content to the edges of the container. + * * `edge`: Justifies content to be evenly spread out up to the main axis edges of the container. + * * `stretch`: Stretches content to the cross axis edges of the container. * * @default 'edge' */ diff --git a/packages/components/src/v-stack/README.md b/packages/components/src/v-stack/README.md index 4b42ac1eb0a0e..c3ea4e4c0389c 100644 --- a/packages/components/src/v-stack/README.md +++ b/packages/components/src/v-stack/README.md @@ -42,8 +42,8 @@ Determines how the child elements are aligned. - `bottom`: Aligns content to the bottom. - `bottomLeft`: Aligns content to the bottom/left. - `bottomRight`: Aligns content to the bottom/right. -- `edge`: Aligns content to the edges of the container. -- `stretch`: Stretches content to the edges of the container. +- `edge`: Justifies content to be evenly spread out up to the main axis edges of the container. +- `stretch`: Stretches content to the cross axis edges of the container. ##### `direction`: `FlexDirection` diff --git a/packages/components/src/v-stack/types.ts b/packages/components/src/v-stack/types.ts index c49285fe8e44a..6b1a01a4fd088 100644 --- a/packages/components/src/v-stack/types.ts +++ b/packages/components/src/v-stack/types.ts @@ -21,8 +21,8 @@ export type VStackProps = Omit< HStackProps, 'alignment' | 'spacing' > & { * - `bottom`: Aligns content to the bottom. * - `bottomLeft`: Aligns content to the bottom/left. * - `bottomRight`: Aligns content to the bottom/right. - * - `edge`: Aligns content to the edges of the container. - * - `stretch`: Stretches content to the edges of the container. + * - `edge`: Justifies content to be evenly spread out up to the main axis edges of the container. + * - `stretch`: Stretches content to the cross axis edges of the container. * * @default 'stretch' */ From 9704e6262f5f14b4ea7dec5062dddf2bb3e46c09 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 Feb 2023 12:19:35 +0100 Subject: [PATCH 7/7] Fix unit tests --- .../test/__snapshots__/control.js.snap | 16 ++++++++-------- .../test/__snapshots__/index.tsx.snap | 16 ++++++++-------- .../v-stack/test/__snapshots__/index.tsx.snap | 16 ++++++++-------- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index c671725484706..631f8e45a6ec1 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -22,10 +22,10 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: strech; - -webkit-box-align: strech; - -ms-flex-align: strech; - align-items: strech; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -55,10 +55,10 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: strech; - -webkit-box-align: strech; - -ms-flex-align: strech; - align-items: strech; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; diff --git a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap index 4c47758f8afb6..efbcf7a4aa4a4 100644 --- a/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap @@ -6,10 +6,10 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: strech; - -webkit-box-align: strech; - -ms-flex-align: strech; - align-items: strech; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -104,10 +104,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: strech; - -webkit-box-align: strech; - -ms-flex-align: strech; - align-items: strech; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; diff --git a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap index 7502ff77d5f5d..fbac33f7dc72c 100644 --- a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap +++ b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap @@ -46,10 +46,10 @@ exports[`props should render correctly 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: strech; - -webkit-box-align: strech; - -ms-flex-align: strech; - align-items: strech; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -86,10 +86,10 @@ exports[`props should render spacing 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-align-items: strech; - -webkit-box-align: strech; - -ms-flex-align: strech; - align-items: strech; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;