DataViews: Expose FiltersToggled subcomponent. #71907
Conversation
|
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. |
| @@ -0,0 +1,73 @@ | |||
| /** | |||
There was a problem hiding this comment.
Just noting that all these files are not new, this is just the exact same previous components that were defined in a single file, I split them into dedicated files for clarity.
priethor
left a comment
priethor
left a comment
There was a problem hiding this comment.
Works as expected and implementation LGTM
| const { isShowingFilter } = useContext( DataViewsContext ); | ||
| if ( ! isShowingFilter ) { | ||
| return null; | ||
| } | ||
| return <Filters { ...props } />; |
There was a problem hiding this comment.
So, the relevant change in this PR (other than splitting files) is creating this FilterToggled component, that handles the filters visibility without having to expose the DataViews context to the consumer. Is that correct?
Can we update the Filters component instead to handle this? When is it useful having a Filters component that doesn't handle it?
There was a problem hiding this comment.
Can we update the Filters component instead to handle this?
No we shouldn't because if you want to say render the "Filters" in a sidebar in your own implementation of DataViews, you can't use this with FiltersToggled, FiltersToggled is meant to be used in conjunction with FiltersToggle. The only other alternative is to actually remove FiltersToggle and let users implement it adhoc. I thought it's a nice shortcut for now, so I kept it.
There was a problem hiding this comment.
I see. Though In that case, consumers need to create their own "toogle" because FiltersToggle will respond to clicking by changing its style from "pressed" to "not pressed", but the filters will still be visible.
There was a problem hiding this comment.
Yes, exactly, and FitltersToggle is already exposed btw, and it just doesn't work on its own.
There was a problem hiding this comment.
In other words, either you use both together (FiltersToggle and FiltersToggled) or you don't use any (Filters)
What?
Closes #71773
This PR exposes the
FiltersToggledsubcomponent to enable more flexible composition of DataViews filters interfaces. The component conditionally renders filters whenisShowingFilteris true, allowing developers to position filters in custom layouts. It works in coordination withFiltersTogglecomponent. One component sets the state and the other one uses it.I kept the exiting Filters exposed for advanced layouts without toggle.
Testing Instructions
npm run storybook:devFiltersToggledcomponent appears/disappears in the custom layout