Refine tabbed-dialog prototype and define component composition #1160
Conversation
This file contains 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
Generalize the import/export UI prototype's tabbed-dialog pattern and loosely define the constituent components within the prototype page component.
acelaya
approved these changes
Jul 20, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR extends the import/export project's tabbed-dialog prototype page and starts coalescing the composition of components. It also adjusts tab sequence/navigation in a way that might address #1158 without the need for extra work.
The prototype is still loose, but these constituent components are bubbling up:
TabListHeader: Bakes the design pattern layout of a horizontal set of tabs at the top of a panel/cardTabPanel: At present, combines both the design pattern of tab-panel content within a card/panel and some a11y details.CloseButton: Proposed, a styled button that I'd like to make context-aware for its click handler.Divider: Ultra-simple component, cribbed from MUI, that I'd like to use in place of border-underlines and whatnot in components in the future.The needed changes to
Dialogare also solidifying:variantprop, default topanel(supports current usage) with acustomoption (so thatDialogis not concerned with the presentation of its contents). Inelegant, but seems to allow us what we need to do here without breaking the current API. The long-term direction would be to migrate usage tocustomacross apps and then get rid ofvariant. Still percolating on this.CloseableContextor similar that could be used byDialogand potentially other components that can be "closed". Put a close handler (that takes transitions into account as needed) into this context. Context-aware things such as the proposedCloseButtoncould take this into account.This PR doesn't need deep review (beyond what the reviewer would like to review), as it's still all prototype.
Next steps: Start building extracted components, update
Dialog.Part of #1141