From cb4c93b8b546a6d974905d58143c7c93fbe45d28 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 27 Oct 2022 08:53:59 +0100 Subject: [PATCH] Revert "Remove overflow styles from the navigation screen component (#44973)" (#45303) This reverts commit 8b6e2e37a63134b9b80f0ec8ae3de68262d3ea2b. --- .../navigator/navigator-screen/component.tsx | 23 ++++- .../test/__snapshots__/index.js.snap | 89 ++++++++++--------- 2 files changed, 67 insertions(+), 45 deletions(-) diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx index 00eee087bd63c5..7365bf9817e81f 100644 --- a/packages/components/src/navigator/navigator-screen/component.tsx +++ b/packages/components/src/navigator/navigator-screen/component.tsx @@ -4,12 +4,13 @@ import type { ForwardedRef } from 'react'; // eslint-disable-next-line no-restricted-imports import { motion, MotionProps } from 'framer-motion'; +import { css } from '@emotion/react'; /** * WordPress dependencies */ import { focus } from '@wordpress/dom'; -import { useContext, useEffect, useRef } from '@wordpress/element'; +import { useContext, useEffect, useMemo, useRef } from '@wordpress/element'; import { useReducedMotion, useMergeRefs, @@ -26,6 +27,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'; @@ -58,6 +60,21 @@ function UnconnectedNavigatorScreen( const previousLocation = usePrevious( location ); + const cx = useCx(); + const classes = useMemo( + () => + cx( + css( { + // Ensures horizontal overflow is visually accessible. + overflowX: 'auto', + // In case the root has a height, it should not be exceeded. + maxHeight: '100%', + } ), + className + ), + [ className, cx ] + ); + // Focus restoration const isInitialLocation = location.isInitial && ! location.isBack; useEffect( () => { @@ -122,7 +139,7 @@ function UnconnectedNavigatorScreen( return ( { children } @@ -168,7 +185,7 @@ function UnconnectedNavigatorScreen( return ( diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 32309097f2144d..148e2e074feb0c 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -508,6 +508,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active } .emotion-2 { + overflow-x: auto; + max-height: 100%; +} + +.emotion-3 { background-color: #fff; color: #1e1e1e; position: relative; @@ -517,47 +522,47 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active border-radius: calc(2px - 1px); } -.emotion-4 { +.emotion-5 { height: 100%; } -.emotion-6 { +.emotion-7 { box-sizing: border-box; height: auto; max-height: 100%; padding: calc(4px * 4); } -.emotion-6:first-of-type { +.emotion-7:first-of-type { border-top-left-radius: calc(2px - 1px); border-top-right-radius: calc(2px - 1px); } -.emotion-6:last-of-type { +.emotion-7:last-of-type { border-bottom-left-radius: calc(2px - 1px); border-bottom-right-radius: calc(2px - 1px); } -.emotion-8 { +.emotion-9 { border-radius: 2px; } -.emotion-8>*:first-of-type>* { +.emotion-9>*:first-of-type>* { border-top-left-radius: 2px; border-top-right-radius: 2px; } -.emotion-8>*:last-of-type>* { +.emotion-9>*:last-of-type>* { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } -.emotion-10 { +.emotion-11 { width: 100%; display: block; } -.emotion-12 { +.emotion-13 { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; @@ -574,18 +579,18 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active border-radius: 2px; } -.emotion-12:hover { +.emotion-13:hover { color: var( --wp-admin-theme-color, #007cba); } -.emotion-12:focus { +.emotion-13:focus { background-color: transparent; color: var( --wp-admin-theme-color, #007cba); border-color: var( --wp-admin-theme-color, #007cba); outline: 3px solid transparent; } -.emotion-14 { +.emotion-15 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -604,11 +609,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active width: 100%; } -.emotion-14>* { +.emotion-15>* { min-width: 0; } -.emotion-16 { +.emotion-17 { display: block; max-height: 100%; max-width: 100%; @@ -616,14 +621,14 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active min-width: 0; } -.emotion-18 { +.emotion-19 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.emotion-46 { +.emotion-47 { background: transparent; display: block; margin: 0!important; @@ -643,7 +648,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active } @media ( prefers-reduced-motion: reduce ) { - .emotion-46 { + .emotion-47 { transition-duration: 0ms; } } @@ -696,52 +701,52 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active data-wp-component="NavigatorProvider" >