Extract project components; add ConfirmDialog - #149
Draft
microbit-matt-hillsdon wants to merge 3 commits into
Draft
Extract project components; add ConfirmDialog#149microbit-matt-hillsdon wants to merge 3 commits into
microbit-matt-hillsdon wants to merge 3 commits into
Conversation
The pieces of a "your projects" page that ml-trainer and the Python Editor prototype had each written, lifted from ml-trainer with the app-specific parts turned into props: - ProjectCard: actions row (optional selection checkbox, more menu with open, rename, duplicate and delete, hidden skip-to-toolbar link for keyboard users), the app's own content in the middle, the name as the card's link and when it was last modified. Apps pass a ProjectSummary (id, name, timestamp) or a superset. - ProjectsToolbar, SearchInput, SortInput: the controls above the grid. - NameProjectDialog and ConfirmDialog. - useProjectActions: the rename, duplicate and delete flows behind the card menus and the toolbar. Renders the two dialogs, tracks which project is being acted on and returns focus to the menu button that opened a dialog. The app supplies what each action does and logs what it wants. - rankProjects, sortProjects and useProjectSelection for the list state, with the app supplying secondary search terms (file names, action names). formatTimeAgo for the card's relative time. Page layout, the grid, the home page carousel and where the toolbar sits at each width stay app-side; the "Projects page example" story shows one composition. Short-viewport tweaks that used ml-trainer's own Panda condition go through the card's bodyCss prop rather than into the shared code.
A confirm dialog is a standard overlay, not a project thing: ml-trainer uses it for settings and data samples as well, and the Python Editor has its own. It now sits beside Modal, with the Cancel string, and shows under Overlays in Storybook. ui-patterns uses it from there. The peer ranges of ui-patterns and ui-carousel move to the next @microbit/ui minor, which this needs.
- Separate onRename and onDuplicate callbacks on ProjectCard and ProjectsToolbar, and rename/duplicate on the hook, instead of one callback with a "rename" | "duplicate" discriminator that leaked the shared dialog's implementation into every caller. - The card passes its menu button to the action callbacks instead of exposing a setFinalFocusRef prop; the hook hands it to the dialog to return focus to, since the menu has closed by then. - The card's relative time is a <time> element with the ISO datetime and the full date as its title, so hover and assistive tech can get the exact date. - SearchInput is type="search" for the searchbox role, with WebKit's native clear button hidden in favour of ours.
Deploying ui with
|
| Latest commit: |
e7d472a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2860d87c.ui-2wg.pages.dev |
| Branch Preview URL: | https://project-components.ui-2wg.pages.dev |
| }, | ||
| "peerDependencies": { | ||
| "@microbit/ui": "^0.4.0", | ||
| "@microbit/ui": "^0.5.0", |
Contributor
Author
There was a problem hiding this comment.
This is a bit weird but OK, we'll have to release ui-v0.5.0 first then ui-patterns-0.7.0.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.