Layout and orientation props for RAC GridList?

[jaknas]

Hello 👋

I recently saw that layout and orientation support was merged for ListBox component. It allows to create 2D grid-like structure, which I was interested in using.

Unfortunately (for me), it only covers ListBox component. In my use-case, I intend to use GridList which would allow me to place interactive content like buttons inside an item. Among others, this would require changing the current keyboard behavior to introduce Enter/Space for selecting (entering into) a singular grid item.

I'd like to ask

1. Is there a plan to introduce 2D grid layout option for GridList?
2. If I were to implement something like that, do you have any pointers where to start? I'd probably look at Add layout and orientation props to RAC ListBox #4669 and try to implement similar features for GridList, with additional behavior like entering into singular grid item (I'd have to break current checkbox selection behavior, but I'm ok with this for my use-case)

[LFDanLu]

Is there a plan to introduce 2D grid layout option for GridList?

Not that I know of, but I'll defer to @devongovett here.

If I were to implement something like that, do you have any pointers where to start? I'd probably look at #4669 and try to implement similar features for GridList, with additional behavior like entering into singular grid item (I'd have to break current checkbox selection behavior, but I'm ok with this for my use-case)

That PR is definitely a good place to start. If you don't need to support drag and drop at all, you won't need to dive into the DropTargetDelegates or useDroppableCollection which should simplify the changes required. useGridListItem and useSelectableCollection is responsible for much of the focus navigation on keypress within the item and in the list respectively and would probably need to be modified to support the change to make Enter/Space "enter" the item. useSelectableItem handles item/row selection and will need to be modified as well.

That being said, I want to share #2328 and #2605. We had a similar idea for TableView navigation + editing fields within the TableView as you have here, aka using Enter to "enter" a table cell that has interactive elements and otherwise just skipping the cell's internals if we weren't in edit mode. However, there were concerns that this behavior wasn't intuitive enough (how does a user know to hit Enter to "enter" a cell) and questions around what should happen if the user clicks onto the cell's interactive element directly (would they get confused if edit mode was enabled then? would they know to hit escape to restore standard grid navigation?).

CardView had a similar issue where we initially had the right arrow navigate through each of a Card's focusable elements first before moving to the next card to the right
(see https://reactspectrum.blob.core.windows.net/reactspectrum/356784258397cca555fdb94be98aa5368ff3ee59/storybook/index.html?path=/story/cardview-grid-layout--dynamic-cards for an example). Implementing edit mode for the CardView however was also deemed a bit confusing and arduous since the user would have to hit Enter to "enter" the focused card -> hit enter/navigate to the checkbox to select the card -> exit edit mode and repeat the steps again for another card. In the end, we opted to get rid of the focusable elements within each card and leverage a bulk action bar instead: https://reactspectrum.blob.core.windows.net/reactspectrum/0d88676896a88bf18ff4c15503319c3d2a514b06/docs/react-spectrum/CardView.html#card-actions.

Just some things to consider, lemme know if you had any thoughts on the above, we'd definitely would be interested in any alternative interaction patterns that you may have since we haven't finalized these patterns ourselves.

[jaknas]

Thanks for the elaborate response @LFDanLu. Right now we've chosen to go with the same navigation as GridList. So there's no way to jump between css grid rows, and the only way to get there is with down/up arrows. We decided it should be the least confusing (debatable of course and might get take some time to get used to it)

[Niznikr]

Thanks for the work on #6486. I think an orientation prop similar to ListBox would still be useful in GridList to allow horizontal arrow keys for drag-n-drop. We have items arranged horizontally in our case but can't use ListBox as the items contain interactive elements. I could set a custom dropTargetDelegate for the dragAndDropHooks and pass that to GridList but I'm not sure how to pass RAC GridList's state collection to new ListDropTargetDelegate. Any tips?

[LFDanLu]

Hi, sorry about the late reply. The team is currently working on supporting a CardView experience that will have drag and drop so I'll have a better suggestion on how best to handle this as that work progresses. If you'd like, mind filing an issue so it can be more publicly tracked?