DataViews: add actions to list layout #60805
Conversation
oandregal
added
[Type] Enhancement
|
Size Change: -1.72 kB (-0.1%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
#59637 introduced arrow-key navigation for the list items. I don't remember the details, but my expectation was that there was a single tab stop for the list items (the whole item) and the actions button (called details button at the time) was reachable via arrow keys (right/left). Code changed a bit since and this PR re-introduces the actions button, though it's not working as I expected (note how the tab navigation actually goes into the action button and right-left arrow keys don't work): Gravacao.do.ecra.2024-04-17.as.11.37.30.movCompare with the editor's list view behaviour: Gravacao.do.ecra.2024-04-17.as.11.43.53.mov |
oandregal
force-pushed
the
add/actions-to-list-layout
branch
from
684cd5d
to
2f42280
Compare
|
By adding a second
According to the AriaKit's docs for Composite, two-dimensional navigation works by using the following (we use a store instead of a CompositeProvider): <Composite store={store}>
<CompositeRow>
<CompositeItem>Item 1.1</CompositeItem>
<CompositeItem>Item 1.2</CompositeItem>
</CompositeRow>
<CompositeRow>
<CompositeItem>Item 2.1</CompositeItem>
<CompositeItem>Item 2.2</CompositeItem>
</CompositeRow>
</Composite>That's our basic structure, though we use the render prop to control what's rendered for the CompositeItem: <Composite store={store}>
<CompositeRow>
<CompositeItem>Item 1.1</CompositeItem>
<CompositeItem render={<button>Item 1.2</button>} />
</CompositeRow>
<CompositeRow>
<CompositeItem>Item 2.1</CompositeItem>
<CompositeItem render={<button>Item 2.2</button>} />
</CompositeRow>
</Composite>This is all well, and works as expected (codesandbox demo): Gravacao.do.ecra.2024-04-30.as.14.10.23.movHowever, this stops working as soon as the Pinging some of the @WordPress/gutenberg-components minds for feedback. |
|
Hi there @oandregal 👋 😄 I want to help. Two questions:
cc @mirka as I believe you were looking into this. I could take a look and try to fix this in Ariakit's side. |
|
Hi @DaniGuardiola thanks for offering help :) Just this morning was tinkering with the example Lena shared in slack using only Ariaki components, and modified it so it has multiple rows. It demonstrates how Menus don't work well with composite (or there's some config that I'm missing). I've looked into Ariakit's Github, and didn't find any issue for this. The only issue related to composite is ariakit/ariakit#3170 created by Andrew, but it's a bit different one. Issue created upstream at ariakit/ariakit#3768 |
| actions, | ||
| data, | ||
| fields, |
There was a problem hiding this comment.
This is just sorting the props alphabetically.
| @@ -175,14 +175,14 @@ function GridItem( { | |||
| } | |||
|
|
|||
| export default function ViewGrid( { | |||
| actions, | |||
There was a problem hiding this comment.
This is just sorting the prop alphabetically.
| actions={ actions } | ||
| data={ data } | ||
| fields={ _fields } |
There was a problem hiding this comment.
Sorts the props alphabetically.
oandregal
force-pushed
the
add/actions-to-list-layout
branch
from
2f42280
to
f377520
Compare
|
As per the conversation at ariakit/ariakit#3768 and this example by Dani https://stackblitz.com/edit/vitejs-vite-p27qhy?file=src%2FApp.tsx&terminal=dev there seems to be a way to make two dimensional arrow key navigation work with Ariakit's components. Specifically, this bit is the key: <Ariakit.CompositeRow>
<Ariakit.CompositeItem render={<button>Button</button>} />
<Ariakit.MenuProvider>
{/* here, CompositeItem has precedence and pressing arrow down
goes downwards in the 2d composite as expected */}
<Ariakit.CompositeItem
store={store}
render={<Ariakit.MenuButton>Menu</Ariakit.MenuButton>}
/>
<Ariakit.Menu>
<Ariakit.MenuItem>Hello</Ariakit.MenuItem>
</Ariakit.Menu>
</Ariakit.MenuProvider>
<Ariakit.CompositeItem render={<button>Button</button>} />
</Ariakit.CompositeRow>Gravacao.do.ecra.2024-05-08.as.14.11.31.movI'm looking into how we can achieve the same with the existing |
|
Sharing my ongoing work, as per the slack conversation. In dc0f82d I switched to use the underlying Ariakit components directly, and it's working: Gravacao.do.ecra.2024-05-08.as.16.26.14.movOf course, we want to use the |
| onSelectionChange, | ||
| selection, | ||
| id: preferredId, |
There was a problem hiding this comment.
Removing it because it's not used.
|
Using the <Ariakit.MenuProvider>
<CompositeItem
store={ store }
render={
<Ariakit.MenuButton>Menu</Ariakit.MenuButton>
}
/>
<Ariakit.Menu>
<Ariakit.MenuItem>Hello</Ariakit.MenuItem>
</Ariakit.Menu>
</Ariakit.MenuProvider> |
|
I'm not sure why we want to use wordpress components here. Are the styles the exact same? These components are little more than themed and slightly more abstracted Ariakit components, not necessarily meant to be low-level. I think using Ariakit components here directly is fine unless you need to reuse a significant mount of styles from the wordpress component in question. Edit: I think I misunderstood what's being done here. Is this DataViews component supposed to be composed with other components by its consumer? |
|
As of f10e368 I've got it working with Gravacao.do.ecra.2024-05-08.as.17.18.50.movIt's not complete, I need to add support for primary actions, verify everything is working properly, etc. Also see if there's ways to modify |
As far as my understanding goes, using Ariakit directly is not allowed — there's even lint rules that prevent you from committing if you do so. I'm not sure why this is. Anyway, I've got this PR working with |
This is correct and very intentional. The |
|
Interaction-wise, this is working now with every kind of action (modal & non modal): Gravacao.do.ecra.2024-05-09.as.11.11.09.movI still have to test all action flows and verify that everything works properly. I'm also looking for opportunities to improve the existing code now that it's working, so things can change a bit code-wise. @youknowriad @jameskoster While I do that, I'd welcome feedback on the following:
The original issue suggested only Edit #59659 and that sounds good to me, but I wanted to double check. I plan to implement this in consumer-land, not as a new dataviews API: this is, the Pages component will change the primary actions depending on layout. |
| @@ -401,6 +401,7 @@ | |||
| li { | |||
| margin: 0; | |||
| cursor: pointer; | |||
| border-top: 1px solid $gray-100; | |||
There was a problem hiding this comment.
Move the border to the topmost HTML element. The .dataviews-view-list__item only targets the item but not the actions.
Edit as the only primary action makes sense but I actually wonder about adding more things to think about from a consumer's perspective. What if we just say: The list action can only have one primary action and it's always the first action? |
| primaryField?: NormalizedField; | ||
| store: any; |
There was a problem hiding this comment.
Unsure if there's a better way to type this https://ariakit.org/reference/use-composite-store
There was a problem hiding this comment.
I wouldn't be opposed to that, but I also don't mind keeping all primary actions visible for consistency with table layout, so long as we tweak the visuals a little: 
|
Part of #59659 and #55083
Follow-up to #59637
WORK IN PROGRESS
What?
This PR adds support for actions in list layout, which is only enabled for Pages and Templates as of now:
This PR also enables two-dimensional arrow-key navigation:
Gravacao.do.ecra.2024-05-09.as.11.11.09.mov
Why?
We want to make them available. See #59659
How?
actionsprop that any other layout is using to the list view layout.Testing Instructions
TODO / Questions