From a76aa4a15af57095750c6cfdcb834a7da17298b6 Mon Sep 17 00:00:00 2001
From: Martin Adamko <attitude@users.noreply.github.com>
Date: Fri, 30 Sep 2022 11:53:10 +0200
Subject: [PATCH 1/5] fix(theme-classic): fix admonition optical spacing

- Render admonition content `<div />` only when children are present
- Apply bottom margin only when admonition content exists
- Apply proper optics of the inlined SVG icon and re-calculate margins
to compensate for changes
- Narrow scope of `BrowserWindow` selector
- Document example
---
 .../src/theme/Admonition/Layout/index.tsx             |  4 +++-
 .../src/theme/Admonition/Layout/styles.module.css     | 11 ++++++++---
 .../src/utils/admonitionUtils.tsx                     |  4 ++--
 .../_docs tests/doc-with-empty-admonition.md          |  4 ++++
 .../src/components/BrowserWindow/styles.module.css    |  2 +-
 5 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 website/_dogfooding/_docs tests/doc-with-empty-admonition.md

diff --git a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/index.tsx
index d72cc05461f8..7bdda31bc386 100644
--- a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/index.tsx
+++ b/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 {
diff --git a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
index 2580873f11e3..4d65ccedead5 100644
--- a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
@@ -13,7 +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;
-  margin-bottom: 0.3rem;
+}
+
+.admonitionHeading:not(:last-child) {
+  margin-bottom: 0.5625rem;
 }
 
 .admonitionHeading code {
@@ -22,13 +25,15 @@
 
 .admonitionIcon {
   display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.4em;
+  vertical-align: baseline;
+  margin-right: 0.575em;
 }
 
 .admonitionIcon svg {
   display: inline-block;
   height: 1.6em;
+  margin: -0.1875em;
+  vertical-align: bottom;
   width: 1.6em;
   fill: var(--ifm-alert-foreground-color);
 }
diff --git a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
index a8442064e808..fa2e08481e41 100644
--- a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
+++ b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
@@ -20,10 +20,10 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
       (item.props as {mdxType: string} | null)?.mdxType ===
         'mdxAdmonitionTitle',
   );
-  const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
+  const rest = items.filter((item) => item !== mdxAdmonitionTitle);
   return {
     mdxAdmonitionTitle,
-    rest,
+    rest: rest.length > 0 ? <>{rest}</> : null,
   };
 }
 
diff --git a/website/_dogfooding/_docs tests/doc-with-empty-admonition.md b/website/_dogfooding/_docs tests/doc-with-empty-admonition.md
new file mode 100644
index 000000000000..82a407e9e32f
--- /dev/null
+++ b/website/_dogfooding/_docs tests/doc-with-empty-admonition.md	
@@ -0,0 +1,4 @@
+# Doc With Empty Admonition
+
+:::note Your Title Only
+:::
diff --git a/website/src/components/BrowserWindow/styles.module.css b/website/src/components/BrowserWindow/styles.module.css
index 9793395e2dce..aec42957ce99 100644
--- a/website/src/components/BrowserWindow/styles.module.css
+++ b/website/src/components/BrowserWindow/styles.module.css
@@ -82,6 +82,6 @@
   padding: 1rem;
 }
 
-.browserWindowBody *:last-child {
+.browserWindowBody > *:last-child {
   margin-bottom: 0;
 }

From ce6e568bfae92227006bc951bd8a6410bffda1db Mon Sep 17 00:00:00 2001
From: Martin Adamko <attitude@users.noreply.github.com>
Date: Fri, 14 Oct 2022 08:08:58 +0200
Subject: [PATCH 2/5] Fix format

---
 website/_dogfooding/_docs tests/doc-with-empty-admonition.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/_dogfooding/_docs tests/doc-with-empty-admonition.md b/website/_dogfooding/_docs tests/doc-with-empty-admonition.md
index 82a407e9e32f..a65f46fa50b5 100644
--- a/website/_dogfooding/_docs tests/doc-with-empty-admonition.md	
+++ b/website/_dogfooding/_docs tests/doc-with-empty-admonition.md	
@@ -1,4 +1,5 @@
 # Doc With Empty Admonition
 
 :::note Your Title Only
+
 :::

From a6cbb96310bea79d435e999f6451754e5933126e Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 14 Oct 2022 19:04:43 +0200
Subject: [PATCH 3/5] better admonition dogfooding page

---
 .../_docs tests/doc-with-empty-admonition.md  |  5 --
 .../_docs tests/tests/admonitions.mdx         | 61 +++++++++++++++++++
 2 files changed, 61 insertions(+), 5 deletions(-)
 delete mode 100644 website/_dogfooding/_docs tests/doc-with-empty-admonition.md
 create mode 100644 website/_dogfooding/_docs tests/tests/admonitions.mdx

diff --git a/website/_dogfooding/_docs tests/doc-with-empty-admonition.md b/website/_dogfooding/_docs tests/doc-with-empty-admonition.md
deleted file mode 100644
index a65f46fa50b5..000000000000
--- a/website/_dogfooding/_docs tests/doc-with-empty-admonition.md	
+++ /dev/null
@@ -1,5 +0,0 @@
-# Doc With Empty Admonition
-
-:::note Your Title Only
-
-:::
diff --git a/website/_dogfooding/_docs tests/tests/admonitions.mdx b/website/_dogfooding/_docs tests/tests/admonitions.mdx
new file mode 100644
index 000000000000..94d751430bed
--- /dev/null
+++ b/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>
+```

From 29c2173ef6f059465625f0bfff35786fedd6b6d4 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 9 Dec 2022 19:38:01 +0100
Subject: [PATCH 4/5] revert style changes

---
 .../src/theme/Admonition/Layout/styles.module.css         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
index 4d65ccedead5..636ad2f5959f 100644
--- a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
@@ -15,8 +15,9 @@
   text-transform: uppercase;
 }
 
+/* Heading alone without content (does not handle fragment content) */
 .admonitionHeading:not(:last-child) {
-  margin-bottom: 0.5625rem;
+  margin-bottom: 0.3rem;
 }
 
 .admonitionHeading code {
@@ -25,14 +26,13 @@
 
 .admonitionIcon {
   display: inline-block;
-  vertical-align: baseline;
-  margin-right: 0.575em;
+  vertical-align: middle;
+  margin-right: 0.4em;
 }
 
 .admonitionIcon svg {
   display: inline-block;
   height: 1.6em;
-  margin: -0.1875em;
   vertical-align: bottom;
   width: 1.6em;
   fill: var(--ifm-alert-foreground-color);

From c2aac9f8568738aa2b01635e5eb3723ea6a2b1d3 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 9 Dec 2022 19:40:35 +0100
Subject: [PATCH 5/5] revert style changes

---
 .../src/theme/Admonition/Layout/styles.module.css                | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
index 636ad2f5959f..cc5f8655f1e3 100644
--- a/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Admonition/Layout/styles.module.css
@@ -33,7 +33,6 @@
 .admonitionIcon svg {
   display: inline-block;
   height: 1.6em;
-  vertical-align: bottom;
   width: 1.6em;
   fill: var(--ifm-alert-foreground-color);
 }