From a0a1b746b192c27cf3a82cc22b2bdf4caa283d9d Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Mon, 4 Oct 2021 13:58:48 -0700 Subject: [PATCH 1/8] Hide horizontal overflow in `Navigator` --- .../navigator/navigator-provider/component.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx index 5f8e82e613721..2dbe239279c2d 100644 --- a/packages/components/src/navigator/navigator-provider/component.tsx +++ b/packages/components/src/navigator/navigator-provider/component.tsx @@ -3,6 +3,7 @@ */ // eslint-disable-next-line no-restricted-imports import type { Ref } from 'react'; +import { css } from '@emotion/react'; /** * WordPress dependencies @@ -17,6 +18,7 @@ import { useContextSystem, WordPressComponentProps, } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; import { View } from '../../view'; import { NavigatorContext } from '../context'; import type { NavigatorProviderProps, NavigatorPath } from '../types'; @@ -25,17 +27,21 @@ function NavigatorProvider( props: WordPressComponentProps< NavigatorProviderProps, 'div' >, forwardedRef: Ref< any > ) { - const { initialPath, children, ...otherProps } = useContextSystem( - props, - 'NavigatorProvider' - ); + const { + initialPath, + children, + className, + ...otherProps + } = useContextSystem( props, 'NavigatorProvider' ); const [ path, setPath ] = useState< NavigatorPath >( { path: initialPath, } ); + const classes = useCx()( css( { overflowX: 'hidden' } ), className ); + return ( - + { children } From c2e64e37d5b37e5dc3becd106f271c652b34899c Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 5 Oct 2021 23:37:18 -0700 Subject: [PATCH 2/8] Let `NavigatorScreen` show/scroll horizontal overflow --- .../src/navigator/navigator-screen/component.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index 95d7fec931dbb..26df7481026bd 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/packages/components/src/navigator/navigator-screen/component.tsx @@ -5,6 +5,7 @@ import type { Ref } from 'react'; // eslint-disable-next-line no-restricted-imports import { motion, MotionProps } from 'framer-motion'; +import { css } from '@emotion/react'; /** * WordPress dependencies @@ -21,6 +22,7 @@ import { useContextSystem, WordPressComponentProps, } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; import { View } from '../../view'; import { NavigatorContext } from '../context'; import type { NavigatorScreenProps } from '../types'; @@ -38,7 +40,7 @@ type Props = Omit< >; function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) { - const { children, path, ...otherProps } = useContextSystem( + const { children, className, path, ...otherProps } = useContextSystem( props, 'NavigatorScreen' ); @@ -47,6 +49,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) { const [ currentPath ] = useContext( NavigatorContext ); const isMatch = currentPath.path === path; const ref = useFocusOnMount(); + const cx = useCx(); // This flag is used to only apply the focus on mount when the actual path changes. // It avoids the focus to happen on the first render. @@ -104,9 +107,12 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) { initial, }; + const classes = cx( css( { overflowX: 'auto' } ), className ); + return ( From bb2742d5d87935ab33f039ac76eb8a236d84459a Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 6 Oct 2021 08:08:03 -0700 Subject: [PATCH 3/8] Fix missing classname in reduced motion context, and memoise classname. Co-authored-by: Marco Ciampini --- .../src/navigator/navigator-screen/component.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index 26df7481026bd..178fa71965a35 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/packages/components/src/navigator/navigator-screen/component.tsx @@ -10,7 +10,7 @@ import { css } from '@emotion/react'; /** * WordPress dependencies */ -import { useContext, useEffect, useState } from '@wordpress/element'; +import { useContext, useEffect, useState, useMemo } from '@wordpress/element'; import { useReducedMotion, useFocusOnMount } from '@wordpress/compose'; import { isRTL } from '@wordpress/i18n'; @@ -49,7 +49,13 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) { const [ currentPath ] = useContext( NavigatorContext ); const isMatch = currentPath.path === path; const ref = useFocusOnMount(); + const cx = useCx(); + const classes = useMemo( + // Ensures horizontal overflow is visually accessible + () => cx( css( { overflowX: 'auto' } ), className ), + [ className ] + ); // This flag is used to only apply the focus on mount when the actual path changes. // It avoids the focus to happen on the first render. @@ -64,7 +70,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) { if ( prefersReducedMotion ) { return ( - + { children } ); @@ -107,8 +113,6 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) { initial, }; - const classes = cx( css( { overflowX: 'auto' } ), className ); - return ( Date: Wed, 6 Oct 2021 08:20:48 -0700 Subject: [PATCH 4/8] Memoise classname and comment Co-authored-by: Marco Ciampini --- .../src/navigator/navigator-provider/component.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx index 2dbe239279c2d..df17ba55b0559 100644 --- a/packages/components/src/navigator/navigator-provider/component.tsx +++ b/packages/components/src/navigator/navigator-provider/component.tsx @@ -8,7 +8,7 @@ import { css } from '@emotion/react'; /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useMemo, useState } from '@wordpress/element'; /** * Internal dependencies @@ -38,7 +38,12 @@ function NavigatorProvider( path: initialPath, } ); - const classes = useCx()( css( { overflowX: 'hidden' } ), className ); + const cx = useCx(); + const classes = useMemo( + // Prevents horizontal overflow while animating screen transitions + () => cx( css( { overflowX: 'hidden' } ), className ), + [ className ] + ); return ( From ab613affdd09cca8255ec5a7a34930f071c97e40 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 4 Oct 2021 12:30:07 +0200 Subject: [PATCH 5/8] Added dialog to storybook --- packages/components/src/navigator/stories/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js index 42a5a639e6e67..6d18bf0f07049 100644 --- a/packages/components/src/navigator/stories/index.js +++ b/packages/components/src/navigator/stories/index.js @@ -2,6 +2,8 @@ * Internal dependencies */ import Button from '../../button'; +import { CardBody, CardHeader } from '../../card'; +import { Flyout } from '../../flyout'; import { NavigatorProvider, NavigatorScreen, useNavigator } from '../'; export default { @@ -23,9 +25,18 @@ const MyNavigation = () => (

This is the home screen.

+ Navigate to child screen. + + Click top open test dialog } + placement="bottom-start" + > + Go + Stuff + From a09d218de73c6ea7f100cfc1bceaf3f64a360531 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 6 Oct 2021 09:13:02 -0700 Subject: [PATCH 6/8] Add a screen with horizontal overflow to Navigator story --- .../components/src/navigator/stories/index.js | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js index 6d18bf0f07049..398705d6d27a2 100644 --- a/packages/components/src/navigator/stories/index.js +++ b/packages/components/src/navigator/stories/index.js @@ -30,6 +30,10 @@ const MyNavigation = () => ( Navigate to child screen. + + Navigate to a screen with horizontal overflow. + + Click top open test dialog } placement="bottom-start" @@ -45,6 +49,27 @@ const MyNavigation = () => ( Go back + + + Go back + +
+ + ¯\_(ツ)_/¯ + +
+ ); From 377e8f9fdede438bf38c5116fc8f6739d784d921 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 6 Oct 2021 11:25:35 -0700 Subject: [PATCH 7/8] Edit style prop to silence console --- packages/components/src/navigator/stories/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js index 398705d6d27a2..56dd4bc3318d0 100644 --- a/packages/components/src/navigator/stories/index.js +++ b/packages/components/src/navigator/stories/index.js @@ -62,8 +62,8 @@ const MyNavigation = () => ( ¯\_(ツ)_/¯ From 697b1c5f109f3fb6591d10403c5736801a8df1ef Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 7 Oct 2021 08:34:15 -0700 Subject: [PATCH 8/8] Cosmetic touch-ups for Navigtor story Co-authored-by: Marco Ciampini --- .../components/src/navigator/stories/index.js | 113 ++++++++++-------- 1 file changed, 65 insertions(+), 48 deletions(-) diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js index 56dd4bc3318d0..172c0f5f6f6b9 100644 --- a/packages/components/src/navigator/stories/index.js +++ b/packages/components/src/navigator/stories/index.js @@ -2,7 +2,8 @@ * Internal dependencies */ import Button from '../../button'; -import { CardBody, CardHeader } from '../../card'; +import { Card, CardBody, CardHeader } from '../../card'; +import { HStack } from '../../h-stack'; import { Flyout } from '../../flyout'; import { NavigatorProvider, NavigatorScreen, useNavigator } from '../'; @@ -21,57 +22,73 @@ function NavigatorButton( { path, isBack = false, ...props } ) { ); } -const MyNavigation = () => ( - - -

This is the home screen.

+const MyNavigation = () => { + return ( + + + + +

This is the home screen.

- - Navigate to child screen. - + + + Navigate to child screen. + - - Navigate to a screen with horizontal overflow. - + + Navigate to screen with horizontal overflow. + - Click top open test dialog } - placement="bottom-start" - > - Go - Stuff - - + Open test dialog } + placement="bottom-start" + > + Go + Stuff + + + + + - -

This is the child screen.

- - Go back - - - - - Go back - -
- - ¯\_(ツ)_/¯ - -
- - -); + + + +

This is the child screen.

+ + Go back + + + + + + + + + Go back + +
+ + ¯\_(ツ)_/¯ + +
+ + + + + ); +}; export const _default = () => { return ;