refactor(theme-classic): clean up CSS of doc cards (#6950)

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

packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx

@@ -22,20 +22,15 @@ function CardContainer({
   href,
   children,
 }: {
-  href?: string;
+  href: string;
   children: ReactNode;
 }): JSX.Element {
-  const className = clsx(
+  return (
-    'card margin-bottom--lg padding--lg',
+    <Link
-    styles.cardContainer,
+      href={href}
-    href && styles.cardContainerLink,
+      className={clsx('card padding--lg', styles.cardContainer)}>
-  );
-  return href ? (
-    <Link href={href} className={className}>
       {children}
     </Link>
-  ) : (
-    <div className={className}>{children}</div>
   );
 }
 
@@ -45,7 +40,7 @@ function CardLayout({
   title,
   description,
 }: {
-  href?: string;
+  href: string;
   icon: ReactNode;
   title: string;
   description?: string;
@@ -55,17 +50,29 @@ function CardLayout({
       <h2 className={clsx('text--truncate', styles.cardTitle)} title={title}>
         {icon} {title}
       </h2>
-      <div
+      {description && (
+        <p
           className={clsx('text--truncate', styles.cardDescription)}
           title={description}>
           {description}
-      </div>
+        </p>
+      )}
     </CardContainer>
   );
 }
 
-function CardCategory({item}: {item: PropSidebarItemCategory}): JSX.Element {
+function CardCategory({
+  item,
+}: {
+  item: PropSidebarItemCategory;
+}): JSX.Element | null {
   const href = findFirstCategoryLink(item);
+
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null;
+  }
+
   return (
     <CardLayout
       href={href}

packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css

@@ -6,38 +6,29 @@
  */
 
 .cardContainer {
-  height: 8rem;
-  color: var(--ifm-color-emphasis-800);
   --ifm-link-color: var(--ifm-color-emphasis-800);
-  --ifm-link-hover-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
   --ifm-link-hover-decoration: none;
 
-  /* box-shadow: var(--ifm-global-shadow-lw); */
   box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
   border: 1px solid var(--ifm-color-emphasis-200);
-  transition: box-shadow var(--ifm-transition-fast) ease,
+  transition: all var(--ifm-transition-fast) ease;
-    background-color var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
 }
 
-.cardContainer.cardContainerLink:hover {
+.cardContainer:hover {
-  /* box-shadow: var(--ifm-global-shadow-md); */
+  border-color: var(--ifm-color-primary);
-  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
 }
 
-[data-theme='dark'] .cardContainer.cardContainerLink:hover {
+.cardContainer *:last-child {
-  --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */
+  margin-bottom: 0;
-}
-
-.cardContainer:not(.cardContainerLink) {
-  cursor: not-allowed;
 }
 
 .cardTitle {
   font-size: 1.2rem;
-  min-height: 1.2rem;
 }
 
 .cardDescription {
   font-size: 0.8rem;
-  min-height: 0.8rem;
 }

packages/docusaurus-theme-classic/src/theme/DocCardList/index.tsx

@@ -9,6 +9,17 @@ import React from 'react';
 
 import DocCard from '@theme/DocCard';
 import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+import {findFirstCategoryLink} from '@docusaurus/theme-common';
+
+// Filter categories that don't have a link.
+function filterItems(items: PropSidebarItem[]): PropSidebarItem[] {
+  return items.filter((item) => {
+    if (item.type === 'category') {
+      return !!findFirstCategoryLink(item);
+    }
+    return true;
+  });
+}
 
 export default function DocCardList({
   items,
@@ -17,9 +28,9 @@ export default function DocCardList({
 }): JSX.Element {
   return (
     <div className="row">
-      {items.map((item, index) => (
+      {filterItems(items).map((item, index) => (
-        <article key={index} className="col col--6">
+        <article key={index} className="col col--6 margin-bottom--lg">
-          <DocCard item={item} />
+          <DocCard key={index} item={item} />
         </article>
       ))}
     </div>