[Core] Add overflow list component #2537

invliD · 2018-05-22T18:58:41Z

This is good stuff. Check it out.
No tests or documentation yet, just an example.

blueprint-bot · 2018-05-22T19:03:19Z

Add overflow list component

Preview: documentation | landing | table

giladgray · 2018-05-22T20:00:08Z

need to add an entry in core/test/isotest.js

blueprint-bot · 2018-05-22T20:12:32Z

Refactor throttle

Preview: documentation | landing | table

blueprint-bot · 2018-05-22T20:13:53Z

Add iso test props

Preview: documentation | landing | table

giladgray · 2018-05-22T20:02:03Z

packages/core/src/common/utils.ts

+/** Throttle a method by wrapping it in a `requestAnimationFrame` call. */
+// tslint:disable-next-line:ban-types
+export function throttle<T extends Function>(method: T): T {
+    return (_throttleHelper(undefined, undefined, method as any) as any) as T;


can we fix the types of _throttleHelper while we're at this?

giladgray · 2018-05-22T20:06:46Z

packages/core/src/components/overflow-list/_overflow-list.scss

+  display: flex;
+  min-width: 0;
+
+  .#{$ns}-overflow-list-spacer {


this doesn't need to be nested, the classname is specific enough

giladgray · 2018-05-22T20:11:34Z

packages/core/src/components/overflow-list/overflowList.tsx

+            visible: props.items,
+        };
+
+        this.observer = new ResizeObserver(this.handleResize);


this constructor is entirely unnecessary. just assign public state = { overflow: [], visible: this.props.items } and initialize observer when defining it.

giladgray · 2018-05-22T20:13:03Z

packages/core/src/components/overflow-list/overflowList.tsx

+    /**
+     * Callback invoked to render the overflow if necessary.
+     */
+    overflowRenderer: (items: T[]) => React.ReactNode;


how about overflowItems to clarify that this is a subset of `items prop?

giladgray · 2018-05-22T20:21:00Z

packages/core/src/components/overflow-list/overflowList.tsx

+        } else if (this.spacer.getBoundingClientRect().width < 1) {
+            this.setState(state => {
+                const visible = state.visible.slice();
+                const next = this.props.collapseFrom === Boundary.START ? visible.shift() : visible.pop();


local var for this.props.collapseFrom === Boundary.START for legibility

giladgray · 2018-05-22T20:25:09Z

packages/core/src/components/overflow-list/overflowList.tsx

+
+    public componentDidMount() {
+        if (this.element != null) {
+            this.observer.observe(this.element);


add comment that observer invokes callback immediately to start

also need to invoke this.resize() on mount for first frame

giladgray · 2018-05-22T20:25:40Z

packages/core/src/components/overflow-list/overflowList.tsx

+    public componentDidMount() {
+        if (this.element != null) {
+            this.observer.observe(this.element);
+            this.previousWidths.set(this.element, this.element.getBoundingClientRect().width);


are these necessary?

blueprint-bot · 2018-05-22T20:38:57Z

Unnest spacer css

Preview: documentation | landing | table

llorca · 2018-05-22T20:44:30Z

packages/core/src/common/classes.ts

@@ -153,6 +153,9 @@ export const NON_IDEAL_STATE_VISUAL = `${NON_IDEAL_STATE}-visual`;

 export const NUMERIC_INPUT = `${NS}-numeric-input`;

+export const OVERFLOW_LIST = `${NS}-overflow-list`;
+export const OVERFLOW_LIST_SPACER = `${NS}-overflow-list-spacer`;


${OVERFLOW_LIST}-spacer

blueprint-bot · 2018-05-22T20:45:43Z

Remove constructor

Preview: documentation | landing | table

blueprint-bot · 2018-05-22T20:46:37Z

Clarify overflow

Preview: documentation | landing | table

blueprint-bot · 2018-05-22T20:47:45Z

Improve legibility of repartition method

Preview: documentation | landing | table

llorca · 2018-05-22T20:49:09Z

packages/docs-app/src/examples/core-examples/overflowListExample.tsx

+        if (props.href != null) {
+            return (
+                <li key={index}>
+                    <a className={Classes.BREADCRUMB}>{props.text}</a>


can't use <Breadcrumb>?

hah yeah you could

blueprint-bot · 2018-05-22T21:01:42Z

Remove extraneous element measuring

Preview: documentation | landing | table

blueprint-bot · 2018-05-22T21:02:56Z

Improve classes const definition

Preview: documentation | landing | table

blueprint-bot · 2018-05-22T21:09:23Z

Stop measuring all elements on mount

Preview: documentation | landing | table

blueprint-bot · 2018-05-22T21:13:17Z

stuff

Preview: documentation | landing | table

blueprint-bot · 2018-05-31T00:43:17Z

Update _overflow-list.scss

Preview: documentation | landing | table

giladgray · 2018-05-31T17:22:22Z

packages/core/src/components/overflow-list/overflow-list.md

@@ -1,6 +1,6 @@
 @# Overflow list

-this is cool
+`OverflowList` displays a list of items that can overflow on its own. The required `visibleItemRenderer` callback prop allows for customizing the appearance of visible items. The required `overflowRenderer` callback prop allows for customizing the rendering of collapsed items. 


"on its own" means nothing. we should clarify what causes overflowing -- specifically, resize.

blueprint-bot · 2018-05-31T17:27:41Z

Merge branch 'develop' into sb/overflow-list

Preview: documentation | landing | table

giladgray · 2018-05-31T17:29:18Z

@invliD i'm rerunning the test-react-15 build to see if these are flakes

giladgray · 2018-05-31T17:31:24Z

this could be useful... https://mochajs.org/#retry-tests

blueprint-bot · 2018-05-31T19:29:36Z

docs docs docs!

Preview: documentation | landing | table

llorca · 2018-05-31T19:30:17Z

packages/core/src/components/overflow-list/overflow-list.md

@@ -1,6 +1,19 @@
 @# Overflow list

-`OverflowList` displays a list of items that can overflow on its own. The required `visibleItemRenderer` callback prop allows for customizing the appearance of visible items. The required `overflowRenderer` callback prop allows for customizing the rendering of collapsed items. 
+`OverflowList` takes a generic list of items and renders as many items as can
+fit inside itself. Other items are collapsed into an overflow menu. The visible


Other items are collapsed into an overflow menu.

That's quite opinionated, I preferred the more generic previous wording. Can you replace overflow menu with overflow element?

llorca · 2018-05-31T19:30:48Z

packages/core/src/components/overflow-list/overflow-list.md

+The `items` prop accepts an array of generic objects. The required
+`visibleItemRenderer` callback prop determines the appearance of a visible item.
+The required `overflowRenderer` callback prop receives all overflowed items
+and renders the overflow menu or indicator.


and allows customizing the rendering of overflown items?

it's not custom though, it's required

That's not what I mean. The prop is required yes, but rendering an overflow menu or indicator isn't required. I can render a menu, a static icon, or absolutely nothing if I want to--that's what's powerful

llorca · 2018-05-31T19:31:45Z

packages/core/src/components/overflow-list/overflowList.tsx

-     * @param overflowItems The items that didn’t fit in the container.
+     * Callback invoked to render the overflowed items. The function will
+     * receive all items that do not fit in the container and should render a
+     * container for these items.


would drop and should render a container for these items. or move it to typical use cases below

blueprint-bot · 2018-05-31T19:39:16Z

revert constructor and clientWidth

Preview: documentation | landing | table

blueprint-bot · 2018-05-31T19:43:51Z

docs edits

Preview: documentation | landing | table

blueprint-bot · 2018-05-31T20:44:41Z

Update overflow-list.md

Preview: documentation | landing | table

qcharlieshi · 2018-06-06T13:44:39Z

Will this be merged back into the earlier versions such as 1.35 eventually? I would be willing to help out with that if needed

invliD · 2018-06-06T14:43:51Z

We consider this somewhat of a break due to the new required dependency on the resize observer polyfill, which is why we previously decided not to backport. I don't feel strongly either way. @giladgray?

qcharlieshi · 2018-06-14T14:55:32Z

Hmm, let me know if y'all are willing to merge it back, I'm happy to contribute if the maintainers feel like its not worth the effort. It'll be awhile before my project is upgraded to react 16 and then the subsequent blueprint versions.

As long as its not a huge issue to backport it.

giladgray · 2018-06-14T19:13:17Z

We do not back port features, ever. Only forward-porting.

Blueprint 3.0 (@next on npm) supports React 15 & 16, so nothing is stopping you @qcharlieshi!

Add overflow list component

6397f7b

giladgray self-requested a review May 22, 2018 20:00

invliD added 2 commits May 22, 2018 13:08

Refactor throttle

c898836

Add iso test props

a4c2732

giladgray suggested changes May 22, 2018

View reviewed changes

Unnest spacer css

3d8b20d

invliD added 3 commits May 22, 2018 13:41

Remove constructor

877917f

Clarify overflow

7cd0698

Improve legibility of repartition method

26aea39

llorca changed the title ~~Add overflow list component~~ [Core] Add overflow list component May 22, 2018

llorca reviewed May 22, 2018

View reviewed changes

invliD added 2 commits May 22, 2018 13:56

Remove extraneous element measuring

9ae9eb2

Improve classes const definition

4a58756

invliD added 2 commits May 22, 2018 14:04

Stop measuring all elements on mount

fcec829

stuff

0fddce3

invliD added 2 commits May 22, 2018 16:00

Add tests

412aef3

Add props to docs

68d54e9

Update _overflow-list.scss

fe43b06

giladgray reviewed May 31, 2018

View reviewed changes

Merge branch 'develop' into sb/overflow-list

e1712bd

Gilad Gray added 5 commits May 31, 2018 12:21

no need for constructor

ddd3253

inline renderItems

97632df

observer.disconnect() instead of manually unobserving each element

f009f30

clientWidth instead of getClientBB()

43975e2

docs docs docs!

649c595

llorca reviewed May 31, 2018

View reviewed changes

revert constructor and clientWidth

d796f4a

docs edits

a226afc

Update overflow-list.md

d76a0c4

giladgray approved these changes Jun 1, 2018

View reviewed changes

giladgray merged commit 3d461e8 into develop Jun 1, 2018

giladgray deleted the sb/overflow-list branch June 1, 2018 01:43

giladgray mentioned this pull request Jun 1, 2018

Tabs Expansion #2518

Closed

[Core] Add overflow list component #2537

[Core] Add overflow list component #2537

Conversation

invliD commented May 22, 2018

blueprint-bot commented May 22, 2018

Add overflow list component

giladgray commented May 22, 2018 • edited Loading

blueprint-bot commented May 22, 2018

Refactor throttle

blueprint-bot commented May 22, 2018

Add iso test props

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 May 22, 2018

Unnest spacer css

Choose a reason for hiding this comment

blueprint-bot commented May 22, 2018

Remove constructor

blueprint-bot commented May 22, 2018

Clarify overflow

blueprint-bot commented May 22, 2018

Improve legibility of repartition method

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented May 22, 2018

Remove extraneous element measuring

blueprint-bot commented May 22, 2018

Improve classes const definition

blueprint-bot commented May 22, 2018

Stop measuring all elements on mount

blueprint-bot commented May 22, 2018

stuff

blueprint-bot commented May 31, 2018

Update _overflow-list.scss

Choose a reason for hiding this comment

blueprint-bot commented May 31, 2018

Merge branch 'develop' into sb/overflow-list

giladgray commented May 31, 2018

giladgray commented May 31, 2018

blueprint-bot commented May 31, 2018

docs docs docs!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

llorca May 31, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented May 31, 2018

revert constructor and clientWidth

blueprint-bot commented May 31, 2018

docs edits

blueprint-bot commented May 31, 2018

Update overflow-list.md

qcharlieshi commented Jun 6, 2018 • edited Loading

invliD commented Jun 6, 2018

qcharlieshi commented Jun 14, 2018

giladgray commented Jun 14, 2018

giladgray commented May 22, 2018 •

edited

Loading

llorca May 31, 2018 •

edited

Loading

qcharlieshi commented Jun 6, 2018 •

edited

Loading