Skip to content

Commit

Permalink
Revert "Remove overflow styles from the navigation screen component (#…
Browse files Browse the repository at this point in the history 
…44973)"

This reverts commit 8b6e2e3.
  • Loading branch information
@youknowriad
youknowriad authored Oct 26, 2022
1 parent 75dfcf0 commit 6fb437a
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 45 deletions.
23 changes: 20 additions & 3 deletions packages/components/src/navigator/navigator-screen/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -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( () => {
Expand Down Expand Up @@ -122,7 +139,7 @@ function UnconnectedNavigatorScreen(
return (
<View
ref={ mergedWrapperRef }
className={ className }
className={ classes }
{ ...otherProps }
>
{ children }
Expand Down Expand Up @@ -168,7 +185,7 @@ function UnconnectedNavigatorScreen(
return (
<motion.div
ref={ mergedWrapperRef }
className={ className }
className={ classes }
{ ...otherProps }
{ ...animatedProps }
>
Expand Down
89 changes: 47 additions & 42 deletions packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -604,26 +609,26 @@ 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%;
min-height: 0;
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;
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -696,60 +701,60 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
data-wp-component="NavigatorProvider"
>
<div
class="components-navigator-screen"
class="emotion-2 components-navigator-screen"
data-wp-c16t="true"
data-wp-component="NavigatorScreen"
style="opacity: 0; transform: translateX(50px) translateZ(0);"
>
<div
class="components-surface components-card emotion-2 emotion-1"
class="components-surface components-card emotion-3 emotion-1"
data-wp-c16t="true"
data-wp-component="Card"
>
<div
class="emotion-4 emotion-1"
class="emotion-5 emotion-1"
>
<div
class="components-card__body components-card-body emotion-6 emotion-1"
class="components-card__body components-card-body emotion-7 emotion-1"
data-wp-c16t="true"
data-wp-component="CardBody"
>
<div
class="components-item-group emotion-8 emotion-1"
class="components-item-group emotion-9 emotion-1"
data-wp-c16t="true"
data-wp-component="ItemGroup"
role="list"
>
<div
class="emotion-10"
class="emotion-11"
role="listitem"
>
<button
class="components-item components-navigator-button emotion-1 emotion-12 emotion-1"
class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
data-wp-c16t="true"
data-wp-component="NavigatorButton"
id="general"
>
<div
class="components-flex components-h-stack emotion-14 emotion-1"
class="components-flex components-h-stack emotion-15 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="components-flex-item emotion-16 emotion-1"
class="components-flex-item emotion-17 emotion-1"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<span
class="components-truncate emotion-18 emotion-1"
class="components-truncate emotion-19 emotion-1"
data-wp-c16t="true"
data-wp-component="Truncate"
>
General
</span>
</div>
<div
class="components-flex-item emotion-16 emotion-1"
class="components-flex-item emotion-17 emotion-1"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
Expand All @@ -770,35 +775,35 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
</button>
</div>
<div
class="emotion-10"
class="emotion-11"
role="listitem"
>
<button
class="components-item components-navigator-button emotion-1 emotion-12 emotion-1"
class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
data-wp-c16t="true"
data-wp-component="NavigatorButton"
id="blocks"
>
<div
class="components-flex components-h-stack emotion-14 emotion-1"
class="components-flex components-h-stack emotion-15 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="components-flex-item emotion-16 emotion-1"
class="components-flex-item emotion-17 emotion-1"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<span
class="components-truncate emotion-18 emotion-1"
class="components-truncate emotion-19 emotion-1"
data-wp-c16t="true"
data-wp-component="Truncate"
>
Blocks
</span>
</div>
<div
class="components-flex-item emotion-16 emotion-1"
class="components-flex-item emotion-17 emotion-1"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
Expand All @@ -819,35 +824,35 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
</button>
</div>
<div
class="emotion-10"
class="emotion-11"
role="listitem"
>
<button
class="components-item components-navigator-button emotion-1 emotion-12 emotion-1"
class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
data-wp-c16t="true"
data-wp-component="NavigatorButton"
id="panels"
>
<div
class="components-flex components-h-stack emotion-14 emotion-1"
class="components-flex components-h-stack emotion-15 emotion-1"
data-wp-c16t="true"
data-wp-component="HStack"
>
<div
class="components-flex-item emotion-16 emotion-1"
class="components-flex-item emotion-17 emotion-1"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
<span
class="components-truncate emotion-18 emotion-1"
class="components-truncate emotion-19 emotion-1"
data-wp-c16t="true"
data-wp-component="Truncate"
>
Panels
</span>
</div>
<div
class="components-flex-item emotion-16 emotion-1"
class="components-flex-item emotion-17 emotion-1"
data-wp-c16t="true"
data-wp-component="FlexItem"
>
Expand All @@ -872,13 +877,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
</div>
<div
aria-hidden="true"
class="components-elevation emotion-46 emotion-1"
class="components-elevation emotion-47 emotion-1"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
<div
aria-hidden="true"
class="components-elevation emotion-46 emotion-1"
class="components-elevation emotion-47 emotion-1"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
Expand Down

0 comments on commit 6fb437a

Please sign in to comment.