feat: ListView components by bmingles · Pull Request #1919 · deephaven/web-client-ui

bmingles · 2024-04-04T17:39:03Z

ListView components
Smart item tooltip handling (only show when text is overflowing)
Split out some shared util code from Picker
Wrapped Text, View, and Heading in forwardRef

Testing
This can be tested using this PR: deephaven/deephaven-plugins#408 . To make TypeScript happy, you can install DHC as an alpha via:

npm run update-dh-packages -- --scope=@deephaven/js-plugin-ui -- 0.72.1-alpha-list-view.38

BREAKING CHANGE: LIST_VIEW_ROW_HEIGHT number constant replaced with dictionary LIST_VIEW_ROW_HEIGHTS

mofojed · 2024-04-16T16:59:50Z

+import React, { useCallback, useState } from 'react';
+import { Grid, Item, ListView, ItemKey, Text } from '@deephaven/components';
+import { vsAccount, vsPerson } from '@deephaven/icons';
+import { Icon } from '@adobe/react-spectrum';


Should re-export this from @deephaven/components.
Any reason why the default slot isn't "illustration"?

I just picked one of the 2 supported. Is illustration preferable over icon ?

There don't appear to be any docs on this eh? I'm not sure what the difference is... illustration may actually be for an "illustrated message" whereas icon is just something inline. So maybe icon is better.
And it seems there's an Illustration as well that puts illustration in the slot, so the default slot should already be icon when using Icon. Should we be re-exporting Illustration?
Doesn't seem to be an Image component, where'd the image slot come from?

I think the illustration slot gets be added on the icons coming from @spectrum-icons/illustrations/xxxxx
https://react-spectrum.adobe.com/react-spectrum/ListView.html#complex-items

I think you are right that the default slot for Icon is 'icon'. Unfortunately the ListView has to have image or illustration vs Picker which supports icon. Maybe a Spectrum bug but not sure.

I don't think there is an Illustration component to re-export unless we were to export the @spectrum-icons/illustrations/xxxxx modules which seems to be an addon of some sort

I think the expectation is you wouldn't put decorative icons in that slot, as it would be confusing with icons in the action slot (which I think in this example overflow because there is more than one)

Where as the primary slot is for images/illustrations, not icons.

I simplified things by just defaulting to "illustration" and removing the function arg. It's just for styleguide so probably doesn't matter too much anyway except to avoid confusing folks.

I guess the lack of exporting Illustration might be an oversight:
https://github.com/adobe/react-spectrum/blob/main/packages/%40adobe/react-spectrum/src/index.ts#L32

We could file a PR with Spectrum include export {Illustration} from '@react-spectrum/icon';, but as-is we don't have access to it

Perhaps, they also don't export UIIcon. Unsure if intentional or not. Could open a PR and see how they respond.

mofojed

One package cleanup note, everything looking good otherwise.

mofojed · 2024-04-18T15:16:26Z

    "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
  },
  "dependencies": {
+    "@adobe/react-spectrum": "^3.34.1",


Should import everything from @deephaven/components, even in jsapi-components. Seems we're importing useProvider in ListView.tsx.

@mofojed hmm, we aren't re-exporting currently. Any opinions on how we want to do this? useProvider seems too generic, but useSpectrumProvider seems a bit odd since we are trying to abstract away Spectrum.

Well, you're exporting SpectrumThemeProvider, useSpectrumThemeProvider to mirror that would be fine with me.
Unsure if we want to get more abstract than that, we already have ThemeProvider.

mofojed · 2024-04-18T15:21:52Z

+  return (
+    // Images in ListView items require a slot of 'image' or 'illustration' to
+    // be set in order to be positioned correctly:
+    // https://github.com/adobe/react-spectrum/blob/784737effd44b9d5e2b1316e690da44555eafd7e/packages/%40react-spectrum/list/src/ListViewItem.tsx#L266-L267


Any reason they don't have a slot provider for icon? We could even add a PR for it... seems odd they support image and illustration but not icon.

I'm guessing @dsmmcken suggestion may be accurate here. Maybe they are trying to not overload the fact that icons can be included in actions.

Yeah, that's a key difference between listview and listbox, https://react-spectrum.adobe.com/react-spectrum/ListBox.html#complex-items

bmingles force-pushed the 1909-list-view-components branch 2 times, most recently from 281cf5d to b6d1626 Compare April 10, 2024 20:36

bmingles marked this pull request as ready for review April 10, 2024 21:02

bmingles mentioned this pull request Apr 10, 2024

feat: ListView - ui plugins deephaven/deephaven-plugins#408

Merged

bmingles requested a review from mofojed April 10, 2024 21:56

bmingles added 25 commits April 11, 2024 10:28

Generics to narrow types to item only when appropriate (deephaven#1909)

ed6ed2a

Tooltip placement override (deephaven#1909)

2219115

Rename / move PickerItemContent (deephaven#1909)

5a98665

Smarter item tooltips (deephaven#1909)

991042f

forwardedRefs (deephaven#1909)

97d7412

Basic ListView implementation (deephaven#1909)

b7f4df3

ListView table support (deephaven#1909)

9fb7de1

Fixed import (deephaven#1909)

2a04b31

Mocking virtualizer (deephaven#1909)

f566e72

generate normalized items styleguide util (deephaven#1909)

9b5a119

comments (deephaven#1909)

157e46f

Renamed callback ref (deephaven#1909)

85f87c3

useCheckOverflowRef hook (deephaven#1909)

9acfc30

renames (deephaven#1909)

4b2cd06

Changed "ref" naming to "callback" (deephaven#1909)

ebf1598

cleanup (deephaven#1909)

55d0fc2

Cleanup (deephaven#1909)

9f4c1fb

ItemSelection type (deephaven#1909)

c964da7

Item heights (deephaven#1909)

a111d5a

Only render ListView when non-zero height (deephaven#1909)

d488c92

Removed minHeight (deephaven#1909)

dac492f

Removed unused arg (deephaven#1909)

f2be02b

useContentRect tests (deephaven#1909)

c7ecd14

Updated comments (deephaven#1909)

663a965

Comments (deephaven#1909)

195c42c

bmingles added 12 commits April 11, 2024 10:28

Comments (deephaven#1909)

055f953

useRenderNormalizedItem tests (deephaven#1909)

8d382b5

Fixed useContentRect to update automatically (deephaven#1909)

91deda8

e2e tests (deephaven#1909)

962f64c

Item key stringify tests (deephaven#1909)

599902d

Re-use SelectionT (deephaven#1909)

5fd74dd

cleanup (deephaven#1909)

5b7d5a2

cleanup (deephaven#1909)

4851669

Fixed tests (deephaven#1909)

36d4134

useCheckOverflow Tests (deephaven#1909)

ae099ca

Cleanup (deephaven#1909)

342b24c

Added test case (deephaven#1909)

a65e539

bmingles force-pushed the 1909-list-view-components branch from 8e4f053 to a65e539 Compare April 11, 2024 15:28

mofojed requested changes Apr 16, 2024

View reviewed changes

Addressed review comments (deephaven#1909)

95a4744

bmingles requested a review from mofojed April 16, 2024 20:23

Simplified illustration example (deephaven#1909)

383b98c

mofojed requested changes Apr 18, 2024

View reviewed changes

Export spectrum useProvider (deephaven#1909)

fb8e4a1

bmingles requested a review from mofojed April 18, 2024 18:31

Removed spectrum dependency (deephaven#1909)

4feb7d9

bmingles mentioned this pull request Apr 18, 2024

refactor: Updated spectrum imports to use dh components deephaven/deephaven-plugins#424

Merged

mofojed approved these changes Apr 19, 2024

View reviewed changes

bmingles merged commit b63ab18 into deephaven:main Apr 19, 2024

github-actions Bot locked and limited conversation to collaborators Apr 19, 2024

bmingles deleted the 1909-list-view-components branch April 19, 2024 14:09

bmingles linked an issue Apr 26, 2024 that may be closed by this pull request

ListView - React components in support of ui.list_view #1909

Closed

Conversation

bmingles commented Apr 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bmingles Apr 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bmingles Apr 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mofojed left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bmingles commented Apr 4, 2024 •

edited

Loading

bmingles Apr 18, 2024 •

edited

Loading

bmingles Apr 18, 2024 •

edited

Loading