fix(theme-classic): polish admonition details, render title-only admonitions (#8150)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/theme/Admonition/Layout/index.tsx

@@ -41,7 +41,9 @@ function AdmonitionHeading({icon, title}: Pick<Props, 'icon' | 'title'>) {
 }
 
 function AdmonitionContent({children}: Pick<Props, 'children'>) {
-  return <div className={styles.admonitionContent}>{children}</div>;
+  return children ? (
+    <div className={styles.admonitionContent}>{children}</div>
+  ) : null;
 }
 
 export default function AdmonitionLayout(props: Props): JSX.Element {

packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css

@@ -13,6 +13,10 @@
   font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) /
     var(--ifm-heading-line-height) var(--ifm-heading-font-family);
   text-transform: uppercase;
+}
+
+/* Heading alone without content (does not handle fragment content) */
+.admonitionHeading:not(:last-child) {
   margin-bottom: 0.3rem;
 }
 

packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx

@@ -20,10 +20,10 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
       (item.props as {mdxType: string} | null)?.mdxType ===
         'mdxAdmonitionTitle',
   ) as JSX.Element | undefined;
-  const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
+  const rest = items.filter((item) => item !== mdxAdmonitionTitle);
   return {
     mdxAdmonitionTitle: mdxAdmonitionTitle?.props.children,
-    rest,
+    rest: rest.length > 0 ? <>{rest}</> : null,
   };
 }
 

website/_dogfooding/_docs tests/tests/admonitions.mdx

@@ -0,0 +1,61 @@
+# Admonitions tests
+
+## Empty content
+
+:::note Title Only
+
+:::
+
+## Empty fragment content
+
+:::note Title Only
+
+<></>
+
+:::
+
+## Large font icon
+
+```mdx-code-block
+<admonition
+  type="tip"
+  icon={<span style={{fontSize: 60}}>💡</span>}
+  title="Did you know...">
+  <p>
+    content
+  </p>
+</admonition>
+
+<admonition
+  type="info"
+  icon={<span style={{fontSize: 40}}>ℹ️</span>}
+  title="Did you know...">
+  <p>
+    content
+  </p>
+</admonition>
+```
+
+## Large svg icon
+
+```mdx-code-block
+import InfoIcon from "@theme/Admonition/Icon/Info"
+
+<admonition
+  type="tip"
+  icon={<InfoIcon style={{width: 60, height: 60}}/>}
+  title="Did you know...">
+  <p>
+    content
+  </p>
+</admonition>
+
+<admonition
+  type="info"
+  icon={<InfoIcon style={{width: 40, height: 40}}/>}
+  title="Did you know...">
+  <p>
+    content
+  </p>
+</admonition>
+```

website/src/components/BrowserWindow/styles.module.css

@@ -82,6 +82,6 @@
   padding: 1rem;
 }
 
-.browserWindowBody *:last-child {
+.browserWindowBody > *:last-child {
   margin-bottom: 0;
 }