From fa5395d278960c02838179c34be95340e2363d98 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 15 Jun 2020 14:07:42 +0100 Subject: [PATCH] Make the inserter scrolling and behavior adapt to the content changes --- .../src/components/inserter/menu.js | 18 +++--- .../src/components/inserter/style.scss | 45 +++++++-------- packages/components/src/popover/index.js | 16 +++--- .../components/src/popover/stories/index.js | 55 +++++++++++++++++++ packages/components/src/popover/style.scss | 5 -- .../popover/test/__snapshots__/index.js.snap | 12 +++- 6 files changed, 103 insertions(+), 48 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index fc927cf946d9cb..bb7fb2e0257cf0 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -81,14 +81,12 @@ function InserterMenu( { const blocksTab = ( <>
-
- -
+
{ showInserterHelpPanel && (
@@ -102,9 +100,7 @@ function InserterMenu( { ); const patternsTab = ( -
- -
+ ); // Disable reason (no-autofocus): The inserter menu is a modal display, not one which diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 866a7a84a1ca14..abbefd0b12ad24 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -16,11 +16,20 @@ $block-inserter-tabs-height: 44px; } } -.block-editor-inserter__popover > .components-popover__content { - @include break-medium { - overflow-y: visible; - height: 100vh; - padding: 0; +.block-editor-inserter__popover .block-editor-inserter__menu { + margin: -$grid-unit-15; + + .block-editor-inserter__search { + top: -$grid-unit-15; + } + + .block-editor-inserter__tabs .components-tab-panel__tabs { + top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15; + } + + .block-editor-inserter__main-area { + overflow: visible; + height: auto; } } @@ -43,8 +52,7 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__main-area { width: auto; - display: flex; - flex-direction: column; + overflow-y: auto; height: 100%; @include break-medium { width: $block-inserter-width; @@ -65,9 +73,10 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__search { padding: $grid-unit-20; + position: sticky; + top: 0; + background: $white; z-index: 1; - flex-shrink: 0; - position: relative; input[type="search"].block-editor-inserter__search-input { @include input-control; @@ -103,11 +112,15 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__tabs { display: flex; - flex-grow: 1; flex-direction: column; margin-top: -$grid-unit-10; .components-tab-panel__tabs { + position: sticky; + // Computed based off the search input height and paddings + top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60; + background: $white; + z-index: 1; border-bottom: $border-width solid $light-gray-500; .components-tab-panel__tabs-item { @@ -147,18 +160,6 @@ $block-inserter-tabs-height: 44px; position: relative; } -// This extra div is needed because -// flex grow and overflow auto doesn't work well together. -.block-editor-inserter__scrollable { - overflow: auto; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - overflow-y: scroll; -} - .block-editor-inserter__popover .block-editor-block-types-list { margin: 0 -8px; } diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index caebfcfe42784d..02f5c5463e4aec 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -10,7 +10,7 @@ import { useRef, useState, useEffect } from '@wordpress/element'; import { focus, getRectangleFromRange } from '@wordpress/dom'; import { ESCAPE } from '@wordpress/keycodes'; import deprecated from '@wordpress/deprecated'; -import { useViewportMatch } from '@wordpress/compose'; +import { useViewportMatch, useResizeObserver } from '@wordpress/compose'; import { close } from '@wordpress/icons'; /** @@ -260,11 +260,11 @@ const Popover = ( { const anchorRefFallback = useRef( null ); const contentRef = useRef( null ); const containerRef = useRef(); - const contentRect = useRef(); const isMobileViewport = useViewportMatch( 'medium', '<' ); const [ animateOrigin, setAnimateOrigin ] = useState(); const slot = useSlot( __unstableSlotName ); const isExpanded = expandOnMobile && isMobileViewport; + const [ containerResizeListener, contentSize ] = useResizeObserver(); noArrow = isExpanded || noArrow; @@ -299,10 +299,6 @@ const Popover = ( { return; } - if ( ! contentRect.current ) { - contentRect.current = contentRef.current.getBoundingClientRect(); - } - let relativeOffsetTop = 0; // If there is a positioned ancestor element that is not the body, @@ -343,7 +339,7 @@ const Popover = ( { contentWidth, } = computePopoverPosition( anchor, - contentRect.current, + contentSize, position, __unstableSticky, containerRef.current, @@ -481,6 +477,7 @@ const Popover = ( { anchorRef, shouldAnchorIncludePadding, position, + contentSize, __unstableSticky, __unstableAllowVerticalSubpixelPosition, __unstableAllowHorizontalSubpixelPosition, @@ -603,7 +600,10 @@ const Popover = ( { className="components-popover__content" tabIndex="-1" > - { children } +
+ { containerResizeListener } + { children } +
) } diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 5014b1b27f3e5c..2f4f4e2b82235f 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -3,11 +3,17 @@ */ import { boolean, select, text } from '@storybook/addon-knobs'; +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + /** * Internal dependencies */ import { DraggableWrapper } from './_utils'; import Popover from '../'; +import Button from '../../button'; export default { title: 'Components/Popover', component: Popover }; @@ -100,3 +106,52 @@ export const positioning = () => { ); }; + +function DynamicHeightPopover() { + const [ height, setHeight ] = useState( 200 ); + const increase = () => setHeight( height + 100 ); + const decrease = () => setHeight( height - 100 ); + + return ( +
+
+ + + +
+ +

+ When the height of the popover exceeds the available space in + the canvas, a scrollbar inside the popover should appear. +

+ +
+ +
+ Content with dynamic height +
+ +
+
+ ); +} + +export const dynamicHeight = () => { + return ; +}; diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index 8e581c516bd385..10926a092a4eb1 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -216,11 +216,6 @@ $arrow-size: 8px; } } -// The withFocusReturn div -.components-popover__content > div { - height: 100%; -} - .components-popover__header { align-items: center; background: $white; diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap index ec650c7ec10784..48157a46f82dda 100644 --- a/packages/components/src/popover/test/__snapshots__/index.js.snap +++ b/packages/components/src/popover/test/__snapshots__/index.js.snap @@ -15,7 +15,11 @@ exports[`Popover should pass additional props to portaled element 1`] = ` class="components-popover__content" tabindex="-1" > - Hello +
+ Hello +
@@ -38,7 +42,11 @@ exports[`Popover should render content 1`] = ` class="components-popover__content" tabindex="-1" > - Hello +
+ Hello +