From d5cfa5b7cf85817766082061a7d6044747e55f26 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sat, 9 Apr 2022 03:27:22 +0300
Subject: [PATCH] refactor(theme-classic): fix a few margin inconsistencies
 (#7129)

* refactor(theme-classic): minor fixes and improvements

* Fixes after review

* Reset spacing for all children inside browser window
---
 .../docusaurus-theme-classic/src/theme-classic.d.ts    |  1 +
 .../src/theme/BlogSidebar/Desktop/styles.module.css    |  1 +
 .../src/theme/DocCardList/index.tsx                    | 10 ++++------
 .../src/theme/DocCategoryGeneratedIndexPage/index.tsx  |  2 +-
 .../DocCategoryGeneratedIndexPage/styles.module.css    |  4 ++++
 .../src/theme/DocItem/styles.module.css                |  6 ++++++
 .../NavbarItem/LocaleDropdownNavbarItem/index.tsx      |  2 +-
 .../src/theme/TabItem/index.tsx                        |  8 +++++++-
 .../src/theme/TabItem/styles.module.css                | 10 ++++++++++
 .../docusaurus-theme-classic/src/theme/Tabs/index.tsx  |  6 +++---
 .../src/theme/Tabs/styles.module.css                   |  4 ++++
 .../src/components/Details/styles.module.css           |  4 ++++
 .../markdown-features/markdown-features-tabs.mdx       |  1 -
 13 files changed, 46 insertions(+), 13 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/TabItem/styles.module.css

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 7c0deb7dc6..08475210a9 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -176,6 +176,7 @@ declare module '@theme/DocCardList' {
 
   export interface Props {
     readonly items: PropSidebarItem[];
+    readonly className?: string;
   }
 
   export default function DocCardList(props: Props): JSX.Element;
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
index 3ca0d4b8d5..cf147cd4e3 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -29,6 +29,7 @@
 
 .sidebarItemLink {
   color: var(--ifm-font-color-base);
+  display: block;
 }
 
 .sidebarItemLink:hover {
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
index 052e882925..3cd1425daf 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
@@ -6,10 +6,12 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 
 import DocCard from '@theme/DocCard';
 import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 import {findFirstCategoryLink} from '@docusaurus/theme-common';
+import type {Props} from '@theme/DocCardList';
 
 // Filter categories that don't have a link.
 function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
@@ -21,13 +23,9 @@ function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
   });
 }
 
-export default function DocCardList({
-  items,
-}: {
-  items: PropSidebarItem[];
-}): JSX.Element {
+export default function DocCardList({items, className}: Props): JSX.Element {
   return (
-    <div className="row">
+    <div className={clsx('row', className)}>
       {filterItems(items).map((item, index) => (
         <article key={index} className="col col--6 margin-bottom--lg">
           <DocCard key={index} item={item} />
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
index 179839ac09..8f58116ead 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
@@ -61,7 +61,7 @@ function DocCategoryGeneratedIndexPageContent({
           )}
         </header>
         <main className="margin-top--lg">
-          <DocCardList items={category.items} />
+          <DocCardList items={category.items} className={styles.list} />
         </main>
         <footer className="margin-top--lg">
           <DocPaginator
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/styles.module.css
index 8ca9a8f47e..c3ab0f274d 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/styles.module.css
@@ -16,3 +16,7 @@
   --ifm-h1-font-size: 3rem;
   margin-bottom: calc(1.25 * var(--ifm-leading));
 }
+
+.list article:nth-last-child(-n + 2) {
+  margin-bottom: 0 !important;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
index 7828ec6219..63c6bba9ce 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
@@ -20,3 +20,9 @@
     display: none;
   }
 }
+
+@media print {
+  .tocMobile {
+    display: none;
+  }
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index bec77b1a30..d112c188a4 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -60,7 +60,7 @@ export default function LocaleDropdownNavbarItem({
       label={
         <span>
           <IconLanguage className={styles.iconLanguage} />
-          <span>{dropdownLabel}</span>
+          {dropdownLabel}
         </span>
       }
       items={items}
diff --git a/packages/docusaurus-theme-classic/src/theme/TabItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/TabItem/index.tsx
index 62c5368e14..7b847dacc8 100644
--- a/packages/docusaurus-theme-classic/src/theme/TabItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/TabItem/index.tsx
@@ -7,6 +7,9 @@
 
 import React from 'react';
 import type {Props} from '@theme/TabItem';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
 
 export default function TabItem({
   children,
@@ -14,7 +17,10 @@ export default function TabItem({
   className,
 }: Props): JSX.Element {
   return (
-    <div role="tabpanel" {...{hidden, className}}>
+    <div
+      role="tabpanel"
+      className={clsx(styles.tabItem, className)}
+      {...{hidden}}>
       {children}
     </div>
   );
diff --git a/packages/docusaurus-theme-classic/src/theme/TabItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TabItem/styles.module.css
new file mode 100644
index 0000000000..92c3269e98
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/TabItem/styles.module.css
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index efaae4c055..2e64f41460 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -141,7 +141,7 @@ function TabsComponent(props: Props): JSX.Element {
   };
 
   return (
-    <div className="tabs-container">
+    <div className={clsx('tabs-container', styles.tabList)}>
       <ul
         role="tablist"
         aria-orientation="horizontal"
@@ -181,10 +181,10 @@ function TabsComponent(props: Props): JSX.Element {
           children.filter(
             (tabItem) => tabItem.props.value === selectedValue,
           )[0]!,
-          {className: 'margin-vert--md'},
+          {className: 'margin-top--md'},
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className="margin-top--md">
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
index 5f2274d558..6d264fad02 100644
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css
@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
 .tabItem {
   margin-top: 0 !important;
 }
diff --git a/packages/docusaurus-theme-common/src/components/Details/styles.module.css b/packages/docusaurus-theme-common/src/components/Details/styles.module.css
index 58bb358ad6..b5c1400cec 100644
--- a/packages/docusaurus-theme-common/src/components/Details/styles.module.css
+++ b/packages/docusaurus-theme-common/src/components/Details/styles.module.css
@@ -56,3 +56,7 @@ CSS variables, meant to be overridden by final theme
   border-top: 1px solid var(--docusaurus-details-decoration-color);
   padding-top: 1rem;
 }
+
+.collapsibleContent > *:last-child {
+  margin-bottom: 0;
+}
diff --git a/website/docs/guides/markdown-features/markdown-features-tabs.mdx b/website/docs/guides/markdown-features/markdown-features-tabs.mdx
index e5364735ff..e95292ba20 100644
--- a/website/docs/guides/markdown-features/markdown-features-tabs.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-tabs.mdx
@@ -115,7 +115,6 @@ It is also possible to provide `values` and `defaultValue` props to `Tabs`:
     <TabItem value="banana" label="Banana 2" default>This is a banana 🍌</TabItem>
   </Tabs>
 </BrowserWindow>
-<br/>
 ```
 
 </details>