Skip to content

Components: Fix RTL on Flex component #33729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
walbo merged 11 commits into from
Aug 16, 2021
Merged

Components: Fix RTL on Flex component #33729

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2c3577b
Components: Fix RTL on `Flex` component
Jul 28, 2021
c8c1017
Use RTL util
Jul 28, 2021
2f10b2e
Update snapshots
Jul 28, 2021
f589c55
Update packages/components/src/flex/flex/hook.js
Aug 4, 2021
7e0ae58
Update packages/components/src/flex/flex/hook.js
Aug 4, 2021
8b61019
Update packages/components/src/flex/flex/hook.js
Aug 4, 2021
dae3d90
Revert
Aug 4, 2021
5bb8cf2
Remove references to examples that doesn't exist
Aug 4, 2021
8d13cfe
Add rtl.watch to useMemo
Aug 4, 2021
081d2f1
Update CHANGELOG.md
Aug 5, 2021
dc3ac1c
Merge branch 'trunk' into fix/flex-rtl
Aug 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/base-field/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
40 changes: 20 additions & 20 deletions packages/components/src/card/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ Snapshot Diff:
@@ -1,8 +1,8 @@
<div>
<div
- class="components-flex components-card__footer components-card-footer css-t1j3xg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-101hjjr-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
- class="components-flex components-card__footer components-card-footer css-otmewz-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-f5ly6j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
data-wp-c16t="true"
data-wp-component="CardFooter"
>
Expand All @@ -59,8 +59,8 @@ Snapshot Diff:
@@ -1,8 +1,8 @@
<div>
<div
- class="components-flex components-card__footer components-card-footer css-t1j3xg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-1q5iaph-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
- class="components-flex components-card__footer components-card-footer css-otmewz-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-sonr8h-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
data-wp-c16t="true"
data-wp-component="CardFooter"
>
Expand All @@ -76,8 +76,8 @@ Snapshot Diff:
@@ -1,8 +1,8 @@
<div>
<div
- class="components-flex components-card__header components-card-header css-knnhft-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__header components-card-header css-1nuvmhw-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
- class="components-flex components-card__header components-card-header css-cw4qrt-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__header components-card-header css-d00z5k-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
data-wp-c16t="true"
data-wp-component="CardHeader"
>
Expand All @@ -96,8 +96,8 @@ Snapshot Diff:
class="css-mgwsf4-View-Content em57xhy0"
>
<div
- class="components-flex components-card__header components-card-header css-knnhft-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__header components-card-header css-9zq5kx-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
- class="components-flex components-card__header components-card-header css-cw4qrt-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
+ class="components-flex components-card__header components-card-header css-1dtpden-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
data-wp-c16t="true"
data-wp-component="CardHeader"
>
Expand All @@ -124,8 +124,8 @@ Snapshot Diff:
class="css-mgwsf4-View-Content em57xhy0"
>
<div
- class="components-flex components-card__header components-card-header css-lwijn2-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__header components-card-header css-lnnbkk-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
- class="components-flex components-card__header components-card-header css-t8b09c-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__header components-card-header css-1e0mt81-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
data-wp-c16t="true"
data-wp-component="CardHeader"
>
Expand All @@ -140,8 +140,8 @@ Snapshot Diff:
Body
</div>
<div
- class="components-flex components-card__footer components-card-footer css-1ptqzjj-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-1bztdp0-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmall em57xhy0"
- class="components-flex components-card__footer components-card-footer css-c7cteg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-1mzdgj0-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmall em57xhy0"
data-wp-c16t="true"
data-wp-component="CardFooter"
>
Expand All @@ -166,8 +166,8 @@ Snapshot Diff:
class="css-mgwsf4-View-Content em57xhy0"
>
<div
- class="components-flex components-card__header components-card-header css-lwijn2-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__header components-card-header css-lnnbkk-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
- class="components-flex components-card__header components-card-header css-t8b09c-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__header components-card-header css-1e0mt81-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
data-wp-c16t="true"
data-wp-component="CardHeader"
>
Expand All @@ -182,8 +182,8 @@ Snapshot Diff:
Body
</div>
<div
- class="components-flex components-card__footer components-card-footer css-1ptqzjj-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-sifz68-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
- class="components-flex components-card__footer components-card-footer css-c7cteg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
+ class="components-flex components-card__footer components-card-footer css-1trggei-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
data-wp-c16t="true"
data-wp-component="CardFooter"
>
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/flex/flex/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<CSSProperties['flexDirection']>]`
Expand All @@ -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

Expand Down
66 changes: 38 additions & 28 deletions packages/components/src/flex/flex/hook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,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';

/**
*
Expand Down Expand Up @@ -78,34 +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,
marginRight: ! isColumn && isReverse ? space( gap ) : undefined,
marginLeft:
! 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 ),
marginLeft: ! isColumn && isReverse ? space( gap ) : undefined,
marginRight:
! isColumn && ! isReverse ? space( gap ) : undefined,
},
'> *:last-child:not(marquee)': {
marginLeft: ! isColumn && isReverse ? 0 : undefined,
marginRight: ! 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,
Expand All @@ -124,6 +133,7 @@ export function useFlex( props ) {
isReverse,
justify,
wrap,
rtl.watch(),
] );

return { ...otherProps, className: classes, isColumn };
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/flex/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
1 change: 0 additions & 1 deletion packages/components/src/flex/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
*/
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/h-stack/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/ui/control-group/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ exports[`props should render correctly 1`] = `
width: 100%;
}

.emotion-0>*+*:not(marquee) {
.emotion-0>*+*:not( marquee ) {
margin-left: -1px;
}

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/v-stack/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down