Related - Try using DataViewsPicker in an updated media modal
What problem does this address?
One of the main use cases for DataViewsPicker will be using it within a modal, so it's important for it to look and behave well in a Modal.
At the moment there are some styling issues that could be resolved and it'd be good to add a story demonstrating the picker in a modal:
DataViews sticky footer doesn't work in a modal
This root cause of this is reported here - Modal: When 'fill' size is used it's difficult to make content take up the full height of the modal
Modals have an inner div that wraps content, and this doesn't work well with the sticky footer, I think because it has its own overflow and doesn't take up the full height of the modal.
DataViewsPicker has extra padding when used in a Modal
All of the main components that make up DataViews/DataViewsPicker have extra padding around them, when placing in the Modal which also has its own padding around content, it results in a lot of empty space.
In the following screenshot you can see it causes the modal's header to be misaligned with the content:
It should perhaps instead look more like this (padding removed from DataViewsPicker's components):
Perhaps DataViewsPicker can adopt similar behavior to how DataViews works in a Card (https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataviews--with-card) and automatically reduce its own padding. Or it doesn't have the padding to begin with?
Related - Try using DataViewsPicker in an updated media modal
What problem does this address?
One of the main use cases for DataViewsPicker will be using it within a modal, so it's important for it to look and behave well in a Modal.
At the moment there are some styling issues that could be resolved and it'd be good to add a story demonstrating the picker in a modal:
DataViews sticky footer doesn't work in a modal
This root cause of this is reported here - Modal: When 'fill' size is used it's difficult to make content take up the full height of the modal
Modals have an inner
divthat wraps content, and this doesn't work well with the sticky footer, I think because it has its own overflow and doesn't take up the full height of the modal.DataViewsPicker has extra padding when used in a Modal
All of the main components that make up DataViews/DataViewsPicker have extra padding around them, when placing in the Modal which also has its own padding around content, it results in a lot of empty space.
In the following screenshot you can see it causes the modal's header to be misaligned with the content:
It should perhaps instead look more like this (padding removed from DataViewsPicker's components):
Perhaps DataViewsPicker can adopt similar behavior to how DataViews works in a
Card(https://wordpress.github.io/gutenberg/?path=/story/dataviews-dataviews--with-card) and automatically reduce its own padding. Or it doesn't have the padding to begin with?