improve callouts design across the docs

mui · Sep 21, 2023 · cb8e298 · cb8e298
1 parent 69c035e
commit cb8e298
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/docs/pages/experiments/docs/callouts.md b/docs/pages/experiments/docs/callouts.md
@@ -4,6 +4,10 @@
 
 ## Info
 
+:::info
+One-liner success info.
+:::
+
 :::info
 This is an info callout.
 It says, "Here's a bit of extra insight to help you understand this feature."
@@ -27,6 +31,10 @@ It says, "Here's a bit of extra insight to help you understand this feature."
 
 ## Success
 
+:::success
+One-liner success callout.
+:::
+
 :::success
 This is a success callout.
 It says, "Here's an actionable suggestion to help you succeed."
@@ -50,6 +58,10 @@ It says, "Here's an actionable suggestion to help you succeed."
 
 ## Warning
 
+:::warning
+One-liner warning callout.
+:::
+
 :::warning
 This is a warning callout.
 It says, "Be careful! Keep this detail in mind to avoid potential issues."
@@ -73,6 +85,10 @@ It says, "Be careful! Keep this detail in mind to avoid potential issues."
 
 ## Error
 
+:::error
+One-liner error callout.
+:::
+
 :::error
 This is an error callout.
 It says, "You will fail if you don't heed this dire warning."

diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -275,10 +275,11 @@ export default function ApiPage(props) {
           className="MuiCallout-root MuiCallout-info"
           dangerouslySetInnerHTML={{ __html: refHint }}
         />
+        <Divider />
         {inheritance && (
           <React.Fragment>
             <Heading hash="inheritance" level="h3" />
-            <span
+            <p
               dangerouslySetInnerHTML={{
                 __html: t('api-docs.inheritanceDescription')
                   .replace(/{{component}}/, inheritance.component)

diff --git a/docs/src/modules/components/ApiPage/ApiItem.tsx b/docs/src/modules/components/ApiPage/ApiItem.tsx
@@ -111,17 +111,19 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       },
     },
     '& .MuiAlert-standardWarning': {
-      padding: '6px 12px',
-      fontWeight: theme.typography.fontWeightMedium,
+      display: 'flex',
+      alignItems: 'baseline',
+      fontSize: theme.typography.pxToRem(16),
+      padding: '6px 16px',
       border: '1px solid',
-      borderColor: `var(--muidocs-palette-warning-300, ${lightTheme.palette.warning[300]})`,
-      borderRadius: 8,
-      backgroundColor: `var(--muidocs-palette-warning-50, ${lightTheme.palette.warning[50]})`,
-      color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
+      color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+      backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
+      borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
+      borderRadius: `var(--muidocs-shape-borderRadius, ${
+        theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
+      }px)`,
       marginBottom: 16,
       '.MuiAlert-icon': {
-        display: 'flex',
-        alignItems: 'center',
         fill: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
       },
     },
@@ -172,9 +174,9 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
         },
       },
       '& .MuiAlert-standardWarning': {
-        borderColor: alpha(darkTheme.palette.warning[800], 0.3),
-        backgroundColor: alpha(darkTheme.palette.warning[800], 0.2),
-        color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`,
+        color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
+        backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
+        borderColor: alpha(darkTheme.palette.warning[600], 0.3),
         '.MuiAlert-icon svg': {
           fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
         },

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -280,6 +280,11 @@ const Root = styled('div')(
       borderRadius: `var(--muidocs-shape-borderRadius, ${
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
       }px)`,
+      '&>code': {
+        height: 'fit-content',
+        backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
+        borderColor: `var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`,
+      },
       '& .MuiCallout-content': {
         minWidth: 0, // Allows content to shrink. Useful when callout contains code block
         flexGrow: 1,
@@ -610,6 +615,11 @@ const Root = styled('div')(
       },
       '& .MuiCallout-root': {
         borderColor: `var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
+        '&>code': {
+          height: 'fit-content',
+          backgroundColor: `var(--muidocs-palette-primaryDark-600, ${lightTheme.palette.primaryDark[600]})`,
+          borderColor: `var(--muidocs-palette-primaryDark-500, ${lightTheme.palette.primaryDark[500]})`,
+        },
         '&.MuiCallout-error': {
           color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
           backgroundColor: alpha(darkTheme.palette.error[700], 0.2),