[docs][material-ui] Format key prop JSDoc description in Snackbar component code correctly
#38603
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
…ption. Inline code examples in JSDoc descriptions should be contained within markdown backticks. This ensures they render correctly as code in editor IntelliSense as well as in the generated Material UI API docs page. This is especially important if the code example looks like a JSX or HTML tag, otherwise markdown renderers will attempt to render it as HTML. If the renderer only accepts a subset of HTML tags (such as VS Code IntelliSense) then it will strip the code example out of the rendered HTML. In other situations where React is used to render the markdown without an allowlist for JSX/HTML (e.g. the Storybook docs page props table), then not wrapping JSX code examples in backticks in the source JSDoc description markdown can cause a React render error.
Netlify deploy previewhttps://deploy-preview-38603--material-ui.netlify.app/ Bundle size report |
jaydenseric
changed the title
Snackbar prop key JSDoc descriptionSnackbar prop key JSDoc description
zannager
added
the
component: snackbar
ZeeshanTamboli
added
bug 🐛
ZeeshanTamboli
changed the title
Snackbar prop key JSDoc description
ZeeshanTamboli
changed the title
key prop JSDoc description in Snackbar component code correctly
ZeeshanTamboli
approved these changes
Aug 24, 2023
There was a problem hiding this comment.
@jaydenseric Thanks for your first contribution at MUI! Looking forward for more!
jaydenseric
deleted the
jaydenseric/fix-snackbar-prop-key-jsdoc-description
branch
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 correctly formats inline code in the component
SnackbarpropkeyJSDoc description. I also improved the sentences and grammar, and formatted the JSDoc comment to 80 char line lengths.Inline code examples in JSDoc descriptions should be contained within markdown backticks. This ensures they render correctly as code in editor IntelliSense as well as in the generated Material UI API docs page. This is especially important if the code example looks like a JSX or HTML tag, otherwise markdown renderers will attempt to render it as HTML. If the renderer only accepts a subset of HTML tags (such as VS Code IntelliSense) then it will strip the code example out of the rendered HTML. In other situations where React is used to render the markdown without an allowlist for JSX/HTML (e.g. the Storybook docs page props table), then not wrapping JSX code examples in backticks in the source JSDoc description markdown can cause a React render error.
Here is the VS Code IntelliSense for the component
Snackbarpropkeybefore this PR:Note the inline code examples have been stripped out by the markdown renderer.
Here is after this PR:
Note the inline code examples render correctly.
Here is Storybook docs page prop table rendering before this PR:
Note the React rendering error causing the code examples not to display:
After this PR:
Note there is no longer React rendering errors, and the code examples display correctly in the HMTL.
Here is the Material UI API docs for the component
Snackbarpropkeybefore this PR:https://mui.com/material-ui/api/snackbar/#Snackbar-prop-key
Note the inline code is rendering as text, instead of code. This should be fixed after this PR.