fix(docs): Fix empty sidebar item category className lost when post-processed to a doc (#11281)

packages/docusaurus-plugin-content-docs/src/__tests__/__fixtures__/site-with-doc-label/docs/hello-2.md

@@ -2,6 +2,8 @@
 id: hello-2
 title: Hello 2
 sidebar_label: Hello 2 From Doc
+sidebar_class_name: front-matter-class-name
+sidebar_custom_props: {custom: "from front matter"}
 ---
 
 Hello World 2!

packages/docusaurus-plugin-content-docs/src/__tests__/__fixtures__/site-with-doc-label/sidebars.json

@@ -8,7 +8,9 @@
     {
       "id": "hello-2",
       "type": "doc",
-      "label": "Hello Two"
+      "label": "Hello Two",
+      "className": "class-name-from-sidebars.json",
+      "customProps": {"test": "from sidebars.json"}
     }
   ]
 }

packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap

@@ -8,6 +8,10 @@ exports[`sidebar site with undefined sidebar 1`] = `
       "type": "doc",
     },
     {
+      "className": "front-matter-class-name",
+      "customProps": {
+        "custom": "from front matter",
+      },
       "id": "hello-2",
       "label": "Hello 2 From Doc",
       "type": "doc",

packages/docusaurus-plugin-content-docs/src/__tests__/index.test.ts

@@ -582,14 +582,16 @@ describe('site with doc label', () => {
     );
   });
 
-  it('sidebar_label in doc has higher precedence over label in sidebar.json', async () => {
+  it('frontMatter.sidebar_* data in doc has higher precedence over sidebar.json data', async () => {
     const {content} = await loadSite();
     const loadedVersion = content.loadedVersions[0]!;
     const sidebarProps = toSidebarsProp(loadedVersion);
 
-    expect((sidebarProps.docs![1] as PropSidebarItemLink).label).toBe(
+    const item = sidebarProps.docs![1] as PropSidebarItemLink;
-      'Hello 2 From Doc',
+
-    );
+    expect(item.label).toBe('Hello 2 From Doc');
+    expect(item.className).toBe('front-matter-class-name');
+    expect(item.customProps).toStrictEqual({custom: 'from front matter'});
   });
 });
 

packages/docusaurus-plugin-content-docs/src/props.ts

@@ -38,22 +38,14 @@ export function toSidebarDocItemLinkProp({
     'id' | 'title' | 'permalink' | 'unlisted' | 'frontMatter'
   >;
 }): PropSidebarItemLink {
-  const {
+  const {id, title, permalink, frontMatter, unlisted} = doc;
-    id,
-    title,
-    permalink,
-    frontMatter: {
-      sidebar_label: sidebarLabel,
-      sidebar_custom_props: customProps,
-    },
-    unlisted,
-  } = doc;
   return {
     type: 'link',
-    label: sidebarLabel ?? item.label ?? title,
     href: permalink,
-    className: item.className,
+    // Front Matter data takes precedence over sidebars.json
-    customProps: item.customProps ?? customProps,
+    label: frontMatter.sidebar_label ?? item.label ?? title,
+    className: frontMatter.sidebar_class_name ?? item.className,
+    customProps: frontMatter.sidebar_custom_props ?? item.customProps,
     docId: id,
     unlisted,
   };

packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/__snapshots__/postProcessor.test.ts.snap

@@ -76,6 +76,10 @@ exports[`postProcess transforms category without subitems 1`] = `
 {
   "sidebar": [
     {
+      "className": "category-className",
+      "customProps": {
+        "custom": true,
+      },
       "id": "doc ID",
       "label": "Category 2",
       "type": "doc",

packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/postProcessor.test.ts

@@ -31,6 +31,8 @@ describe('postProcess', () => {
               type: 'doc',
               id: 'doc ID',
             },
+            className: 'category-className',
+            customProps: {custom: true},
             items: [],
           },
         ],

packages/docusaurus-plugin-content-docs/src/sidebars/postProcessor.ts

@@ -77,10 +77,13 @@ function postProcessSidebarItem(
       ) {
         return null;
       }
+      const {label, className, customProps} = category;
       return {
         type: 'doc',
-        label: category.label,
         id: category.link.id,
+        label,
+        ...(className && {className}),
+        ...(customProps && {customProps}),
       };
     }
     // A non-collapsible category can't be collapsed!

website/_dogfooding/_docs tests/tests/sidebar-frontmatter/dir-with-unique-index/index.mdx

@@ -0,0 +1,14 @@
+---
+sidebar_label: 'Dir with unique index label'
+sidebar_class_name: 'dogfood_sidebar_class_name_test'
+sidebar_custom_props:
+  prop: custom
+  number: 1
+  boolean: true
+---
+
+# Single index.md in dir
+
+This doc has `sidebar_class_*` front matter
+
+Dogfood test for bug https://github.com/facebook/docusaurus/issues/11258

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

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