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-infra] Add icon to callouts #38525

Merged
merged 11 commits into from
Aug 18, 2023
Merged

Conversation

alexfauquette
Copy link
Member

@alexfauquette alexfauquette commented Aug 17, 2023

Closes #38519

This PR adds icons to the documentation callouts! We also took advantage of the opportunity to clean instances of it that were using emojis instead of the built-in icons. There might be more spread out throughout the docs ⎯ it was just a quick check.

https://deploy-preview-38525--material-ui.netlify.app/experiments/docs/callouts/

Light Dark
Screen Shot 2023-08-17 at 21 03 03 Screen Shot 2023-08-17 at 21 03 10

To-dos:

  • Put the correct SVG path in the icons (<symbols/> ids are already correct)
  • Improve the CSS (I did something crappy to highlight where CSS rules are)

@alexfauquette alexfauquette added design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product labels Aug 17, 2023
@zannager zannager requested a review from siriwatknp August 18, 2023 06:07
@alexfauquette
Copy link
Member Author

alexfauquette commented Aug 18, 2023

The <p/> color was overridden by the main style. Should be fixed with my last commit

befolre after

Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

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

Very happy with this one! Thanks for kicking it off @alexfauquette 🙏

@danilo-leal danilo-leal merged commit a863fa4 into mui:master Aug 18, 2023
['info', 'success', 'warning', 'error'].includes(token.severity)
? [
'<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon">',
`<use class="MuiCode-copied-icon" xlink:href="#${token.severity}-icon" />`,
Copy link
Member

Choose a reason for hiding this comment

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

Now on any page, these SVG get loaded. This can't be tree-shaked. e.g. view-source:https://master--material-ui.netlify.app/blog/mui-x-mid-v6-features/.

I wonder what's best. Per https://cloudfour.com/thinks/svg-icon-stress-test/, we could use inline SVG, it doesn't see much different than the symbol sprite for performance, so maybe better.

@oliviertassinari
Copy link
Member

oliviertassinari commented Aug 28, 2023

There are a few duplicated icons, e.g.

Screenshot 2023-08-29 at 00 43 32

#38689 created.

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 scope: docs-infra Specific to the docs-infra product
Projects
Status: Recently completed
Development

Successfully merging this pull request may close these issues.

[docs-infra] Support icons in callouts
4 participants