fix(theme): apply docs sidebar_class_name in DocCard + better dogfooding (#10909)

Author: slorber

argos/tests/screenshot.spec.ts

@@ -55,7 +55,6 @@ function isBlacklisted(pathname: string) {
     '/tests/pages/react-18',
     // Flaky because of hydration error
     '/tests/blog/archive',
-    '/tests/docs/tests/custom-props',
     '/tests/pages/code-block-tests',
     '/tests/pages/embeds',
     // Flaky because of hydration error with docusaurus serve + .html

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

@@ -43,34 +43,38 @@ function useCategoryItemsPlural() {
 }
 
 function CardContainer({
+  className,
   href,
   children,
 }: {
+  className?: string;
   href: string;
   children: ReactNode;
 }): ReactNode {
   return (
     <Link
       href={href}
-      className={clsx('card padding--lg', styles.cardContainer)}>
+      className={clsx('card padding--lg', styles.cardContainer, className)}>
       {children}
     </Link>
   );
 }
 
 function CardLayout({
+  className,
   href,
   icon,
   title,
   description,
 }: {
+  className?: string;
   href: string;
   icon: ReactNode;
   title: string;
   description?: string;
 }): ReactNode {
   return (
-    <CardContainer href={href}>
+    <CardContainer href={href} className={className}>
       <Heading
         as="h2"
         className={clsx('text--truncate', styles.cardTitle)}
@@ -99,6 +103,7 @@ function CardCategory({item}: {item: PropSidebarItemCategory}): ReactNode {
 
   return (
     <CardLayout
+      className={item.className}
       href={href}
       icon="🗃️"
       title={item.label}
@@ -112,6 +117,7 @@ function CardLink({item}: {item: PropSidebarItemLink}): ReactNode {
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout
+      className={item.className}
       href={item.href}
       icon={icon}
       title={item.label}

website/_dogfooding/_docs tests/tests/custom-props/_category_.json

@@ -0,0 +1,7 @@
+---
+sidebar_class_name: 'dogfood_sidebar_class_name_test'
+---
+
+# Doc With Sidebar Class Name
+
+This doc has `sidebar_label` front matter

website/_dogfooding/_docs tests/tests/custom-props/doc-without-custom-props.mdx

@@ -5,6 +5,6 @@ sidebar_custom_props:
   boolean: true
 ---
 
-# Doc with Custom Props
+# Doc With Custom Props
 
-This doc has custom props.
+This doc has `sidebar_custom_props` front matter.

website/_dogfooding/_docs tests/tests/custom-props/index.mdx

@@ -0,0 +1,7 @@
+---
+sidebar_label: Doc With Sidebar Label
+---
+
+# Doc with `sidebar_label`
+
+This doc has `sidebar_label` front matter

website/_dogfooding/_docs tests/tests/sidebar-frontmatter/doc-with-sidebar-className.mdx

@@ -0,0 +1,3 @@
+# Doc Without
+
+This doc doesn't have any `sidebar_` front matter

website/_dogfooding/_docs tests/tests/custom-props/doc-with-custom-props.mdx website/_dogfooding/_docs tests/tests/sidebar-frontmatter/doc-with-sidebar-custom-props.mdx

@@ -0,0 +1,56 @@
+---
+sidebar_label: 'Sidebar Front Matter Tests'
+sidebar_class_name: 'dogfood_sidebar_class_name_test'
+---
+
+# Sidebar front matter
+
+```mdx-code-block
+import Link from '@docusaurus/Link';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+
+---
+
+## Items table
+
+export const DocPropsList = ({category}) => {
+  const items = [category, ...category.items];
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>
+            <code>type</code>
+          </th>
+          <th>
+            <code>label</code>
+          </th>
+          <th>
+            <code>customProps</code>
+          </th>
+          <th>
+            <code>className</code>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((item, index) => (
+          <tr key={index}>
+            <td>{item.type}</td>
+            <td>
+              <Link to={item.href}>{item.label}</Link>
+            </td>
+            <td>{JSON.stringify(item.customProps)}</td>
+            <td>{JSON.stringify(item.className)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+<DocPropsList category={useCurrentSidebarCategory()} />
+```

website/_dogfooding/_docs tests/tests/sidebar-frontmatter/doc-with-sidebar-label.mdx

@@ -24,6 +24,20 @@ html {
       .navbar {
         border-bottom: solid thin cyan;
       }
+
+      .dogfood_sidebar_class_name_test {
+        &.theme-doc-sidebar-item-link > a {
+          color: cyan;
+        }
+
+        &.theme-doc-sidebar-item-category > div > a {
+          color: cyan;
+        }
+
+        &.card {
+          border: solid thin cyan;
+        }
+      }
     }
 
     &.plugin-blog.plugin-id-blog-tests {