diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md index 365aa09270f669..c375429e7f0c39 100644 --- a/docs/data/material/getting-started/faq/faq.md +++ b/docs/data/material/getting-started/faq/faq.md @@ -139,15 +139,10 @@ const ref = React.createRef(); const element = ref.current; ``` -If you're not sure if the Material UI component in question forwards its ref you -can check the API documentation under "Props" e.g. the [Button API](/material-ui/api/button/#props) -includes +If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props". +You should find the message below, like in the [Button API](/material-ui/api/button/#props), [Button API](/material-ui/api/button/#props) -:::info -The ref is forwarded to the root element. -::: - -indicating that you can access the DOM element with a ref. +> The ref is forwarded to the root element. ## My App doesn't render correctly on the server @@ -376,8 +371,6 @@ Example of fix: ### [legacy] React class name hydration mismatch :::warning -**⚠️ Warning** - Prop className did not match. ::: diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md index 5ab0d24b7c482b..5ef22a0fbae4d9 100644 --- a/docs/data/material/guides/composition/composition.md +++ b/docs/data/material/guides/composition/composition.md @@ -77,7 +77,7 @@ function ListItemLink(props) { ``` :::warning -⚠️ However, since we are using an inline function to change the rendered component, React will remount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily but the state will be lost, e.g. the ripple effect of the `ListItem` will also not work correctly. +However, since we are using an inline function to change the rendered component, React will remount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily but the state will be lost, e.g. the ripple effect of the `ListItem` will also not work correctly. ::: The solution is simple: **avoid inline functions and pass a static component to the `component` prop** instead. @@ -123,7 +123,7 @@ import { Link } from 'react-router-dom'; ``` :::warning -⚠️ However, this strategy suffers from a limitation: prop name collisions. +However, this strategy suffers from a limitation: prop name collisions. The component receiving the `component` prop (e.g. ListItem) might intercept the prop (e.g. to) that is destined to the leave element (e.g. Link). ::: diff --git a/docs/data/material/guides/next-js-app-router/next-js-app-router.md b/docs/data/material/guides/next-js-app-router/next-js-app-router.md index b1de4508c3bd26..c4771423e0d8d0 100644 --- a/docs/data/material/guides/next-js-app-router/next-js-app-router.md +++ b/docs/data/material/guides/next-js-app-router/next-js-app-router.md @@ -203,7 +203,7 @@ export default function Page() { ``` :::error -🚨 This code snippet _doesn't work_, because the Button's click handler is **non-serializable**: +This code snippet _doesn't work_, because the Button's click handler is **non-serializable**: ```tsx // page.tsx diff --git a/docs/data/material/migration/migration-v4/migration-v4.md b/docs/data/material/migration/migration-v4/migration-v4.md index bb62e9f7a1cb5b..b5a34eeee31209 100644 --- a/docs/data/material/migration/migration-v4/migration-v4.md +++ b/docs/data/material/migration/migration-v4/migration-v4.md @@ -107,7 +107,7 @@ If your project includes these packages, you'll need to update them: - `@types/react-dom` :::warning -📝 Make sure that your application is still running without errors, and commit the changes before continuing to the next step. +Make sure that your application is still running without errors, and commit the changes before continuing to the next step. ::: ## Set up `ThemeProvider` @@ -138,7 +138,7 @@ function App() { ``` :::warning -📝 Make sure that your application is still running without errors, and commit the changes before continuing to the next step. +Make sure that your application is still running without errors, and commit the changes before continuing to the next step. ::: ## Update MUI packages @@ -217,7 +217,7 @@ Note that if your app uses server-side rendering (SSR), there is a [known bug](h We strongly recommend using the default setup with Emotion instead. :::warning -📝 Make sure that your application is still running without errors, and commit the changes before continuing to the next step. +Make sure that your application is still running without errors, and commit the changes before continuing to the next step. ::: ### Replace all imports diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index b5e5a666bf56ac..1f36a8887b1298 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -702,8 +702,8 @@ Change the default variant from `standard` to `outlined`. `standard` has been removed from the Material Design guidelines. -:::warning -✅ This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod. +:::success +This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod. ::: ```diff @@ -829,7 +829,7 @@ Use CSS `object-fit`. For IE11 support either use a polyfill such as This component is deprecated because its functionality can be created with the [`sx`](/system/getting-started/the-sx-prop/) prop or the [`useMediaQuery`](/material-ui/react-use-media-query/) hook. -:::warning +:::success This is handled in the [preset-safe codemod](#preset-safe) by applying fake `Hidden` component to prevent application crash, but further fixes are required. ::: @@ -907,8 +907,8 @@ The default `underline` prop is changed from `"hover"` to `"always"`. To recreate the behavior from v4, apply `defaultProps` in the theme. -:::warning -✅ This is handled in [link-underline-hover codemod](#link-underline-hover)—read the details before running this codemod. +:::success +This is handled in [link-underline-hover codemod](#link-underline-hover)—read the details before running this codemod. ::: ```js @@ -1257,7 +1257,7 @@ You can get a reference to the underlying DOM node of our components via `ref` p The component relied on [`ReactDOM.findDOMNode`](https://react.dev/reference/react-dom/findDOMNode) which is [deprecated in `React.StrictMode`](https://react.dev/reference/react/StrictMode#warning-about-deprecated-finddomnode-usage). -:::warning +:::success This is handled in the [preset-safe codemod](#preset-safe) by applying fake `RootRef` component to prevent application crash, but further fixes are required. ::: @@ -1279,7 +1279,7 @@ Change the default variant from `standard` to `outlined`. If you are composing the `Select` with a form control component, you only need to update `FormControl`—the select inherits the variant from its context. :::success -✅ This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod. +This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod. ::: ```diff @@ -1682,7 +1682,7 @@ Change the default variant from `standard` to `outlined`. `standard` has been removed from the Material Design guidelines. :::success -✅ This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod. +This is handled in [variant-prop codemod](#variant-prop)—read the details before running this codemod. ::: ```diff diff --git a/docs/pages/experiments/docs/callouts.md b/docs/pages/experiments/docs/callouts.md index a5fe5610d3a49b..94c41186be227d 100644 --- a/docs/pages/experiments/docs/callouts.md +++ b/docs/pages/experiments/docs/callouts.md @@ -7,14 +7,21 @@ :::info This is an info callout. It says, "Here's a bit of extra insight to help you understand this feature." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). + ::: ```markup :::info This is an info callout. It says, "Here's a bit of extra insight to help you understand this feature." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). ::: ``` @@ -23,14 +30,21 @@ Add some **bold text** and a [link](#link). :::success This is a success callout. It says, "Here's an actionable suggestion to help you succeed." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). + ::: ```markup :::success This is a success callout. It says, "Here's an actionable suggestion to help you succeed." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). ::: ``` @@ -39,14 +53,21 @@ Add some **bold text** and a [link](#link). :::warning This is a warning callout. It says, "Be careful! Keep this detail in mind to avoid potential issues." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). + ::: ```markup :::warning This is a warning callout. It says, "Be careful! Keep this detail in mind to avoid potential issues." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). ::: ``` @@ -55,13 +76,45 @@ Add some **bold text** and a [link](#link). :::error This is an error callout. It says, "You will fail if you don't heed this dire warning." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). + ::: ```markup :::error This is an error callout. It says, "You will fail if you don't heed this dire warning." -Add some **bold text** and a [link](#link). + +- emphasised: **bold text** +- some code `
` +- a [link](#link). +::: +``` + +## Empty + +Should not be used, here just to ensure forgetting the token is not a big deal. + +::: +This is a callout. +It says, "You will fail if you don't heed this dire warning." + +- emphasised: **bold text** +- some code `
` +- a [link](#link). + +::: + +```markup +::: +This is a callout. +It says, "You will fail if you don't heed this dire warning." + +- emphasised: **bold text** +- some code `
` +- a [link](#link). ::: ``` diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 5321305d81f04f..e25343901ddb58 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -267,18 +267,39 @@ const Root = styled('div')( }, }, '& .MuiCallout-root': { + display: 'flex', + gap: 12, padding: '16px', margin: '16px 0', border: '1px solid', + color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, + borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`, borderRadius: `var(--muidocs-shape-borderRadius, ${ theme.shape?.borderRadius ?? lightTheme.shape.borderRadius }px)`, + '& .MuiCallout-content': { + display: 'flex', + flexDirection: 'column', + gap: 6, + '&>p, ul': { + marginBottom: 0, + }, + '&>ul': { + paddingLeft: 22, + }, + }, + '&>svg': { + marginTop: 2, + width: 20, + height: 20, + flexShrink: 0, + }, '& > ul, & > p': { '&:last-child': { margin: 0, }, }, - '& > p, & ul, li': { + '& ul, li, p': { color: 'inherit', }, '&.MuiCallout-error': { @@ -288,6 +309,9 @@ const Root = styled('div')( '& strong': { color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`, }, + '&>svg': { + fill: `var(--muidocs-palette-error-500, ${lightTheme.palette.error[600]})`, + }, '& a': { color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`, textDecorationColor: alpha(lightTheme.palette.error.main, 0.4), @@ -299,18 +323,24 @@ const Root = styled('div')( '&.MuiCallout-info': { color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`, backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, - borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`, '& strong': { color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`, }, + '&>svg': { + fill: `var(--muidocs-palette-grey-600, ${lightTheme.palette.grey[600]})`, + }, }, '&.MuiCallout-success': { color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, backgroundColor: `var(--muidocs-palette-success-50, ${lightTheme.palette.success[50]})`, - borderColor: `var(--muidocs-palette-success-200, ${lightTheme.palette.success[200]})`, + borderColor: `var(--muidocs-palette-success-100, ${lightTheme.palette.success[100]})`, '& strong': { color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, }, + '&>svg': { + fill: `var(--muidocs-palette-success-600, ${lightTheme.palette.success[600]})`, + }, '& a': { color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, textDecorationColor: alpha(lightTheme.palette.success.main, 0.4), @@ -322,10 +352,13 @@ const Root = styled('div')( '&.MuiCallout-warning': { color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, backgroundColor: alpha(lightTheme.palette.warning[50], 0.5), - borderColor: alpha(lightTheme.palette.warning[600], 0.3), + borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`, '& strong': { color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, }, + '&>svg': { + fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`, + }, '& a': { color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4), @@ -557,18 +590,22 @@ const Root = styled('div')( borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, }, '& blockquote': { - borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`, + borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`, ':before': { - color: `var(--muidocs-palette-primaryDark-500, ${lightTheme.palette.primaryDark[500]})`, + color: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`, }, }, '& .MuiCallout-root': { + borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`, '&.MuiCallout-error': { color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`, - backgroundColor: alpha(darkTheme.palette.error[700], 0.25), + backgroundColor: alpha(darkTheme.palette.error[700], 0.2), borderColor: alpha(lightTheme.palette.error[600], 0.3), '& strong': { - color: `var(--muidocs-palette-error-100, ${darkTheme.palette.error[100]})`, + color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`, + }, + '&>svg': { + fill: `var(--muidocs-palette-error-500, ${darkTheme.palette.error[500]})`, }, '& a': { color: `var(--muidocs-palette-error-200, ${darkTheme.palette.error[200]})`, @@ -581,25 +618,34 @@ const Root = styled('div')( '& strong': { color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, }, + '&>svg': { + fill: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`, + }, }, '&.MuiCallout-success': { color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`, - backgroundColor: alpha(darkTheme.palette.success[700], 0.2), + backgroundColor: alpha(darkTheme.palette.success[700], 0.15), borderColor: alpha(lightTheme.palette.success[600], 0.3), '& strong': { color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`, }, + '&>svg': { + fill: `var(--muidocs-palette-success-500, ${darkTheme.palette.success[500]})`, + }, '& a': { color: `var(--muidocs-palette-success-100, ${darkTheme.palette.success[100]})`, }, }, '&.MuiCallout-warning': { color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, - backgroundColor: alpha(darkTheme.palette.warning[700], 0.2), + backgroundColor: alpha(darkTheme.palette.warning[700], 0.15), borderColor: alpha(darkTheme.palette.warning[600], 0.3), '& strong': { color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, }, + '&>svg': { + fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, + }, '& a': { color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`, }, diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 8aa6399374bd23..61381cb3e4d8f1 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -419,10 +419,20 @@ function createRender(context) { } return undefined; }, + renderer(token) { - return ``; + return ``; }, }, ], @@ -621,6 +631,36 @@ ${headers.hooks `); + // icons for callout (info, success, warning, error) + + rendered.unshift( + ` + + + + `, + ); + rendered.unshift( + ` + + + + `, + ); + rendered.unshift( + ` + + + + `, + ); + rendered.unshift( + ` + + + + `, + ); docs[userLanguage] = { description, location,