improve DocCardList CSS

facebook · Jan 31, 2025 · 468ad72 · 468ad72
1 parent bd5e723
commit 468ad72
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 20 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -624,7 +624,9 @@ declare module '@theme/DocPaginator' {
   import type {PropNavigation} from '@docusaurus/plugin-content-docs';
 
   // May be simpler to provide a {navigation: PropNavigation} prop?
-  export interface Props extends PropNavigation {}
+  export interface Props extends PropNavigation {
+    className?: string;
+  }
 
   export default function DocPaginator(props: Props): ReactNode;
 }

diff --git a/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css
@@ -14,7 +14,6 @@
   border: 1px solid var(--ifm-color-emphasis-200);
   transition: all var(--ifm-transition-fast) ease;
   transition-property: border, box-shadow;
-  height: 100%;
 }
 
 .cardContainer:hover {

diff --git a/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx
@@ -5,32 +5,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ReactNode} from 'react';
+import React, {type ComponentProps, type ReactNode} from 'react';
 import clsx from 'clsx';
 import {
   useCurrentSidebarSiblings,
   filterDocCardListItems,
 } from '@docusaurus/plugin-content-docs/client';
 import DocCard from '@theme/DocCard';
 import type {Props} from '@theme/DocCardList';
+import styles from './styles.module.css';
 
 function DocCardListForCurrentSidebarCategory({className}: Props) {
   const items = useCurrentSidebarSiblings();
   return <DocCardList items={items} className={className} />;
 }
 
+function DocCardListItem({
+  item,
+}: {
+  item: ComponentProps<typeof DocCard>['item'];
+}) {
+  return (
+    <article className={clsx(styles.docCardListItem, 'col col--6')}>
+      <DocCard item={item} />
+    </article>
+  );
+}
+
 export default function DocCardList(props: Props): ReactNode {
   const {items, className} = props;
   if (!items) {
     return <DocCardListForCurrentSidebarCategory {...props} />;
   }
   const filteredItems = filterDocCardListItems(items);
   return (
-    <section className={clsx('row', className)}>
+    <section className={clsx('row', 'margin-top--md', className)}>
       {filteredItems.map((item, index) => (
-        <article key={index} className="col col--6 margin-bottom--lg">
-          <DocCard item={item} />
-        </article>
+        <DocCardListItem key={index} item={item} />
       ))}
     </section>
   );

diff --git a/packages/docusaurus-theme-classic/src/theme/DocCardList/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocCardList/styles.module.css
@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+.docCardListItem {
+  margin-bottom: 2rem;
+}
+
+.docCardListItem > * {
+  height: 100%;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx
@@ -50,10 +50,10 @@ function DocCategoryGeneratedIndexPageContent({
           <p>{categoryGeneratedIndex.description}</p>
         )}
       </header>
-      <article className="margin-top--lg">
+      <article className="margin-top--md">
         <DocCardList items={category.items} className={styles.list} />
       </article>
-      <footer className="margin-top--lg">
+      <footer>
         <DocPaginator
           previous={categoryGeneratedIndex.navigation.previous}
           next={categoryGeneratedIndex.navigation.next}

diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/styles.module.css
@@ -9,18 +9,10 @@
   .generatedIndexPage {
     max-width: 75% !important;
   }
-
-  .list article:nth-last-child(-n + 2) {
-    margin-bottom: 0 !important;
-  }
 }
 
 /* Duplicated from .markdown h1 */
 .title {
   --ifm-h1-font-size: 3rem;
   margin-bottom: calc(1.25 * var(--ifm-leading));
 }
-
-.list article:last-child {
-  margin-bottom: 0 !important;
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/Paginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/Paginator/index.tsx
@@ -15,5 +15,11 @@ import DocPaginator from '@theme/DocPaginator';
  */
 export default function DocItemPaginator(): ReactNode {
   const {metadata} = useDoc();
-  return <DocPaginator previous={metadata.previous} next={metadata.next} />;
+  return (
+    <DocPaginator
+      className="docusaurus-mt-lg"
+      previous={metadata.previous}
+      next={metadata.next}
+    />
+  );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
@@ -6,15 +6,16 @@
  */
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/DocPaginator';
 
 export default function DocPaginator(props: Props): ReactNode {
-  const {previous, next} = props;
+  const {className, previous, next} = props;
   return (
     <nav
-      className="pagination-nav docusaurus-mt-lg"
+      className={clsx(className, 'pagination-nav')}
       aria-label={translate({
         id: 'theme.docs.paginator.navAriaLabel',
         message: 'Docs pages',