DataViews can render custom empty states with an empty prop - #70637
DataViews can render custom empty states with an empty prop#70637p-jackson wants to merge 2 commits into
empty prop#70637Conversation
p-jackson
added
[Type] Enhancement
| > | ||
| <p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p> | ||
| { isLoading ? ( | ||
| <p> |
There was a problem hiding this comment.
I was careful here to keep the <p> around the <Spinner>. But I'm not sure how useful it actually is. You can see the extra margin the <p> provides in storybook, but that's because the data views in storybook do not stretch vertically.
In practice, the loading states within Gutenberg are centred which makes the margin from the <p> useless.
With <p> |
Without <p> |
|---|---|
 |
 |
| onChangeView={ setView } | ||
| actions={ actions } | ||
| defaultLayouts={ defaultLayouts } | ||
| empty={ <p>Nothing found, add some data to your dataview.</p> } |
There was a problem hiding this comment.
Realistic usage will probably look like this
| empty={ <p>Nothing found, add some data to your dataview.</p> } | |
| empty={ view.search ? ( <p>Search returned nothing.</p> ) : ( <p>No data.</p> ) } |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
bfe28f8 to
acdfd05
Compare
|
Flaky tests detected in acdfd05. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/16212428780
|
|
I'm working on a more fully-featured empty state for dataviews. Rather than allowing a generic slot in which to put anything. WIP #70867 |
2 participants
What?
Related to #61442
Adds an
emptyprop to theDataViewscomponent. It allows data views to render a custom empty state.This doesn't fully resolve #61442 because IMO that issue is proposing changes to the design system. This PR is a way of facilitating that, but it doesn't actually do the work of designing a new empty state.
Why?
As is noted in #61442, sometimes it is useful to have more context in the empty state. Here is an example from outside of Gutenberg which is using
<DataViews>as a component. In general, providing buttons with "next steps" would be useful. HoweverBy allowing the user of
<DataViews>to provide an arbitrary empty state they can use as much context as they like when creating their element. They can also have whatever logic they want to determine whether the view empty because their is no data, or empty because of the filtering.It also doesn't rule out using a standard design in the future. If we settle on a design then the
emptyprop would be used likeempty={ <DataViews.EmptyState { ... } /> }An alternative for package users would be to use the
<DataView>in "free composition" mode—replacing the inner parts of the data view when there is no data there.How?
This PR allows the user of a
<DataViews>to pass in an arbitrary custom empty state.I considered using a slot for providing the empty state, but the idea here is that the empty state would be customised on a per-dataview basis. This isn't a way to allow plugins to modify every dataview's empty state. It also matches how the
headerprop works, which also doesn't use a slot.I didn't add the
emptyprop to theDataViewsContextbecause it doesn't feel like it needs to be drilled down that far. The leaf-most components aren't going to need access to it.Testing Instructions
In storybook
DataViews > EmptystoryDataViews > Custom Empty StatestoryIn the site editor
gutenberg/packages/edit-site/src/components/post-list/index.js
Line 412 in 7db8f38
Testing Instructions for Keyboard
No changes to the UI, however custom empty states will need to be accessible.