DataViews: support the "Minimal UI" story by using DataViews.Footer
#71276
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. |
oandregal
added
[Type] Enhancement
|
Were you convinced or is this mostly to ensure my comment is addressed. (Because I can be convinced otherwise too) :) |
Not sure if you saw #71173 (comment) ? Not fully convinced, but I'm fine with asking people to do this for now. It comes with its own issues, but we can bring back this if "free form" becomes too much of a hurdle for this. I wasn't fully convinced of adding the |
|
Flaky tests detected in bad6ff2. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17230383099
|
oandregal
force-pushed
the
update/minimal-ui-story
branch
from
c99cc0a to
3326875
Compare
| @@ -292,5 +289,6 @@ DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu; | |||
| DataViewsSubComponents.Pagination = DataViewsPagination; | |||
| DataViewsSubComponents.Search = DataViewsSearch; | |||
| DataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown; | |||
| DataViewsSubComponents.Footer = DataViewsFooter; | |||
There was a problem hiding this comment.
I've exported Footer as a subcomponent, as Jay suggested. I don't think I have a calibrated instinct to say if this is a good idea or not. It's better than having to use the classes, agree to that. Though I'm not sure at which point we stop making DataViews components public API. All things considered, I'm fine with going ahead with this.
|
@youknowriad I've updated this with Jay's suggestion. How do you feel about this now? |
oandregal
changed the title
DataViews.Footer
|
Edit: I figured this is a breaking change of a breaking change. That's unfortunate. Now that we're here, it's better to handle it properly, so consumers have the heads-up and nothing breaks (this PR will force a 8.0.0 release). |
oandregal
force-pushed
the
update/minimal-ui-story
branch
from
36257ae to
0a13278
Compare
oandregal
force-pushed
the
update/minimal-ui-story
branch
from
0a13278 to
bad6ff2
Compare
* Create DataPicker component as a sibling to DataViews Update prop handling Add foundational parts for DataPicker component Add some initial styles a parts of the dataview UI (search, filters, pagination) Add aria properties Refactor layout to separate component Implement basic active descendent handling Refactor active index Fix Voiceover moving focus outside listbox Add focus ring Fix incorrect active descendent when paginating Beginnings of selection Make the description an aria-description Add correct padding around grid Improve selection style Allow selection across pagination Match grid sizing of grid dataview Use ariakit instead of custom active descendent implementation Use focus-visible for focus rings Clarify comment Only show focus outline when an active descendant is not set Handle multi-selection Add aria label to listbox Add controls Use aria-selected instead of aria-checked, the latter is not announced by voiceover Add no results / loading indication Disable finish button when no items selected Add more footer furnishings Rearrange footer Only show select all checkbox for multiselections Revert export of dataviews types Adopt responsive image changes * Remove DataPicker components * Add simple isPicker prop to dataviews, and use it to start configuring a picker mode in the grid layout Handle item selection in picker mode. - Ensure none of the other normally focusable elements in items are present. - Add a click handler for selection of items. Add aria-selected attribute to items Allow selection across pages Change configuration to an object and support isMultiselectable and label props Support grouped grid layout correctly and rework styles to ensure dataviews class is at top level Fix selection not visible unless dataview has a bulk action Set posinset and setsize Ensure story is paginated Make label a separate prop Try using bulk actions for multiselection Support single selection actions in footer when picking Hide multiselection checkbox when in single selection picker mode Allow actions to receive selection across pages Show text buttons for actions when in picking mode Simplify naming Remove outdated comment Allow selection count to show correctly across pagination when picking Make bulk selection checkbox only partially remove selection in picking mode Update perPageSizes to use config in story Revert back to HTMLDivElement for type of ref Remove the forgotten LOC Update comments based on suggestions from code review Co-authored-by: Andrew Serong <[email protected]> Rename to `isMultiselectPicker Memoize isItemClickable and call it fewer times Add infinite scroll toggle to picker story Disallow coexistence of grouping and infinite scroll Tidy up ids / classnames Add docs for picking mode Change the `picking` prop to `picker` Fix issue where single selection picker actions do not appear in footer when view is not paginated Add tests for dataviews picker mode Refine footer rendering logic Remove empty line Add detail about actions callbacks Add CHANGELOG entries * Split into separate components * Limit the type of views that can be provided to DataViews and DataViewsPicker to only the relevant types * Switch to isPicker prop in the view layout config for filtering view types * Fix type name * Share layout component between picker and regular dataviews * Fix story and broken css * Extract grid styling to a shared component * Switch back to a single View type * Fix config type after rebase * Use context for `isPicker` rather than a prop to the layout component. Filter available layouts in switcher component. * Remove todo from test * Allow custom content in footer and use multiselect property of picker prop to denote multiselection * Adjust footer styling and update story * Update tests * Use actions API * Make a controlled selection required for DataViewsPicker * Update docs * Add changelog entry * Fix BulkSelectionCheckbox * Share the PreviewSizePicker between grid and pickerGrid * Undo change to defaultLayouts * Tidy up main DataViewsPicker component * Remove extra tab stop on fields caused by tooltip * Remove note about importing DataViews * Remove picker internal selection state * Align footer buttons to the right * Update action button style. Make non-primary button a tertiary variant. Reorder in story to match WordPress dialog button ordering * Align bulk selection to the left on mobile * Remove outdated comment * Remove change that was reverted in trunk after components diverged (see #71276) * Remove selection property from action type * Remove promise return type from ActionButton * Remove unused props for picker * Limit actions to ActionButton via type * Update wrapper classname * Filter picker/non-picker layouts in main DataViews components * Move label prop to DataViewsPicker instead of View * Rename label to itemListLabel * Add missing changes to ViewPickerBaseProps * Update label name in docs ---- Co-authored-by: talldan <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: mcsf <[email protected]> Co-authored-by: oandregal <[email protected]>
What?
Follow-up to #71173 that removes the ability to hide the config. It still leaves the
config.perPageItemsinstead of having it as a top-level DataViews option.Why?
See feedback.
How?
configprop cannot longer be false.DataViews.Footercomponent (see).Testing Instructions
Visit the storybook (
npm install && npm run storybook:dev).