Submenu flipping with Popper.js! #2053

giladgray · 2018-01-30T02:34:35Z

Fixes #849, Fixes #1640, Fixes #2008

Changes proposed in this pull request:

⭐️ submenus automatically flip to left side if there is not enough room onscreen.
submenus will reposition vertically to fit onscreen, rather than forcing the screen to scroll
🔥 remove MenuItem useSmartPositioning and submenuViewportMargin props, and all associated logic, as Popper.js beautifully handles flipping when a menu reaches the edge.
- also remove the tests cuz it's all in Popper now (Fix Menu tests skip'd in the Popover => Popover2 transition #2008)
- this functionality had zero usages that I could find
- Popper's logic can be overridden through MenuItem popoverProps.modifiers

Screenshot

notice how the menu never leaves the viewport (or causes it to scroll #849)!!

…tomatically!!

…cade to MenuItem via context fn (better than cloning children).

blueprint-bot · 2018-01-30T02:36:19Z

more docs

Preview: documentation | landing | table

llorca · 2018-01-30T04:39:43Z

🔥

Can you bring back the original alignment of submenus? It's off by 5px in both directions

adidahiya · 2018-01-30T16:52:05Z

packages/core/src/components/menu/context.ts

+    getSubmenuPopperModifiers: assertFunctionProp,
+};
+
+// simple alternative to prop-types dependency


I don't see the point to this -- we're already depending on prop-types implicitly through react. You should use the package directly and also remove this code:

blueprint/packages/docs-theme/src/common/context.ts

Line 71 in 02c4a98

// simple alternative to prop-types dependency

well dang, i didn't realize react depended on it!

blueprint git:(gg/submenus) yarn why prop-types yarn why v1.3.2 [1/4] 🤔 Why do we have the module "prop-types"...? [2/4] 🚚 Initialising dependency graph... [3/4] 🔍 Finding dependency... [4/4] 🚡 Calculating file sizes... info Reasons this module exists - "@blueprintjs/core#react-popper" depends on it - "@blueprintjs/core#react" depends on it - "@blueprintjs/core#react-transition-group" depends on it

no-implicit-dependency-wise, is prop-types a new peerDep, alongside react?

no, it's a regular dependency, not a peerDep.

adidahiya · 2018-01-30T16:53:04Z

packages/core/src/components/menu/menu.md

+`Menu` provides two `submenu` props to adjust this flipping behavior: you can customize the boundary element
+and the padding within that boundary element. Note that a `MenuItem` _must be inside_ a `Menu` element
+for these props to affect the submenus. On standalone `MenuItem`s (without a parent `Menu`, an anti-pattern) you can
+use `popoverProps.modifiers` directly to achieve the same result.


If it's an anti-pattern, why even mention it?

yeah i had this exact thought. i figure it's going to happen (is already happening) so why not pass judgment on it.

adidahiya · 2018-01-30T16:53:21Z

packages/core/src/components/menu/menu.md

@@ -83,25 +83,34 @@ To add a submenu to a `Menu`, simply nest `MenuItem`s within another `MenuItem`.
 The submenu opens to the right of its parent by default, but will adjust and flip to the left if
 there is not enough room to the right.

+`Menu` provides two `submenu` props to adjust this flipping behavior: you can customize the boundary element
+and the padding within that boundary element. Note that a `MenuItem` _must be inside_ a `Menu` element


When would I need to customize these things? Genuinely curious.

you might want to keep your Menu inside a container other than the viewport, maybe on a canvas. padding i think is less useful and less likely to be used so i could be convinced to remove it, but it's easy enough to support.

adidahiya · 2018-01-30T16:57:26Z

packages/core/src/components/menu/menuItem.tsx

-        }
+        // NOTE: use .pt-menu directly because using Menu would start a new context tree and
+        // we'd have to pass through the submenu props. this is just simpler.
+        const submenuContent = <ul className={Classes.MENU}>{this.renderChildren()}</ul>;


if this.renderChildren() returns null, wouldn't you want to avoid rendering this <ul> and <Popover> altogether?

hmm yes, makes sense! surprising that never came up.

adidahiya · 2018-01-30T16:57:59Z

packages/core/src/components/menu/menuItem.tsx

+    private renderPopover(content: JSX.Element) {
+        const { disabled, popoverProps } = this.props;
+        const popoverClasses = classNames(Classes.MENU_SUBMENU, popoverProps.popoverClassName);
+        // getSubmenuPopperModifiers will not be defined if `MenuItem` used outside a `Menu`.


Should we throw an error in that case?

🤔 i'm hesitant to throw errors in cases where it's not absolutely fatal. pretty easy to handle the no-context case here.

adidahiya · 2018-01-30T17:00:14Z

packages/core/src/components/menu/menuItem.tsx

-            submenuLeft += adjustmentWidth;
-            submenuRight += adjustmentWidth;
-        }
+        // NOTE: use .pt-menu directly because using Menu would start a new context tree and


What do you mean by new context tree? And by "the submenu props" do you mean submenuBoundaryElement and submenuBoundaryPadding?

This feels dirty, I'd rather use <Menu>. You can derive the submenu info you need from props and context in the component constructor.

new context tree: the nested Menu overwrites the same context key with a function that returns its default props, not the parent's. by not using Menu, the root context gets passed all the way down.

it's doable with Menu, i'll update the usage so you can see. don't need to do any constructor stuff, i can just pass parent props down.

blueprint-bot · 2018-01-30T21:39:27Z

use Menu and pass context props

Preview: documentation | landing | table

adidahiya · 2018-01-31T15:37:00Z

We should remove submenuBoundaryPadding as a prop. Please don't add it just because it's "easy enough to support" -- IMO nothing ever is. We can add it back later if users ask for it.
We should also strongly consider removing submenuBoundaryElement until users ask for it. Can you demonstrate a legit use case for that here in this PR (ideally in the docs example)?

adidahiya · 2018-01-31T15:39:36Z

packages/core/src/components/menu/context.ts

@@ -4,21 +4,12 @@
 * Licensed under the terms of the LICENSE file distributed with this project.
 */

-import { isFunction } from "../../common/utils";
+import { func } from "prop-types";


not a fan of this import, the symbols are too terse. for example another possible import is any, which would be very confusing to import. please switch to import * as PropTypes

yeah i felt the terseness. went with this for theoretical tree-shaking purposes, but i agree the * as import makes a lot more sense here.

adidahiya · 2018-01-31T15:39:47Z

packages/docs-theme/src/common/context.ts

 import {
    IBlock,
    IKssPluginData,
    IMarkdownPluginData,
    ITsDocBase,
    ITypescriptPluginData,
 } from "documentalist/dist/client";
+import { func } from "prop-types";


same here, use namespace import

adidahiya · 2018-01-31T15:41:34Z

packages/core/src/components/menu/menuItem.tsx

-        });
+        const { disabled, label } = this.props;
+        const submenuChildren = this.renderSubmenuChildren();
+        const hasSubmenu = submenuChildren != null;


nit: only used once, can be inlined

used twice, or i would have already inlined it 😄 (other usage is hidden in collapsed block, line 66)

giladgray · 2018-01-31T19:31:51Z

@adidahiya ok, i'm onboard to remove the two props. the only real benefit they conferred was the cascading behavior to all nested submenus. the behavior is still entirely possible through popoverProps.modifier on MenuItem.

blueprint-bot · 2018-01-31T19:52:54Z

remove submenu props docs

Preview: documentation | landing | table

blueprint-bot · 2018-01-31T19:53:19Z

Merge branch 'develop' of github.com:palantir/blueprint into gg/submenus

Preview: documentation | landing | table

blueprint-bot · 2018-01-31T20:53:10Z

delete menu test

Preview: documentation | landing | table

giladgray · 2018-01-31T21:55:27Z

#2058 should fix test failures here.

blueprint-bot · 2018-01-31T22:21:30Z

Merge branch 'develop' of github.com:palantir/blueprint into gg/submenus

Preview: documentation | landing | table

adidahiya · 2018-01-31T22:54:11Z

packages/core/src/components/menu/menuItem.tsx

-    /** Props to spread to `Popover`. Note that `content` cannot be changed. */
-    popoverProps?: Partial<IPopoverProps> & object;
+    /** Props to spread to `Popover`. Note that `content` and `minimal` cannot be changed. */
+    popoverProps?: Partial<IPopoverProps>;


& object was there intentionally... IIRC without it, you can assign literally anything non-null to this field.

& object messes up the docs, which i take to be more important. a prop called *Props is expected to be an object.

blueprint-bot · 2018-01-31T23:12:04Z

button menu items inherit font

Preview: documentation | landing | table

blueprint-bot · 2018-01-31T23:22:15Z

improve Overlay focus tests reliability

Preview: documentation | landing | table

Gilad Gray added 4 commits January 29, 2018 18:24

remove MenuItem useSmartPositioning logic, as Popper.js handles it au…

fe8b321

…tomatically!!

Add submenuBoundaryElement, submenuBoundaryPadding props to Menu. cas…

46fe754

…cade to MenuItem via context fn (better than cloning children).

docs

f678135

more docs

aef958e

giladgray requested review from llorca, cmslewis and adidahiya January 30, 2018 02:34

giladgray changed the title ~~Gg/submenus~~ Submenu flipping with Popper.js! Jan 30, 2018

adidahiya suggested changes Jan 30, 2018

View reviewed changes

Gilad Gray added 3 commits January 30, 2018 13:10

use prop-types, add dependency

e23f78c

refactor MenuItem render. no children => no popover

a796819

use Menu and pass context props

b770995

adidahiya reviewed Jan 31, 2018

View reviewed changes

Gilad Gray added 5 commits January 31, 2018 11:38

remove Menu props and context stuff

2e92f5a

remove unused refs, final refactors

9800ef2

revert props-types change

c7bd0ac

remove submenu props docs

85f2356

Merge branch 'develop' of github.com:palantir/blueprint into gg/submenus

8ee3917

Gilad Gray added 2 commits January 31, 2018 11:54

props docs

12958ee

delete menu test

774173e

giladgray mentioned this pull request Jan 31, 2018

inline=X ⇒ usePortal=!X #2045

Merged

Merge branch 'develop' of github.com:palantir/blueprint into gg/submenus

4b92799

adidahiya approved these changes Jan 31, 2018

View reviewed changes

Gilad Gray added 2 commits January 31, 2018 15:05

inline submenu Popover, fix positioning relative to parent item

472361d

button menu items inherit font

c9f43ca

improve Overlay focus tests reliability

cc9af72

giladgray merged commit 208f7a8 into develop Jan 31, 2018

giladgray deleted the gg/submenus branch January 31, 2018 23:35

giladgray added the Type: breaking change label Feb 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Submenu flipping with Popper.js! #2053

Submenu flipping with Popper.js! #2053

giladgray commented Jan 30, 2018 •

edited

Loading

blueprint-bot commented Jan 30, 2018

llorca commented Jan 30, 2018

adidahiya Jan 30, 2018

giladgray Jan 30, 2018

giladgray Jan 30, 2018 •

edited

Loading

adidahiya Jan 30, 2018

adidahiya Jan 30, 2018

giladgray Jan 30, 2018

adidahiya Jan 30, 2018

giladgray Jan 30, 2018

adidahiya Jan 30, 2018

giladgray Jan 30, 2018

adidahiya Jan 30, 2018

giladgray Jan 30, 2018

adidahiya Jan 30, 2018

giladgray Jan 30, 2018

giladgray Jan 30, 2018

blueprint-bot commented Jan 30, 2018

adidahiya commented Jan 31, 2018

adidahiya Jan 31, 2018

giladgray Jan 31, 2018

adidahiya Jan 31, 2018

adidahiya Jan 31, 2018

giladgray Jan 31, 2018

giladgray commented Jan 31, 2018

blueprint-bot commented Jan 31, 2018

blueprint-bot commented Jan 31, 2018

blueprint-bot commented Jan 31, 2018

giladgray commented Jan 31, 2018

blueprint-bot commented Jan 31, 2018

adidahiya Jan 31, 2018

giladgray Jan 31, 2018

blueprint-bot commented Jan 31, 2018

blueprint-bot commented Jan 31, 2018

Submenu flipping with Popper.js! #2053

Submenu flipping with Popper.js! #2053

Conversation

giladgray commented Jan 30, 2018 • edited Loading

Fixes #849, Fixes #1640, Fixes #2008

Changes proposed in this pull request:

Screenshot

blueprint-bot commented Jan 30, 2018

more docs

llorca commented Jan 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giladgray Jan 30, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented Jan 30, 2018

use Menu and pass context props

adidahiya commented Jan 31, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

giladgray commented Jan 31, 2018

blueprint-bot commented Jan 31, 2018

remove submenu props docs

blueprint-bot commented Jan 31, 2018

Merge branch 'develop' of github.com:palantir/blueprint into gg/submenus

blueprint-bot commented Jan 31, 2018

delete menu test

giladgray commented Jan 31, 2018

blueprint-bot commented Jan 31, 2018

Merge branch 'develop' of github.com:palantir/blueprint into gg/submenus

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented Jan 31, 2018

button menu items inherit font

blueprint-bot commented Jan 31, 2018

improve Overlay focus tests reliability

giladgray commented Jan 30, 2018 •

edited

Loading

giladgray Jan 30, 2018 •

edited

Loading