From 2c3577b1a0495c5463c8d2c66787cc596d2d3559 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 28 Jul 2021 14:00:36 +0200 Subject: [PATCH 01/10] Components: Fix RTL on `Flex` component --- packages/components/src/flex/flex/hook.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index e85634f6c3c15d..802cecc5b13f62 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -6,6 +6,7 @@ import { css } from '@emotion/react'; /** * WordPress dependencies */ +import { isRTL } from '@wordpress/i18n'; import { useMemo } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; @@ -67,6 +68,8 @@ export function useFlex( props ) { const classes = useMemo( () => { const sx = {}; + const marginLeftProperty = isRTL() ? 'marginRight' : 'marginLeft'; + const marginRightProperty = isRTL() ? 'marginLeft' : 'marginRight'; sx.Base = css( { alignItems: isColumn ? 'normal' : align, @@ -88,8 +91,9 @@ export function useFlex( props ) { */ '> * + *:not(marquee)': { marginTop: isColumn ? space( gap ) : undefined, - marginRight: ! isColumn && isReverse ? space( gap ) : undefined, - marginLeft: + [ marginRightProperty ]: + ! isColumn && isReverse ? space( gap ) : undefined, + [ marginLeftProperty ]: ! isColumn && ! isReverse ? space( gap ) : undefined, }, } ); @@ -97,13 +101,15 @@ export function useFlex( props ) { sx.WrapItems = css( { '> *:not(marquee)': { marginBottom: space( gap ), - marginLeft: ! isColumn && isReverse ? space( gap ) : undefined, - marginRight: + [ marginLeftProperty ]: + ! isColumn && isReverse ? space( gap ) : undefined, + [ marginRightProperty ]: ! isColumn && ! isReverse ? space( gap ) : undefined, }, '> *:last-child:not(marquee)': { - marginLeft: ! isColumn && isReverse ? 0 : undefined, - marginRight: ! isColumn && ! isReverse ? 0 : undefined, + [ marginLeftProperty ]: ! isColumn && isReverse ? 0 : undefined, + [ marginRightProperty ]: + ! isColumn && ! isReverse ? 0 : undefined, }, } ); From c8c1017d254c48814a81001cf2fe90a765d66269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 28 Jul 2021 17:17:24 +0200 Subject: [PATCH 02/10] Use RTL util --- packages/components/src/flex/flex/hook.js | 71 ++++++++++++----------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index 802cecc5b13f62..e1f7a57f8b2fa9 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -6,7 +6,6 @@ import { css } from '@emotion/react'; /** * WordPress dependencies */ -import { isRTL } from '@wordpress/i18n'; import { useMemo } from '@wordpress/element'; import deprecated from '@wordpress/deprecated'; @@ -17,7 +16,7 @@ import { useContextSystem } from '../../ui/context'; import { useResponsiveValue } from '../../ui/utils/use-responsive-value'; import { space } from '../../ui/utils/space'; import * as styles from '../styles'; -import { useCx } from '../../utils/hooks/use-cx'; +import { useCx, rtl } from '../../utils'; /** * @@ -68,8 +67,6 @@ export function useFlex( props ) { const classes = useMemo( () => { const sx = {}; - const marginLeftProperty = isRTL() ? 'marginRight' : 'marginLeft'; - const marginRightProperty = isRTL() ? 'marginLeft' : 'marginRight'; sx.Base = css( { alignItems: isColumn ? 'normal' : align, @@ -81,37 +78,43 @@ export function useFlex( props ) { marginBottom: wrap ? `calc(${ space( gap ) } * -1)` : undefined, } ); - sx.Items = css( { - /** - * Workaround to optimize DOM rendering. - * We'll enhance alignment with naive parent flex assumptions. - * - * Trade-off: - * Far less DOM less. However, UI rendering is not as reliable. - */ - '> * + *:not(marquee)': { - marginTop: isColumn ? space( gap ) : undefined, - [ marginRightProperty ]: - ! isColumn && isReverse ? space( gap ) : undefined, - [ marginLeftProperty ]: - ! isColumn && ! isReverse ? space( gap ) : undefined, - }, - } ); + /** + * Workaround to optimize DOM rendering. + * We'll enhance alignment with naive parent flex assumptions. + * + * Trade-off: + * Far less DOM less. However, UI rendering is not as reliable. + */ + sx.Items = css` + > * + *:not( marquee ) { + margin-top: ${ isColumn ? space( gap ) : undefined }; + ${ rtl( { + marginLeft: + ! isColumn && ! isReverse ? space( gap ) : undefined, + marginRight: + ! isColumn && isReverse ? space( gap ) : undefined, + } )() } + } + `; - sx.WrapItems = css( { - '> *:not(marquee)': { - marginBottom: space( gap ), - [ marginLeftProperty ]: - ! isColumn && isReverse ? space( gap ) : undefined, - [ marginRightProperty ]: - ! isColumn && ! isReverse ? space( gap ) : undefined, - }, - '> *:last-child:not(marquee)': { - [ marginLeftProperty ]: ! isColumn && isReverse ? 0 : undefined, - [ marginRightProperty ]: - ! isColumn && ! isReverse ? 0 : undefined, - }, - } ); + sx.WrapItems = css` + > *:not( marquee ) { + margin-bottom: ${ space( gap ) }; + ${ rtl( { + marginLeft: + ! isColumn && isReverse ? space( gap ) : undefined, + marginRight: + ! isColumn && ! isReverse ? space( gap ) : undefined, + } )() } + } + + > *:last-child:not( marquee ) { + ${ rtl( { + marginLeft: ! isColumn && isReverse ? 0 : undefined, + marginRight: ! isColumn && ! isReverse ? 0 : undefined, + } )() } + } + `; return cx( styles.Flex, From 2f10b2e4f5149551f7d4e11a72892e9ab2aedfdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 28 Jul 2021 17:30:53 +0200 Subject: [PATCH 03/10] Update snapshots --- .../test/__snapshots__/index.js.snap | 2 +- .../src/card/test/__snapshots__/index.js.snap | 40 +++++++++---------- .../src/flex/test/__snapshots__/index.js.snap | 2 +- .../h-stack/test/__snapshots__/index.js.snap | 6 +-- .../test/__snapshots__/index.js.snap | 2 +- .../v-stack/test/__snapshots__/index.js.snap | 6 +-- 6 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/components/src/base-field/test/__snapshots__/index.js.snap b/packages/components/src/base-field/test/__snapshots__/index.js.snap index 99ee459d1a2e2e..189db5c48bf126 100644 --- a/packages/components/src/base-field/test/__snapshots__/index.js.snap +++ b/packages/components/src/base-field/test/__snapshots__/index.js.snap @@ -105,7 +105,7 @@ exports[`base field should render correctly 1`] = ` width: 100%; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-left: calc(4px * 2); } diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.js.snap index eb44001d513d37..88a4c8801e75a8 100644 --- a/packages/components/src/card/test/__snapshots__/index.js.snap +++ b/packages/components/src/card/test/__snapshots__/index.js.snap @@ -42,8 +42,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -59,8 +59,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -76,8 +76,8 @@ Snapshot Diff: @@ -1,8 +1,8 @@
@@ -96,8 +96,8 @@ Snapshot Diff: class="css-mgwsf4-View-Content em57xhy0" >
@@ -124,8 +124,8 @@ Snapshot Diff: class="css-mgwsf4-View-Content em57xhy0" >
@@ -140,8 +140,8 @@ Snapshot Diff: Body
@@ -166,8 +166,8 @@ Snapshot Diff: class="css-mgwsf4-View-Content em57xhy0" >
@@ -182,8 +182,8 @@ Snapshot Diff: Body
@@ -229,7 +229,7 @@ Object { padding: calc(4px * 4) calc(4px * 6); } -.emotion-4>*+*:not(marquee) { +.emotion-4>*+*:not( marquee ) { margin-left: calc(4px * 2); } @@ -325,7 +325,7 @@ Object { padding: calc(4px * 4) calc(4px * 6); } -.emotion-16>*+*:not(marquee) { +.emotion-16>*+*:not( marquee ) { margin-left: calc(4px * 2); } @@ -485,7 +485,7 @@ Object { padding: calc(4px * 4) calc(4px * 6); } -.emotion-4>*+*:not(marquee) { +.emotion-4>*+*:not( marquee ) { margin-left: calc(4px * 2); } @@ -581,7 +581,7 @@ Object { padding: calc(4px * 4) calc(4px * 6); } -.emotion-16>*+*:not(marquee) { +.emotion-16>*+*:not( marquee ) { margin-left: calc(4px * 2); } diff --git a/packages/components/src/flex/test/__snapshots__/index.js.snap b/packages/components/src/flex/test/__snapshots__/index.js.snap index 936f33bcb1379d..d6045ac7f5ca04 100644 --- a/packages/components/src/flex/test/__snapshots__/index.js.snap +++ b/packages/components/src/flex/test/__snapshots__/index.js.snap @@ -68,7 +68,7 @@ exports[`props should render correctly 1`] = ` width: 100%; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-left: calc(4px * 2); } diff --git a/packages/components/src/h-stack/test/__snapshots__/index.js.snap b/packages/components/src/h-stack/test/__snapshots__/index.js.snap index 86417e8afbec1d..b044c14d8b0e69 100644 --- a/packages/components/src/h-stack/test/__snapshots__/index.js.snap +++ b/packages/components/src/h-stack/test/__snapshots__/index.js.snap @@ -20,7 +20,7 @@ exports[`props should render alignment 1`] = ` width: 100%; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-left: calc(4px * 2); } @@ -61,7 +61,7 @@ exports[`props should render correctly 1`] = ` width: 100%; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-left: calc(4px * 2); } @@ -102,7 +102,7 @@ exports[`props should render spacing 1`] = ` width: 100%; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-left: calc(4px * 5); } diff --git a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap index 482d428d0b0a3d..430810f1dbbaf6 100644 --- a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap @@ -19,7 +19,7 @@ exports[`props should render correctly 1`] = ` width: 100%; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-left: -1px; } diff --git a/packages/components/src/v-stack/test/__snapshots__/index.js.snap b/packages/components/src/v-stack/test/__snapshots__/index.js.snap index 1637098afcd4df..02bf559632afb4 100644 --- a/packages/components/src/v-stack/test/__snapshots__/index.js.snap +++ b/packages/components/src/v-stack/test/__snapshots__/index.js.snap @@ -19,7 +19,7 @@ exports[`props should render alignment 1`] = ` justify-content: center; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-top: calc(4px * 2); } @@ -59,7 +59,7 @@ exports[`props should render correctly 1`] = ` justify-content: space-between; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-top: calc(4px * 2); } @@ -99,7 +99,7 @@ exports[`props should render spacing 1`] = ` justify-content: space-between; } -.emotion-0>*+*:not(marquee) { +.emotion-0>*+*:not( marquee ) { margin-top: calc(4px * 5); } From f589c55c030c6c6ef70c2ed279a4e81b071c7421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 4 Aug 2021 17:02:20 +0200 Subject: [PATCH 04/10] Update packages/components/src/flex/flex/hook.js Co-authored-by: Marco Ciampini --- packages/components/src/flex/flex/hook.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index e1f7a57f8b2fa9..e3b2ae2a90c682 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -93,7 +93,7 @@ export function useFlex( props ) { ! isColumn && ! isReverse ? space( gap ) : undefined, marginRight: ! isColumn && isReverse ? space( gap ) : undefined, - } )() } + } ) } } `; From 7e0ae586a6cb2dee5f00350d221dbc23c8490adb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 4 Aug 2021 17:02:28 +0200 Subject: [PATCH 05/10] Update packages/components/src/flex/flex/hook.js Co-authored-by: Marco Ciampini --- packages/components/src/flex/flex/hook.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index e3b2ae2a90c682..fb57bcca7ce7b9 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -105,7 +105,7 @@ export function useFlex( props ) { ! isColumn && isReverse ? space( gap ) : undefined, marginRight: ! isColumn && ! isReverse ? space( gap ) : undefined, - } )() } + } ) } } > *:last-child:not( marquee ) { From 8b61019d092bb77cc05675acd019c38c7c2e2b7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 4 Aug 2021 17:02:34 +0200 Subject: [PATCH 06/10] Update packages/components/src/flex/flex/hook.js Co-authored-by: Marco Ciampini --- packages/components/src/flex/flex/hook.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index fb57bcca7ce7b9..2da2da0948985d 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -112,7 +112,7 @@ export function useFlex( props ) { ${ rtl( { marginLeft: ! isColumn && isReverse ? 0 : undefined, marginRight: ! isColumn && ! isReverse ? 0 : undefined, - } )() } + } ) } } `; From dae3d90309f6d228aa5223ac2136acbe02f30973 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 4 Aug 2021 17:23:53 +0200 Subject: [PATCH 07/10] Revert --- packages/components/src/flex/flex/hook.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index 2da2da0948985d..e1f7a57f8b2fa9 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -93,7 +93,7 @@ export function useFlex( props ) { ! isColumn && ! isReverse ? space( gap ) : undefined, marginRight: ! isColumn && isReverse ? space( gap ) : undefined, - } ) } + } )() } } `; @@ -105,14 +105,14 @@ export function useFlex( props ) { ! isColumn && isReverse ? space( gap ) : undefined, marginRight: ! isColumn && ! isReverse ? space( gap ) : undefined, - } ) } + } )() } } > *:last-child:not( marquee ) { ${ rtl( { marginLeft: ! isColumn && isReverse ? 0 : undefined, marginRight: ! isColumn && ! isReverse ? 0 : undefined, - } ) } + } )() } } `; From 5bb8cf205a625f21e5397c17d3ff8b9cfcbe1f64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 4 Aug 2021 17:24:12 +0200 Subject: [PATCH 08/10] Remove references to examples that doesn't exist --- packages/components/src/flex/flex/README.md | 3 --- packages/components/src/flex/types.ts | 1 - 2 files changed, 4 deletions(-) diff --git a/packages/components/src/flex/flex/README.md b/packages/components/src/flex/flex/README.md index 55a7b8b15ecc55..e7043bb66d788c 100644 --- a/packages/components/src/flex/flex/README.md +++ b/packages/components/src/flex/flex/README.md @@ -40,8 +40,6 @@ function Example() { Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`. -In the example below, `flex-start` will align the children content to the top. - ##### direction **Type**: `[ResponsiveCSSValue]` @@ -65,7 +63,6 @@ Spacing in between each child can be adjusted by using `gap`. The value of `gap` **Type**: `[CSSProperties['justifyContent']]` Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`. -In the example below, `flex-start` will align the children content to the left. ##### wrap diff --git a/packages/components/src/flex/types.ts b/packages/components/src/flex/types.ts index da4ea5996e4b65..1cdc698183c689 100644 --- a/packages/components/src/flex/types.ts +++ b/packages/components/src/flex/types.ts @@ -43,7 +43,6 @@ export type FlexProps = { gap?: SpaceInput; /** * Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`. - * In the example below, `flex-start` will align the children content to the left. * * @default 'space-between' */ From 8d13cfe10d2549a1da37739b263fc7546da9091c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Wed, 4 Aug 2021 21:52:29 +0200 Subject: [PATCH 09/10] Add rtl.watch to useMemo --- packages/components/src/flex/flex/hook.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.js index e1f7a57f8b2fa9..35c3c7b10de23b 100644 --- a/packages/components/src/flex/flex/hook.js +++ b/packages/components/src/flex/flex/hook.js @@ -133,6 +133,7 @@ export function useFlex( props ) { isReverse, justify, wrap, + rtl.watch(), ] ); return { ...otherProps, className: classes, isColumn }; From 081d2f11224bc29ce320605802117bb3f8a9db24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petter=20Walb=C3=B8=20Johnsg=C3=A5rd?= Date: Thu, 5 Aug 2021 16:39:06 +0200 Subject: [PATCH 10/10] Update CHANGELOG.md --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a6a8473ed27949..813fbee34048a9 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fix + +- Fixed RTL styles in `Flex` component ([#33729](https://github.com/WordPress/gutenberg/pull/33729)). + ## 15.0.0 (2021-07-29) ### Breaking Change