Skip to content
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

[docs] Update callouts design #35390

Merged
merged 6 commits into from Dec 13, 2022
Merged

[docs] Update callouts design #35390

merged 6 commits into from Dec 13, 2022

Conversation

danilo-leal
Copy link
Contributor

@danilo-leal danilo-leal commented Dec 8, 2022

In light of Sam's recent callout content standardization (#35361), thought about doing some light updates on their design. It's worth highlighting the info variant, that now it's way more subtle & grayish, which is to be different from the code block. @siriwatknp one interesting upgrade we should think about doing is displaying icons by default⎯just a container with text seems not enough to stand out on the documentation block of text, and the icons might help exactly with that!

Preview link:
https://deploy-preview-35390--material-ui.netlify.app/experiments/docs/callouts/

@danilo-leal danilo-leal added docs Improvements or additions to the documentation design This is about UI or UX design, please involve a designer labels Dec 8, 2022
@gerdadesign
Copy link
Member

Looking good! Is there any way to force the emoji version to show up instead of the text version?

Text Emoji
V1 V2

@siriwatknp
Copy link
Member

@danilo-leal Sounds good. How about adding -icon at the end to show the default icon?

:::info-icon
Some content
:::

cc @samuelsycamore

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, you might want to remove the .gitignore change 😅.

@samuelsycamore
Copy link
Member

@danilo-leal Sounds good. How about adding -icon at the end to show the default icon?
cc @samuelsycamore

That's a great idea! I was thinking it would be nice to have the option not to include an icon in certain situations.

@danilo-leal
Copy link
Contributor Author

Sweet, totally agree with both having the icons and the optionally of not having them for specific use-cases 👍
@siriwatknp .gitignore removed!

@mui-bot
Copy link

mui-bot commented Dec 9, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-undefined--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 24a3a64

@siriwatknp
Copy link
Member

@danilo-leal Sounds good. How about adding -icon at the end to show the default icon?
cc @samuelsycamore

That's a great idea! I was thinking it would be nice to have the option not to include an icon in certain situations.

@samuelsycamore Me too, but then we need to change all of the current callouts to not include the icon which will be a huge PR.

@danilo-leal
Copy link
Contributor Author

@siriwatknp Let me know when this PR is ready to go! The icons should probably be implemented in a separate one 😬

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 LGTM. I pushed an update for the alpha color.

@danilo-leal danilo-leal merged commit 91c25c9 into master Dec 13, 2022
@danilo-leal danilo-leal deleted the callouts-design-bump branch December 13, 2022 12:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants