Skip to content

Add titleNode prop to @jbrowse/core/ui/Dialog #5039

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 21, 2025
Merged

Conversation

cmdcolin
Copy link
Collaborator

This allows users to provide instance of a ReactNode, e.g. render a custom component into the title area of the Dialog

I used this in a plugin to provide a "Help button" next to the title

I avoided actually allowing the "title prop" to be a ReactNode, because the title specifically a string in MUIDialogProps, and it does not like being overridden with something different. While that type is not necessarily 'sacrosanct', it seemed like it was better to just extend it with a new prop, named titleNode, instead of replacing title with something different.

note that changing title prop would also not be backwards compatible either, because a titleNode would not pass older versions of JBrowse passing title through the SanitizedHTML, so by doing things this way, it is a bit more backwards compatible if components supply both title and titleNode

I used the term titleNode to refer to the type React.ReactNode

@cmdcolin
Copy link
Collaborator Author

example screenshot of a dialog title using the custom titleNode with help button

without this PR, users would either have to replace the entire header with a custom component or just settle with title being a plain string, which wouldn't be able to add e.g. a custom help button

image

@cmdcolin cmdcolin merged commit f4293b4 into main May 21, 2025
4 checks passed
@cmdcolin cmdcolin deleted the dialog_helpcomponent branch May 21, 2025 02:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant