-
-
Notifications
You must be signed in to change notification settings - Fork 317
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
[Toolpad Editor] Add themes docs link to theme panel #2583
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking great, thank you!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great to see more links to the docs from the UI!
@@ -97,6 +101,13 @@ export default function ComponentPanel({ className }: ComponentPanelProps) { | |||
)} | |||
</TabPanel> | |||
<TabPanel value="theme" className={classes.panel}> | |||
<Typography className={classes.themesDocsLink} variant="body2"> | |||
Customize the app with a MUI theme. Read more about this in the{' '} | |||
<Link href="https://mui.com/toolpad/concepts/theming" target="_blank" rel="noopener"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a 301, slowing down the page load speed.
<Link href="https://mui.com/toolpad/concepts/theming" target="_blank" rel="noopener"> | |
<Link href="https://mui.com/toolpad/concepts/theming/" target="_blank" rel="noopener"> |
Fixed in ddffda5
@@ -97,6 +101,13 @@ export default function ComponentPanel({ className }: ComponentPanelProps) { | |||
)} | |||
</TabPanel> | |||
<TabPanel value="theme" className={classes.panel}> | |||
<Typography className={classes.themesDocsLink} variant="body2"> | |||
Customize the app with a MUI theme. Read more about this in the{' '} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's uses Material UI:
Customize the app with a MUI theme. Read more about this in the{' '} | |
Customize the app with a Material UI theme. Read more about this in the{' '} |
Fixed in ddffda5
Closes #2561
This PR targets to add docs link to the theme panel which will allow users to directly jump to the right docs from the tool itself.
Usage :
Added Typography with variant as "body2" as it was looking perfect , body1 look inconsistent and larger in the side panel.
Imported and added Link component which points to the Docs page which opens in new page with rel "noopener"
Screenshots
Dark Mode without theme selector :
Dark Mode with theme selector :
Light Mode without theme selector :
Light Mode with theme selector :